Bild als Back To Top Button verwenden mit Divi

von | 22.12.2017 | 0 Kommentare

In diesem Tutorial wollen wir uns dem Divi Back To Top Button annehmen. Einer unserer Besucher hat uns nämlich gefragt, was da für ein „komisches“ Flugzeug auf unserer Webseite herumfliegt. Dem ein oder anderen aufmerksamen Leser ist es wohl bereits aufgefallen – das ist unser Back To Top Button! Der Back To Top Button kann durch dein eigenes Bild oder Icon ersetzt werden. Wie das geht, erfährst du in diesem Beitrag.

Video Tutorial

Du musst dir das Video nicht ansehen, wenn du nicht möchtest. Alle Informationen findest du auch in diesem Beitrag.

Los geht’s

Als erstes benötigen wir ein Bild oder den ein Icon, den du als Back To Top Button verwenden möchtest.. Am besten ist, wenn du dieses gleich in den passenden Maßen hochlädst. Unser Icon ist 40 x 45 Pixel groß und fügt sich gut ins Gesamtbild ein. Wenn du soweit bist, dann lad die Datei über Medien > Datei hinzufügen hoch.

Klicke anschließend auf den Icon um die URL der Datei herauszufinden.

Individuellen Back To Top Button hochladen

Kopiere die URL in die Zwischenablage, denn wir benötigen sie gleich.

Eigenen Icon als Back To Top Button

Nun ist schon mehr als die halbe Arbeit getan. Jetzt müssen wir nur noch ein paar Zeilen CSS-Code in die styles.css unser Divi Child Theme oder den Customizer einfügen:

Damit der Back To Top Button durch dein Icon ersetzt wird, solltest du nicht vergessen den Platzhalter (DEINE_ICON_URL) mit der URL des Bildes deiner Wahl zu ersetzen.

Webdesign-Osnabrueck

Wenn dir der Artikel gefallen hat, dann freuen wir uns über ein Follow auf Twitter und Facebook. Mehr WordPress und Divi Video Tutorials findest du auf unserem YouTube Channel.

Noch Fragen?

Verbesserungsvorschläge oder Anregungen für weitere Artikel? Dann nutz' die Kommentarfunktion unter diesem Beitrag!

Wir können das Tutorial auch für dich durchführen. Stell hierfür eine Anfrage bei Swish!

Das könnte dich auch interessieren

Anzeige
Aktuelle Beiträge
WordPress: Link auf Nofollow setzen

WordPress: Link auf Nofollow setzen

Wie setzte ich Links auf Nofollow? Wann sollen Links auf Nofollow gesetzt werden und was bedeutet Nofollow eigentlich? Das alles sind Fragen, die sich wohl irgendwann jeder beim Aufbau einer Website stellt. Ich persönlich halte das Thema für überbewertet und genau aus...

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.