Springe zum Hauptinhalt

So fügen Sie einen Divi-Block in einen Gutenberg-Gegenstand ein

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]

Das Erstellen wertvoller Blog-Beiträge erfordert Zeit und Mühe. Neben der Suche nach den besten Themen zum Schreiben in Ihrer Nische ist es auch wichtig, die Leser zu beschäftigen und ihnen zu ermöglichen, die gesuchten Informationen schnell zu finden. 

Eine gute Möglichkeit, sich dieser Art von Benutzererfahrung zu nähern, besteht darin, am Ende Ihres Blog-Beitrags kurz vor den letzten Gedanken ein visuelles Zusammenfassungsfeld freizugeben. 

Mit den neuen Layoutblöcken von Divi können Sie jetzt mühelos ein Zusammenfassungsfeld mit den integrierten Optionen von Divi erstellen. In diesem Tutorial werden wir Sie durch den Prozess führen und Sie können auch die Layout-JSON-Datei kostenlos herunterladen!

Beginnen wir mit der Neuerstellung!

Verwenden Sie die Veröffentlichungsvorlage für das sechste Themenpaket

Laden Sie das Sixth Theme Builder Pack herunter

Das Zusammenfassungsfeld, das wir in diesem Tutorial neu erstellen, passt perfekt zur Post-Vorlage für das sechste kostenlose Theme Builder-Paket. Gehe zumBlogartikel und laden Sie das gesamte Paket herunter.

Laden Sie das Divi Pack herunter

Gehen Sie zu Divi Theme Builder

Gehen Sie dann zum Divi Theme Builder.

Greifen Sie auf das Builder-Thema zu

Laden Sie die Publikationsvorlage herunter

Klicken Sie auf das Symbol in der oberen rechten Ecke und laden Sie die Beitragsvorlage aus dem Theme Building Pack herunter. Stellen Sie sicher, dass Sie alle Änderungen am Theme Builder anschließend bearbeiten.

Laden Sie das Publikationsmodell herunter

Öffnen Sie eine vorhandene Gutenberg-Publikation oder erstellen Sie eine neue

Sobald Sie die entsprechende Post-Vorlage hinzugefügt haben, ist es Zeit, das Zusammenfassungsfeld zu erstellen. Öffne oder erstelle einen neuen Beitrag mit Gutenberg.

Erstellen Sie eine Divi-Publikation

Fügen Sie eine Zusammenfassung des Titels H2 hinzu

Gegen Ende des Blogposts werden wir einen neuen H2-Titel hinzufügen.

Fügen Sie den Titel des Gutenberg-Textmoduls hinzu

Fügen Sie online einen neuen Divi-Block hinzu

Als nächstes werden wir einen neuen Divi-Layoutblock hinzufügen.

Fügen Sie einen Divi-Layoutblock hinzu

Erstellen Sie ein neues Layout im Divi-Block

Sobald Sie den Block hinzugefügt haben, haben Sie zwei Möglichkeiten. Wählen Sie, um ein neues Layout zu erstellen.

Erstellen Sie ein neues Layout innerhalb eines Divi-Blocks

Abschnittseinstellungen

Hintergrundfarbe

Im Divi-Layoutblock-Editor sehen Sie einen Abschnitt. Öffnen Sie diesen Abschnitt und verwenden Sie einen weißen Hintergrund.

  • Hintergrundfarbe: #FFFFFF
Divi Hintergrundfarbe

Abstand

Wechseln Sie zur Registerkarte Abschnittsdesign und fügen Sie benutzerdefinierte Rand- und Füllwerte hinzu.

  • Oberer Rand: 100px
  • Linker Rand: -10% (Büro), 0% (Tablet und Telefon)
  • Rechter Rand: -10% (Büro), 0% (Tablet und Telefon)
  • Obere Polsterung: 0px
  • Polsterung unten: 0px
Divi-Abstandskonfiguration

Grenze

Fügen Sie auch einen Rahmenradius hinzu.

  • Unten links: 16px
  • Unten rechts: 16px
Konfiguration des Divi-Modulrahmens

Schattenkiste

Mit einem subtilen Schatten der Box.

  • Stärke der Schattenunschärfe: 60px
  • Box Schattenausbreitungskraft: 10px
  • Schattenfarbe: rgba (0,0,0,0,08)
Shadow Box Divi Konfiguration

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie dem Abschnitt weiterhin eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Auswahllayout divi

Sizing

Öffnen Sie die Zeileneinstellungen, ohne noch ein Modul hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen.

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]

  • Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
  • Dachrinnenbreite: 1
  • Spaltenhöhen ausgleichen: Ja
  • Breite: 100%
  • Maximale Breite: 100%
Divi Line Konfiguration

Abstand

Entfernen Sie dann die standardmäßige obere und untere Polsterung aus der Linie.

  • Obere Polsterung: 0px
  • Polsterung unten: 0px
Einstellung des Divi-Linienabstands

Einstellungen für Spalte 1

Hintergrundfarbe

Öffnen Sie dann die Einstellungen in Spalte 1 und verwenden Sie dazu eine weiße Hintergrundfarbe.

  • Hintergrundfarbe: #FFFFFF
Divi Säuleneinstellung

Abstand

Fügen Sie auch benutzerdefinierte Füllwerte hinzu.

  • Obere Polsterung: 70px
  • Polsterung unten: 70px
  • Linke Polsterung: 70 px
  • Rechte Polsterung: 70px
Divi-Spaltenabstandseinstellungen

Schattenkiste

Fahren Sie fort, indem Sie einen subtilen Kastenschatten mit einer anderen Standard- und Hover-Schattenfarbe hinzufügen.

  • Stärke der Schattenunschärfe: 50px
  • Standardschattenfarbe: rgba (0,0,0,0)
  • Schwebeschattenfarbe: rgba (0,0,0,0,15)
Hintergrundeinstellungen der Divi-Spalte

Hover-Transformationsskala

Beim Hover möchten wir die Spalte auch leicht skalieren.

  • Rechts: 105%
  • Niedrig: 105%
Divi-Spalteneinstellung

Hover-Z-Index

Vervollständigen Sie die Spaltenparameter, indem Sie einen Schwebeindex hinzufügen. Z.

  • Schwebeindex Z: 11
Divi Spaltenposition

Fügen Sie der Spalte den Textbaustein # 1 hinzu

Fügen Sie dem Inhaltsbereich eine Nummer hinzu

Es ist Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul. Fügen Sie dem Inhaltsbereich eine Nummer hinzu.

Divi-Texteinstellung

Hintergrund mit Farbverlauf

Fügen Sie dann einen Verlaufshintergrund hinzu.

  • Farbe 1: # ff5e92
  • Farbe 2: # ffd4b6
  • Steigungsrichtung: 165deg

Texteinstellungen

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

  • Textschrift: Poppins
  • Textfarbe: #ffffff
  • Textgröße: 26px
  • Textausrichtung: Mitte

Sizing

Weisen Sie dann eine Breite und eine Höhe zu.

  • Breite: 150px
  • Höhe: 150px

Grenze

Fügen Sie auch einen Rahmenradius hinzu.

  • Unten links, oben rechts und unten rechts: 100 Pixel
Rahmenkonfiguration des Textmoduls 1

CSS Hauptelement

Um den Text in unserem Container zu zentrieren, müssen wir dem Hauptmodulelement auf der Registerkarte "Erweitert" einige Zeilen CSS-Code hinzufügen.

display: flex;align-items: center;justify-content: center;

Codeeinstellung CSS-Modul Text Divi

Position

Und wir werden die Modulparameter beenden, indem wir das Modul neu positionieren.

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]

  • Position: absolut
  • Lage: oben links
Positionskonfiguration des Divi-Textmoduls

Fügen Sie der Spalte den Textbaustein # 2 hinzu

Fügen Sie H3-Inhalte hinzu

Fahren wir mit dem nächsten Textmodul fort. Fügen Sie einen beliebigen H3-Inhalt Ihrer Wahl hinzu.

Fügen Sie den Inhalt des Textmoduls hinzu

H3-Texteinstellungen

Ändern Sie dann die Größe des H3-Textes des Moduls.

  • Titel 3 Textgröße: 23px
Divi Textmodul Parameter

Abstand

Ändern Sie auch die Abstandseinstellungen.

  • Oberer Rand: 100px
  • Unterer Rand: 20px
Modularer Abstandskonfigurationsbereich

Fügen Sie der Säule ein Trennmodul hinzu

Sichtbarkeit

Das nächste Modul, das wir brauchen, ist ein Trennmodul. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" aktiviert ist.

  • Trennzeichen anzeigen: Ja
Divi-Trennzeichen anzeigen

Leitungseinstellungen

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

  • Linienfarbe: # ff5e92
  • Linienstil: solide
  • Linienposition: hoch
Divi Line Einstellung

Sizing

Ändern Sie auch die Größe des Moduls.

  • Teilergewicht: 2px
  • Breite: 20%
Teilung

Fügen Sie der Spalte den Textbaustein # 3 hinzu

Inhalt hinzufügen

Fahren wir mit dem nächsten und letzten Textmodul fort. Fügen Sie Inhalte Ihrer Wahl hinzu.

Textspalte 3 divi

Klonierungssäule

Sobald Sie die Spalte und alle ihre Module fertiggestellt haben, können Sie die gesamte Spalte klonen.

Spalte eine Divi-Spalte

Ändern Sie die Schattenfarbe des Standardfelds

Öffnen Sie die Einstellungen in Spalte 2 und ändern Sie die Standardschattenfarbe.

  • Schattenfarbe: rgba (0,0,0,0,06)
Ändern Sie die Farbe des Divi-Schattens

Ändern Sie den Verlaufshintergrund des Textmoduls Nr. 1

Öffnen Sie das erste Textmodul in der nächsten 2 Spalte und ändern Sie den Verlaufshintergrund.

  • Farbe 1: # 7e5ce6
  • Farbe 2: # 25b8ee
Ändern Sie den Hintergrund des Divi-Verlaufs

Ändern Sie den Rand des Textmoduls Nr. 1

Ändern Sie auch die Einstellungen für den Modulrand.

  • Oben links, unten links und unten rechts: 100 Pixel
Ändern Sie den Rand des Divi-Textmoduls

Ändern Sie die Position des Textmoduls Nr. 1

Und positionieren Sie das Modul auf der Registerkarte "Erweitert" neu.

  • Lage: oben rechts
Ändern Sie die Position des Divitextes

Ändern Sie die Farbe des Trennzeichens

Fahren Sie fort, indem Sie die Einstellungen für das Trennmodul öffnen. Ändern Sie die Farbe der Linie entsprechend dem neuen Farbschema.

  • Linienfarbe: # 7e5ce6
Ändern Sie die Farbe des Divi-Separators

Ändern Sie den gesamten Inhalt

Ändern Sie abschließend den gesamten Inhalt des Moduls in Spalte 2.

Ändern Sie den Inhalt des Divi-Textmoduls

Klonen Sie den gesamten Abschnitt zweimal

Sobald Sie den ersten Abschnitt abgeschlossen haben, können Sie ihn zweimal klonen.

Klonen Sie die Spalten so oft wie nötig

Ändern Sie den Abstand des ersten doppelten Abschnitts

Öffnen Sie die Einstellungen im ersten doppelten Abschnitt und ändern Sie die Randwerte entsprechend:

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]

  • Linker Rand: -5% (Desktop-Computer), 0% (Tablet und Telefon)
  • Rechter Rand: -5% (Büro), 0% (Tablet und Telefon)
Passen Sie den Abstand der Teilungslinien an

Ändern Sie den Abstand des zweiten doppelten Abschnitts

Öffnen Sie auch das zweite Duplikat, löschen Sie alle Randwerte und fügen Sie stattdessen einen unteren Rand hinzu.

  • Unterer Rand: 100px
Konfigurieren Sie den oberen Rand der Divi

Ändern Sie den gesamten Inhalt

Ändern Sie abschließend den gesamten Inhalt des Moduls.

Bearbeiten Sie alle Divi-Inhalte

Speichern Sie das Layout zur Wiederverwendung in der Divi-Bibliothek

Wenn Sie dieses Zusammenfassungsfeld in anderen Blog-Posts verwenden möchten, müssen Sie es in Ihrer Divi-Bibliothek speichern, damit Sie problemlos darauf zugreifen können! Das ist es !

Speichern Sie in der Divi-Bibliothek

Übersicht

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Divi Design Vorschau

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie Ihrem Gutenberg-Artikel mit den neuen Layoutblöcken von Divi ein Zusammenfassungsfeld hinzufügen können. Zusammenfassungsfelder sind eine großartige visuelle Möglichkeit, Ihren Besuchern zu helfen, die gesuchten Informationen zu finden. 

Sie können auch die JSON-Datei für das Layout kostenlos herunterladen! Wenn Sie Fragen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.

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
1 Aktien
Aktie1
tweet
Registrieren