So fügen Sie einen Zusammenfassungs-Box-Divi-Layout-Block in Ihren Gutenberg-Beitrag ein

Das Erstellen wertvoller Blog-Posts erfordert Zeit und Mühe. Neben der Suche nach den besten Themen, über die Sie in Ihrer Nische schreiben können, 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, ein visuelles Zusammenfassungsfeld am Ende Ihres Blogbeitrags freizugeben, direkt vor den letzten Gedanken. Mit den neuen Layoutblöcken von Divi können Sie jetzt mit den integrierten Optionen von Divi mühelos ein Übersichtsfeld erstellen. In diesem Tutorial führen wir Sie durch den Prozess und Sie können auch die JSON-Datei des Layouts kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie den Zusammenfassungs-Box-Divi-Layout-Block KOSTENLOS herunter

Um den kostenlosen Divi-Layoutblock für die Heldenzusammenfassungsbox in die Hände zu bekommen, müssen Sie ihn zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Importieren des Layoutblocks JSON

Layout in die Divi-Bibliothek hochladen

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 'Import & Export'.

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

Neuen Divi-Block-Block in Gutenberg Post hinzufügen

Sobald Ihr Layout importiert wurde, können Sie zu Ihrem Gutenberg-Post gehen und einen neuen Divi-Layoutblock hinzufügen.

JSON-Datei aus gespeicherten Layouts importieren

Klicken Sie dann auf „Aus Bibliothek laden“, navigieren Sie zu „Ihre gespeicherten Layouts“ und wählen Sie das Layout aus, um das Zusammenfassungsfeld in Ihren Blog-Beitrag zu importieren. Das ist es!

Beginnen wir mit der Neuerstellung!

Verwenden Sie die Beitragsvorlage für das sechste Theme Builder-Paket

Laden Sie das sechste Theme-Builder-Paket herunter

Das Zusammenfassungsfeld, das wir in diesem Tutorial neu erstellen werden, passt perfekt zur Beitragsvorlage des sechsten kostenlosen Theme-Builder-Pakets. Gehen Sie zum Blogbeitrag und laden Sie das gesamte Paket herunter.

Gehe zum Divi Theme Builder

Gehen Sie dann zum Divi Theme Builder.

Beitragsvorlage hochladen

Klicken Sie auf das Symbol in der oberen rechten Ecke und laden Sie die Beitragsvorlage des Theme-Builder-Pakets hoch. Stellen Sie sicher, dass Sie danach alle Änderungen am Theme Builder ändern.

Vorhandenen Gutenberg-Beitrag öffnen oder einen neuen erstellen

Nachdem Sie nun die passende Beitragsvorlage hinzugefügt haben, ist es an der Zeit, das Zusammenfassungsfeld zu erstellen. Öffnen oder erstellen Sie einen neuen Beitrag mit Gutenberg.

Zusammenfassung H2-Titel hinzufügen

Gegen Ende des Blogbeitrags fügen wir einen neuen H2-Titel hinzu.

Neuen Inline-Divi-Block hinzufügen

Dann fügen wir einen neuen Divi-Layoutblock hinzu.

Neues Layout innerhalb des Divi-Blocks erstellen

Nachdem Sie den Block hinzugefügt haben, erhalten Sie zwei Optionen. Wählen Sie aus, um ein neues Layout zu erstellen.

Abschnittseinstellungen

Hintergrundfarbe

Im Divi-Layoutblock-Editor werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und verwenden Sie dafür einen weißen Hintergrund.

• Hintergrundfarbe: #FFFFFF

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und fügen Sie einige benutzerdefinierte Werte für Rand und Abstand hinzu.

• Oberer Rand: 100px
• Linker Rand: -10% (Desktop), 0% (Tablet & Telefon)
• Rechte Marge: -10% (Desktop), 0% (Tablet & Telefon)
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Grenze

Fügen Sie auch einen Randradius hinzu.

• Unten links: 16px
• Unten rechts: 16px

Box Schatten

Zusammen mit einem subtilen Kastenschatten.

• Stärke der Box-Schattenunschärfe: 60px
• Stärke der Box-Schattenausbreitung: 10px
• Schattenfarbe: rgba(0,0,0,0.08)

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

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

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie als Nächstes die standardmäßige obere und untere Auffüllung der Zeile.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Spalte 1 Einstellungen

Hintergrundfarbe

Als nächstes öffnen Sie die Einstellungen von Spalte 1 und verwenden eine weiße Hintergrundfarbe dafür.

• Hintergrundfarbe: #FFFFFF

Abstand

Fügen Sie auch einige benutzerdefinierte Füllwerte hinzu.

• Obere Polsterung: 70px
• Untere Polsterung: 70px
• Linke Polsterung: 70px
• Rechte Polsterung: 70px

Box Schatten

Fahren Sie fort, indem Sie einen subtilen Boxschatten mit einer anderen Standard- und Schwebeschattenfarbe hinzufügen.

• Stärke der Box-Schattenunschärfe: 50px
• Standardschattenfarbe: rgba(0,0,0,0)
• Hover-Schattenfarbe: rgba(0,0,0,0.15)

Hover-Transformationsskala

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

• Rechts: 105 %
• Unten: 105 %

Hover-Z-Index

Vervollständigen Sie die Spalteneinstellungen, indem Sie einen Hover-Z-Index hinzufügen.

• Schwebeflug-Z-Index: 11

Textmodul Nr. 1 zur Spalte hinzufügen

Nummer zum Inhaltsfeld hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul. Fügen Sie dem Inhaltsfeld eine Zahl hinzu.

Hintergrund mit Farbverlauf

Fügen Sie dann einen Farbverlaufshintergrund hinzu.

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

Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Texteinstellungen wie folgt:

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

Größe

Weisen Sie als nächstes eine Breite und Höhe zu.

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

Grenze

Fügen Sie auch einen Randradius hinzu.

• Unten links, Oben rechts & Unten rechts: 100px

Hauptelement-CSS

Um den Text in unserem Container zu zentrieren, müssen wir dem Hauptelement des Moduls auf der Registerkarte "Erweitert" ein paar Zeilen CSS-Code hinzufügen.

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

Position

Und wir vervollständigen die Moduleinstellungen, indem wir das Modul neu positionieren.

• Position: Absolut
• Ort: Oben links

Textmodul #2 zur Spalte hinzufügen

H3-Inhalt hinzufügen

Weiter zum nächsten Textbaustein. Fügen Sie H3-Inhalte Ihrer Wahl hinzu.

H3-Texteinstellungen

Ändern Sie als nächstes die H3-Textgröße des Moduls.

• Überschrift 3 Textgröße: 23px

Abstand

Ändern Sie auch die Abstandseinstellungen.

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

Trennmodul zur Spalte hinzufügen

Sichtweite

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

• Teiler anzeigen: Ja

Leitungseinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Linieneinstellungen wie folgt:

• Linienfarbe: #ff5e92
• Linienstil: Solid
• Linienposition: Oben

Größe

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

• Teilergewicht: 2px
• Breite: 20%

Textmodul Nr. 3 zur Spalte hinzufügen

Inhalt hinzufügen

Weiter zum nächsten und letzten Textbaustein. Fügen Sie Inhalte Ihrer Wahl hinzu.

Spalte klonen

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

Ändern Sie die Standard-Box-Schattenfarbe

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

• Schattenfarbe: rgba(0,0,0,0.06)

Ändern Sie den Hintergrund des Textmoduls Nr. 1 mit Farbverlauf

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

• Farbe 1: #7e5ce6
• Farbe 2: #25b8ee

Rahmen des Textmoduls Nr. 1 ändern

Ändern Sie auch die Rahmeneinstellungen des Moduls.

• Oben links, unten links & unten rechts: 100px

Position des Textmoduls Nr. 1 ändern

Und positionieren Sie das Modul im erweiterten Tab neu.

• Standort: Oben rechts

Teilerfarbe ändern

Fahren Sie fort, indem Sie die Einstellungen des Teilermoduls öffnen. Ändern Sie die Linienfarbe, um sie an die neue Farbpalette anzupassen.

• Linienfarbe: #7e5ce6

Alle Inhalte ändern

Ändern Sie zu guter Letzt alle Modulinhalte in Spalte 2.

Ganze Sektion zweimal klonen

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

Abstand des ersten duplizierten Abschnitts ändern

Öffnen Sie die Einstellungen des ersten duplizierten Abschnitts und ändern Sie die Randwerte entsprechend:

• Linker Rand: -5% (Desktop), 0% (Tablet und Telefon)
• Rechte Marge: -5% (Desktop), 0% (Tablet & Telefon)

Abstand des zweiten duplizierten Abschnitts ändern

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

• Unterer Rand: 100px

Alle Inhalte ändern

Ändern Sie nicht zuletzt alle Modulinhalte.

Layout zur Wiederverwendung in der Divi-Bibliothek speichern

Wenn Sie dieses Zusammenfassungsfeld in anderen Blog-Posts verwenden möchten, stellen Sie sicher, dass Sie es in Ihrer Divi-Bibliothek speichern, damit Sie leicht darauf zugreifen können! Das ist es!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Ihrem Gutenberg-Beitrag mit den neuen Layoutblöcken von Divi ein Zusammenfassungsfeld hinzufügen. Zusammenfassungsfelder sind eine großartige und visuelle Möglichkeit, Ihren Besuchern zu helfen, die gesuchten Informationen zu finden. Sie konnten auch die JSON-Datei des Layouts kostenlos herunterladen! Wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.