CSS-Hacks und -Animationen

Wir haben ein paar zusätzliche Codes vorgesehen, mit denen sich Projekte professionell individualisieren lassen.

Mit nachfolgenden Klassen kannst du Dimensionen und Animationen für deine Content-Blöcke steuern. Dazu klickst du auf das jeweilige Element, bis die sechs kleinen Punkte sichtbar sind und scrollst dann in der rechten Spalte nach unten bis zum Erweitert-Bereich.

Dimensionen

Mit folgender Angabe lassen sich mehrspaltige Inhalte auf die Breite einspaltiger Inhalte reduzieren/ vergrößern, sofern für diese eine andere Breite unter Design > Customizer > Allgemein definiert wurde (wenn die Breite für einspaltige Inhalte kleiner ist als die maximale Seitenbreite).

dl-singlewidth

Seitenbreite

dl-columnwidth

Innere Header- und Footer-Breite

dl-fullwidth

Mobile Hacks

Um auf geringen Auflösungen die Schriftgrößen responsiv der Bildschirmbreite anzupassen, empfehle ich dir in den Grundeinstellungen des Design-Customizers die Option „Automatisch optimierte Schriftgrößen bei mobiler Auflösung“ zu aktivieren.

Über die Row-Elemente des Kadence-Blocks lassen sich übrigens individuelle Abstände auf mobiler Auflösung definieren.

Mit den folgenden Klassen kannst du Elemente auf mobiler Auflösung komplett entfernen (die Inhalte werden dann also nicht geladen) oder auf Desktop-Geräten ausblenden:

dl-nomobile
dl-nodesktop

Es ist auch möglich nur die Hintergrundbilder mobil auszublenden.

dl-nomobilebackground

Sonstige Elemente

Listen

Markierst du eine Liste mit der folgenden Klasse, können entweder nur die Punkte ausgeblendet werden oder die Listenpunkte auf Desktop-Auflösung nebeneinander dargestellt werden („inline“). Beispiel: Schnellnavigation

dl-nolist
dl-listinline

Tabellen

Mit folgender Klasse lassen sich Tabellen kennzeichnen, bei denen die dritte Spalte (der am häufigsten genutzte Preis) mit einem Rahmen hervorgehoben wird. Beispiel: Preistabelle

dl-pricechart

Gravity Forms

Formularfelder lassen sich zwei- oder dreispaltig darstellen. Wir empfehlen übrigens in den Gravity Forms-Einstellungen das CSS zu deaktivieren.

dl-halfcolumn
dl-thirdcolumn

Animationen

Du kannst für jeden Content Block über den Reiter „Animations“ einen individuellen Einblende-Effekt definieren.

Severin Lucks

Ich bezeichne mich als Inbound-Marketing-Experte und SEO-Spezialist. Ich mag die Kombination von gutem Design, überzeugenden Texten (mit dem einen oder anderen psychologischen Trick) und langfristiger SEO-Strategie, um nachhaltig Besucher für unsere Kunden zu gewinnen und zu konvertieren.