Bei der Arbeit im bzw. mit dem Divi Builder tauchen früher oder später Fragen auf wie: Gibt es nicht eine Möglichkeit um XY zu machen? Und gibt es dafür nicht eine schnelle Abkürzung? Das geniale an Divi Theme und dem dazugehörigen Divi Builder ist, dass es für fast alles eine gelungene Lösung gibt. Nur sind diese coolen und zeitsparenden Funktionen manchmal etwas versteckt. Doch wer sie kennt, kann jede Menge Zeit sparen beim Erstellen bzw. Bearbeiten von Websites. In diesem ersten Teil werden 6 verstecke Funktionen vorgestellt. Weitere folgen in einem zweiten Teil.
Dies sind die ersten sechs Tipps zu verstecken Divi Builder Funktionen:
#1 – Standard-Farbpalette anpassen in den Divi Theme Options
Die Standard Farbpalette findet sich in den Theme Options von Divi. Hier lassen sich 8 Farben hinterlegen. Wenn also die Farbpalette für die Website erstellt ist – beispielsweise in Coolors – können die Farben in der Standard-Farbpalette hinterlegt werden.
So lassen sich die Farben einfügen: Divi > Theme Options > Color Pickers Default Palette. Hier auf einen der Farbkreise klicken (z.B. schwarz). Es öffnet sich der Farbmischer sowie ein Feld, in dem der gewünschte Hex Farbcode eingefügt werden kann.
Was bringt es die Divi Standard Farbpalette anzupassen?
Der grosse Vorteil liegt darin, dass die hinterlegten Farben bei der Arbeit im Divi Builder jeweils angezeigt werden und Sie sich das wiederholte, mühsame Einfügen der Hex-Farbcodes oder der RGB-Werte sparen.
Beispielsweise bei der Hinterlegung der Button-Farbe im Theme Customizer. Die hinterlegten Farben stehen auf jedem Element im Divi Builder zur Verfügung.
#2 – Default Divi Builder Einstellungen nach Wunsch anpassen
Es gibt etliche Einstellungen, die in den Default Builder Settings gemacht werden können. Nachfolgend werden vier Einstellungsmöglichkeiten vorgestellt, die für einen zügigen Workflow wichtig sind. Um die Builder Settings anzupassen, klicken Sie auf die drei Punkte ganz rechts im violetten Balken “The Divi Builder”.
#2.1. Die Default Divi Builder Ansicht bestimmen – Wireframe oder nicht?
Standardmässig ist die Wireframe-Ansicht als Default View Mode hinterlegt. Das bedeutet, dass wenn man eine Seite öffnet diese in der Wireframe-Ansicht dargestellt wird. Und wenn eine Seite gespeichert wird, dann fällt die Ansicht ebenfalls in die Wireframe-Ansicht zurück.
Wem es zu anstrengend ist immer wieder auf die Desktop-Ansicht (Tablet oder Mobile) zu wechseln, kann das unter “Builder Default View Mode” anpassen.
#2.2. Die angezeigten Optionen beim Erstellen einer neuen Seite festlegen
Beim Erstellen einer neuen Seite wird einem standardmässig eine Auswahl dargestellt:
Sprich man kann bei Null beginnen, eine Vorlage wählen oder eine bestehenden Seite kopieren. Persönlich finde ich die Auswahl sinnvoll. Doch manche ärgern sich darüber. Deshalb gibt es die Möglichkeit dies anzupassen unter “Page Creator Flow”.
#2.3. Darstellung von Elementen, die unsichtbar gemacht worden sind
In #6 – Elemente unsichtbar machen erfahren Sie, wie Sektion, Rows und Content-Elemente sichtbar machen lassen.
In den Builder Settings kann gesteuert werden, wie diese im Backend dargestellte werden: Falls gewünscht können diese ganz ausgeblendet werden oder damit sie nicht vergessen gehen mit einer Transparenz von 50%. Dazu den Schieberegler auf ein oder aus stellen.
#2.4. Automatische Platzhalter und Blindtexte
Bekanntlich gibt es unzählige Content-Elemente wie Texte und Bilder, die im Divi Builder ausgewählt werden können. In den Builder Settings kann definiert werden, ob beim Erstellen eines neuen Content-Elements Platzhalter-Inhalte eingesetzt werden sollen oder nicht. Dazu den Schieberegler auf ein oder aus stellen.
#3 – Der einfache Rechtsklick im Divi Builder
Egal, ob Sektionen, Rows oder Content-Elemente – bei einem Rechtsklick oder beim Anklicken der drei Punkte werden zahlreiche hilfreiche Funktionen sichtbar.
Der Rechtsklick ist insbesondere dann hilfreich und vor allem zeitsparend, wenn man nicht in der Wireframe-Ansicht arbeitet. Zwei der gebotenen Optionen sollen nachfolgend vorgestellt werden: “Lock” und “Copy Style”
#4 – Inhalte sperren und damit vor der Bearbeitung schützen
Haben Sie gewusst, dass sich in Divi Inhalte sperren lassen, um sie vor der Bearbeitung zu schützen? Das kann nicht nur für Kundenprojekte sinnvoll sein, sondern insbesondere auch dann, wenn mehrere Benutzer:innen eine Website bearbeiten.
Die Sperrung kann auf jeder Ebene erfolgen – also auf Sections, Rows und Inhaltselementen. Um eine Element zu sperren entweder Rechtsklick oder auf die drei Punkte klicken und “Lock” anwählen.
Die Elemente werden im Backend in der Wireframe-Ansicht nun rot dargestellt und in den anderen Ansichten wird ein rotes Schloss-Icon bei Hover angezeigt.
#5 Der ultimative Time Saver: Styles kopieren und einfügen
Die nächste Funktion spart richtig viel Zeit! Bestimmt kennen Sie die Situation: Es stehen beispielsweise 3 oder mehr Blurbs im Einsatz – untereinander, nebeneinander – das spielt keine Rolle. Sie alle sollen diesselbe Titelgrösse, Icongrösse, Ausrichtung, Hintergrund u.ä. haben. Alle einzeln anzupassen ist entsprechend aufwändig.
Doch zum Glück gibt es die Funktion “Copy Styles”. Das ist vor allem dann äusserst hilfreich, wenn die Inhalte bereits abgefüllt sind und es dann noch optische Anpassungen braucht. Diese Möglichkeit Styles zu kopieren, gibt es glücklicherweise auch wieder für alle drei Ebenen: Sections, Rows und Elemente.
Um Styles zu kopieren und einzufügen (copy – paste) einmal mehr Rechtsklick oder Klick auf die drei Punkte auf dem zu kopierenden Element. Im Beispiel soll das Aussehen eines Buttons kopiert werden (oben) und auf den Button (unten) angewendet werden.
Auf dem oberen Button “Copy Module Styles” anwählen und danach zum unteren Button wechseln. Hier dann “Paste Module Styles” anklicken. Das Aussehen des Buttons wird nun übertragen. Die Verlinkung und der Button Text bleiben bestehen.
#6 Ghost-Alarm: Inhalte unsichtbar machen
Weiter oben haben Sie bereits erfahren, wie man definiert, wie unsichtbar gemacht Elemente dargestellt werden sollen im Backend. Im Frontend – also auf der Website für die Besucher:innen – werden diese Elemente logischerweise nicht dargestellt. Sie sind ja eben unsichtbar.
Die Option Elemente unsichtbar zu machen kann in vielen Situationen hilfreich und zeitsparend sein. Die Funktion wird gerne für die Optimierung für Mobilgeräte verwendet – denn Divi bietet die Option zu definieren, auf welchen Geräten eine Element unsichtbar sein soll.
Dazu auf das Zahnrad-Icon klicken, den Advanced Tab wählen in den Setting und zur Option Visibility runterscrollen. Hier kann nun bestimmt werden, auf welchem Gerät ein Element, eine Row oder eine Sektion unsichtbar gemacht werden soll.
Fazit: Versteckte Divi Builder Funktion
Ich hoffe, es waren einige Funktionen dabei, die Sie bisher nicht kannten und die Ihnen künftig die Arbeit mit dem Divi Builder vereinfachen. Es wird schon bald einen zweiten Teil geben, in dem Sie noch mehr hilfreiche und zeitsparende Funktionen kennen lernen.
Gerne dürfen Sie auch in den Kommentaren schreiben, welche Funktion, Sich sich im Divi Builder wünschten. Vielleicht gibt es diese bereits und ich kann diese in den zweiten Teil vorstellen.