Beim Webdesign mit dem Kadence Theme und Kadence Blocks kann es bei der Darstellung zu unterschiedlichen Höhen bestimmter Elemente kommen. In diesem Artikel findet man die Lösungen.
Wenn man mit dem Kadence Theme und Kadence Blocks arbeitet, können Info Box, Row Layout Block, sowie Archiv Seiten und Beiträge, kann es bei unterschiedlichem Inhalt vorkommen, dass sich nebeneinander befindende Container, in verschiedene Höhen angezeigt werden.
In vielen Fällen wird dadurch das Design zerstört und daher möchte ich hier mal ein paar Codeschnipsel mit euch teilen, mit denen man verschiedene Blöcke und Container auf die selbe Höhe bekommt.
Custom CSS für folgende Blöcke & Layouts:
Info Box Container auf gleiche Höhe bringen
Platziert man mehrere Kadence Info Boxes nebeneinander, z.B. in einem Row Layout, kann es vorkommen, dass sie unterschiedlich hoch angezeigt werden.
Je nach dem, wieviel Inhalt einer Info Box hinzugefügt wird, richtet sie sich in der Höhe aus. Somit hat eine Info Box mit viel Inhalt einen größeren Container, als eine Info Box mit nur wenig Inhalt.
Diese unterschiedliche Ausrichtung in der Höhe, kann einem schon mal ordentlich das Design zerhauen… Wie gut, dass es hierfür eine Lösung gibt:
Sofern sich die Info Boxen in einem Spaltenlayout mit mehreren Spalten befinden, muss die Innere Spaltenhöhe zunächst auf 100 % gesetzt werden.
Achtung! Seit Kadence Blocks 3.2.42 geht’s auch ohne Code
Mit der Version 3.2.42 von Kadence Blocks, wurde das Plugin mit der Funktion erweitert, die Höhe der Info Box auf auf 100% setzen zu können. Der Button richtet sich daraufhin automatisch nach unten aus.
Alternativ kann folgendes CSS genutzt werden:
Codeschnipsel
.kt-inside-inner-col {
flex-grow: 1
}
.wp-block-kadence-infobox {
height: 100%;
display: flex;
flex-direction: column;
}
.kt-blocks-info-box-link-wrap {
height: 100%;
}Info Box Learn More Button nach unten ausrichten
.kt-blocks-info-box-learnmore {
position: absolute;
bottom: 1em;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.kt-blocks-info-box-link-wrap {
padding-bottom: 92px !important;
}Wo wird der Code für die Info Boxeingefügt?
Sofern die Anpassungen für die gesamte Website gelten sollen, müsste das CSS entweder im Customizer unter Zusätzliches CSS, oder direkt in der style.css Datei des Child Themes eingefügt werden.
Wenn nur die Info Box Blöcke der aktuellen Seite einheitlich hoch dargestellt werden sollen, kann das CSS in dem Row Layout Block, oder dem Section Block eingefügt werden, der die Info Boxen beherbergt. Ein Anleitung zu diesem Vorgang, findest du weiter unten in diesem Artikel.
Ähnliche Beiträge – Container gleich hoch machen
Um allen drei Containern die gleiche Höhe zu verpassen, unabhängig von der Länge des Inhalts, wird nur ein klein wenig CSS benötigt.
Codeschnipsel
.carousel-item > article {
height: 100%
}Wo wird der Code eingefügt?
Da das CSS auf der gesamten Seite ausgeführt werden soll, kann er entweder im Customizer unter Zusätzliches CSS, oder direkt in der style.css Datei des Child Themes eingefügt werden.
Beiträge Loop Block – Container auf gleiche Höhe bringen
Wenn man den Post Loop Block verwendet, um bestimmte Beiträge anzuzeigen, variieren Die einzelnen Container in der Höhe, abhängig davon, wieviel Platz der Titel und die Mata-Angaben einnehmen.
Damit alle Elemente in einheitlicher Höhe angezeigt werden, kann man folgenden Codeschnipsel verwenden.
Codeschnipsel
.loop-entry .entry-content-wrap {
padding: 20px 15px 30px 15px;
}Wo wird der Code eingefügt?
Da das CSS auf der gesamten Seite ausgeführt werden soll, kann er entweder im Customizer unter Zusätzliches CSS, oder direkt in der style.css Datei des Child Themes eingefügt werden.
Beiträge Archiv Layout – Container gleich hoch machen
Codeschnipsel
#archive-container article.entry {
display: flex;
flex-direction: column;
}
#archive-container article.entry .entry-content-wrap {
height: 100%;
display: flex;
flex-direction: column;
}
#archive-container article.entry .entry-content-wrap .entry-footer {
margin-top: auto;
}Spaltenlayout Block – Einzelne Abschnitte auf gleiche Höhe setzen
Wenn die einzelnen Abschnitte (Columns) im Spaltenlayout (Row Layout) mit unterschiedlichem Inhalt gefüllt werden, z.B. Mehr Text in Abschnitt A, als in Abschnitt B oder C, wird dadurch das gesamte Design beeinflusst.
Die Abschnitte richten sich je Nach Inhalt unterschiedlich hoch aus. Besonders wenn sich unter dem Inhalt ein Button befindet, erhält man ein krummes und schiefes Design.
Zum einen sind die Container unten nicht auf gleicher Höhe und dann richten sich die Buttons auch noch auf unterschiedliche Höhe aus… Für ein einheitliches Design ist folgendes zu tun:
Zunächst muss die Innere Spaltenhöhe auf 100 % gesetzt werden.
Row Layout -> Block Einstellungen -> Erweitert -> Innere Spaltenhöhe 100%
Nun sollten alle Abschnitte die selbe Höhe haben, unabhängig vom Inhalt.
Spaltenlayout – Erweiterter Button im Abschnitt unten ausrichten
Nun muss nur noch der Button des jeweiligen Abschnitts nach unten ausgerichtet werden, da er aktuell noch ein Stückt weit unter dem Text rumhängt…
Codeschnipsel
.wp-block-kadence-column .kt-inside-inner-col {
display: flex;
flex-direction: column;
flex: 1;
}
.wp-block-kadence-column .kt-inside-inner-col .wp-block-kadence-advancedbtn {
margin-top: auto;
}Wo soll der CSS Code eingefügt werden?
Genau genommen, können die CSS Codeschnipsel an drei verschiedenen Stellen eingefügt werden. Abhängig davon, wo der Code überall ausgeführt werden soll…
CSS im Customizer einfügen
Sofern der Code auf der gesamten Website ausgeführt werden soll, kann er im Customizer unter Zusätzliches CSS eingefügt werden.
CSS direkt im Kadence Block einfügen
Der Spaltenlayout Block und der Abschnitt-Block verfügen über die Option, eigenes CSS hinzufügen zu können. Das CSS-Markup wird in diesem Fall nur auf der aktuellen Seite ausgeführt.
Hierzu einfach den Block auswählen und dann rechts in den Block-Einstellungen das rechte Tab, Erweitert öffnen.
Öffnet man nun das Dropdown Eigenes CSS, findet man das Wort selector, gefolgt von zwei { geschweiften Klammern }.
Hinter dem selector befinden sich die geschweiften Klammern. Diese sind in den Codeschnipseln bereits enthalten und können daher überschrieben werden.
Das Wort selector bleibt in dem Feld und der Codeschnipsel wird direkt dahinter eingefügt.
Übrigens kann man es sich noch etwas leichter machen, indem man In Modal bearbeiten anklickt, damit sich zum Einfügen das übersichtlichere Modal-Popup öffnet.
Ergebnis:
Am Ende sollte das ganze so aussehen:
Nun muss die Seite oder der Beitrag nur noch aktualisiert werden.
CSS in den Page Scripts einfügen
Nutzer von Kadence Blocks Pro haben zusätzlich die Möglichkeit, die Kadence Block Controls zu öffnen, um dann unter Page Scripts auf < > Custom CSS und JS zu klicken.
Im Modal Popup, das sich dann öffnet, kann der Code nun ins Feld Post Specific CSS eingesetzt werden.
Jede Art von Code, den man in diesem Bereich einfügt, wird ausschließlich auf dieser Seite geladen.
