Springe zum Hauptinhalt

So fügen Sie Ihrem Gutenberg-Artikel einen animierten Block hinzu

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Wenn Sie die Art und Weise optimieren, in der Sie Beiträge auf Ihrer Website bloggen, möchten Sie wahrscheinlich irgendwo in Ihren Beitrag einen ansprechenden CTA aufnehmen. Mit der neuen Integration des Gutenberg-Layoutblocks von Divi können Sie jetzt ganz einfach einen neuen von Divi erstellten Block an einer beliebigen Stelle in Ihrem Gutenberg-Blogbeitrag hinzufügen. Auf diese Weise können Sie den Gesamtinhalt des Blogposts in der Gutenberg-Umgebung beibehalten und gleichzeitig mithilfe der integrierten Divi-Optionen einen personalisierten Divi-CTA erstellen. Das Beste aus beiden Welten! In diesem Tutorial zeigen wir Ihnen, wie Sie Ihrem Gutenberg-Beitrag einen animierten Online-Divi-CTA-Layoutblock hinzufügen. Wir werden auch die JSON-Datei des Divi CTA-Layoutblocks kostenlos freigeben!

Gehen wir.

Mögliches Ergebnis

Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.

Divi Animationspräsentation

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".

Divi Import

Wählen Sie dann die JSON-Datei in Ihrem Download-Ordner aus und klicken Sie auf "Divi Builder-Layouts importieren".

Importieren Sie json divi 1

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.

Fügen Sie ein Divi-Layout hinzu

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!

Laden Sie ein Divi-Layout

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.

Divi Thema WordPress Pack

Gehen Sie zu Divi Theme Builder

Nachdem Sie das dritte Theme-Erstellungspaket heruntergeladen haben, können Sie auf den Divi Theme Builder zugreifen.

Theme Builder Divi-Menü

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.

Portierbarkeit des Divi-Moduls

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.

Screenshot wordpress.go 2020.02.05 14 58 38

Ö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.

Erstellung der Publikation auf gutenberg

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.

Fügen Sie ein Divi-Layout hinzu

Erstellen Sie ein neues Layout im Divi-Block

Dann haben Sie zwei Möglichkeiten. Wählen Sie die Option "Neues Layout erstellen".

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Erstellen Sie ein neues Divi-Layout

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%
Konfigurieren Sie den Abschnittsabstand auf divi

Zeile 1 hinzufügen

Spaltenstruktur

Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Wählen Sie eine Divi-Spalte

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%
Konfigurieren Sie die Dimensionierung der Teillinien

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
Zeigen Sie ein Divi-Trennzeichen an

Linie

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Zeileneinstellungen wie folgt:

  • Linienfarbe: # fc526e
  • Linienstil: solide
  • Linienposition: hoch
Konfigurieren Sie den Divi-Separator-Stil

Sizing

Ändern Sie auch die Größenparameter.

  • Teilergewicht: 3px
  • Breite: 30%
  • Ausrichtung des Moduls: rechts
  • Höhe: 3px
Passen Sie Divider Divi an

Animation

Und ändern Sie die Animationseinstellungen entsprechend:

  • Animationsstil: Folie
  • Animationsrichtung: links
  • Animationsdauer: 2000ms
  • Animationsverzögerung: 500 ms
  • Animationsintensität: 100%
  • Deckkraft des Animationsstarts: 0%
Starten des Animations-Divi-Trennmoduls

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
Fügen Sie ein neues Divi-Trennzeichen hinzu

Linie

Wechseln Sie dann zur Registerkarte Moduldesign und ändern Sie die Zeileneinstellungen wie folgt:

  • Linienfarbe: # e1e3e8
  • Linienstil: solide
  • Linienposition: hoch
Neue Divi-Linie hinzufügen

Sizing

Ändern Sie dann die Modulgrößenparameter.

  • Teilergewicht: 3px
  • Höhe: 3px
Gewicht des Teilers Teiler

Abstand

Fügen Sie auch benutzerdefinierte Abstandswerte hinzu.

  • Linker Rand: 10%
  • Rechter Rand: -20%
Konfigurieren Sie den Abstand der Divi-Trennmodule

Animation

Vervollständigen Sie die Moduleinstellungen, indem Sie die Animationseinstellungen wie folgt ändern:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • Animationsstil: Folie
  • Animationsrichtung: links
  • Animationsdauer: 2000ms
  • Animationsverzögerung: 500 ms
  • Animationsintensität: 100%
  • Deckkraft des Animationsstarts: 100%
Anpassen des Animationstrennzeichens 2

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
Anpassung der Größe von Zeile 2

Fügen Sie der Spalte das Textmodul Nr. 1 hinzu

Fügen Sie H2-Inhalte hinzu

Fügen Sie dann der Spalte der Zeile ein erstes Textmodul mit einem H2-Inhalt Ihrer Wahl hinzu.

Fügen Sie der Divi-Spalte Text hinzu

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen entsprechend:

  • Textfarbe von Punkt 2: # fc526e
  • Kopfzeile 2 Textgröße: 28px
Divi Textabschnitt

Abstand

Fügen Sie dann benutzerdefinierte Füllwerte hinzu.

  • Obere Polsterung: 50px
  • Polsterung unten: 50px
  • Linke Auffüllung: 50px
Passen Sie den Divi-Textabschnitt an

Grenze

Wir verwenden auch einen linken Rand.

  • Breite des linken Randes: 2px
  • Farbe des linken Randes: # fc526e
Verwenden Sie eine Divi-Grenze

Animation

Vervollständigen Sie die Modulparameter, indem Sie eine personalisierte Animation hinzufügen.

  • Animationsstil: Flip
  • Animationsrichtung: Mitte
  • Animationsverzögerung: 1500 ms
Textparameter des Divi-Moduls

Fügen Sie der Spalte den Textbaustein # 2 hinzu

Inhalt hinzufügen

Fügen Sie ein weiteres Textmodul direkt unter dem vorherigen mit Inhalten Ihrer Wahl hinzu.

Fügen Sie einen neuen Divi-Modul-Text hinzu

Abstand

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Füllwerte entsprechend:

  • Obere Polsterung: 50px
  • Polsterung unten: 50px
  • Rechte Polsterung: 50px
Konfigurieren Sie die Auffüllung des Divi-Textmoduls

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.

Fügen Sie eine Divi-Schaltfläche hinzu

Tasteneinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Schaltflächeneinstellungen wie folgt:

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

  • 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
Konfiguration der Gradient Divi-Taste
  • Schaltflächenrandradius: 0px
  • Tastenbuchstabenabstand: 1px
  • Tastenschrift: Montserrat
  • Schriftgröße der Schaltfläche: Halb fett
  • Schaltflächenstil: Großbuchstaben
Passen Sie die Schaltflächen-Divi an

Abstand

Fügen Sie dann eine benutzerdefinierte obere und untere Polsterung hinzu.

  • Obere Polsterung: 16px
  • Polsterung unten: 16px
Konfigurieren Sie den Abstand der Divi-Tastenmodule

Animation

Vervollständigen Sie die Modulparameter, indem Sie die folgende Animation hinzufügen:

  • Animationsstil: Flip
  • Animationsverzögerung: 1900 ms
Divi CTA Layoutblock

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 neue Gutenberg-Integration von Divi nutzen und Ihrem Gutenberg-Blogbeitrag einen online und animierten Divi CTA-Präsentationsblock hinzufügen können. Dies ist eine großartige Möglichkeit, Ihren Aufruf zum Handeln Ihrer Wahl hervorzuheben, während Besucher den Inhalt Ihres Blogposts lesen. 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren