Erstellen eines Vollbild-Layouts mit Parallax-Hintergrundbildübergängen in Divi

Das Erstellen einer Webseite mit Vollbild-Abschnitten ist eine großartige Möglichkeit, die Benutzererfahrung mit glatten Übergängen und sauberen Abschnitts-Layouts zu verbessern, die die volle Breite und Höhe des Browsers umfassen. Normalerweise funktioniert dies gut, um Produkte oder Dienstleistungen abschnittsweise zu präsentieren, sodass sich der Benutzer beim Scrollen auf der Seite leicht auf jeden einzelnen konzentrieren kann. Diese Art der Gestaltung funktioniert auch sehr gut mit Hintergrundbildern, die den Inhalt ansprechen und einen schönen gestalterischen Akzent setzen. Und wenn Sie ein wenig kreativ werden möchten, können Sie Ihren Hintergrundbildern einige Parallax-Funktionen hinzufügen, um beim Scrollen von einem Vollbildbereich zum anderen ziemlich einzigartige Übergänge zu erstellen.

In diesem Tutorial zeige ich Ihnen, wie Sie einem Vollbild-Seitenlayout in Divi einige Parallax-Hintergrundbildübergänge hinzufügen. Der Prozess ist einfach und damit können Sie einige leistungsstarke Ergebnisse erzielen.

Vorgeschmack

Sehen Sie sich einige der Designs an, die wir gemeinsam erstellen werden.

Einstieg

Abonnieren Sie unseren Youtube-Kanal

Für dieses Tutorial benötigen Sie lediglich Divi und eine Sammlung von Bildern, die Sie für die verschiedenen Produktbilder und Hintergrundbilder verwenden können. Ich verwende die Bilder der Bilder aus unserem Juice Shop Layout Pack. Sie können die ZIP-Datei mit diesen Bildern am Ende des Blogbeitrags mit diesem Layoutpaket herunterladen. Klicken Sie einfach auf die Schaltfläche „Vollaufgelöste Image-Assets herunterladen“.

Vorbereiten Ihrer neuen Seite

Sobald Sie Ihre Bilder bereit haben. Erstellen Sie eine neue Seite und geben Sie Ihrer Seite einen Titel. Stellen Sie dann den Divi Builder bereit und wählen Sie „Build from Scratch“. Klicken Sie dann auf die Schaltfläche, um das Frontend aufzubauen.

Jetzt sind Sie bereit zu rollen!

Die Grundidee

Die Grundidee hinter diesem Konzept besteht darin, mehrere Abschnitte voller Breite mit jeweils einem Kopfmodul voller Breite zu stapeln. Jedes Header-Modul erhält eine benutzerdefinierte Breite, die links, zentriert oder rechts ausgerichtet werden kann, während der Abschnittshintergrund freigelegt wird. Dann erhält jeder Abschnitt ein Hintergrundbild mit einer bestimmten Parallaxenmethode. Dadurch werden beim Scrollen auf der Seite verschiedene Hintergrundbildübergangseffekte erstellt.

So geht's.

Erstellen des Header-Abschnitts in voller Breite

Zuerst müssen Sie einen neuen Abschnitt mit voller Breite erstellen und dann dem Abschnitt ein Headermodul mit voller Breite hinzufügen.

Aktualisieren Sie die Header-Einstellungen mit voller Breite mit einigen Inhalten wie folgt:

Titel: „Tomatensaft“
Button #1 Linktext: „Siehe Rezept“
Inhalt: „Ihr Inhalt geht hier. Bearbeiten oder entfernen Sie diesen Text inline oder in den Modulinhaltseinstellungen.“
Logo-Bild: [siehe Screenshot] (Bild ist 240 x 300 Pixel groß)

Aktualisieren Sie nun Ihr Header-Design wie folgt:

Hintergrundfarbe: rgba(255,255,255,0.92)

Vollbild machen: JA

Scroll-Down-Taste anzeigen: JA
Symbol: siehe Screenshot
Symbolfarbe nach unten scrollen: #222222

Textfarbe: Dunkel

Titelüberschriftsebene: H2
Titelschriftart: Raleway
Titeltextgröße: 50px

Körperschriftart: Lato
Körpertextgröße: 16px
Abstand des Hauptbuchstabens: 1px

Button One Textgröße: 16px
Schaltfläche fOne Textfarbe: #ffffff
Button One Hintergrundfarbe: #222222
Knopf Eins Randradius: 50px
Tastenabstand ein Buchstabe: 2px
Button One Schriftstil: TT

Breite: 45 % (Desktop), 60 % (Tablet), 100 % (Smartphone)

Einstellungen speichern.

Die wichtigsten Gestaltungselemente sind hier die Option „Vollbild erstellen“ und die „Breite: 45%“. Dadurch kann der Abschnitt jederzeit die volle Breite und Höhe des Browserfensters umfassen. Und die benutzerdefinierte Breite verkleinert das Header-Modul, um den Abschnittshintergrund anzuzeigen, den wir als nächstes hinzufügen werden.

Abschnittshintergrund hinzufügen

Nachdem wir unser Header-Modul entworfen haben, können wir unser Abschnittshintergrundbild hinzufügen. Gehen Sie zu Ihren Abschnittseinstellungen in voller Breite und fügen Sie ein Hintergrundbild hinzu. Stellen Sie sicher, dass es groß genug ist, um die volle Breite und Höhe des Browserfensters zu umfassen. Wählen Sie dann die Verwendung der CSS Parallax-Methode aus.

Duplizieren der Abschnitte

Da in jedem Abschnitt neue Inhalte angezeigt werden, müssen wir unseren Abschnitt in voller Breite dreimal duplizieren, sodass Sie auf Ihrer Seite insgesamt vier Abschnitte mit jeweils einem Header-Modul haben.

Erstellen eines statischen Hintergrundbilds unter Verwendung des gleichen Abschnitts-Hintergrundbilds mit CSS Parallax

Da wir nun über vier identische Abschnitte verfügen, können wir den Header-Inhalt in voller Breite mit neuen Logobildern und Titeln aktualisieren, um ein besseres Gefühl für das Design zu bekommen. Wenn wir jedoch das gleiche Hintergrundbild mit CSS-Parallaxe für alle vier Abschnitte beibehalten, ist das Ergebnis ein statisches Hintergrundbild, das an Ort und Stelle bleibt, wenn Sie zu den verschiedenen Vollbildabschnitten scrollen. Und da wir in jeder Kopfzeile eine Schaltfläche zum Herunterscrollen verwenden, haben Benutzer die Möglichkeit, auf den Pfeil zu klicken, um sauber zu jedem neuen Abschnitt zu blättern.

Sehen Sie sich das Ergebnis an.

Verwenden verschiedener Hintergrundbilder mit CSS Parallax Transitions

Wenn Sie für jeden Abschnitt ein anderes Hintergrundbild (mit CSS-Parallaxe) verwenden, wird das Design beim Scrollen verändert. Da wir für unsere vier Abschnittshintergrundbilder bereits CSS-Parallaxe aktiviert haben, müssen wir nur jedes der Bilder in etwas anderes ändern. In diesem Fall füge ich einfach eine große Version des Produkts als Hintergrundbild für jeden Abschnitt hinzu.

Sobald Sie für jeden der vier Abschnitte ein anderes Hintergrundbild (mit CSS Parallax) haben, sehen Sie sich das Ergebnis an.

Verwenden verschiedener Hintergrundbilder mit echten Parallax-Übergängen

Wenn Sie den Übergangseffekt für das Hintergrundbild ändern möchten, können Sie die Parallax-Methode für alle vier Abschnittshintergrundbilder von CSS auf True Parallax ändern.

Öffnen Sie eine der Abschnittseinstellungen und ändern Sie die CSS-Methode auf „True Parallax“.

Dann müssen Sie dasselbe für die verbleibenden drei Abschnitte tun. Oder Sie können einfach mit der rechten Maustaste auf die Option Parallax Method klicken und „Extend Parallax Method“ für alle Header-Module in voller Breite auf der Seite auswählen.

Wenn Sie fertig sind, überprüfen Sie den Übergangseffekt des Hintergrundbilds.

Erkunden verschiedener Modulausrichtungen

Das Ändern der Ausrichtung Ihres Header-Moduls in voller Breite ist ein Kinderspiel. Da unser Header-Modul in voller Breite eine benutzerdefinierte Breite von 45 % hat, können Sie die Modulausrichtung ganz einfach nach links, mittig oder rechts anpassen, um ein anderes Layout zu erhalten. Besonders gut gefällt mir die zentrierte Ausrichtung mit statischem Hintergrund.

Um das Modul zu Zentrieren, öffnen Sie die voller Breite Header - Einstellungen und die Modulausrichtung aktualisieren , um Zentriert.

Um das Modul rechts auf der Seite auszurichten, aktualisieren Sie einfach die Modulausrichtung auf rechtsbündig.

Sobald Sie sich für eine Ausrichtung entschieden haben, können Sie den Stil „Modulausrichtung“ einfach auf den Rest der Header-Module auf der gesamten Seite ausweiten.

Hier ist ein Beispiel für eine zentrierte Ausrichtung mit einem statischen Hintergrund (gleiches Hintergrundbild für jedes mit CSS-Parallaxe).

Hier ist ein Beispiel für eine zentrierte Ausrichtung mit verschiedenen Hintergrundbildern mithilfe der CSS Parallax-Methode.

Hier ist ein Beispiel für die zentrierte Ausrichtung mit verschiedenen Hintergrundbildern mit der True Parallax-Methode.

Hier ist ein Beispiel für eine richtige Ausrichtung mit verschiedenen Hintergrundbildern unter Verwendung einer Kombination aus CSS und True Parallax.

Abschließende Gedanken

Diese Hintergrundbildübergänge sehen wirklich toll aus, wenn sie in Kombination mit Vollbild-Abschnitten und benutzerdefinierten Header-Modulen verwendet werden. Die Funktionalität ist sauber und das Design ist dezent und einzigartig. Wenn überhaupt, ist es eine schnelle und einfache Möglichkeit, statische Hintergründe für Ihre Inhalte zu erstellen. Fühlen Sie sich frei, fortgeschrittenere Designs mit Hintergrundverläufen, Schriftarten und Bildern zu erkunden!

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!