So reparieren Sie Ihre Divi-Fußzeile

Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie statt einer normalen einen festen Footer für Ihre Website erstellen. In einem früheren Beitrag haben wir Ihnen gezeigt, wie Sie es klebrig machen können, was sich tatsächlich von der Fixierung unterscheidet, obwohl sie auf den ersten Blick gleich erscheinen mögen. Wenn Sie es nicht klebrig, sondern stattdessen reparieren wollten, wird Ihnen dieser Beitrag helfen.

Das Hinzufügen einer festen Fußzeile zu Ihrer Website kann eine Anfrage eines Ihrer Kunden sein oder eine Notwendigkeit für Ihre eigene Website. Obwohl es nicht so oft verwendet wird wie ein fester Header, könnte es eines der Dinge sein, mit denen Sie zu kämpfen haben. Wir zeigen Ihnen zwei Möglichkeiten, wie Sie Ihre Fußzeile auf Ihrer Divi-Website kleben können. Die erste wird durch die Verwendung einiger CSS-Zeilen und die zweite durch die Verwendung von jQuery-Code sein. Bei beiden Methoden werden Änderungen am CSS-Stylesheet der Fußzeile auf Ihrer Website vorgenommen.

Hier ein Beispiel, wie die feste Fußzeile beim Scrollen aussieht:

Wann eine feste Fußzeile verwendet werden sollte

Es gibt verschiedene Gründe, warum Sie eine feste Fußzeile auf Ihrer Website haben möchten. Einer dieser Gründe könnte die Relevanz der Informationen sein, die Ihre Fußzeile enthält. Sie könnten beispielsweise Ihre Social-Media-Icons in Ihre Fußzeile einfügen und die Besucher Ihrer Website dazu anregen, Ihre Social-Media-Kanäle zu erkunden. Ein weiterer Grund könnte sein, dass Ihnen die Wirkung Ihrer Website einfach gefällt.

Wenn Sie eine feste Fußzeile verwenden, sollten Sie beachten, dass ein Teil des Besucherfensters die ganze Zeit eingenommen wird. Das bedeutet, dass sie mehr scrollen müssen, um den gleichen Inhalt zu sehen, den sie auch ohne feste Fußzeile sehen würden. Das ist eine Herausforderung, denn Besucher möchten sich möglichst wenig Mühe geben.

Wenn Ihre Fußzeile jedoch nicht so groß ist, kann dies die Anzahl der Aktionen erhöhen, die in Ihrer Fußzeile ausgeführt werden. Wir raten davon ab, gleichzeitig eine feste Kopfzeile, ein Hauptmenü und eine Fußzeile zu verwenden. Wenn alle drei behoben werden, wird der angezeigte Inhalt drastisch reduziert, was zu einer höheren Absprungrate führen kann.

Unterschied zwischen fester und klebriger Fußzeile

Bevor wir beginnen, erklären wir den Unterschied zwischen einer festen und einer klebrigen Fußzeile.

Ein Sticky Footer ist normalerweise etwas komplexer. Es verhält sich wie eine feste Fußzeile, wenn eine Seite nicht genug Inhalt hat, um die Fußzeile an den unteren Bildschirmrand zu verschieben. In Fällen, in denen Seiten lang genug sind, verhält sich die Fußzeile wie eine normale und wird bis zum Ende der Seite gedrückt, also nicht bis zum Bildschirm.

Lass uns anfangen

Abonnieren Sie unseren Youtube-Kanal

Wir beginnen gleich damit, indem wir Ihnen zeigen, wie Sie die feste Fußzeile auf zwei Arten zu Ihrer Website hinzufügen können. durch CSS-Code und durch jQuery-Code. Beide Methoden funktionieren, aber es hängt alles davon ab, welche Sie für die Website verwenden, für die Sie sie benötigen.

Feste Fußzeile über CSS hinzufügen

Der erste und einfachste Weg, eine feste Fußzeile zu erstellen, besteht darin, einige CSS-Zeilen hinzuzufügen. Mit dem Divi Builder und WordPress können wir diese Zeilen an verschiedenen Stellen hinzufügen. Schauen wir sie uns an.

CSS-Code über benutzerdefiniertes CSS für eine Seite hinzufügen

Die erste Möglichkeit, den CSS-Code hinzuzufügen, besteht darin, ihn zu einer bestimmten Seite hinzuzufügen. Obwohl es besser ist, eine feste Fußzeile für jede Seite Ihrer Website gleich festzulegen (um diese Konsistenz auf Ihrer Website zu gewährleisten), können Sie sie auch auf eine bestimmte Seite anwenden lassen.

Öffnen Sie die Seite, zu der Sie die CSS-Codezeilen hinzufügen möchten, und klicken Sie auf die folgende Schaltfläche des Divi Builders.

Scrollen Sie nach unten und fügen Sie den folgenden Code in das Feld Benutzerdefiniertes CSS ein:

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

CSS-Code über Theme Customizer hinzufügen

Eine andere Möglichkeit, den Code hinzuzufügen, ist der Theme Customizer. Wenn Sie den Theme Customizer verwenden, sehen Sie die Ergebnisse in Echtzeit auf Ihrer Website. Der Code, den Sie über den Theme Customizer hinzufügen, gilt für alle Seiten Ihrer Website.

Gehen Sie auf Ihrer Website zu Theme Optimizer > Additional CSS > Fügen Sie die folgenden CSS-Codezeilen ein:

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

CSS-Code über Designoptionen hinzufügen

Die letzte Möglichkeit, den CSS-Code zu Ihrer Website hinzuzufügen, sind die Theme-Optionen. Wenn Sie Ihren Code im Feld Benutzerdefiniertes CSS der Designoptionen hinzufügen, gilt der Code auch für die gesamte Website. Dies ist die am häufigsten verwendete Methode, um Ihrer gesamten Divi-Website benutzerdefinierten CSS-Code hinzuzufügen.

Gehen Sie zu Divi > Designoptionen > Allgemein > Scrollen Sie nach unten und fügen Sie den folgenden Code zum Feld Benutzerdefiniertes CSS hinzu:

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

Feste Fußzeile über jQuery hinzufügen

Eine andere Möglichkeit, die wir haben, besteht darin, die CSS-Änderungen über einige jQuery-Codezeilen vorzunehmen. Wenn Sie eine feste Fußzeile verwenden, möchten Sie normalerweise sicherstellen, dass sie für alle Seiten Ihrer Website gilt. Diese Art von Konsistenz macht es Ihren Besuchern einfacher, durch Ihre Website zu navigieren, ohne verwirrt zu werden.

Fügen Sie jQuery-Code über das Code-Modul insbesondere für eine Seite hinzu

Öffnen Sie die Seite, auf der die feste Fußzeile angewendet werden soll, und fügen Sie oben auf Ihrer Seite einen neuen Standardabschnitt hinzu. Wählen Sie als Nächstes eine Zeile mit voller Breite aus und fügen Sie ein Codemodul hinzu. Öffnen Sie das Code-Modul und fügen Sie den folgenden jQuery-Code in das Inhaltsfeld ein:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

Durch Hinzufügen von jQuery-Code über das Code-Modul auf einer bestimmten Seite wird der Code nur auf diese Seite angewendet. Der Rest Ihrer Website hat eine normale Fußzeile, während diejenige, auf der Sie das Code-Modul verwendet haben, eine feste Fußzeile hat.

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

Die letzte Option zum Hinzufügen von jQuery-Code, der Ihre Fußzeile korrigiert, sind die Theme-Optionen. Die Codezeilen gelten sofort für Ihre gesamte Website und bieten die Konsistenz, die Ihre Website benötigt.

Gehen Sie zu Divi > Themenoptionen > Integration > und fügen Sie die folgenden Codezeilen in den <head> Ihrer Website ein:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

Abschließende Gedanken

Wir haben Ihnen in einem der vorherigen Beiträge gezeigt, wie Sie eine klebrige Fußzeile erstellen. In diesem Beitrag wurde insbesondere behandelt, wie Sie eine feste Fußzeile für Ihre Website erstellen. Die feste Fußzeile bleibt beim Besuch Ihrer Website immer am unteren Rand des Bildschirms des Besuchers. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar unten im Kommentarbereich, 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 Zeeker2526 / shutterstock.com