So entwerfen Sie benutzerdefinierte Vollbild-Seitenlayouts in Divi

Vollbild-Seitenlayouts können in der Welt des Webdesigns wirklich nützlich sein. Ein Hauptvorteil eines Vollbildseitenlayouts ist die Sichtbarkeit. Bei Vollbildseiten bleibt Ihr gesamter Seiteninhalt im Browserfenster. In einer Welt, in der Benutzer schnell scrollen, kann es für den Betrachter erfrischend sein, wenn alle Ihre Inhalte von Anfang an im Browser-Ansichtsfenster enthalten sind, und kann auch bei der Konvertierung helfen.

Wenn Sie mit Divi vertraut sind, sollten Sie bereits über das Header-Modul mit voller Breite Bescheid wissen, das über eine integrierte Vollbildfunktionalität verfügt. Dies ist eine wunderbare Lösung zum Erstellen von Vollbildseiten mit minimalem Inhalt. Wenn Sie jedoch die Vorteile der Erstellung eines Vollbildseitenlayouts mit einem regulären Abschnitt mit mehreren Zeilen und Modulen nutzen möchten, ist dies der richtige Beitrag für Sie. Ich zeige Ihnen ein paar einfache Tricks, um sicherzustellen, dass Ihr Seiteninhalt (sogar die Kopf- und Fußzeile) in Ihr Browserfenster passt und dann auf verschiedene Browsergrößen skaliert.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf das endgültige Seitenlayout im Vollbildmodus, das wir in diesem Tutorial erstellen werden.

Beachten Sie, wie sich die Seitenhöhe an die Höhe des Browserfensters anpasst, damit alles an seinem Platz bleibt.

Was du brauchst

Für dieses Tutorial brauchen Sie nur Divi. Ich werde auch das Fitness-Gym-Layout-Paket verwenden, das über den Divi Builder zugänglich ist.

Abonnieren Sie unseren Youtube-Kanal

So erstellen Sie eine benutzerdefinierte Vollbildseite in Divi

Bevor ich in das Hauptdesign dieses Tutorials einsteige, dachte ich, ich zeige Ihnen die Grundidee hinter der Erstellung einer Vollbildseite in Divi. Schließlich werden Sie überrascht sein, wie einfach es sein kann.

Die Grundidee erklärt

Wählen Sie auf einer neuen Seite die leere Seitenvorlage aus. Dadurch wird verhindert, dass die Hauptkopfzeile und die untere Fußzeile auf der Seite angezeigt werden (ich zeige Ihnen später, wie Sie diese einfügen).

Stellen Sie nun den Divi Builder im Frontend bereit, um Ihre Seite von Grund auf neu zu erstellen. Fügen Sie dann einen regulären Abschnitt mit einer einspaltigen Zeile hinzu.

Fügen Sie als Nächstes ein Countdown-Timer-Modul (oder ein beliebiges Modul) zur einspaltigen Zeile hinzu.

Um es den Augen zu erleichtern, nehmen Sie die Hintergrundfarbe im Countdown-Timer heraus und fügen Sie dem Abschnitt eine Hintergrundfarbe hinzu, damit wir die Höhe des Abschnitts auf der Seite besser erkennen können. Derzeit ist die Höhe des Abschnitts relativ zur Höhe des darin enthaltenen Inhalts. In diesem Fall ist der einzige Inhalt, den wir haben, eine einzelne Zeile mit einem sing-Modul.

Öffnen Sie nun die Abschnittseinstellungen und gehen Sie zur Registerkarte Erweitert und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

min-height: 100vh;
display: flex;
flex-direction: column;

Wenn Sie die Mindesthöhe Ihres Abschnitts auf 100 vh (100 % der Höhe des Ansichtsfensters) festlegen, wird sichergestellt, dass Ihr Abschnitt das gesamte Browserfenster (oder Ansichtsfenster) umfasst. Die Eigenschaft „display:flex“ ist eine schnelle und einfache Möglichkeit, den Inhalt Ihres Abschnitts vertikal zu zentrieren.

Weitere Informationen zur Längeneinheit vh finden Sie in dieser hilfreichen Anleitung.

Sehen Sie sich Ihre Live-Seite in einem Inkognito-Browser an, um das Ergebnis zu sehen, denn wenn Sie bei WordPress angemeldet sind, wird die obere Admin-Leiste die Browserhöhe geringfügig verschieben.

Na siehst du. Das ist die Grundidee zum Erstellen eines benutzerdefinierten Vollbildseitenlayouts in Divi.

Einbinden der Kopf- und Fußzeile in Ihre Vollbildseite.

Wenn Sie die Kopfzeile und die untere Fußzeile in die Vollbildseite einfügen möchten, müssen Sie eine kleine Anpassung vornehmen. Ändern Sie zunächst Ihre Seitenvorlage im Backend Ihres Seiteneditors zurück in die Standardvorlage.

Das Einschließen der Kopf- und Fußzeile fügt Ihrem Browser-Ansichtsfenster zusätzliche Höhe hinzu, sodass der Abschnitt nicht mehr so ​​perfekt passt, wie er es einmal getan hat. Dies liegt daran, dass Ihre Seite jetzt aus einer Abschnittshöhe besteht, die 100 % der Ansichtsfensterhöhe PLUS der Höhe Ihrer Kopf- und Fußzeilenleiste entspricht. Das ist zu viel. Um dies zu beheben, müssen wir das benutzerdefinierte CSS in unserem Abschnitt wie folgt anpassen:

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

Der einzige Unterschied ist der Mindesthöhenwert. Jetzt gibt es eine Berechnung, die die zusätzliche Höhe (in Pixel) der Kopf- und Fußzeilenleiste zusammen berücksichtigt.

Die 132px basiert auf der Summe der Standardhöhe der Kopfzeile (80px) und der Standardhöhe der unteren Fußzeile (53px).

Nachdem wir nun ein grundlegendes Verständnis dafür haben, wie eine benutzerdefinierte Vollbildseite in Divi erstellt wird, tauchen wir in ein komplexeres Design ein.

Erstellen eines vollständigen Vollbild-Seitendesigns

Um mit diesem Design zu beginnen, erstellen Sie eine neue Seite, geben Sie Ihrer Seite einen Titel und stellen Sie den Divi Builder bereit. Wählen Sie die Option zum Auswählen eines vorgefertigten Layouts und wählen Sie im Popup Aus Bibliothek laden die Seite Fitness-Studio-Layout. Klicken Sie dann auf , um die Preisseite zu verwenden.

Sobald das Layout in den Builder geladen ist, klicken Sie auf die Schaltfläche zum Erstellen im Frontend (The Visual Builder) und Sie können beginnen.

Erstellen eines neuen Abschnitts

Das vorgefertigte Layout ist dazu da, um das Design anzukurbeln. Wir werden diese Layout-Design-Elemente unterwegs verwenden und den Rest des Layouts löschen, wenn wir fertig sind. Um den Hauptabschnitt für unser Vollbild-Layout zu erstellen, erstellen Sie einen neuen regulären Abschnitt und ziehen Sie ihn ganz nach oben auf die Seite. Fügen Sie dann der Zeile eine Struktur aus einem Viertel, einem Viertel, einer halben Spalte hinzu. Dies wird die Grundlage unserer Vollbildseite sein.

Hinzufügen von Modulen zu Ihren Spalten

Wählen Sie mit Multiselect (Strg/cmd gedrückt halten und klicken) alle Module in den ersten beiden Zeilen im ersten Abschnitt des Layouts aus und ziehen Sie sie in die erste Spalte des neuen Abschnitts oben auf der Seite.

Verwenden Sie als Nächstes Multiselect, um alle Module in der dritten Zeile desselben ersten Abschnitts des Layouts zu kopieren und in die zweite Spalte des neuen Abschnitts oben auf der Seite einzufügen.

Der Text wird aufgrund des weißen Hintergrunds ausgeblendet, die Hintergrundfarbe werden wir jedoch später ändern.

Fügen Sie in der dritten Spalte ein Slider-Modul hinzu. Dieser Schieberegler erstreckt sich schließlich über die gesamte Höhe des Bildschirms, aber jetzt richten wir nur den Inhalt ein. Löschen Sie in den Slider-Einstellungen eine der beiden standardmäßig vorhandenen Standardfolien und klicken Sie dann auf , um die Einstellungen der einzelnen Folie zu öffnen.

Fügen Sie in den Folieneinstellungen ein Hintergrundbild hinzu, um sicherzustellen, dass es groß genug ist, um die volle Höhe des Browsers zu überspannen.

Das kümmert sich um alle unsere Module, die wir jetzt brauchen. Wir werden die Designeinstellungen später noch einmal aufrufen, aber jetzt passen wir unsere Zeile an.

Anpassen der Zeileneinstellungen

Öffnen Sie die Zeileneinstellungen und fügen Sie zunächst die Hintergrundfarbe zu Spalte 2 hinzu:

Spalte 2 Hintergrundfarbe: #2a2e40

Wechseln Sie zur Registerkarte Design und aktualisieren Sie Folgendes:

Machen Sie diese Zeile in voller Breite: JA
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: JA
Benutzerdefiniertes Padding: 0px oben, 0px unten

Anpassen der Abschnittseinstellungen

Das einzige, was an dieser Stelle für unsere Abschnittseinstellungen erforderlich ist, ist, alle Standardpolster zu entfernen, aber ich dachte, es wäre schön, einen Abschnittsteiler hinzuzufügen, der den oberen Rand der ersten Spalte umrahmt. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: #2a2e40
Höhe des oberen Teilers: 8vw
Horizontale Wiederholung des oberen Teilers: 0,8x
Top Divider Flip: vertikal und horizontal

Benutzerdefiniertes Padding: 0px oben, 0px unten

Da die Trennlinie so eingestellt ist, dass sie unterhalb des Abschnittsinhalts angezeigt wird, wird sie hinter dem Schieberegler in Spalte 3 versteckt und in Spalte 2 nicht angezeigt, da sie der Farbe des Spaltenhintergrunds entspricht. Dadurch entsteht ein schönes rahmendes Gestaltungselement für Spalte 1.

Löschen Sie den Rest des vorgefertigten Layouts

An dieser Stelle ist in unserem oberen Abschnitt alles für unser Vollbildseitenlayout vorhanden, sodass wir alle verbleibenden Abschnitte löschen können, die mit dem vorgefertigten Layout geliefert wurden. So sollte Ihre Seite bisher aussehen.

Jetzt können wir mit der Anpassung unserer Seite an den Vollbildmodus beginnen.

Hinzufügen von benutzerdefiniertem CSS, um die Seite als Vollbild anzuzeigen

Im grundlegenden Beispiel am Anfang dieses Artikels habe ich das benutzerdefinierte CSS direkt zum Abschnitt hinzugefügt. Um jedoch sicherzustellen, dass unsere Vollbildfunktionalität nur für den Desktop gilt (und auf das Standard-Styling auf Mobilgeräten zurückgreift), werde ich sie dem CSS unter den Seiteneinstellungen hinzufügen. Dadurch kann ich externes CSS hinzufügen, das nur für diese Seite gilt, aber auch eine Medienabfrage hinzufügen, die das Styling nur auf den Desktop beschränkt.

Öffnen Sie im Einstellungsmenü unten im Frontend-Builder die Seiteneinstellungen. Geben Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS ein:

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

Für diejenigen unter Ihnen, die mit CSS nicht vertraut sind, beachten Sie, dass der Code von einer Medienabfrage umschlossen wird, die das Styling anwendet, wenn der Browser mindestens 980px breit ist. Mit den Klammern enthält das erste Snippet eine CSS-ID namens „fullsection“, gefolgt von einer CSS-ID namens „fullslide“. Es ist wichtig, sich diese beiden CSS-IDs zu merken, da wir sie unserem Abschnitt und unserem Schieberegler hinzufügen müssen. Sobald wir dies getan haben, wird die CSS-Datei „height: calce(100vh – 133px)“ angewendet, sodass beide im Vollbildmodus angezeigt werden (über die gesamte Höhe des Browserfensters).

Das zweite Snippet wendet die display flex-Eigenschaft auf den Abschnitt an, wodurch der gesamte Abschnittsinhalt vertikal zentriert wird. Weitere Informationen hierzu finden Sie in unserem Beitrag zum vertikalen Ausrichten von Inhalten in Divi.

Das dritte Snippet ist komplett optional. Dadurch wird die untere Fußzeile einfach auf volle Breite angepasst, damit sie etwas besser zum Design passt und auch dem Header-Stil in voller Breite entspricht, den wir hinzufügen werden.

Nachdem Sie nun das externe CSS eingerichtet haben, können wir unsere CSS-IDs zu unserem Abschnitt und unserem Schieberegler hinzufügen. Gehen Sie zu den Abschnittseinstellungen und fügen Sie die folgende CSS-ID hinzu:

CSS-ID: fullsection

Öffnen Sie nun die Slider-Modul-Einstellungen für den Slider in Spalte 3 und fügen Sie die folgende CSS-ID hinzu:

CSS-ID: Vollbild

Letzter Schliff

An diesem Punkt ist die Vollbildseitenfunktionalität vorhanden und sollte funktionieren. Sie können es in einem Inkognito-Browser überprüfen, um sicherzugehen. Es bleiben nur noch ein paar letzte Handgriffe.

Fügen Sie Abstand zu unseren Spalten hinzu

Öffnen Sie Ihre Zeileneinstellungen, um den oberen Rand von Spalte 1 und Spalte 2 wie folgt hinzuzufügen:

Spalte 1 benutzerdefinierte Polsterung: 12vh oben, 1vw links, 1vw rechts
Spalte 2 Benutzerdefinierte Polsterung: 12vh oben, 1vw links, 1vw rechts

Beachten Sie, dass ich die Längeneinheit vh für meine oberen Padding-Werte verwendet habe. Dadurch kann der Abstand mit der Höhe des Ansichtsfensters skaliert werden, wodurch mehr Abstand erzeugt wird, wenn das Browserfenster größer wird, und weniger Abstand erzeugt, wenn der Browser kürzer wird. Ich habe die Längeneinheit vw (Viewport width) für meine linken und rechten Padding-Werte verwendet, damit die Padding entsprechend der Breite des Browsers skaliert wird.

Fügen Sie vh-Längeneinheiten zu großem Text hinzu, um den Anzeigeraum zu maximieren

Wie Sie sehen, gibt es einige Module mit wirklich großem Text, die sich nicht wirklich mit dem Browserfenster skalieren. Um dies zu beheben, können wir die Textgröße auf eine Vh-Längeneinheit einstellen. Dadurch kann der Text auf kürzeren Browserbildschirmen verkleinert werden.

Öffnen Sie die Einstellungen des Textbausteins oben in Spalte 1 und aktualisieren Sie die h1-Kopfzeilentextgröße auf 7vh (nicht vw).

Öffnen Sie als Nächstes die Einstellungen des Textmoduls oben in Spalte 2 und aktualisieren Sie die Textgröße von Überschrift 2 auf 6vh.

Slider-Design aktualisieren

Um das Design zu vervollständigen, können Sie das Schaltflächendesign der Schaltfläche in Spalte 2 kopieren und in die Schaltflächenstile des Schiebereglers einfügen. Öffnen Sie dazu die Schaltflächeneinstellungen für die Schaltfläche in Spalte 2 und klicken Sie mit der rechten Maustaste auf die Schaltflächenoptionskategorie und klicken Sie auf „Schaltflächenstile kopieren“.

Öffnen Sie danach die Schiebereglereinstellungen und fügen Sie die Schaltflächenstile in die Kategorie Schaltflächenoptionen des Schiebereglers ein.

Sie können den einzelnen Folien auch eine Hintergrundüberlagerung hinzufügen.

Anpassungen der Kopf- und Fußzeilenleiste

Sie erinnern sich vielleicht, dass wir bereits ein kleines Snippet mit benutzerdefiniertem CSS hinzugefügt haben, das unsere Fußzeile auf volle Breite erweitert hat. Dies war in der Erwartung, dass unsere primäre Menüleiste auch die volle Breite hat. Um Ihrer primären Menüleiste die volle Breite zu geben, gehen Sie zum WordPress-Dashboard und navigieren Sie zu Divi > Theme Customizer > Header & Navigation > Primary Menu Bar. Aktivieren Sie dann die Option Volle Breite erstellen.

Da wir unsere untere Fußzeile auf unserer Vollbildseite anzeigen, können wir die Hintergrundfarbe der unteren Leiste an das Design anpassen. Bleiben Sie im Theme Customizer und navigieren Sie zu Footer > Bottom Bar. Setzen Sie dann die Hintergrundfarbe auf #2a2e40.

Veröffentlichen Sie dann Ihre Änderungen.

Das Endergebnis

Hier ist das endgültige Design. Beachten Sie, wie gut alles in das Browserfenster passt.

Und sehen Sie sich an, wie es aussieht, wenn Sie den Browser an verschiedene Größen anpassen.

Und vergessen Sie nicht, da wir unser benutzerdefiniertes CSS nur auf Browserbreiten von mehr als 980px angewendet haben, wird das Design auf mobilen Geräten wieder normal.

Hier auf Tablet und Smartphone.

Abschließende Gedanken

Das Erstellen eines benutzerdefinierten Vollbild-Seitenlayouts in Divi ist nicht so überwältigend, wenn Sie wissen, wie Sie die Höhe Ihres Abschnitts mit ein paar CSS-Schnipseln richtig an die Höhe Ihres Browsers anpassen. Aber sobald Sie das erledigt haben, können Sie im Divi Builder unzählige Vollbild-Seitendesigns erstellen. Achten Sie nur darauf, den Inhalt auf ein Minimum zu beschränken, wenn Sie vorhaben, alles im Browserfenster sichtbar zu halten.

Diese Art von Design eignet sich gut für persönliche Websites, Werbeangebote und alle Arten von Zielseiten. Es ist auch eine großartige Lösung für Seiten mit wenig Inhalt und Sie möchten vermeiden, dass die untere Fußzeile in der Mitte der Seite angezeigt wird.

Und vergessen Sie nicht die Option, das Fullwidth Header-Modul von Divi zu verwenden. Obwohl Sie nicht die gleiche Flexibilität wie die in diesem Beitrag verwendete Methode haben, ist sie perfekt für Seiten mit minimalem Inhalt.

Hier sind ein paar weitere Beiträge, die Ihnen zum Thema Vollbildseiten gefallen könnten.

• So erstellen Sie Vollbild-Abschnitte mit Top- und Bottom-Scroll-Links mit Divi
• Entwerfen Sie ein einzigartiges Divi-Layout im Vollbildmodus mit einer animierten Bildlauftaste
• und mehr

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

Danke schön!