Möchten Sie Ihre Blogbeiträge verbessern? Divi indem du ihm einen Heldenabschnitt hinzufügst?
Hero-Abschnitte im Vollbildmodus sehen auf jeder Webseite großartig aus, aber sie eignen sich besonders gut für Blog-Posts.
Auch wenn das Beitragsbild bildschirmfüllend ist, gibt es viele Gestaltungsmöglichkeiten für die Platzierung von Titel und Metatext. Mit dem geht das ganz einfach Divi-Theme-Builder .
In diesem Artikel sehen wir verschiedene Möglichkeiten, Ihrer Blogbeitragsvorlage einen Vollbild-Hero-Abschnitt hinzuzufügen. Divi.
Lassen Sie uns beginnen.
Übersicht
Hier ist eine Vorschau dessen, was wir in diesem Tutorial entwerfen werden.
Lesen Sie auch: Divi: So verwenden Sie den "Gradient Builder", um Ihre Bilder zu verschönern
Hero-Bereich mit Post Title Desktop-Versionsmodul
Hero-Bereich mit Post-Titel-Mobile-Version-Modul
Alternatives Helden-Abschnittslayout mit Post-Titel-Desktop-Versionsmodul
Laden Sie DIVI jetzt herunter!!!
Alternatives Helden-Abschnittslayout mit mobilem Beitragstitelmodul
Hero-Bereich mit Metadaten Desktop-Version
Hero-Bereich mit Metadaten mobile Version
Laden Sie DIVI jetzt herunter!!!
Blog-Post-Vorlagen für Ihren Vollbild-Heldenbereich
Sie können die Vorlage für Blogbeiträge in erstellen Divi Theme Builder von Grund auf neu oder laden Sie eine Vorlage aus dem Elegant Themes-Blog herunter. Um sie zu finden, durchsuchen Sie den Blog „kostenlose Vorlage für Blogbeiträge“. Wenn Sie eine Vorlage herunterladen, entpacken Sie sie unbedingt.
Für unsere Beispiele verwenden wir die kostenlose Blog-Beitragsvorlage für Divis Fashion Designer Layout Pack . Wir verwenden auch das Layoutpaket kostenlos Kopf- und Fußzeile Modedesigner .
Laden Sie Ihre Blog-Post-Vorlage für Ihren Vollbild-Hero-Bereich herunter oder erstellen Sie sie
Sie können Ihre Blog-Beitragsvorlage herunterladen oder von Grund auf neu erstellen. Wir werden einen hochladen, aber der Vorgang zum Erstellen eines Vollbild-Heldenabschnitts ist derselbe.
Siehe auch: Divi: So verwenden Sie Masken und Hintergrundmuster für einen Heldenabschnitt
Methode 1: Vollbild-Post-Titel-Modul
Diese Methode verwendet die PostTitle-Modul . Es ist eine gute Wahl, wenn Sie alle Informationen zusammen anzeigen möchten. Sobald Sie Ihre Vorlage haben, wählen Sie das Bearbeitungssymbol aus, um sie zu öffnen.
Die von uns hochgeladene Vorlage enthält einen Abschnitt mit dem vorgestellten Bild. Wir werden diesen Abschnitt entfernen und einen hinzufügen Abschnitt in voller Breite an seinem Platz.
wählen Post-Titel in voller Breite in der Liste der Module voller Breite.
Alle Elemente sind standardmäßig ausgewählt. Lassen Sie sie aktiviert. Scrollen Sie zu Hervorgehobene Bildplatzierung und wählen Sie Über dem Titel.
- Ausgewählte Bildplatzierung: Über dem Titel
Scrollen Sie zu Hintergrundfarbe und setze die Farbe auf #fff9f2
- Hintergrund: #fff9f2
Titeltext
Wählen Sie die Registerkarte Entwurf. Behalten Sie für den Titeltext H1 bei und wählen Sie Playfair Display. Stellen Sie es auf Linksbündig ein und wählen Sie #34332e für die Farbe.
- Titel:
- Überschriftenebene: H1
- Schriftart: Playfair Display
- Textausrichtung: linksbündig
- Textfarbe: #34332e
Für Textgröße , stellen Sie die Desktop-Version auf 65 Pixel, die mobile Version auf 42 Pixel und die Zeilenhöhe auf 1,2 em ein.
- Titeltextgröße (Desktop): 65 Pixel (Desktop), 42 Pixel (Telefon)
- Titelzeilenhöhe: 1,2 em
Metatext
Scrollen Sie zu Metatext. Wählen Sie Montserrat für die Schriftart und stellen Sie sie auf Mittel, Großbuchstaben, rechte Ausrichtung für die Desktop-Version und linke Ausrichtung für die mobile Version ein. Wählen Sie #7b7975 für die Farbe.
- MetaFont:
- Schrift: Montserrat
- Gewicht: Mittel
- Stil: TT
- Metatext:
- Ausrichtung: rechts (Desktop), links (Telefon)
- Farbe: #7b7975
Definiere das Schriftgröße für die Desktop-Version bei 14 px, für die mobile Version bei 10 px, der Buchstabenabstand bei 1 px und die Zeilenhöhe bei 1,6 em. Schließen Sie Ihre Einstellungen und speichern Sie Ihre Vorlage.
- Metatext:
- Größe (Desktop): 14px
- Größe (Telefon): 10px
- Buchstabenabstand: 1px
- Zeilenhöhe: 1,6 cm
Titel auf Hintergrundbild
Wenn Sie sich entscheiden, dass der Titel auf dem ausgewählten Bild erscheinen soll, verwenden Sie dieselben Designeinstellungen und gehen Sie zurück zur Registerkarte Inhalt.
wählen Titel-/Meta-Hintergrundbild befolgen für Hervorgehobene Bildplatzierung.
- Empfohlene Bildplatzierung: Titel-/Meta-Hintergrundbild
Scrollen Sie zu Hintergrund und wählen Sie Hintergrundverlauf. Setzen Sie die linke Farbe auf #fff9f2, die rechte Farbe auf rgba(255,255,255,0), die Richtung auf 90 Grad, die Startposition auf 30 % und wählen Sie Ja, um den Farbverlauf über dem Hintergrundbild zu platzieren. Schließen und speichern Sie Ihre Einstellungen.
- Gradientenstopps:
- 30 %: #fff9f2
- 100 %: rgba(255,255,255,0)
- Steigungsrichtung: 90 Grad
- Quadratische Steigung über Hintergrundbild: JA
Methode 2: Vollbild-Heldenabschnitt mit Metadaten
Diese Methode verwendet Textmodule mit dynamische Inhalte zur Information. Dies ist eine gute Option, wenn Sie alle Elemente an verschiedenen Orten anzeigen möchten.
Laden Sie zuerst die Vorlage herunter und löschen Sie den ersten Abschnitt. Wir werden die Module und ihre Einstellungen in der linken Spalte neu erstellen, aber wir werden sie durchgehen, damit Sie sie konfigurieren können.
Einstellungen des Vollbild-Heldenabschnitts mit Metadaten
Öffnen Sie die Einstellungen der Abschnitt und scrolle zu Hintergrundbild. Wählen Hintergrundverlauf und ändern Sie die Einstellungen wie folgt:
- Gradientenstopps:
- 30 %: #fff9f2
- 100 %: rgba(255,255,255,0)
- Verlaufsrichtung: 90 Grad
- Quadratische Steigung über Hintergrundbild: JA
wählen Hintergrundbild und wählen Sie die Option Verwenden Sie dynamische Inhalte.
Wählen Ausgewähltes Bild in den Optionen.
Wählen Sie die Registerkarte Designund scrolle zu Größe. Fügen Sie 100 vh zur Mindesthöhe hinzu. Schließen Sie die Abschnittseinstellungen.
- Mindesthöhe: 100 vh
Einstellungen des Vollbild-Heldenabschnitts mit Metadaten
Als Nächstes fügen Sie dem Abschnitt eine zweispaltige Zeile hinzu.
Füge hinzu ein Textmodul in der rechten Spalte.
Für seine Inhalt, wählen Sie Verwenden Sie dynamische Inhalte.
Wählen Beitrags-/Archivtitel in der Liste der Optionen.
- Dynamischer Inhalt: Beitrags-/Archivtitel
Gehen Sie zur Registerkarte Design
- Überschrift:
- Texte: H1
- Schriftart: Playfair Display
- Textausrichtung: linksbündig
- Textfarbe: #34332e
Für die Größe von Texte , setzen Sie für die Desktop-Version auf 65 Pixel, für die mobile Version auf 42 Pixel und die Zeilenhöhe auf 1,2 m.
- Überschrift:
- Textgröße: 65 Pixel (Desktop), 42 Pixel (Telefon)
- Zeilenhöhe: 1,2 cm
Scrollen Sie zu Abstand und geben Sie 50 % für die obere Polsterung ein. Einstellungen schließen.
- Polsterung: 50 % (oben)
Sie können diesen Artikel auch lesen auf: So erstellen Sie einen Hero-Bereich mit dem Fullwidth-Header-Modul von Divi
Hero-Bereich mit Metadaten-Kategorie
Fügen Sie einen neuen Abschnitt hinzu regulär unter der Rubrik Helden.
Öffnen Sie die Einstellungen und stellen Sie die ein couleur Hintergrund zu #fff9f2. Einstellungen schließen.
- Hintergrundfarbe: #fff9f2
Fügen Sie dann ein hinzu Linie von 4 Spalten zum neuen Abschnitt.
Vollbild-Held mit Metadaten-Kategorietext
Füge hinzu ein Textmodul in der linken Spalte.
Öffnen Sie die Moduleinstellungen und wählen Sie aus Verwenden Sie dynamische Inhalte für den Textkörper.
wählen Vergangene Kategorien in der Liste.
- Dynamischer Inhalt: Beitragskategorien
Wählen Sie die Registerkarte Design und scrollen Sie nach unten zu Überschriftentext. Wählen Sie H4. Wählen Sie Playfair Display für die Schriftart und stellen Sie sie auf Mittel, Großbuchstaben, Rechtsbündigkeit für die Desktop-Version und Linksbündigkeit für die Telefonversion ein. Wählen Sie #7b7975 für die Farbe.
- Überschrift:
- Textanzeige
- Schriftart: Playfair Display
- Schriftstärke: Mittel
- Stil: TT
- Textausrichtung: Zentriert
- Textfarbe: #7b7975
Stellen Sie die Schriftgröße für die Desktop-Version auf 14 px, für die mobile Version auf 10 px, den Buchstabenabstand auf 1 px und die Zeilenhöhe auf 1,6 em ein. Schließen Sie Ihre Einstellungen und speichern Sie Ihre Vorlage.
- Überschrift 4:
- Größe (Desktop): 14px
- Größe (Telefon): 10px
- Buchstabenabstand: 1px
- Zeilenhöhe: 1,6 cm
Scrollen Sie zu Abstand und fügen Sie 0px zum unteren Rand hinzu. Einstellungen schließen.
- Rand (unten): 0px
Vollbild-Heldenabschnitt mit Metatext-Metadaten
Kopieren Sie als Nächstes das Kategoriemodul und ziehen Sie es in die nächste Spalte. Jedes der Meta-Module hat die gleichen Einstellungen. Wir zeigen, wie man das erste Modul erstellt und es dann zweimal kopiert, um die anderen Module zu erstellen.
Autor
Öffnen Sie die Einstellungen und löschen Sie die Inhalt dynamisch.
Klicken Sie auf Verwenden Sie dynamische Inhalte und wähle Beitragsautor.
- Dynamischer Inhalt: Postautor
In der Registerkarte Design, Ändern Sie die folgenden Einstellungen.
- Überschrift 4:
- Schrift: Montserrat
- Schriftstärke: Mittel
- Stil: TT
- Textausrichtung (Desktop): Zentriert
- Textausrichtung (Telefon): Links
- Farbe: #7b7975
Die Parameter von Schriftgröße enthalten:
- Textgröße: 14px (Desktop), 10px (Telefon)
- Buchstabenabstand: 1px
- Zeilenhöhe: 1,6 cm
La unterer Rand muss 0px haben.
- Rand (unten): 0px
Datum
Kopie das Autorenmodul und ziehen Sie es in die nächste Spalte.
Lösche es Inhalt dynamique Strom, wählen Verwenden Sie dynamische Inhalte und wählen Sie Datum der Veröffentlichung. Einstellungen schließen.
- Dynamischer Inhalt: Post-Veröffentlichungsdatum
commentaires
Endlich, kopieren das Modul Post-Veröffentlichungsdatum und ziehen Sie es in die letzte Spalte.
Entfernen Sie wie bei anderen Modulen den dynamischen Inhalt und wählen Sie aus Verwenden Sie dynamische Inhalte .
Wählen Anzahl der Kommentare posten aus Ihren Entscheidungen.
- Dynamischer Inhalt: Anzahl der Post-Kommentare
Fügen Sie dieses Mal ein Leerzeichen und das Wort Kommentare in das Feld ein Nach der . Schließen Sie das kleine Modal und schließen Sie dann die Einstellungen. Sichere deine Arbeit.
- Nachher: Kommentare
Lesen Sie auch: Divi: So zeigen Sie das Fullwidth Header-Modul im Vollbildmodus an
Ergebnisse
Hero-Bereich mit Post Title Desktop-Versionsmodul
Hero-Bereich mit Post-Titel-Mobile-Version-Modul
Alternatives Helden-Abschnittslayout mit Post-Titel-Desktop-Versionsmodul
Alternatives Helden-Abschnittslayout mit mobilem Beitragstitelmodul
Hero-Bereich mit Metadaten Desktop-Version
Hero-Bereich mit Metadaten der mobilen Version
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Das wars ! Dies ist unser Blick darauf, wie Sie Ihrer Blogbeitragsvorlage einen Vollbild-Heldenabschnitt hinzufügen. Divi.
Module Divi und Theme Builder bieten mehrere Optionen zum Erstellen von Heldenabschnitten im Vollbildmodus. Alle Methoden funktionieren sehr gut und alle haben ihre Vorteile.
Mit diesen Methoden können Sie jeder Divi-Blogbeitragsvorlage einen Vollbild-Heldenabschnitt hinzufügen.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.
Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
