So erstellen Sie mit Divi . einen schönen Heldenbereich für Ihre persönliche Website

Das Erstellen einer persönlichen Website macht Spaß und ist gleichzeitig eine Herausforderung. Sie möchten, dass Ihre Website ansprechend und persönlich genug aussieht, um Ihre Geschichte zu erzählen. Gleichzeitig möchten Sie eine schöne und authentische Website haben, die zeigt, dass Sie wissen, was Sie tun.

Um Sie beim kreativen Prozess der Erstellung einer solchen persönlichen Website zu unterstützen, haben wir einen schönen Heldenbereich erstellt, der Ihre Website definitiv hervorheben wird. In diesem Beitrag zeigen wir Ihnen Schritt für Schritt, wie Sie dieses Ergebnis mit nichts anderem als den integrierten Einstellungen von Divi für jeden der Schritte erstellen. Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf das Ergebnis.

Ergebnis auf dem Desktop

Das Ergebnis auf dem Desktop sieht so aus:

Ergebnis auf dem Handy

Und die Besucher, die die Website mobil besuchen, sehen das folgende Ergebnis:

So erstellen Sie mit Divi . einen schönen Heldenbereich für Ihre persönliche Website

Abonnieren Sie unseren Youtube-Kanal

Abschnitt erstellen

Erstellen Sie zunächst eine neue Seite auf Ihrer WordPress-Website, aktivieren Sie den Divi Builder, wechseln Sie zum Visual Builder und fügen Sie ihm einen neuen Abschnitt hinzu.

Hintergrund mit Farbverlauf

Das einzige, was Sie in diesem Abschnitt ändern müssen, ist der Hintergrund. Dieser Hintergrund gilt für alle Zeilen, die wir in den nächsten Schritten dieses Beitrags hinzufügen. Öffnen Sie die Unterkategorie Hintergrund und fügen Sie den folgenden Verlaufshintergrund hinzu:

• Erste Farbe: #c2c6f3
• Zweite Farbe: #cea5b9
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 45%
• Endposition: 45%

Erste Zeile hinzufügen

Fahren Sie dann fort und fügen Sie die erste Reihe zum Abschnitt hinzu. Diese Zeile enthält nur das Textmodul, das Sie oben im Layout sehen können.

Spaltenstruktur

Wählen Sie als Nächstes eine Spaltenstruktur mit einer Spalte aus.

Größe

Wechseln Sie zur Registerkarte Design Ihrer Zeileneinstellungen und verwenden Sie die folgenden Einstellungen für die Unterkategorie Größen:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Textmodul

Wie bereits erwähnt, benötigt diese Zeile nur ein Textmodul.

Texteinstellungen

Nachdem Sie den Text eingegeben haben, der auf der Registerkarte Inhalt angezeigt werden soll, gehen Sie zur Registerkarte Design und nehmen Sie die folgenden Einstellungen vor, die für die Unterkategorie Text gelten:

• Textschriftart: Arizona
• Schriftstärke des Textes: Regular
• Textgröße: 150 (Desktop), 80 (Tablet), 70 (Telefon)
• Textfarbe: rgba(255,255,255,0.39)
• Textausrichtung: Mitte

Zweite Reihe hinzufügen

Sobald Sie die erste Reihe fertiggestellt haben, fahren Sie fort und fügen Sie dem gleichen Abschnitt eine zweite Reihe hinzu.

Spaltenstruktur

Wie die vorherige Zeile enthält auch diese Zeile nur eine Spalte.

Hintergrundbild

Öffnen Sie die Zeileneinstellungen und fügen Sie das persönliche Bild hinzu, das Sie als Hintergrundbild für die erste Spalte verwenden möchten. Stellen Sie sicher, dass die Bildposition ebenfalls auf „Mitte“ eingestellt ist.

Größe

Öffnen Sie dann die Unterkategorie Dimensionierung und nehmen Sie die folgenden Änderungen vor:

• Benutzerdefinierte Breite verwenden: Ja
• Benutzerdefinierte Breite: 557px

Abstand

Als nächstes verwenden Sie '0px' für die obere, untere, rechte und linke Auffüllung der Zeile.

Box Schatten

Lassen Sie schließlich den folgenden Box Shadow anwenden:

• Horizontale Position des Kastenschattens: 0px
• Vertikale Position des Kastenschattens: 2px
• Stärke der Box-Schattenunschärfe: 53px
• Stärke der Box-Schattenausbreitung: 10px
• Schattenfarbe: rgba(0,0,0,0.3)
• Schattenposition: Äußerer Schatten

Textmodul

Sobald Ihre Zeileneinstellungen abgeschlossen sind, fügen Sie der Spalte ein Textmodul hinzu.

Hintergrundfarbe

Dieses Textmodul benötigt zunächst eine Hintergrundfarbe mit der Farbe 'rgba(0,0,0,0.66)'.

Texteinstellungen

Wechseln Sie dann zur Registerkarte Design und nehmen Sie die folgenden Änderungen vor, die auf die Unterkategorie Text angewendet werden:

• Textschriftart: Andika
• Schriftstärke des Textes: Fett
• Textschriftart: Großbuchstaben
• Textgröße: 78px (Desktop), 70px (Tablet), 50px (Telefon)
• Textfarbe: #c2c6f3
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte

Grenze

Öffnen Sie als Nächstes die Unterkategorie Rahmen und verwenden Sie den folgenden Rahmen:

• Rand verwenden: Ja
• Rahmenfarbe: #c2c6f3
• Rahmenbreite: 8px
• Rahmenstil: Solid

Abstand

Fahren Sie fort, fügen Sie den folgenden Rand und den folgenden Abstand hinzu:

• Oberer, rechter, unterer und linker Rand: 50px
• Obere Polsterung: 200px
• Untere Polsterung: 200px

Box Schatten

Verwenden Sie zum Schluss den folgenden Boxschatten für das Textmodul:

• Horizontale Position des Kastenschattens: 0px
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenunschärfe: 0px
• Stärke der Box-Schattenausbreitung: 50px
• Schattenfarbe: rgba(206,165,185,0.41)
• Position des Boxschattens: Äußerer Schatten

Dritte Reihe hinzufügen

Wie bereits erwähnt, verwenden wir nur einen Abschnitt für dieses Tutorial. Der Grund dafür ist, dass wir möchten, dass der Verlaufshintergrund des Abschnitts über alle verschiedenen Inhalte verteilt wird, die geteilt werden. Fahren Sie fort und fügen Sie eine neue Zeile hinzu.

Spaltenstruktur

Wählen Sie zwei Spalten für diese Zeile aus.

Größe

Aktivieren Sie dann die Option "Benutzerdefinierte Breite verwenden" und wenden Sie eine Breite von "663px" an.

Abstand

Schließlich fügen Sie einen oberen und unteren Rand von '50px' hinzu.

Erstes Textmodul

Fügen Sie der ersten Spalte der Zeile ein erstes Textmodul hinzu.

Texteinstellungen

Gehen Sie dann zur Registerkarte Design, verwenden Sie 'Andika' als Textschrift und 'Regular' als Textschriftstärke.

Klonen Sie das Textmodul und platzieren Sie es in der zweiten Spalte

Das Textmodul in der zweiten Spalte hat genau die gleichen Einstellungen, also klonen Sie das Textmodul und platzieren Sie es in der zweiten Spalte.

Vierte Zeile hinzufügen

Es bleibt noch eine Zeile übrig, die dem Abschnitt hinzugefügt werden muss, bevor das Design abgeschlossen ist.

Spaltenstruktur

Diese neue Zeile hat ebenfalls zwei Spalten.

Größe

Öffnen Sie die Zeileneinstellungen und nehmen Sie die folgenden Einstellungen vor, die für die Unterkategorie Dimensionierung gelten:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Fügen Sie dann eine obere Auffüllung von 20px hinzu.

Erstes Bildmodul

Fahren Sie fort und fügen Sie der ersten Spalte dieser letzten Zeile ein erstes Bildmodul hinzu.

Box Schatten

Und fügen Sie den folgenden Box Shadow hinzu:

• Horizontale Position des Boxschattens: -6px
• Vertikale Position des Kastenschattens: 2px
• Stärke der Box-Schattenunschärfe: 53px
• Stärke der Box-Schattenausbreitung: 10px
• Schattenfarbe: rgba(0,0,0,0.3)
• Position des Boxschattens: Äußerer Schatten

Bildmodul klonen und in zweite Spalte platzieren

Und zum Schluss klonen Sie dieses Image-Modul und platzieren es auch in der zweiten Spalte, um diese Zeile zu vervollständigen.

Ergebnis

Nachdem Sie alle Schritte ausgeführt haben, die wir diesem Beitrag hinzugefügt haben, sollten Sie das folgende Ergebnis erzielen können:

Auf dem Desktop

Auf dem Handy

Abschließende Gedanken

Die Möglichkeiten, die Sie mit Divi haben, sind endlos. Sie können Ihre Website genau so gestalten, wie Sie es möchten, indem Sie den Visual Builder verwenden, der Ihnen die Änderungen in Echtzeit anzeigt. Insbesondere für diesen Beitrag haben wir Ihnen gezeigt, wie Sie einen schönen Heldenbereich für eine persönliche Website erstellen können. Dieses Tutorial wurde mit nichts anderem als den integrierten Optionen von Divi erstellt. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!