CSS-Hacks und -Animationen

Mit diesen Klassen kannst du noch mehr aus deiner Webseide herausholen. Baue sie in deinem Child-Theme oder direkt in deinen Inhalten ein, um deine Seite bspw. zu animieren.

Header

Die folgende Header-Klasse wendest du ausschließlich im CSS an: Entweder in deinem Child-Theme oder unter Design > Customizer > Eigenes CSS. Hiermit kannst du den Header beim Scrollen ab 30px beeinflussen.

dl-scrolling

Inhalte

Die nachfolgenden Elemente werden über den Gutenberg-Editor in den erweiterten Block-Einstellungen gesteuert: Dazu fügst du nach der Auswahl eines Blocks den entsprechenden Code im Eingabefeld „Zusätzliche CSS-Klasse“ ein.

Spalten

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). Diese Klasse wurde bei den mehrspaltigen Inhalten zu den Animationen angewandt.

dl-singlewidth

Um eine Reihe mit Spalten zu selektieren, klicke links neben die Zeile und scrollst dann in der rechten Spalte bei den Block-Tabs nach unten bis zum Erweitert-Bereich.

Mit der folgenden Angabe lassen sich Buttons auf die volle Breite einer Spalte strecken, wie zum Beispiel bei den Konzeptspalten.

dl-fullwidthbutton

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

Mobil

Hiermit kannst du Elemente auf mobilen Endgeräten oder auf Desktop-Geräten ausblenden.

dl-nomobile
dl-nodesktop

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

Mit folgendem Shortcode kannst du Gravity Forms Formulare innerhalb des Contents positionieren. Bitte das Sternchen nach der eckigen Klammer entfernen und die ID ersetzen.

[*gravityform id=1 title=false description=false ajax=true]

Animationen

Mit der Klasse .dl-invisible lassen sich Animationen auslösen, die von unten durch Scrollen in den Sichtbereich (Viewport) kommen. Die Klasse .dl-insivible wechselt dann automatisch in .dl-visible, wenn Nutzer in den sichtbaren Bereich scrollen. Wir haben sie mit einer Dauer von 1,5s definiert und mit einem eas-in-out-Timing versehen (langsam beginnend und endend). Folgende Animationen haben wir schon für dich vorbereitet:

Grundzustand

dl-invisible

Animation

dl-visible

Der Grundzustand sollte vor den nachfolgenden oder eigenen stehen, siehe Screenshot bei den Inhalten.

dl-moveup

Element fährt um 100px nach oben.

dl-opacity

Element blendet von 50% Opazität ein.

dl-grayscale

Element (Bild) entfernt 100%igen Graufilter. Beispiel: Konzepte