Standard Container Inhalt%

Dieser Container hat Begrenzungen von „Boxed“, 94% und 96%

Abstände nach oben sind 80, 60, 40 Px

Lücken sind 20 – 10 – 10

Layout

H1 Wir begrüßen Sie in unserer allgemein-medizinischen Praxis im Zentrum von Musterstadt. Bei uns stehen neben der

H2 Wir begrüßen Sie in unserer allgemein-medizinischen Praxis im Zentrum von Musterstadt. Bei uns stehen neben der

H3 Wir begrüßen Sie in unserer allgemein-medizinischen Praxis im Zentrum von Musterstadt. Bei uns stehen neben der

H4 Wir begrüßen Sie in unserer allgemein-medizinischen Praxis im Zentrum von Musterstadt. Bei uns stehen neben der

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. 

Inhaltscontainer für neue Seite

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. 

H2 Gib hier deine Überschrift ein 123456789

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. 

H3 Gib hier deine Überschrift ein

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.

H4 Gib hier deine Überschrift ein

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.

H5 Gib hier deine Überschrift ein

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

H6 Gib hier deine Überschrift ein
  • Klasse „dxeliste“
  • Lorem ipsum
  • dolor sit amet,
  • consectetur
  • adipiscing elit.
  • Ut elit tellus

Sprechzeiten

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

Image Box von Ekit

/* 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 */
}

Klasse "bordercol" Radius 25pixel

This is the heading

Der Button lässt sich individuell über Stil / description und Padding nach unten schieben

This is the heading

Click edit to change this text. Lorem ipsum dolor sit amet, cctetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is the heading

Click edit to change this text. Lorem ipsum dolor

Box =Klasse dxeimgbox

Der Button lässt sich individuell über Stil / description und Padding nach unten schieben

Box =Klasse Dxeimgbox

Click edit to change this text. Lorem ipsum dolor sit amet, cctetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Box =Klasse 3xeimgbox

Click edit to change this text. Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Gib hier deine Überschrift ein

Formatierung bzgl. Spaltenanzahl  je nach Anzahl der Container über die Breite in % der einzelnen Container.

Gib hier deine Überschrift ein

3-Spalten = 32%, 4 Spalten = 23%, 2 Spalten 48% 

Gib hier deine Überschrift ein

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Gib hier deine Überschrift ein

Formatierung bzgl. Spaltenanzahl  je nach Anzahl der Container über die Breite in % der einzelnen Container. 3-Spalten = 31%, 4 Spalten = 

Gib hier deine Überschrift ein

Formatierung bzgl. Spaltenanzahl  je nach Anzahl der Container über die Breite in % der einzelnen Container. 3-Spalten = 31%, 4 Spalten = 

Gib hier deine Überschrift ein

Formatierung bzgl. Spaltenanzahl  je nach Anzahl der Container über die Breite in % der einzelnen Container. 3-Spalten = 31%, 4 Spalten = 

Gib hier deine Überschrift ein

Formatierung bzgl. Spaltenanzahl  je nach Anzahl der Container über die Breite in % der einzelnen Container. 3-Spalten = 31%, 4 Spalten = 

Dies ist die Überschrift

Padding und Text links über CSS /*bilder Box*/ .elementor-image-box-description {padding:5px;text-align:left;}

Dies ist die Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Dies ist die Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Dies ist die Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Dies ist die Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Dies ist die Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Dies ist die Überschrift

mit Button

Dies ist die Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.mit Button

Dies ist die Überschrift

Lorem ipsum dolor sit ametipsum dolor sit ametipsum dolor sit amet

FAQ

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

Readmore / Mehrlesen - weniger

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>

2 Spalter

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.

Responsiv CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

CSS

/* Buttons Kontaktseite links*/
.elementor-button-text {text-align:left}
 
/* Cookie Richtlinie */
#cmplz-document p {font-size:18px!important;}
 
 
/* Header für PC */
@media (min-width: 1040px) {.menuleiste {height:75px}
}
 
.content {margin-top:76px}
@media (max-width: 767px) {.content {margin-top:67px}
 
}
/* Container mit Radius */
.bordercol {border-radius:25px}
    
@media (min-width: 768px) {
.dxeimgbox .elementskit-info-image-box {
min-height: 440px!important; }
}
 
.dxeimgbox .image-box-img-center {height:200px; object-fit:cover;}
/* 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;
 
}
 
/* ALLE! Image Boxen Caret/Pfeil rechts Abstand*/
.elementskit-btn svg {fill:white!important; margin-left:8px;}
 
 
/*Akkordeon Teamseite*/
.e-n-accordion-item-title {background: var( –e-global-color-primary );width:300px}
.e-n-accordion-item-title-icon .e-closed
{margin-top:-10px}
 
 
 
/*bilder Box*/
.elementor-image-box-description {padding:5px;text-align:left;}
 
/*Icon Box*/
 
/*H Abstaende*/
h2, h3, h4 {margin:5px 0!important;}
 
 
/*popup button*/
.pum-close  {width:40px!important;height:40px!important;font-size:30px!important;}
 
 
 
 
/*Klasse Liste */
.dxeliste li {margin:3px 0 0 -15px;}
#acwp-toolbar-btn-wrap {margin-top:80px!important;}
 
@media (max-width: 600px) {
.bboxleft .elementor-image-box-img {
float: left;
}
 
.elementor-icon-box-content {
text-align: left;
 
}
}
 
/*Header sticky */
#header
{position:fixed!important;
top:0;
width: 100%;}
 
 
/*HAMBURGER*/
.elementskit-menu-hamburger-icon {padding-bottom:2px;margin-bottom:7px!important;}
 
 
.elementskit-menu-toggler{padding:10px 5px 2px 5px!important}
 
/*Menu*/
a.ekit-menu-nav-link {font-size:18px!important
}
.elementskit-submenu-indicator {border:none!important;}
 
.elementskit-submenu-panel {border-radius: 20px !important;}
 
/*mobile fix */
html,
body{
width:100%;
overflow-x:hidden;
}

Anpassungen