Global Styles sind der Schlüssel zu einem einheitlichen und wartungsfreundlichen…
Global Styles sind der Schlüssel zu einem einheitlichen und wartungsfreundlichen Webdesign. Mit Kadence können wir den Header-Block genauso global stylen wie alle anderen Komponenten.
Alles, was wir dafür brauchen, sind die richtigen CSS-Selektoren – und ein klein wenig Finesse.
Global Styles für den Kadence Block Header im Customizer
In diesem Beispiel gestalten wir den Header-Container, den Dropdown-Menü-Container und die Menü-Item-Box. Ziel ist es, jedes dieser Elemente im Kadence-Customizer global steuern zu können – und das mit nur ein bis zwei Variablen.
CSS-Variablen für den Kadence Block Header einrichten – Video
CSS Selector für den Kadence Header Container
Zum Stylen des Header-Containers kannst du folgende CSS-Klasse nutzen:
.kadence-header-row-inner {
}CSS Selector für den Dropdown-Menu-Container
Für den Dropdown-Menu-Container oder Submenu-Container verwendest du diese CSS-Klassen:
.wp-block-kadence-navigation.navigation-desktop-orientation-horizontal .menu-item:not(.kb-nav-link-sub-click):hover>.sub-menu {
}CSS Selector für die Box der Submenu-Items
Die Submenu-Items bzw. Kadence-Navigationslinks befinden sich in einer Box, deren Border-Radius und Hintergrundfarbe angepasst werden können. Besonders sinnvoll ist es, diese Anpassungen global im Customizer vorzunehmen..
Dazu kannst du folgende CSS-Klassen verwenden:
.wp-block-kadence-navigation .sub-menu>.menu-item>.kb-link-wrap>.kb-nav-link-content {
}Diese Anpassungen lassen deine WordPress-Websites deutlich professioneller aussehen und machen sie zudem deutlich leichter zu pflegen.
