So verwenden Sie globale Voreinstellungen mit Divi-Layoutblöcken zur Optimierung des Blogpost-Designs

Das Erstellen von Inhalten für Ihren Blog ist schwierig genug, ohne sich um das Design kümmern zu müssen. Aus diesem Grund ist es für Ihre Website wichtig, dass die Designelemente leicht verfügbar (oder vorgefertigt) sind, damit Sie sich besser auf die Erstellung erstaunlicher Inhalte konzentrieren können. Sicher, ein traditionelles WordPress-Child-Theme kann damit umgehen, aber in den meisten Fällen bleiben Sie bei einem Design, das sich nicht leicht ändern lässt.

Mit Divi erhalten wir mehr Kontrolle über das Designerlebnis eines Blogbeitrags. Mit den globalen Voreinstellungen von Divi können Sie ein Site-weites Design (wie ein untergeordnetes Thema) für Elemente auf Ihrer gesamten Site erstellen, mit dem zusätzlichen Komfort, das Design mit wenigen Klicks nach Belieben zu optimieren. Wenn Sie es gewohnt sind, Inhalte im standardmäßigen WordPress-Block-Editor zu erstellen, können Sie die Leistungsfähigkeit des Divi-Layout-Blocks nutzen, um diese Global Preset-Elemente im Handumdrehen in den Post-Inhalt einzufügen. Auf diese Weise können Sie einem Blogbeitrag brandneue Designelemente hinzufügen, die zur Vorlage und zum Rest der Website passen.

In diesem Tutorial zeigen wir Ihnen, wie Sie globale Voreinstellungen mit Divi-Layout-Blöcken verwenden, um den Prozess der Gestaltung eines Blog-Posts zu rationalisieren. Dazu zeigen wir Ihnen, wie Sie mit Global Presets schnell und effizient neue Blogpost-Inhalte entwerfen. Dies wird dazu beitragen, ein Blogging-Erlebnis zu schaffen, das das allgemeine Branding Ihrer Website nicht beeinträchtigt.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Ein kurzer Überblick über globale Presets

Das Schöne an Divi ist, dass Sie die volle Kontrolle über das Design Ihrer Website haben, indem Sie eine Vielzahl von Designeinstellungen verwenden, mit denen Sie das Erscheinungsbild jedes Elements oder Moduls anpassen können.

Das neue Divi-Presets-System ermöglicht es Ihnen, ein benutzerdefiniertes Erscheinungsbild für ein Divi-Element (wie ein Schaltflächenmodul) zu entwerfen und als Preset zu speichern. Alle von Ihnen vorgenommenen Designänderungen werden in der Voreinstellung gespeichert. Wenn Sie Ihrer Seite ein neues Modul hinzufügen, können Sie Ihre gespeicherten Voreinstellungen durchsuchen und schnell anwenden.

Nachdem ein Preset angewendet wurde, wird das Standarddesign des Moduls durch das Preset gesteuert. Wenn Sie den Stil einer Vorgabe aktualisieren, werden alle Module, die diese Vorgabe verwenden, ebenfalls aktualisiert. Auf diese Weise können Sie das Design Ihrer gesamten Website mithilfe einer kleinen Sammlung gespeicherter Voreinstellungen steuern. Außerdem spart es beim Hinzufügen neuer Module zu Ihrer Seite jede Menge Zeit, da Sie nicht jedes neue Modul von Grund auf neu entwerfen müssen, sondern schnell ein Erscheinungsbild aus Ihrer Divi-Presets-Bibliothek auswählen können.

Globale Preset-Styleguides

Globale voreingestellte Styleguides (wie die, die wir in diesem Tutorial verwenden werden) können erstellt werden, um das Design von Elementen während der Gestaltung Ihrer Website zu beschleunigen. Diese Styleguides enthalten eine Sammlung von Modulen mit unterschiedlichen Voreinstellungen, die dem Design Ihrer Site entsprechen. Wenn die Voreinstellungen zu Beginn verfügbar sind, wird der Designprozess rationalisiert, da die lästige Aktualisierung der Designeinstellungen für jedes neue Modul entfällt. Wir haben sogar ein Styleguide-Framework für diejenigen, die ihre eigenen erstellen möchten.

Ein kurzer Überblick über Divi-Layout-Blöcke

Der Divi-Layout-Block ermöglicht es Benutzern, einem Blog-Post innerhalb des Gutenberg-Editors ein beliebiges Divi-Layout hinzuzufügen. Wir können in Gutenberg sogar einen Divi-Layout-Block in einen wiederverwendbaren Block umwandeln, genau wie jeden anderen WordPress-Block. Dies öffnet die Tür, um einige hilfreiche Divi-Layout-Designs in den normalen Ablauf des Schreibens eines Beitrags in Gutenberg zu integrieren.

Wie globale Voreinstellungen und Layoutblöcke zusammenarbeiten

Da eine globale Vorgabe „global“ ist, wirken sich die Stile dieser Vorgabe auf alle Instanzen der Vorgabe auf der gesamten Site aus. Das bedeutet, dass Sie beim Entwerfen eines Elements im Layoutblock-Editor globale Voreinstellungen verwenden können und diese Voreinstellungen auch entsprechend aktualisiert werden. Wenn Sie also mit dem Divi-Layout-Block einen CTA zu Ihrem Blog-Post-Inhalt hinzufügen möchten, können Sie den CTA erstellen, indem Sie Module mit globalen Voreinstellungen hinzufügen, genau wie bei einer normalen Seite oder einem normalen Beitrag. So können Sie schnell und effizient passende Designelemente in Ihren Beitrag einfügen.

Verwenden globaler Voreinstellungen mit Divi-Layoutblöcken zur Optimierung des Blogpost-Designs

Hochladen des Styleguides für globale Voreinstellungen

In diesem Tutorial erhalten wir einen schnellen Einstieg in die Erstellung globaler Vorgaben, indem wir das Styleguide-Layout für globale Vorgaben für das Webagentur-Layout verwenden. Nach dem Hochladen des Styleguides stehen uns einige globale Voreinstellungen zur Verfügung, die beim Hinzufügen von Designelementen zu einem Blog-Post mithilfe des Divi-Layout-Blocks verwendet werden können.

Um die Global Presets herunterzuladen, gehen Sie zum Blogbeitrag. Scrollen Sie nach unten zum Abschnitt mit dem Titel „Laden Sie den Global Presets Style Guide herunter“. Geben Sie dann Ihre E-Mail-Adresse ein und klicken Sie, um den Download zu erhalten.

Nachdem Sie die ZIP-Datei auf Ihren Computer heruntergeladen haben, entpacken Sie die Datei und gehen Sie zurück zum WordPress-Dashboard.

So importieren Sie die Styleguide-JSON-Datei in die Divi-Bibliothek…

1. Navigieren Sie zu Divi > Divi-Bibliothek.
2. Klicken Sie auf die Schaltfläche Importieren & Exportieren.
3. Wählen Sie unter dem Portabilitäts-Popup die Registerkarte Import aus.
4. Wählen Sie die JSON-Datei für den globalen Styleguide der Webagentur aus.
5. Stellen Sie sicher, dass Sie Voreinstellungen importieren auswählen.
6. Klicken Sie dann auf die Schaltfläche Importieren.

Jetzt sind all diese globalen Voreinstellungen im Divi Builder verfügbar.

Upload der Beitragsvorlage

Jetzt, da der Styleguide vorhanden ist, werden wir einen Sprung in das Design der Blog-Post-Vorlage machen, indem wir die Blog-Post-Vorlage der Webagentur importieren, die bereits zu den Style-Guide-Elementen passt.

Um die Vorlage herunterzuladen, gehen Sie zum Blogbeitrag, geben Sie Ihre E-Mail-Adresse ein und klicken Sie auf , um die Dateien herunterzuladen.

So importieren Sie die Beitragsvorlage…

1. Navigieren Sie zu Divi > Theme Builder.
2. Klicken Sie dann auf das Portabilitätssymbol.
3. Wählen Sie unter dem Portabilitätsmodal die Registerkarte Import aus.
4. Wählen Sie die heruntergeladene JSON-Datei für die Beitragsvorlage aus.
5. Klicken Sie dann auf die Schaltfläche Importieren.

Verwenden von Voreinstellungen zum Aktualisieren/Entwerfen der Beitragsvorlage

Sobald Sie die benutzerdefinierte Beitragsvorlage eingerichtet haben, klicken Sie auf , um die benutzerdefinierte Textvorlage zu bearbeiten. Dort können Sie auch das Design der Post-Vorlage sehen und Anpassungen mit den globalen Voreinstellungen vornehmen, die aus dem importierten Styleguide verfügbar sind. Wenn Sie Ihre eigene Post-Vorlage von Grund auf neu erstellen, können Sie die globalen Voreinstellungen verwenden, um das Design der Post-Vorlage mit den anderen Elementen auf der Website abzugleichen. Sie können beispielsweise die Voreinstellung „WALP – H1 – 1“ auf dem Beitragstitel wie folgt verwenden:

Oder Sie können das Blurb-Modul-Preset „WALP – Blurb 2“ auf dem Klappentext verwenden, der die dynamischen Autoreninformationen enthält.

Das Post-Content-Modul ist der Bereich, in dem Ihre Blog-Post-Inhalte auf der Seite generiert werden. Aus diesem Grund ist es wichtig, die Designeinstellungen des Post-Content-Moduls mit den anderen auf Ihrer Website verwendeten Textelementen abzugleichen.

Wenn Sie die Beitragsvorlage von Grund auf neu erstellen, können Sie Texteinstellungen aus verschiedenen Textmodulen über die Site kopieren und einfügen. Oder wenn Sie zuvor einen globalen voreingestellten Styleguide für Ihre Site erstellt haben, können Sie die Designelemente aus diesen Modulen in den Styleguide kopieren.

Sie können beispielsweise die Überschriftentextstile für die globale Vorgabe kopieren, die für alle Textstile in einem Textmodul erstellt wurde.

Fügen Sie dann diese Überschriftentextstile in das Beitragsinhaltsmodul für die Beitragsvorlage ein. Auf diese Weise können Sie sicherstellen, dass alle Überschriften, die für Ihren Post-Inhalt verwendet werden, dem Stil der Website entsprechen.

Wichtig ist hier, dass Sie eine Beitragsvorlage haben, die zum Stil Ihrer Website passt. Die Verwendung globaler Voreinstellungen kann diesen Prozess enorm unterstützen, wenn Sie die Vorlage von Grund auf neu entwerfen.

Verwenden globaler Voreinstellungen mit Divi-Layoutblöcken

Sobald die Vorlage entworfen wurde, können wir mit der Verwendung der globalen Voreinstellungen mit Divi-Layout-Blöcken beginnen, um zusätzliche Post-Inhaltselemente mit dem standardmäßigen WordPress-Blockeditor zu entwerfen.

Bearbeiten (oder erstellen) Sie dazu einen Blogbeitrag. Stellen Sie dann sicher, dass Sie über einige simulierte Inhalte verfügen (z. B. ein paar Überschriften und Absätze und ein vorgestelltes Bild).

Wenn Sie sich jetzt den Beitrag im Frontend ansehen, wird der Beitragsinhalt in der Beitragsvorlage angezeigt und der Inhalt (Überschriften, Haupttext usw.) erbt den Stil aus den Einstellungen des Beitragsinhaltsmoduls.

Das Post-Content-Modul übernimmt nur das Styling grundlegender Textinhalte. Wenn Sie Ihrem Beitrag mit dem standardmäßigen WordPress-Block-Editor zusätzliche Elemente hinzufügen möchten, muss das Styling dieser Elemente über benutzerdefiniertes CSS in einem untergeordneten Thema geändert werden. Es sei denn, Sie verwenden Divi-Layout-Blöcke.

Um zusätzlichen Inhalt hinzuzufügen, der zu Ihrer Beitragsvorlage und Website passen soll, können Sie Divi-Layout-Blöcke verwenden. Auf diese Weise können Sie beliebige Inhalte hinzufügen und mit dem Divi Builder gestalten. Und da wir auch globale Voreinstellungen verwenden können, können wir das Design unserer Blogpost-Inhalte im Handumdrehen weiter optimieren.

Design Nr. 1: Erstellen eines Blog-CTAs mit globalen Voreinstellungen und einem Divi-Layout-Block

In diesem ersten Beispiel erstellen wir einen benutzerdefinierten Blog-CTA, der der Beitragsvorlage und dem Websitedesign entspricht.

Fügen Sie dazu dem Beitragsinhalt einen Divi-Layout-Block hinzu.

Klicken Sie dann auf Neues Layout erstellen.

Dies öffnet den Layoutblock-Editor, der im Grunde wie gewohnt der Divi Builder ist. Geben Sie dem Standardabschnitt eine einspaltige Zeile.

Öffnen Sie Ihr Global Presets-Layout in einem anderen Browser und stellen Sie sicher, dass Sie auf das Frontend klicken, um es aufzubauen, damit Sie die Elemente sehen können. Auf diese Weise haben Sie in einem Browser den Layout-Editor und im anderen den Styleguide geöffnet.

Wenn Sie keinen Styleguide haben, können Sie ein Layout der Seite auf Ihrer Website öffnen, sodass Sie auf alle Designelemente zugreifen können, die Sie übernehmen möchten.

Hintergrund aus Styleguide kopieren

Für diesen CTA verwenden wir den königsblauen Hintergrund aus dem Styleguide. Öffnen Sie die Einstellungen des Textbausteins und kopieren Sie den Hintergrund.

Öffnen Sie dann die Einstellungen des Abschnitts im Layout-Editor und fügen Sie den Hintergrund in den Abschnitt ein.

Textmodul mit H3-Voreinstellung hinzufügen

Als nächstes fügen Sie der Zeile einen neuen Textbaustein hinzu.

Öffnen Sie dann die Einstellungen und aktualisieren Sie Folgendes:

Fügen Sie eine H3-Überschrift für den CTA hinzu, indem Sie den folgenden HTML-Code in den Textkörper einfügen:

<h3>Learn How One Client Increased Revenue by 500%</h3>

Öffnen Sie das Dropdown-Menü Global Presents und wählen Sie die Voreinstellung für die H3-Überschrift (WALP – H3 – 1)

Design aktualisieren

Aktualisieren Sie dann die Textfarbe auf Weiß und zentrieren Sie die Ausrichtung.

Schaltfläche mit globaler Voreinstellung hinzufügen

Fügen Sie unter dem Textmodul eine neue Schaltfläche hinzu.

Aktualisieren Sie dann den Schaltflächentext und wählen Sie eines der global voreingestellten Schaltflächendesigns aus. Für dieses Beispiel verwenden wir „WALP – Button 3“.

Änderungen speichern

Klicken Sie anschließend auf Speichern und beenden.

Jetzt können Sie das Element im WordPress-Blockeditor anzeigen.

Design #2: Erstellen eines Blog-Zitats mit globalen Voreinstellungen und einem Divi-Layout-Block

Für dieses nächste Gestaltungselement werden wir dem Blogbeitrag ein Zitat hinzufügen.

Divi-Layout-Block hinzufügen

Fügen Sie zunächst den Divi-Layout-Block dort hinzu, wo das Angebot angezeigt werden soll.

Klicken Sie dann auf Neues Layout erstellen.

Hintergrund aus Styleguide kopieren und einfügen

Kopieren Sie den dunkelblauen Hintergrund aus dem Styleguide.

Fügen Sie es dann in den Standardbereich des Layout-Editors ein.

Zeile hinzufügen

Fügen Sie als Nächstes dem Abschnitt eine einspaltige Zeile hinzu.

Testimonial-Modul mit Voreinstellung hinzufügen

Fügen Sie dann der Spalte ein Testimonial-Modul hinzu. Wählen Sie dann das globale Preset „WALP – Testimonial 2“.

Dies gibt Ihnen einen guten Einstieg in die Gestaltung des Zitats für den Blogbeitrag.

Design aktualisieren

Passen Sie auf der Registerkarte Design die Designeinstellungen wie folgt an:

• Farbe des Zitatsymbols:
• Schriftgewicht des Körpers: Leicht
• Schriftstil: kursiv
• Ausrichtung des Textkörpers: links
• Textkörperfarbe: #ffffff
• Schriftart des Autors: Ubuntu
• Autor Textgröße: 16px

Neue globale Voreinstellung hinzufügen

Da wir wesentliche Änderungen an diesem Testimonial-Preset vorgenommen haben, ist es sinnvoll, an dieser Stelle ein neues zu erstellen, um es für zukünftige Post-Zitate zu verwenden.

Um einen neuen zu erstellen, klicken Sie auf die Schaltfläche „Neue Vorgabe aus aktuellen Stilen erstellen“. Geben Sie dann dem neuen Preset einen Namen („Blogpost-Zitat“) und speichern Sie es. Das globale Preset ist nun bereit für die zukünftige Verwendung.

Speichern Sie das Layout und Sie werden es im Beitragsinhalt sehen.

Design Nr. 1: Hinzufügen von Blurbs zu einem Blog-Post mit globalen Voreinstellungen und einem Divi-Layout-Block

Für dieses nächste Beispiel werden wir dem Beitrag ein paar Klappentexte hinzufügen.

Neuen Divi-Layout-Block hinzufügen

Fügen Sie einen weiteren Divi-Layout-Block hinzu und klicken Sie auf die Schaltfläche Neues Layout erstellen.

Fügen Sie im Layout-Editor dem Layout eine zweispaltige Zeile hinzu.

Blurb-Modul mit Voreinstellungen hinzufügen

Fügen Sie in der linken Spalte ein Klappenmodul hinzu.

Fügen Sie dem Klappentext ein neues Symbolbild hinzu. Öffnen Sie dann das Presets-Dropdown und wählen Sie das Klappen-Preset „WALP – Blurb 4“.

Zweites Klappentext hinzufügen

Kopieren Sie dann den Klappentext und fügen Sie ihn in Spalte 2 ein und aktualisieren Sie das Bild.

Speichern Sie das Layout und Sie werden es im Beitragsinhalt sehen.

Endergebnis

Öffnen Sie nun den Pfosten am Frontend, um das Endergebnis zu sehen.

Wiederverwendbare Blöcke mit globalen Voreinstellungen

Wenn Sie wiederverwendbare Blöcke mit Divi-Layoutblöcken nutzen möchten, ist es gut zu wissen, dass sie mit globalen Voreinstellungen funktionieren. Wenn Sie also den zuvor erstellten Blog-CTA als wiederverwendbaren Block speichern möchten, haben Sie einen praktischen Block, mit dem Sie beim Erstellen Ihrer Beiträge CTAs hinzufügen können. Und da der CTA eine Schaltfläche und einen Text mit einer globalen Vorgabe verwendet, aktualisiert die Aktualisierung der globalen Vorgabe für dieses Element auch das Element im wiederverwendbaren Block.

Abschließende Gedanken

Global Presets ist eines unserer leistungsstärksten Designtools in Divi. Sobald Sie sich die Zeit nehmen, den Modulen, die Sie auf der gesamten Site verwenden, globale Voreinstellungen hinzuzufügen, können Sie wirklich von einem optimierten Prozess zum Entwerfen von Blogpost-Vorlagen und -Inhalten mithilfe von Layoutblöcken profitieren.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!