So fügen Sie der unteren Fußzeile von Divi kreative Hintergrunddesigns hinzu

Die untere Fußzeile von Divi ist ein kleiner, aber bedeutender Teil Ihrer Website. Und bei bestimmten Seitenlayouts kann es erforderlich sein, dieser unteren Leiste einen kreativen letzten Schliff zu verleihen.

In diesem Tutorial zeige ich Ihnen, wie Sie benutzerdefinierte Hintergrunddesigns für die untere Fußzeile von Divi hinzufügen. Indem Sie die Standardhintergrundfarbe der unteren Fußzeile entfernen und einem Abschnitt benutzerdefinierten Rand hinzufügen, können Sie die Designeinstellungen eines Abschnitts nutzen, um coole Hintergrunddesigns zu erstellen.

Lass uns anfangen.

Eine kurze Vorschau

Hier ist ein kleiner Vorgeschmack auf einige Beispieldesigns, die Sie mit diesem Tutorial erstellen können.

Anpassen der unteren Fußzeile im Theme Customizer

Bevor wir benutzerdefinierte Hintergründe hinter unserer unteren Fußzeile hinzufügen können, müssen wir die verwendete Standardhintergrundfarbe entfernen.

Gehen Sie zum Theme-Anpasser und navigieren Sie zu Fußzeile > untere Leiste. Ändern Sie dann die Hintergrundfarbe so, dass sie vollständig transparent ist.

Möglicherweise bemerken Sie in der Vorschau nicht viel, da sich hinter der unteren Leiste immer noch eine Hintergrundfarbe für die Fußzeile befindet. Die Hintergrundfarbe der Fußzeile kann unter Fußzeile > Layout geändert werden, aber es ist eine gute Idee, diese Hintergrundfarbe als Fallback aktiv zu lassen. Der benutzerdefinierte Hintergrund wird der unteren Leiste mit einem Abschnitt auf Seite für Seite hinzugefügt. Wenn Sie diesen Hintergrund haben, wird sichergestellt, dass Ihr Inhalt der unteren Leiste einen Hintergrund auf Seiten hat, die keinen benutzerdefinierten Hintergrund haben.

Sie können auch die Textfarbe der unteren Leiste und die Farbe des sozialen Symbols in Weiß ändern, wenn Sie ein dunkleres Hintergrunddesign planen. Dadurch wird sichergestellt, dass der Inhalt besser lesbar ist.

Erstellen des Abschnittshintergrunddesigns für die untere Leiste

Da die untere Leiste der Fußzeile jetzt einen transparenten Hintergrund hat, können wir unseren Abschnittshintergrund gestalten und hinter der Leiste platzieren.

Falls noch nicht geschehen, erstellen Sie eine neue Seite und wählen Sie „Build from Scratch“. Fügen Sie dann ein einspaltiges Layout für die Abschnittszeile ein.

Es ist nicht erforderlich, der Zeile ein Modul hinzuzufügen, da wir nur den Abschnitt und die Zeile für die Hintergrunddesigns benötigen.

Gehen Sie als Nächstes zu den Zeileneinstellungen und fügen Sie wie folgt einige Abstände hinzu:

Benutzerdefinierter Rand: 0px oben, 0px unten
Benutzerdefinierte Polsterung (Desktop): 80px oben, 80px unten
Benutzerdefinierte Polsterung (Tablet): 100 Pixel oben, 100 Pixel unten

Dieser Abstand wird benötigt, um unserem Abschnitt eine gewisse Höhe zu verleihen und gleichzeitig den Platz zu erhalten, der für die Abschnittsteiler benötigt wird, die wir für unser Hintergrunddesign hinzufügen.

Gehen Sie nun zu den Abschnittseinstellungen und aktualisieren Sie den Abstand wie folgt:

Benutzerdefinierter Rand (Desktop): -55px Unten
Benutzerdefinierter Rand (Tablet): -94px Unten
Benutzerdefiniertes Padding: 0px oben, 0px unten

Der untere Rand von -55px zieht die untere Leiste in den Abschnittsbereich, sodass jedes Design, das wir unserem Abschnitt hinzufügen, hinter unserer unteren Leiste sitzt. Die untere Leiste ist auf dem Desktop standardmäßig 54px hoch und auf dem Tablet etwa 94px hoch. Daher benötigen Sie für das Tablett einen größeren negativen Rand.

Das Weglassen der oberen und unteren Polsterung maximiert den Platzbedarf für den Abschnittsteiler, den wir später hinzufügen werden.

Hinzufügen des unteren Teilers

Fügen Sie als Nächstes dem Abschnitt eine untere Trennlinie hinzu, um Ihren Fußzeileninhalt wie folgt einzurahmen:

Unterteiler-Stil: siehe Screenshot
Teilerfarbe: #121212
Teilerhöhe: 120px (Desktop), 150px (Tablet), 150px (Smartphone)
Teiler Horizontale Wiederholung: 0,9x (Desktop), 0,5x (Tablet), 0,5x (Smartphone)
Teiler Flip: vertikal

Im Moment wird der Inhalt der unteren Leiste (der Text und die sozialen Symbole) hinter der Trennlinie versteckt, obwohl die Trennlinienanordnung auf unterhalb des Abschnittsinhalts eingestellt ist. Dies liegt daran, dass die untere Fußzeile technisch gesehen kein Teil des Abschnittsinhalts ist. Um dies zu beheben, müssen wir unserem Abschnitt einen benutzerdefinierten Z-Index hinzufügen, sodass er sich hinter der unteren Fußzeile befindet.

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS-Snippet zum Hauptelement hinzu:

z-index: 0;

Jetzt befindet sich der Inhalt der Fußzeile über Ihrem Abschnitt und Sie haben ein schönes Hintergrunddesign, das Ihre Fußzeile umrahmt.

Und es wird sich auch auf dem Handy gut anpassen.

Mit dieser Grundstruktur haben Sie ein schönes Abschnittsdesign, auf dem Sie aufbauen können. In diesem Sinne speichern Sie diesen Abschnitt in Ihrer Bibliothek, damit Sie diese Struktur als Ausgangspunkt für das Durchsuchen von aktuellen Designs verwenden können.

Jetzt sind Sie bereit, neue Designs zu entdecken. Sie können den unteren Teiler in verschiedene Stile und Farben ändern, um unzählige Hintergrundrahmendesigns zu erstellen. Je nach gewähltem Teilerstil müssen Sie möglicherweise die Höhe des Teilers und die horizontalen Wiederholungswerte anpassen.

Hier sind ein paar Beispiele.

Verwenden des oberen Teilers mit einem benutzerdefinierten Hintergrundverlauf

Die Verwendung eines einzelnen unteren Teilers als Hintergrundrahmendesign für Ihre untere Fußzeile ist etwas einschränkend. Wenn Sie jedoch einen oberen Teiler als Rahmendesign verwenden, können Sie einen benutzerdefinierten Hintergrundverlauf für Ihren Abschnitt verwenden. Dies öffnet neue Türen zum Erkunden.

Gehen Sie zu Ihren Abschnittseinstellungen und stellen Sie den unteren Trennerstil auf Keine ein. Fügen Sie dann einen Hintergrundverlauf als Abschnittshintergrund hinzu.

Jetzt können Sie Ihrem Abschnitt einen Top-Trennungsstil hinzufügen, um einen brandneuen Look zu kreieren.

Hier sind einige Beispieldesigns, die nur durch Ändern des Farbverlaufshintergrunds und des Teilerstils möglich sind.

Kombinieren von Trennwänden mit Hintergrundverläufen für ein mehrfarbiges Rahmendesign

Jetzt ist es an der Zeit, es eine Kerbe zu geben. Denken Sie daran, dass es viele Möglichkeiten gibt, einzigartige Hintergrunddesigns innerhalb von Abschnitten und Reihen zu erstellen. In diesem letzten Beispiel zeige ich Ihnen, wie Sie diese Funktionen kombinieren, um ein völlig einzigartiges Design zu erstellen.

Um dieses Design zu starten, fahren Sie fort und verwenden Sie den Abschnitt, den Sie in Ihrer Bibliothek gespeichert haben, indem Sie auf klicken, um einen neuen Abschnitt im visuellen Builder hinzuzufügen, die Registerkarte "Aus Bibliothek hinzufügen" auswählen und das Abschnittslayout auswählen.

Sobald der Abschnitt zur Seite hinzugefügt wurde, können wir ihn anpassen.

Gehen Sie zunächst zum Abschnitt Einstellungen und aktualisieren Sie Folgendes:

Hintergrundfarbe links: #29c4a9
Hintergrundfarbe links: #2b87da

Verlaufsrichtung: 90deg
Startposition: 50%
Endposition: 0%

Fügen Sie nun einen oberen Teiler wie folgt hinzu:

Top Divider Style: siehe Screenshot
Teilerfarbe: #ffffff
Teilerhöhe: 120px (Desktop), 150px (Tablet), 150px (Smartphone)
Teiler Horizontale Wiederholung: 0,9x (Desktop), 0,5x (Tablet), 0,5x (Smartphone)
Teiler Flip: vertikal

Diese Teilereinstellungen spiegeln den unteren Teiler vollständig wider, sodass eine Umrandung um den unteren Teiler erstellt wird. Da der Teiler selbst weiß ist, entsteht der Eindruck, dass der Hintergrundverlauf eine Verlängerung des unteren Teilers ist.

Gehen Sie nun zu den Zeileneinstellungen und fügen Sie einen Hintergrundverlauf wie folgt hinzu:

Hintergrundfarbe links: #df52ff
Hintergrundfarbe links: #2b87da

Verlaufsrichtung: 90deg
Startposition: 50%
Endposition: 0%

Um die Breite jedes Farbsegments für Ihren Hintergrund anzugleichen, geben Sie der Zeile eine benutzerdefinierte Breite von 50 %.

Hier ist das endgültige Design!

Abschließende Gedanken

Ein benutzerdefiniertes Hintergrunddesign für die untere Fußzeile von Divi kann eine erfrischende Ergänzung für Ihre Seite sein. Es sind lediglich einige Anpassungen an einem Abschnitt am unteren Rand der Seite erforderlich. Leider ist das Design auf eine einzelne Seite beschränkt und könnte nicht auf der gesamten Site angewendet werden. Aus diesem Grund wird die Hintergrundfarbe der Fußzeile als Fallback verwendet. Sobald Sie den Abschnitt jedoch in Ihrer Bibliothek gespeichert haben, können Sie ihn problemlos auf einer beliebigen Seite ablegen. Sie können sogar jedes unserer vorgefertigten Layouts hinzufügen, um es in Ihrem nächsten Projekt zu verwenden. Alles, was Sie tun müssen, ist, den Abschnitt ganz unten auf Ihrer Seite hinzuzufügen. Hoffentlich finden Sie es nützlich!

Sie könnten auch daran interessiert sein, Ihr Navigationsmenü mit einer ähnlichen Technik zu gestalten.

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

Danke schön!