Wenn Sie die Art und Weise optimieren, wie Sie Blog-Posts auf Ihrem erstellen Website, besteht die Möglichkeit, dass Sie irgendwo in Ihrem Artikel einen attraktiven CTA einfügen möchten. Mit der neuen Gutenberg-Layoutblock-Integration von Divi können Sie jetzt ganz einfach überall in Ihrem Gutenberg-Blogbeitrag einen neuen von Divi erstellten Block hinzufügen. Dies ermöglicht es Ihnen, die zu behalten Inhalt gesamten Blogbeitrag in der Gutenberg-Umgebung erstellen und gleichzeitig einen benutzerdefinierten Divi-CTA mit den integrierten Optionen von Divi erstellen. Das Beste aus beiden Welten! In diesem Tutorial zeigen wir Ihnen, wie Sie Ihrem Gutenberg-Beitrag einen animierten Inline-Divi-CTA-Layoutblock hinzufügen. Wir werden auch die Divi CTA-Layoutblock-JSON-Datei kostenlos teilen!
Gehen wir.
Mögliches Ergebnis
Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.
Importieren des JSON-Layoutblocks
Laden Sie das Layout in die Divi-Bibliothek herunter
Um die JSON-Datei zu importieren, die Sie oben herunterladen konnten, gehen Sie zu Ihrer Divi-Bibliothek im Backend Ihres WordPress-Dashboards und klicken Sie auf "Importieren und Exportieren".
Wählen Sie dann die JSON-Datei in Ihrem Download-Ordner aus und klicken Sie auf "Divi Builder-Layouts importieren".
Füge einen neuen Divi Block in Gutenberg hinzu
Sobald Ihr Layout importiert wurde, können Sie auf Ihre Gutenberg-Nachricht zugreifen und einen neuen Divi-Layoutblock hinzufügen.
Importieren Sie eine JSON-Datei aus gespeicherten Präsentationen
Klicken Sie dann auf "Aus Bibliothek laden", gehen Sie zu "Ihre gespeicherten Layouts" und wählen Sie das Layout aus, um den Divi CTA-Layoutblock in Ihren Blog-Beitrag zu importieren. Das ist es!
Beginnen wir mit der Neuerstellung!
Verwenden Sie die Veröffentlichungsvorlage für das dritte Themenpaket
Verwenden Sie das Third Theme Builder Pack
Es ist Zeit, von Grund auf neu zu erstellen! Erstens entspricht das Design, das wir neu erstellen, dem dritten Themenerstellungspaket, das im Divi-Blog veröffentlicht wurde. Gehe zum Artikel und laden Sie die JSON-Dateien für dieses Theme-Erstellungspaket herunter.
Gehen Sie zu Divi Theme Builder
Nachdem Sie das dritte Theme-Erstellungspaket heruntergeladen haben, können Sie auf den Divi Theme Builder zugreifen.
Laden Sie die Publikationsvorlage herunter
Laden Sie die Post-Vorlage für das Theme Building Pack herunter, indem Sie auf das Symbol in der oberen rechten Ecke klicken.
Wählen Sie dann die Beitragsvorlage aus und klicken Sie auf "Divi Theme Builder-Vorlagen importieren". Stellen Sie sicher, dass Sie die Änderungen auch im Theme Builder speichern. Zu diesem Zeitpunkt haben wir allen unseren Posts die Blogpost-Vorlage aus dem Theme Building Pack zugewiesen.
Öffnen Sie eine vorhandene Gutenberg-Publikation oder erstellen Sie eine neue
Der nächste Schritt ist das Hinzufügen des Divi CTA-Layoutblocks zu unserem Gutenberg-Beitrag. Öffnen Sie dazu einen vorhandenen Artikel oder erstellen Sie einen neuen.
Fügen Sie online einen neuen Divi-Block hinzu
Sobald Sie sich in der Nachricht befinden, können Sie einen neuen Divi-Layoutblock hinzufügen.
Erstellen Sie ein neues Layout im Divi-Block
Dann haben Sie zwei Möglichkeiten. Wählen Sie die Option "Neues Layout erstellen".
Abschnittseinstellungen
Abstand
Sobald Sie sich im Divi-Layoutblock-Editor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und fügen Sie benutzerdefinierte Randwerte hinzu, um Platz um den Abschnittscontainer herum zu schaffen.
- Oberer Rand: 50px
- Unterer Rand: 50px
- Linker Rand: -10%
- Rechter Rand: -10%
Zeile 1 hinzufügen
Spaltenstruktur
Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:
Sizing
Öffnen Sie die Zeilenparameter, ohne weitere Module hinzuzufügen, und erhöhen Sie die Breite und die maximale Breite.
- Breite: 100%
- Maximale Breite: 100%
Fügen Sie der Spalte Trennzeichen Nr. 1 hinzu
Sichtbarkeit
Es ist Zeit, Module hinzuzufügen, beginnend mit einem Trennmodul. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" aktiviert ist.
- Trennzeichen anzeigen: Ja
Linie
Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Zeileneinstellungen wie folgt:
- Linienfarbe: # fc526e
- Linienstil: solide
- Linienposition: hoch
Sizing
Ändern Sie auch die Größenparameter.
- Teilergewicht: 3px
- Breite: 30%
- Ausrichtung des Moduls: rechts
- Höhe: 3px
Animation
Und ändern Sie die Animationseinstellungen entsprechend:
- Animationsstil: Folie
- Animationsrichtung: links
- Animationsdauer: 2000ms
- Animationsverzögerung: 500 ms
- Animationsintensität: 100%
- Deckkraft des Animationsstarts: 0%
Fügen Sie der Spalte den Teiler Nr. 2 hinzu
Sichtbarkeit
Fahren wir mit dem nächsten Trennmodul fort. Stellen Sie erneut sicher, dass die Option "Separator anzeigen" aktiviert ist.
- Trennzeichen anzeigen: Ja
Linie
Wechseln Sie dann zur Registerkarte Moduldesign und ändern Sie die Zeileneinstellungen wie folgt:
- Linienfarbe: # e1e3e8
- Linienstil: solide
- Linienposition: hoch
Sizing
Ändern Sie dann die Modulgrößenparameter.
- Teilergewicht: 3px
- Höhe: 3px
Abstand
Fügen Sie auch benutzerdefinierte Abstandswerte hinzu.
- Linker Rand: 10%
- Rechter Rand: -20%
Animation
Vervollständigen Sie die Moduleinstellungen, indem Sie die Animationseinstellungen wie folgt ändern:
- Animationsstil: Folie
- Animationsrichtung: links
- Animationsdauer: 2000ms
- Animationsverzögerung: 500 ms
- Animationsintensität: 100%
- Deckkraft des Animationsstarts: 100%
Sie können beliebig viele Trennzeichen hinzufügen, um Ihre Animation zu optimieren.
Fügen Sie eine Zeile 2 hinzu
Spaltenstruktur
Fügen Sie dem Abschnitt eine weitere Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:
Sizing
Öffnen Sie die Zeilenparameter und ändern Sie die Größenparameter wie folgt, ohne weitere Module hinzuzufügen:
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
- Breite: 70%
- Linienausrichtung: Mitte
Fügen Sie der Spalte das Textmodul Nr. 1 hinzu
Fügen Sie H2-Inhalte hinzu
Als nächstes fügen Sie der Zeilenspalte mit einen ersten Textbaustein hinzu Inhalt H2 Ihrer Wahl.
H2-Texteinstellungen
Wechseln Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen entsprechend:
- Textfarbe von Punkt 2: # fc526e
- Kopfzeile 2 Textgröße: 28px
Abstand
Fügen Sie dann benutzerdefinierte Füllwerte hinzu.
- Obere Polsterung: 50px
- Polsterung unten: 50px
- Linke Auffüllung: 50px
Grenze
Wir verwenden auch einen linken Rand.
- Breite des linken Randes: 2px
- Farbe des linken Randes: # fc526e
Animation
Vervollständigen Sie die Modulparameter, indem Sie eine personalisierte Animation hinzufügen.
- Animationsstil: Flip
- Animationsrichtung: Mitte
- Animationsverzögerung: 1500 ms
Fügen Sie der Spalte den Textbaustein # 2 hinzu
Inhalt hinzufügen
Fügen Sie direkt unter dem vorherigen einen weiteren Textbaustein hinzu mit Inhalt Ihrer Wahl.
Abstand
Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Füllwerte entsprechend:
- Obere Polsterung: 50px
- Polsterung unten: 50px
- Rechte Polsterung: 50px
Grenze
Fügen Sie dann einen oberen und rechten Rand hinzu.
- Oberer und rechter Rand: 2 Pixel
- Farbe des oberen und rechten Randes: # fc526e
Animation
Vervollständigen Sie die Moduleinstellungen, indem Sie die Animationseinstellungen wie folgt ändern:
- Animationsstil: Flip
- Animationsrichtung: Mitte
- Animationsverzögerung: 1700 ms
Fügen Sie der Spalte ein Schaltflächenmodul hinzu
Kopie hinzufügen
Das nächste und letzte Modul, das wir in dieser Zeile benötigen, ist ein Schaltflächenmodul. Fügen Sie eine Kopie Ihrer Wahl hinzu.
Tasteneinstellungen
Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Schaltflächeneinstellungen wie folgt:
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
- Schaltflächentextgröße: 13px
- Knopftextfarbe: #ffffff
- Farbverlauf 1: # ff5b84
- Farbverlauf 2: # f94857
- Verlaufstyp: linear
- Steigungsrichtung: 165deg
- Schaltflächenrandbreite: 0px
- Schaltflächenrandradius: 0px
- Tastenbuchstabenabstand: 1px
- Tastenschrift: Montserrat
- Schriftgröße der Schaltfläche: Halb fett
- Schaltflächenstil: Großbuchstaben
Abstand
Fügen Sie dann eine benutzerdefinierte obere und untere Polsterung hinzu.
- Obere Polsterung: 16px
- Polsterung unten: 16px
Animation
Vervollständigen Sie die Modulparameter, indem Sie die folgende Animation hinzufügen:
- Animationsstil: Flip
- Animationsverzögerung: 1900 ms
Klonen Sie Zeile 1 und platzieren Sie sie am unteren Rand des Abschnitts
Sobald Sie die erste und zweite Zeile fertiggestellt haben, können Sie die erste Zeile klonen und das Duplikat am unteren Rand des Abschnitts platzieren.
Ändern Sie die Reihenfolge der Trennzeichen
Ändern Sie die Plätze für das erste und das letzte Trennmodul.
Abschließende Gedanken
In diesem Artikel haben wir Ihnen gezeigt, wie Sie die Vorteile der neuen Gutenberg-Integration von Divi nutzen und Ihrem Gutenberg-Blogbeitrag einen animierten Inline-CTA-Pitch-Block hinzufügen können. Dies ist eine großartige Möglichkeit, Ihren Call-to-Action Ihrer Wahl hervorzuheben Besucher Lesen Sie den Inhalt Ihres Blogbeitrags.
