Einstellungen Text
Hintergrund
Jedes Element des Themes kann mit einem eigenen Hintergrund versehen werden. Die Einstellung findet ihr sowohl bei Sektionen, Zeilen als auch den Modulen unter INHALT > HINTERGRUND.
Hinweis: Die Möglichkeiten, jedes Element mit einem Hintergrund zu versehen, diese dann auch noch durchscheinen zu lassen oder mit Effekten versehen zu können, ist äußerst praktisch, kann aber auch zu Irritationen führen, wenn eine Farbeinstellung augenscheinlich nicht übernommen wird. Der Grund liegt meist darin, dass ein anderes Element mit einem Hintergrund "über" dem angepassten Element liegt.
Zur Verdeutlichung: Bei dem Theme liegen 4 Ebenen übereinander, die jeweils individuell angepasst werden können.
Ebene 1: Seitenhintergrund (Einstellung über Divi > Designmodifikator/Theme Customizer > Allgemeine Einstellungen > Hintergrund)
Ebene 2: Sektionshintergrund (Einstellung über Sektion > Inhalt > Hintergrund)
Ebene 3: Zeilenhintergrund (Einstellung über Zeile > Inhalt > Hintergrund)
Ebene 4: Modulhintergrund (Einstellung über Modul > Inhalt > Hintergrund)
Für den Hintergrund kannst du eine Farbe, einen Farbverlauf, ein Bild (auch Gif) und ein Video wählen. Klicke dazu in dem Menü Hintergrund einfach auf das Pluszeichen (wenn du das Pluszeichen siehst, ist die übrigens derzeit ausgestellt).
Die Farbe stellst du über den Picker ein oder du gibst direkt den Farbcode ein.
Wie du im Bild oben siehst, füllt der Hintergrund die komplette Sektion, Zeile oder das vollständige Modul. Dies ist in der Regel auch gewünscht. Bei manchen Modulen kann dies aber seltsam aussehen, vor allem bei Modulen mit Text. Hier klebt dann der Inhalt offensichtlich am Rand. Um dies zu beheben erhöhe unter DESIGN > ZWISCHENRAUM den "Abstand" zum inneren Rand.
Auch der Farbverlauf kann frei definiert werden. Der erste Farbwähler definiert die obere Farbe, der untere Farbwähler die untere Farbe.
Über die Funktion "Verlaufstyp" kannst du zudem den Verlauf feinabstimmen: Linear oder radial. Die Verlaufsrichtung ist in Grad (deg) angegeben. Zudem kannst du die Start- und Endposition festlagen, also ab wann der Vollton zum Verlauf wird. Zuletzt kannst du den Verlauf auch über ein Bild legen. Nutze dazu die Positionierung "Above Background".
Im Feld Bild kannst du ein Bild als Hintergrund wählen. In der Standardeinstellung wird dies "ausfüllend" positioniert, d.h. das ganze Modul wird mit dem Bild gefüllt und was zu viel ist, wird abgeschnitten.
Natürlich kann die genaue Positionierung angepasst werden. Zunächst kannst du den Parallax-Effekt für das Hintergrundbild nutzen. Bei dem "echten Parallax" wird das Bild vergrößert, um den Effekt erzielen zu können. Bei dem "CSS-Parallax" wird das Bild auf Seitenbreite gesetzt und halt der Raum ausgenutzt, der ober- und unterhalb zur Verfügung steht. Hier lohnt es sich die verschiedenen Modi einmal auszutesten, was für die konkrete Anwendung am besten geeignet ist.
Die Hintergrundbild-Größe kann als Abdeckung (der gesamte Hintergrund ist abgedeckt), Passen (das Bild wird komplett gezeigt, es kann dadurch aber ein leerer Rand links/rechts entstehen) und tatsächliche Größe (das Bild wird 1:1 eingefügt) gewählt werden.
Stimmt die Größe, lohnt es sich, der Position zu optimieren. In der Regel ist "Zentriert" ein guter Wert. Aber da der Bildausschnitt je nach Auflösung variiert, kann man bestimmen, wo der Anker/Fokus des Bildes liegt und entsprechend die Ausrichtung von "Oben Links" bis "Unten Rechts" vornehmen.
Über die Funktion Wiederholung kann man den klassischen Kacheleffekt nutzen. Dies eignet sich vor allem für Strukturen und Muster, da man so nur ein kleines Bild laden muss, welches dann eine endlose Fläche erben kann.
Zu guter Letzt kann ich noch über Füllung den Ebeneneffekt auswählen, sprich, wie das Bild auf die darunter liegende Ebene durchwirken soll. Wer sich mit Photoshop auskennt, wird hier viele alte Bekannt sehen. Wer nicht, kann mit diesen Effekten einfach mal ein wenig experimentieren.
Über den Punkt Video lässt sich ein Video als Hintergrund nutzen. Dies funktioniert aber nur mit Videos, die ihr bei euch selbst hochgeladen habt. Ihr könnt also keine YouTube-Url nutzen. Die Empfehlung ist, ein MP4-Video und WEBM-Video als Fallback hochzuladen, denn nicht jeder Browser unterstützt MP4.
Für eine optimale Darstellung sollte zudem die Breite und Hohe des Videos fixiert werden. Zudem kann man mit der Funktion Video Stoppen das Abspielen des Videos automatisch anhalten, wenn ein anderer Player im Vordergrund der Seite gestartet wird.
Größe einstellen
Ein Modul kann in der Größe verändert werden. Der Standardwert liegt bei 100%, sprich bei der vollen Ausnutzung der Spalte. Wir können diesen Wert aber auch beliebig ändern und das Modul frei in einer Zeile positionieren. Gehe dazu in die Ansicht DESIGN > GRÖ?E EINSTELLEN
Über den Schieberegler kann nun die Breite des Moduls verändert werden. Der Inhalt passt sich automatisch proportional an. Die Ausrichtung ist im Standard links, sodass das Modul von der rechten Seite aus schrumpft.
Sobald du die richtige Größe gefunden hast, kannst du das Modul neu positionieren (links/zentriert/rechts) 
Mit einem Klick auf das "Mobile Icon" kannst du die Positionierung für die Desktop-, Tablet- und Smartphoneansicht abstimmen. 
In der Regel Wird für Tablet und Smartphone eine 100%-Ansicht genutzt, auch wenn die Desktopansicht eine andere Einteilung nutzt.. 
Zwischenraum
Zwischen jedem Modul kann ein zusätzlicher Zwischenraum festgelegt werden. Dieser kann in Pixel (px) oder Prozent (%) eingetragen werden. Die Standardeinstellung ist Pixel. Gehe dazu innerhalb des Moduls zur Ansicht DESIGN > ZWISCHENRAUM.
Man unterscheidet zwischen zwei Zwischenräumen. Dies ist einmal die "Begrenzung" (margin) und einmal der "Abstand" (padding).
Begrenzung
Die Begrenzung legt den "äußeren Abstand" fest, also den Abstand zum nächsten Seitenlement. In diesem Beispiel erhöhe ich die "Begrenzung Unten" um 100px. Damit rutscht das untere Element (der zweite Textblock) um 100 Pixel nach unten.
Abstand
Der Abstand ist der "innere Abstand" des Inhalts zum Rand des Moduls. Wenn du dir das obige Bild anschaust, dann siehst du, dass der Text direkt am Rand des Moduls klebt. Im Bild unten habe ich 30 Pixel abstand hinzugefügt. Damit rückt der Textblock um 30 Pixel nach innen (innerer Abstand).
Hinweis: Am besten justiert man Abstände im Visuellen Builder. In meinem Beispiel unten habe ich bei dem Abstand "Oben" nichts eingetragen. Dies liegt daran, dass eine Überschrift ohnehin einen erhöhten Abstand nach oben hat. Je nach Modul und Inhalt muss man also entscheiden, wo man einen Abstand setzt.
Rand
Eine besonders schöne Funktion ist die Einstellung "Rand". Hier kann ich den Rand des jeweiligen Moduls umfangreich bearbeiten und schöne Effekte erzielen. Gehe dazu in deinem Modul zu dem Punkt DESIGN > RAND.
In diesem Beispiel habe ich ein einfaches Textmodul mit einem weißen Hintergrund (INHALT > HINTERGRUND) und 30 Pixel inneren Abstand (DESIGN > ZWISCHENRAUM > ABSTAND). Diesem Modul möchte ich jetzt einen Rand hinzufügen.
Um die Auswirkungen der Einstellungen zu sehen, müssen wir als erstes unter UMRANDUNG die Pixel der Linie erhöhen. Sobald du den Regler bewegst, siehst du auch schon den Rand um das Modul entstehen.
Über den Punkt STYLES kannst du gezielt eine einzelne Seite verändern. Hier klicke ich auf "unten" und vergrößere dann die Linienstärke.
Nun kann man die Ecken abrunden. Standardmäßig wirkt sich jeder Wert auf alle vier Ecken aus. Möchte man dies ändern, muss man auf das blaue "Linksymbol" in der Mitte der Ansicht kllciken.
Sobald man mit dem Format des Randes zufrieden ist, kann man unter "Umrandungsfarbe" die Farbe des Randes anpassen. Wie immer kann man seinen Farbcode eintragen oder die Farbe mit dem Picker frei wählen.
Zu guter letzt kann man unter "Umrandungsart" verschiedene Rahmen auswählen. Hier lohnt es sich, einfach mal die verschiedenen Modi auszutesten.
Schatten (Box Shadow)
Ob Bild, Infobox oder Slider: Schatten verleihen jedem Modul mehr Tiefe. Dank der Designoption "Schatten" (Box Shadow" kann nun jeder mit wenigen Klicks diesen tollen Effekt seiner Seite hinzufügen. Gehe dazu in das gewünschte Modul und dort zu dem Punkt DESIGN > BOX SHADOW.
Ich empfehle mit den Standardeinstellungen zu starten. Unter dem Punkt BOX SHADOW findest du die gängigen "inneren" und "äußeren" Schatten, mit denen du eigentlich sofort starten kannst. Wen etwas "mehr" möchte, kann den Schatten nach seinen Vorstellungen anpassen.
Zunächst lässt sich die horizontale Position des Schattens verschieben.
Ebenso kann man die vertikale Position des Schattens verschieben.
Mit der Einstellung "Blur" wird die Unschärfe des Schatten-Randes angepasst.
Mit dem Regler "Spread" kann man den Schatten unabhängig vom Objekt skalieren.
Sobald dir die Grundeinstellungen gefallen, kannst du auch die Farbe des Schattens beliebig anpassen. Hier kannst du einen Farbcode eintragen oder eine beliebige Farbe mit dem Picker wählen.
Zu guter letzt kann ein Schatten nicht nur nach außen abstrahlen, sondern auch als innerer Effekt genutzt werden. Unter dem Punkt POSITION legst du das Verhalten des Schattens fest.
Filter
Eine sehr mächtige Modulfunktion ist der "Filter". Hier lassen sich vor allem Bilder weitreichend manipulieren, ganz gleich ob Farbe, Sättigung, Invertierung und vieles mehr. Aber mit den Filtern kann man auch bei anderen Modulen tolle Effekte erreichen. Hier sind der Fantasie keine Grenzen gesetzt. Du findest den Filter im Modul unter DESIGN > FILTER.
Mit Farbton kann man den Farbraum des gesamten Bildes verschieben. Hier habe ich den Farbton in Richtung Blau verschoben, was man an dem Tablet gut erkennen kann.
Über Sättigung kann man die Farbe aus dem Bild ziehen (schwarzweiss) oder ...
... oder die Farbe verstärken.
Der Regler "Brightness" regelt die Helligkeit im Bild.
Und der Regler "Kontrast" verstärkt zugleich die Tiefen als auch die Höhen.
Schöne Effekte lassen sich über das invertieren der Ansicht erzielen.
Oder man fügt mit "Sepia" einen historischen Touch seinem Modul hinzu.
Gerne nutze ich auch den Regler "Opacity". Dieser legt die Deckkraft des Bildes fest. Habe ich zum Beispiel eine Hintergrundgrafik in der Sektion und lege dann ein Bild in die Sektion, kann ich in den Moduleinstellungen des Bildes die Deckkraft des Bildes herunterregeln, sodass die Grafik aus der Sektion durchscheint. Klingt kompliziert? Ist es aber nicht. Einfach mal ein wenig herumexperimentieren ...
Außerdem kann man ein Modul "unscharf" maskieren. Dies geschieht über den Regler "Blur".
Und nun kommt der Clou zum Schluss: Wie in Photoshop kann ich jedem Modul einen Blendmode zuweisen. Dieser beeinflusst, wie das Modul auf das darunter liegende Element wirkt. Auch hier empfehle ich einfach einmal eine Sektion mit einem Bild oder einem Verlauf anzulegen und dann das Modul "Bild" einzufügen. Anschließend einfach einmal die verschiedenen Modi durchklicken Hier ergeben sich tolle, kreative Effekte!
Animation
Animationen machen eine Website lebendig. Sparsam eingesetzt können Sie aus einer einfachen Website ein Erlebnis machen. Das tolle ist, dass sich in diesem Theme nahezu alles animieren lässt. Du findest alle Einstellungen in deinem Modul unter DESIGN > ANIMATION.
Zunächst empfehle ich die verschiedenen Animationen in den Grundeinstellungen einmal auszuprobieren, als da wären:
Verblassen: Das Modul blendet langsam ein.
Folie: Das Modul schiebt sich in den Sichtbereich.
Bounce: Das Modul zoomt ein, ein wenig aus und dann wieder ein.
Zoom: Das Modul zoomt ein.
Drehen: Das Modul kippt horizontal in den Sichtbereich.
Fold: Das Modul kippt vertikal in den Sichtbereich.
Roll: Das Modul dreht sich in den Sichtbereich.
Jede Animation kann zudem feinjustiert werden (nicht alle Regler stehen bei jeder Animation zur Verfügung).
Animation Repeat: Legt fest, ob die Animation einmal durchläuft oder sich wiederholt.
Animation Curve: Legt fest, mit welchem Schwung die Animation startet/endet.
Animation Direction: Legt fest, von welcher Bildschirmseite die Animation startet.
Animation Duration: Legt fest, wie schnell/langsam die Animation abläuft..
Animation Delay: Legt fest, ob die Animation mit einer Verzögerung startet.
Animation Starting Opacity: Legt fest, mit welcher Deckkraft die Animation startet.
CSS
Der letzte Punkt ERWEITERT ist vor allem für Entwickler gedacht. Hier ist es möglich, dem Element eine eigene CSS ID und CLASS zuzuweisen. Zudem können einzelne Elemente direkt per CSS umgeschrieben werden.
Sichtbarkeit
Interessant für jedermann ist der Abschnitt SICHTBARKEIT. Hier kann pro Endgerät (Telefon, Tablet, Desktop) festgelegt werden, ob das jeweilig ausgewählte Element (Sektion, Zeile, Modul) deaktiviert werden soll.
