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 werden, passt perfekt zur Beitragsvorlage des Sixth Theme Builder Pack kostenlos. Greife auf ... zuBlogartikel und laden Sie das gesamte Paket herunter.
Gehen Sie zu Divi Theme Builder
Gehen Sie dann zum Divi Theme Builder.
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.
Ö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.
Fügen Sie eine Zusammenfassung des Titels H2 hinzu
Gegen Ende des Blogposts werden wir einen neuen H2-Titel hinzufügen.
Fügen Sie online einen neuen Divi-Block hinzu
Als nächstes werden wir einen neuen Divi-Layoutblock hinzufügen.
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.
Abschnittseinstellungen
Hintergrundfarbe
Im Divi-Layoutblock-Editor sehen Sie einen Abschnitt. Öffnen Sie diesen Abschnitt und verwenden Sie einen weißen Hintergrund.
- Hintergrundfarbe: #FFFFFF
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
Grenze
Fügen Sie auch einen Rahmenradius hinzu.
- Unten links: 16px
- Unten rechts: 16px
Schattenkiste
Mit einem subtilen Schatten der Box.
- Stärke der Schattenunschärfe: 60px
- Box Schattenausbreitungskraft: 10px
- Schattenfarbe: rgba (0,0,0,0,08)
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie dem Abschnitt weiterhin eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:
Sizing
Öffnen Sie die Zeileneinstellungen, ohne noch ein Modul hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen.
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
- Spaltenhöhen ausgleichen: Ja
- Breite: 100%
- Maximale Breite: 100%
Abstand
Entfernen Sie dann die standardmäßige obere und untere Polsterung aus der Linie.
- Obere Polsterung: 0px
- Polsterung unten: 0px
Einstellungen für Spalte 1
Hintergrundfarbe
Öffnen Sie dann die Einstellungen in Spalte 1 und verwenden Sie dazu eine weiße Hintergrundfarbe.
- Hintergrundfarbe: #FFFFFF
Abstand
Fügen Sie auch benutzerdefinierte Füllwerte hinzu.
- Obere Polsterung: 70px
- Polsterung unten: 70px
- Linke Polsterung: 70 px
- Rechte Polsterung: 70px
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)
Hover-Transformationsskala
Beim Hover möchten wir die Spalte auch leicht skalieren.
- Rechts: 105%
- Niedrig: 105%
Hover-Z-Index
Vervollständigen Sie die Spaltenparameter, indem Sie einen Schwebeindex hinzufügen. Z.
- Schwebeindex Z: 11
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 Feld eine Zahl hinzu Inhalt.
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
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;
Position
Und wir werden die Modulparameter beenden, indem wir das Modul neu positionieren.
- Position: absolut
- Lage: oben links
Fügen Sie der Spalte den Textbaustein # 2 hinzu
Fügen Sie H3-Inhalte hinzu
Kommen wir zum nächsten Textbaustein. Fügen Sie etwas hinzu Inhalt H3 Ihrer Wahl.
H3-Texteinstellungen
Ändern Sie dann die Größe des H3-Textes des Moduls.
- Titel 3 Textgröße: 23px
Abstand
Ändern Sie auch die Abstandseinstellungen.
- Oberer Rand: 100px
- Unterer Rand: 20px
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
Leitungseinstellungen
Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Zeileneinstellungen wie folgt:
- Linienfarbe: # ff5e92
- Linienstil: solide
- Linienposition: hoch
Sizing
Ändern Sie auch die Größe des Moduls.
- Teilergewicht: 2px
- Breite: 20%
Fügen Sie der Spalte den Textbaustein # 3 hinzu
Inhalt hinzufügen
Kommen wir zum nächsten und letzten Textbaustein. Fügen Sie etwas hinzu Inhalt Ihrer Wahl.
Klonierungssäule
Sobald Sie die Spalte und alle ihre Module fertiggestellt haben, können Sie die gesamte Spalte klonen.
Ä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 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 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 die Position des Textmoduls Nr. 1
Und positionieren Sie das Modul auf der Registerkarte "Erweitert" neu.
- Lage: oben rechts
Ä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 den gesamten Inhalt
Ändern Sie abschließend den gesamten Inhalt des Moduls in Spalte 2.
Klonen Sie den gesamten Abschnitt zweimal
Sobald Sie den ersten Abschnitt abgeschlossen haben, können Sie ihn zweimal klonen.
Ändern Sie den Abstand des ersten doppelten Abschnitts
Öffnen Sie die Einstellungen im ersten doppelten Abschnitt und ändern Sie die Randwerte entsprechend:
- Linker Rand: -5% (Desktop-Computer), 0% (Tablet und Telefon)
- Rechter Rand: -5% (Büro), 0% (Tablet und Telefon)
Ä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
Ändern Sie den gesamten Inhalt
Ändern Sie abschließend den gesamten Inhalt des Moduls.
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 !
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Abschließende Gedanken
In diesem Artikel 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 visuelle Möglichkeit, Ihnen zu helfen Besucher um 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.
