Dieser Container hat Begrenzungen von „Boxed“, 94% und 96%
Abstände nach oben sind 80, 60, 40 Px
Lücken sind 20 – 10 – 10
Primär: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Sekundär: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
„Text“ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
„Akzent“ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Als erster Ansprechpartner für Ihre gesundheitlichen Belange stehen wir Ihnen mit Kompetenz und Erfahrung zur Verfügung. Wir bieten Ihnen allgemeinmedizinische, hausärztliche und naturheilkundliche Leistungen auf höchstem Niveau. Dazu gehören auch Vorsorgeuntersuchungen, wie z.B. Check-up sowie Programme für chronisch Kranke.
123456789 Als erster Ansprechpartner für Ihre gesundheitlichen Belange stehen wir Ihnen mit Kompetenz und Erfahrung zur Verfügung. Wir bieten Ihnen allgemeinmedizinische, hausärztliche und naturheilkundliche Leistungen auf höchstem Niveau. Dazu gehören auch Vorsorgeuntersuchungen, wie z.B. Check-up sowie Programme für chronisch Kranke.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Montag
08:30 – 12:00 Uhr
13:00 – 15:00 Uhr
Dienstag
08:30 – 12:00 Uhr
13:00 – 15:00 Uhr
Mittwoch
08:30 – 12:00 Uhr
Donnerstag
08:30 – 12:00 Uhr
15:00 – 18:00 Uhr
Freitag
08:30 – 12:00 Uhr
nachVereinbarung
/* Höhe angleichen*/
/* Ekit Imageboxen Mindesthöhe nur für PCs und Tablets */
@media (min-width: 768px) {
.elementskit-info-image-box {
min-height: 410px!important; }
}
.image-box-img-center {height:170px;object-fit: cover;scale:none!important;}
/* Für kleinere Geräte (Handys) */
@media (max-width: 767px) {
.elementskit-info-image-box {
min-height: auto;
}
}
.elementskit-info-image-box {
display: flex!important;
flex-direction: column!important;
justify-content: space-between!important;
}
.ekit-image-box-body {
display: flex!important;
flex-direction: column!important;
flex-grow: 1!important; /* Ermöglicht, dass der Inhalt den verfügbaren Platz ausfüllt */
}
.elementskit-box-footer {
margin-top: auto!important; /* Drückt die Buttons an das untere Ende der Box */
}
.elementskit-info-image-box .elementskit-btn svg {margin-left:8px;}
/* Image Boxen Caret/Pfeil rechts Abstand*/
.elementskit-info-image-box .elementskit-btn i {margin-left:8px}
.container {
width: 1140px; /* Standardbreite für Desktop */
margin: 0 auto; /* Zentriert den Container */
}
@media (max-width: 1024px) {
/* Für Tablets (iPad) */
.container {
width: 94vw; /* 94% der Viewport-Breite */
}
}
@media (max-width: 768px) {
/* Für Handys */
.container {
width: 96vw; /* 96% der Viewport-Breite */
}
}
/* Mindesthöhe nur für PCs und Tablets */
@media (min-width: 768px) {
.dxeimgbox .elementskit-info-image-box {
min-height: 410px!important; }
}
.dxeimgbox .image-box-img-center {height:170px;object-fit: cover;scale:none!important;}
/* Für kleinere Geräte (Handys) */
@media (max-width: 767px) {
.ibk .elementskit-info-image-box {
min-height: auto;
}
}
.dxeimgbox .elementskit-info-image-box {
display: flex!important;
flex-direction: column!important;
justify-content: space-between!important;
}
.dxeimgbox .ekit-image-box-body {
display: flex!important;
flex-direction: column!important;
flex-grow: 1!important; /* Ermöglicht, dass der Inhalt den verfügbaren Platz ausfüllt */
}
.dxeimgbox .elementskit-box-footer {
margin-top: auto!important; /* Drückt die Buttons an das untere Ende der Box */
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Formatierung bzgl. Spaltenanzahl je nach Anzahl der Container über die Breite in % der einzelnen Container.
3-Spalten = 32%, 4 Spalten = 23%, 2 Spalten 48%
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Formatierung bzgl. Spaltenanzahl je nach Anzahl der Container über die Breite in % der einzelnen Container. 3-Spalten = 31%, 4 Spalten =
Formatierung bzgl. Spaltenanzahl je nach Anzahl der Container über die Breite in % der einzelnen Container. 3-Spalten = 31%, 4 Spalten =
Formatierung bzgl. Spaltenanzahl je nach Anzahl der Container über die Breite in % der einzelnen Container. 3-Spalten = 31%, 4 Spalten =
Formatierung bzgl. Spaltenanzahl je nach Anzahl der Container über die Breite in % der einzelnen Container. 3-Spalten = 31%, 4 Spalten =
Padding und Text links über CSS /*bilder Box*/ .elementor-image-box-description {padding:5px;text-align:left;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.mit Button
Lorem ipsum dolor sit ametipsum dolor sit ametipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Höhe des Icons sowie Hintergrund Kopfzeile (Breite) über CSS angepasst
Hier ist der Text, den du anzeigen möchtest.
<style>
.textBlock {
display: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.weiterlesenButton {border:none;padding:5px 10px!important;}
<script>
// Finde alle Elemente mit der Klasse „weiterlesenButton“
const weiterlesenButtons = document.querySelectorAll(„.weiterlesenButton“);
// Füge für jedes Button-Element einen Event-Listener hinzu
weiterlesenButtons.forEach(button => {
button.addEventListener(„click“, () => {
const textBlock = button.nextElementSibling;
if (textBlock.style.maxHeight === „0px“ || textBlock.style.maxHeight === „“) {
textBlock.style.display = „block“;
textBlock.style.maxHeight = textBlock.scrollHeight + „px“;
button.textContent = „Weniger anzeigen“;
} else {
textBlock.style.maxHeight = „0“;
textBlock.style.display = „none“;
button.textContent = „Weiterlesen“;
}
});
});
</script>
</style>
<button class=“weiterlesenButton“>Weiterlesen</button>
<div class=“textBlock“>
<p>Hier ist der Text, den du anzeigen möchtest.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
.container {
width: 1140px; /* Standardbreite für Desktop */
margin: 0 auto; /* Zentriert den Container */
}
@media (max-width: 1024px) {
/* Für Tablets (iPad) */
.container {
width: 94vw; /* 94% der Viewport-Breite */
}
}
@media (max-width: 768px) {
/* Für Handys */
.container {
width: 96vw; /* 96% der Viewport-Breite */
}
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Um dir ein optimales Erlebnis zu bieten, verwenden wir Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wenn du deine Zustimmung nicht erteilst oder zurückziehst, können bestimmte Merkmale und Funktionen beeinträchtigt werden.