CSS-Hacks und -Animationen

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

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). 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.

Umgekehrt kannst du auch einspaltige Inhalte auf die Breite mehrspaltiger Inhalte ziehen:

dl-columnwidth

Mit folgender Klasse ist es möglich, Inhalte auf die volle sichtbare Breite (also randabfallend) zu ziehen:

dl-fullwidth

Mobile Hacks

Um auf geringen Auflösungen die Schriftgrößen responsiv der Bildschirmbreite anzupassen, empfehlen wir die folgenden relativen Schriftgrößen unter Design > Customizer > Eigenes CSS einzufügen:

@media (max-width: 756px){
   .site-content {font-size: 16px;}
   h1 {font-size: 8vw;}
   h2 {font-size: 6vw;}
   h3 {font-size: 4vw;}	
   h4 {font-size: 2vw;}	
}

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

Mit den folgenden Klassen kannst du Elemente auf mobilen Endgeräten 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

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

Die Klasse dl-invisible kann durch eine oder mehrere der folgenden vordefinierten Animationen oder auch durch eigene Animationen ergänzt werden:

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.

dl-invisible dl-moveup dl-opacity

Beispiel für ein beim Scrolling hochfahrendes Element, das von 50% Opazität eingeblendet wird.

Reichen dir die integrierten Animationen unseres Themes nicht, kannst du auch das WordPress Plugin Blocks Animation installieren, mit dem die Bandbreite an Effekten deutlich vergrößert wird.