Überlappendes Logo erstellen mit Divi

von | 26.12.2017 | 0 Kommentare

Wenn du nach einen Snippet gesucht hast, um das Logo deiner Divi Webseite überstehen zu lassen, wird dir dieses Tutorial weiterhelfen. Es ist super einfach umzusetzen und hebt deine Seite vom Standard-Look ein wenig ab.

Los geht’s

Falls noch nicht geschehen, solltest du als erstes ein passendes Logo hochladen. Das kannst du unter Divi > Theme-Optionen erledigen.

Logo-hochladen-mit-Divi

Öffne anschließend den WordPress Designmodifikator.

WordPress Designmodifikator

Jetzt müssen wir sicherstellen, dass die Höhe des Logos sowohl bei der primären als auch festgelegten Navigationsleiste die selbe ist. Öffne hierfür beide Registerkarten und leg die für dich optisch passende Höhe fest.

Divi Menueleiste

In unserem Beispiel verwenden wir eine Höhe von 66. Du kannst aber auch jede andere Höhe wählen. Nur muss diese unter beiden Einstellungen gleich sein.

Feste-Menue-Hoehe

CSS-Code für überstehendes Logo

Jetzt wird es Zeit für den CSS-Code. Um das Logo über die Navigationsleiste ragen zu lassen, kannst du folgenden CSS-Code in das Feld zusätzliches CSS oder die style.css deines Divi Child Themes einfügen:

Speichern und fertig! Das Logo sollte jetzt über die Navigationsleiste ragen.

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 Divi Theme kaufen
Aktuelle Beiträge

0 Kommentare

Einen Kommentar abschicken

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

NEWSLETTER ABONNIEREN

Wöchentlich die neusten Beiträge und Tutorials ins E-Mail Postfach.

NEWSLETTER ABONNIEREN

Wir haben dir eine Newsletter Bestätigung zugesendet. Klicke hierfür auf den Bestätigungsbutton in der E-Mail