So machen Sie Ihre Divi-Fußzeile klebrig

In diesem Tutorial zeigen wir Ihnen genau, wie Sie die Fußzeile auf Ihrer Divi-Website verkleben. Die Verwendung einer klebrigen Fußzeile kann eine der Anforderungen sein, die Sie beim Entwerfen einer Website für einen Kunden erhalten, oder eine Anforderung, die Sie beim Erstellen einer eigenen Website haben. Wir zeigen Ihnen zwei Möglichkeiten, die Ihre Fußzeile klebrig machen. Der erste Weg führt über CSS-Code und der zweite über jQuery-Code. Beide Wege funktionieren, aber es hängt alles davon ab, welche Sie bevorzugen, um diesen klebrigen Effekt für Ihre Website zu erzielen.

Das Hinzufügen einer Sticky-Fußzeile zu Ihrer Website ist derzeit nicht automatisch möglich im Divi-Builder. Deshalb zeigen wir Ihnen, wie Sie ohne großen Aufwand genau das gewünschte Ergebnis erzielen. Das einzige, was Sie tun müssen, ist diesem Beitrag Schritt für Schritt zu folgen, einige Codezeilen zu kopieren und einzufügen und an der richtigen Stelle einzufügen.

Warum eine klebrige Fußzeile verwenden?

Eine klebrige Fußzeile wird normalerweise aus einem Hauptgrund verwendet; wenn Sie eine oder mehrere Seiten auf Ihrer Website haben, für die nicht genügend Inhalt verfügbar ist, um einen ganzen Bildschirm auszufüllen. Sie können natürlich sicherstellen, dass Sie genügend Inhalt auf einer Seite haben, aber wenn dies keinen Mehrwert für die Seite bringt; es gibt keine Notwendigkeit, es zu tun.

Falls nicht genügend Inhalt vorhanden ist, um den gesamten Bildschirm auszufüllen, wird die Seite direkt nach dem Ende des Inhalts eine schwebende Fußzeile haben. Das sieht normalerweise nicht gut aus und ist nicht das gewünschte Ergebnis. Glücklicherweise können Sie eine klebrige Fußzeile verwenden, um die schwebende Fußzeile loszuwerden. Der Sticky Footer sorgt dafür, dass der Footer unten auf der Seite bleibt, ohne unnötigen Platz zu schaffen. Die Seitenlänge bleibt also gleich und jedes Mal, wenn Sie die Größe Ihres Fensters anpassen, passt sich die Fußzeile an den Bildschirm an.

Hier haben Sie ein Bild einer kurzen Seite, die keine klebrige Fußzeile hat:

Und hier ist das gleiche Bild dieser Seite, nachdem eine klebrige Fußzeile hinzugefügt wurde:

Unterschied zwischen klebriger und fester Fußzeile

Nicht jeder entscheidet sich dafür, eine Fußzeile auf seiner Website zu verwenden, aber wenn sie es tun; Es gibt viele Möglichkeiten, es zu stylen. Es hängt alles davon ab, wie die Struktur Ihrer Website ist und ob Sie stattdessen eine "manuelle" und anders gestaltete Fußzeile einfügen möchten, die stattdessen mit dem Divi-Builder erstellt wurde.

Wenn Sie jedoch eine Standard-Fußzeile verwenden, können Sie wählen, wie Sie sie gestalten und wie sie auf Ihrer Website positioniert werden soll. Die drei Hauptpositionen, die eine Fußzeile auf einer Website einnehmen kann, sind schwebend, fest und klebend.

Beim Vergleich der klebrigen und der festen Fußzeile miteinander; Sie mögen auf den ersten Blick gleich aussehen, sind es aber nicht. Der feste Footer ist beim Scrollen durch eine Seite Ihrer Website immer sichtbar, während der Sticky Footer speziell Seiten behandelt, bei denen der Inhalt nicht lang genug ist, um den unteren Bildschirmrand zu erreichen. In diesem speziellen Fall, in dem der Inhalt nicht lang genug ist; es verhält sich wie eine feste Fußzeile und bleibt am unteren Rand Ihrer Seite hängen; Erstellen Sie diesen "festen Fußzeileneffekt".

Wenn der Inhalt jedoch lang genug ist, verhält sich die Sticky-Fußzeile wie gewohnt und die Seite schiebt die Fußzeile an den unteren Rand der Seite, um sicherzustellen, dass sie nicht ständig auf dem Bildschirm angezeigt wird. In den meisten Fällen wird diese Methode einer festen Fußzeile auf der gesamten Website vorgezogen, da sie mehr Platz im Fenster für die Anzeige des Inhalts bietet.

Erstellen Sie einen Sticky Footer auf Ihrer Divi-Website mit CSS

Lassen Sie uns ohne weitere Fälligkeit damit beginnen, einen Sticky Footer für Ihre Website zu erstellen. Der Code, den wir verwenden werden, ist wirklich einfach, aber er erledigt die Arbeit. Sie wechseln schnell von einer schwebenden Fußzeile auf Ihrer Seite zu einer Seite, auf der die Fußzeile nach unten verschoben wird, wenn der Inhalt nicht lang genug ist.

CSS-Code über Seiteneinstellungen hinzufügen (insbesondere für eine Seite)

In bestimmten Fällen möchten Sie die Fußzeile nur auf einer bestimmten Seite festkleben . In diesem Teil des Beitrags zeigen wir Ihnen, wie Sie genau das tun, indem Sie den CSS-Code zum benutzerdefinierten CSS-Feld einer Seite hinzufügen. Dadurch stellen Sie sicher, dass der CSS-Code nur für diese eine Seite Ihrer Website gilt. Das bedeutet auch, dass der CSS-Code nur geladen wird, wenn jemand diese bestimmte Seite öffnet. Diese Methode wird normalerweise in Fällen verwendet, in denen es nur wenige kürzere Seiten auf der Website gibt, denen Sie den Sticky Footer geben möchten.

Öffnen Sie zunächst die Seite, auf der die Sticky-Fußzeile aktiv sein soll, oder erstellen Sie eine neue Seite, auf die sie angewendet werden soll. Öffnen Sie als Nächstes die Seiteneinstellungen, indem Sie in Ihrem Divi-Builder auf das folgende Symbol klicken:

Fahren Sie fort und fügen Sie im gerade geöffneten Fenster dem Feld "Benutzerdefiniertes CSS" den folgenden Code hinzu:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Von dem Moment an, in dem Sie eine Vorschau Ihrer Seite anzeigen, sollte der CSS-Code angewendet werden und die Fußzeile kleben.

CSS-Code über Theme Customizer hinzufügen (Echtzeitansicht)

Eine andere Möglichkeit, den Code hinzuzufügen, ist der Theme Customizer. Wenn Sie den CSS-Code auf diese Weise hinzufügen, wird er automatisch auf die gesamte Website angewendet. Auf jede Seite wird dieser CSS-Code angewendet. Durch Hinzufügen des Codes über den Theme Customizer können Sie auch direkt sehen, welche Änderungen an Ihrer Website vorgenommen werden.

Um den CSS-Code zum Theme Customizer hinzuzufügen, klicke auf „Theme Customizer“ im Backend deiner WordPress-Website. Scrollen Sie als Nächstes auf der Seite nach unten und öffnen Sie die Option Zusätzliches CSS. Sie sehen den gesamten benutzerdefinierten CSS-Code, den Sie bisher verwendet haben. Fahren Sie fort und fügen Sie den folgenden Code hinzu:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

CSS-Code über Divi-Theme-Optionen hinzufügen

Zu guter Letzt können Sie den Code auch über die Divi-Theme-Optionen hinzufügen. Dies ist die am häufigsten verwendete Methode zum Hinzufügen von Code zu einer Website, bei der die gesamte Website von dem Code profitieren soll.

Gehen Sie zu Divi > Designoptionen > Scrollen Sie auf der Seite nach unten > Fügen Sie den folgenden CSS-Code zum Benutzerdefinierten CSS-Feld hinzu:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Erstellen Sie einen Sticky Footer auf Ihrer Divi-Website mit JQuery

jQuery-Code über das Codemodul hinzufügen (insbesondere für eine Seite)

Sie können den jQuery-Code hinzufügen, indem Sie das Code-Modul im Divi-Builder verwenden. Dies wiederum wird meistens verwendet, wenn es nicht viele Seiten mit kurzem Inhalt gibt und Sie nicht den jQuery-Code für die gesamte Website laden möchten.

Fügen Sie der Seite, an der Sie gerade arbeiten, einen Abschnitt mit einer Zeile in voller Breite hinzu.

Fahren Sie fort, indem Sie ein Codemodul zu dieser Zeile mit voller Breite hinzufügen und den folgenden Code darin einfügen:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

jQuery-Code über Divi-Theme-Optionen hinzufügen

Eine weitere Möglichkeit, den jQuery-Code hinzuzufügen, sind die Divi-Theme-Optionen. Wenn wir jQuery-Code für die gesamte Website hinzufügen, gibt es eine bestimmte Stelle in den Divi-Designoptionen, an der wir dies tun können. im <head&gt; Feld der Registerkarte Integration. Genau dort werden wir jetzt den Code hinzufügen.

Öffnen Sie Ihre WordPress-Website > Gehen Sie zu Divi > Öffnen Sie die Theme-Optionen > Gehen Sie zur Registerkarte Integration und fügen Sie den folgenden jQuery-Code zum <head> Ihrer Website hinzu:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Abschließende Gedanken

Das Hinzufügen einer klebrigen Fußzeile ist normalerweise in Fällen erforderlich, in denen Sie eine Seite mit nicht viel Inhalt haben. Sie möchten die schwebende Fußzeile loswerden, damit sich die Seitenstruktur natürlicher anfühlt. Wenn Sie Kommentare oder Vorschläge für zukünftige Beiträge in unserem Blog-Bereich haben; Hinterlassen Sie im Kommentarbereich unten einen Kommentar, damit wir uns mit Ihnen in Verbindung setzen können!

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!

Ausgewähltes Bild von Vintagio / shutterstock.com