So erstellen Sie ein Footer Reveal mit Divi

Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie einen bestimmten Effekt erzielen, an den Sie wahrscheinlich nie gedacht haben, um ihn in Ihre eigene Website oder die eines Kunden zu integrieren. Etwas präziser; Wir zeigen Ihnen, wie Sie eine Fußzeilen-Enthüllung erstellen. Die Fußzeilen-Enthüllung wartet im Grunde, bis Sie am Ende der Seite sind, und zeigt die Fußzeile entsprechend der Art und Weise an, wie Sie scrollen. Nachdem Sie die Seite vollständig durchlaufen haben, wird die Fußzeile in ihrer ursprünglichen Form angezeigt.

Das Hinzufügen einer Fußzeilen-Enthüllung zu Ihrer Website kann der Fußzeile Ihrer Website den zusätzlichen kleinen Touch verleihen, den Sie gesucht haben. Es ist auch das Letzte, was die Leute sehen, wenn sie durch eine Seite Ihrer Website scrollen. Um Ihnen zu zeigen, was genau wir unter einer Fußzeilen-Enthüllung verstehen, schauen wir uns das Endergebnis an:

Wie Sie sehen können, haben wir nicht nur die Fußzeile sichtbar gemacht, sondern auch dem Hauptinhalt unserer Website einen subtilen Schatten hinzugefügt. Dadurch haben wir eine Art Perspektive zwischen Hauptinhalt und Fußzeile geschaffen.

So erstellen Sie ein Footer Reveal mit Divi

Abonnieren Sie unseren Youtube-Kanal

Fügen Sie den benötigten CSS-Code hinzu

Um das Ergebnis der Anzeige der Fußzeile zu erzielen, benötigen wir zunächst einige Zeilen CSS-Code. Da es verschiedene Möglichkeiten gibt, den CSS-Code zu Ihrer Divi-Website hinzuzufügen, zeigen wir Ihnen alle drei. Zuerst zeigen wir Ihnen, wie Sie den Code zu den Theme-Optionen hinzufügen. Zweitens fügen wir den Code über den Theme Customizer hinzu. Wenn Sie Code über eine der beiden Methoden hinzufügen, wird Ihre Fußzeilenanzeige sofort auf die gesamte Website angewendet. Wenn Sie jedoch möchten, dass der Code für eine bestimmte Seite gilt, können Sie dies auch tun. Indem Sie zeigen, wie Sie der Seite, an der Sie arbeiten, den Code hinzufügen, können Sie diesen Effekt ausschließlich für eine Seite erzielen.

Die beiden wichtigsten Dinge, die wir in unserem Code benötigen, sind der Z-Index und ein Rand unten für den Hauptinhalt. Um sicherzustellen, dass die Fußzeile perfekt passt, müssen wir die Höhe der Fußzeile kennen. Standardmäßig hat die verwendete Fußzeile einen Wert von 53px. Es kann jedoch sein, dass Sie die Höhe Ihren Bedürfnissen entsprechend geändert haben. Nachdem wir Ihnen gezeigt haben, wie Sie die Fußzeilenfreigabe standardmäßig hinzufügen, zeigen wir Ihnen auch, wie Sie sie an die Höhe einer Fußzeile anpassen können.

Fügen Sie den benötigten CSS-Code über die Designoptionen hinzu

Der erste Weg, den wir Ihnen zeigen, wie Sie den CSS-Code hinzufügen, sind die Divi-Theme-Optionen. Dies ist die am häufigsten verwendete Methode, um Ihrer Website zusätzlichen CSS-Code hinzuzufügen. Wenn Sie den CSS-Code in diesem Bereich hinzufügen, wird er sofort auf die gesamte Website angewendet.

Um den Code hinzuzufügen, gehen Sie zu Ihrem WordPress-Dashboard > Divi > Theme-Optionen > und kopieren Sie die folgenden Zeilen des CSS-Codes in das Feld Benutzerdefiniertes CSS unten auf der Registerkarte:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Nachdem Sie den Code hinzugefügt haben, gehen Sie zu Ihrer Website und sehen Sie zu, wie die Fußzeile ihre Aufgabe erfüllt.

Fügen Sie den benötigten CSS-Code über den Theme Customizer hinzu

Eine andere Möglichkeit, den CSS-Code zu Ihrer Divi-Website hinzuzufügen, ist der Theme Customizer. Das Hinzufügen des Codes über den Theme-Anpasser oder die Theme-Optionen ist dasselbe. Sobald Sie den Code in den Theme-Optionen entfernen, wird er auch im Theme-Anpasser entfernt und umgekehrt. Einer der Vorteile des Hinzufügens von Code über den Theme Customizer besteht darin, dass Sie alles in Echtzeit sehen können. Die zusätzlichen Anpassungen, die Sie am Code vornehmen, geben Ihnen daher sofort ein klares Bild von dem Endergebnis, das Sie erhalten.

Um den Code zum Theme-Anpasser hinzuzufügen, gehen Sie zu Ihrem WordPress-Dashboard > Erscheinungsbild > Anpassen > Scrollen Sie nach unten zu "Zusätzliches CSS" > und fügen Sie die folgenden Zeilen CSS-Code hinzu:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Fügen Sie den benötigten CSS-Code nur zu einer Seite hinzu

Die letzte Möglichkeit, die CSS-Codezeilen für die Fußzeile hinzuzufügen, besteht darin, sie zu einer bestimmten Seite hinzuzufügen. Dies kann interessant sein, wenn Sie beispielsweise Seiten mit weniger interaktiven Inhalten einen Mehrwert verleihen möchten. Durch das Hinzufügen einer Fußzeilen-Enthüllung machen Sie die Seite immer noch etwas interaktiver und legen den Fokus auf die Inhalte, die in der Fußzeile bereitgestellt werden, z. B. die Social-Media-Symbole.

Um den CSS-Code zu einer bestimmten Seite hinzuzufügen, öffnen Sie diese bestimmte Seite. In der rechten oberen Ecke des Divi Builder auf dieser Seite sehen Sie das folgende Symbol.

Klicken Sie auf das Symbol und fügen Sie die folgenden Codezeilen in das Feld Benutzerdefiniertes CSS ein:

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

Nachdem Sie die Einstellungen gespeichert haben, wird die Fußzeilenanzeige speziell auf dieser Seite angezeigt.

Fußzeilenhöhe ändern

Nun gilt die oben erläuterte Methode nur für die bereitgestellte Standardfußzeile. Sobald Sie es mit einer anderen Höhe zu tun haben, wird der Code seine Arbeit nicht richtig ausführen. Wir haben das berücksichtigt und zeigen Ihnen, wie Sie die Fußzeile auch für andere Höhen sichtbar machen.

Sie können jederzeit die Höhe auswählen, die Sie Ihrer Fußzeile zuweisen möchten. Wir müssen die Höhe für zwei CSS-IDs festlegen: die Hauptfußzeile und die Fußzeile unten. Durch Anpassen der Höhe an diesen beiden Stellen passt die Fußzeile. Sobald Sie das getan haben, müssen Sie natürlich auch den unteren Rand Ihres Hauptinhalts ändern. Wenn Sie beispielsweise eine Fußzeile mit einer Höhe von 60 Pixeln möchten, benötigen Sie die folgenden Codezeilen:

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

Sie sehen, dass es drei Stellen gibt, an denen wir den Wert '60px' benötigt haben. Wenn Sie Ihrer Fußzeile einen anderen Höhenwert zuweisen möchten, stellen Sie sicher, dass Sie ihn an allen drei Stellen ändern; Hauptinhalt, Hauptfuß und Fußzeile unten.

CSS-Box-Schatten hinzufügen

Eine andere Sache, die Sie tun können, um Ihrer Website ein wenig Perspektive und Interaktion zu verleihen, besteht darin, dem Hauptinhalt etwas Schatten hinzuzufügen. Die Fußzeile zeigt bereits, dass sie sich 'unter' dem Hauptinhalt befindet. Sobald Sie den Boxschatten hinzufügen, werden Sie dies betonen. Durch einen Schatten wird der scheinbare Höhenabstand zwischen dem Hauptinhalt und der Fußzeile größer.

Verwenden Sie die folgenden Codezeilen, um den Boxschatten zu Ihrer Fußzeilenanzeige hinzuzufügen:

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

Das ist es! Ihre Fußzeilenanzeige sollte jetzt gut funktionieren.

Abschließende Gedanken

Im heutigen Beitrag haben wir Ihnen gezeigt, wie Sie einen Footer Reveal-Effekt auf Ihrer Website erstellen können. Stellen Sie sicher, dass Sie den bereitgestellten benutzerdefinierten CSS-Code verwenden, um den Effekt zu erstellen, und stellen Sie sicher, dass er zur Höhe Ihrer Fußzeile passt. Wenn Sie ihm diese zusätzliche Perspektive verleihen möchten, empfehlen wir, den Boxschatten zum Hauptinhalt hinzuzufügen, wie im obigen Schritt gezeigt. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

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 Demja / shutterstock.com