CSS-Klassen

Hintergrundfarben

.bg-primary (Hintergrundfarbe pink)
.bg-bright (Hintergrundfarbe hellgrau)
.bg-black (Hintergrundfarbe schwarz)
.bg-white (Hintergrundfarbe weiss, Schriftfarbe pink)

Überschriften oder Listen

.checklist (fügt ein Checklist-Icon vorne ans Element heran)
.split-list (macht eine Aufzählung 2-spaltig)

Spalte verkleinern

.row–slim (Spalte klein machen)
.row–slimmer (Spalte kleiner machen)

Animation

RockerPager-Elemente animieren

Jedes RocketPager-Element kann neu animiert werden. Die Einstellung für die Animation kann man wie folgt vornehmen:

Beispiel für das Hinzufügen einer Animation bei einem RocketPager Element

Basis-Wordpress-Elemente animieren

Des weiteren können normale Basis-Elemente von WordPress werden, indem man unter dem Reiter „Erweitert – Zusätzliche CSS-Klasse(n)“ die Klasse „wow animate__animated + (Name der Animation)“ hinzufügt. Hier einige Beispiele:

wow animate__animated animate__fadeInUp
wow animate__animated animate__bounceInDown
wow animate__animated animate__zoomIn

Alle Animation-Klassen findest du auch unter: https://animate.style/

Beispiel für das Hinzufügen einer Animation bei einem Basic-Wordpress-Element

Element on hover animieren

Ein Element kann auch on hover animiert werden. Siehe folgendes Beispiel:

h4.animated-title:hover {
    -webkit-animation: bounce 1s;
    animation: bounce 1s;
}

Ich bin ein animierter Titel (hover)

Abstände nach aussen entfernen

Nach .no-margin kann noch die Seite angeben werden mit der Variabel t = oben, b = unten, l = link, r = rechts

.no-margin (Abstand aussen entfernen)
.no-margin-seite

Beispiel: .no-margin-tb (oben und unten) oder .no-margin-lr (links und rechts)

Abstände nach aussen hinzufügen

Variabel Seite: t = oben, b = unten, l = link, r = rechts
Variabel Grösse des Abstandes: small, medium, large

.margin (Abstand innen hinzufügen)
.margin-variabel-seite

Beispiel: .margin-small-tb (kleiner Abstand oben und unten hinzufügen) oder .margin-large-lr (grosser Abstand links und rechts hinzufügen)

Abstände nach innen entfernen

Nach .no-padding kann noch die Seite angeben werden mit der Variabel t = oben, b = unten, l = link, r = rechts

.no-padding (Abstand innen entfernen)
.no-padding-seite

Beispiel: .no-padding-tb (oben und unten) oder .no-padding-lr (links und rechts)

Abstände nach innen hinzufügen

Variabel Seite: t = oben, b = unten, l = link, r = rechts
Variabel Grösse des Abstandes: small, medium, large

.padding (Abstand innen hinzufügen)
.padding-variabel-seite

Beispiel: .padding-small-tb (kleiner Abstand oben und unten hinzufügen) oder .padding-large-lr (grosser Abstand links und rechts hinzufügen)

Ich bin die Überschrift 1