Springe zum Hauptinhalt

Wie fügt Stil, um Ihre Navigations-Menüs

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Möchten Sie Ihre WordPress-Navigationsmenüs anpassen, um ihre Farben oder ihr Aussehen zu ändern? Ihr WordPress-Theme verwaltet das Erscheinungsbild der Navigationsmenüs auf Ihrer Website. Sie können es einfach mithilfe von CSS an Ihre Anforderungen anpassen. In diesem Tutorial zeigen wir Ihnen, wie Sie die Navigationsmenüs Ihres WordPress-Blogs gestalten.

to-the-Art-to-Menü de Navigation de Wordpress

1-Methode: So gestalten Sie Ihre WordPress-Menüs mit einem Plugin

Ihr WordPress-Theme verwendet CSS für Ihre Navigationsstile. Viele Neulinge sind mit der CSS-Bearbeitung von WordPress-Themes nicht vertraut. In diesem Fall wird ein Plugin zum Stylen eines Menüs praktisch, da Sie keine Themendateien bearbeiten oder Code schreiben müssen.

Zunächst müssen Sie das Plugin installieren und aktivieren. " CSS-Held ". Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

CSS Hero ist ein Premium-WordPress-Plugin, mit dem Sie Ihr eigenes WordPress-Design entwerfen können, ohne eine einzige Codezeile zu schreiben (Kein HTML oder CSS erforderlich).

Nach dem Aktivieren des Plugins werden Sie zu einer Seite weitergeleitet, auf der Sie Ihre Lizenz angeben müssen. Befolgen Sie einfach die Anweisungen auf dem Bildschirm und Sie werden mit nur wenigen Klicks zu Ihrer Site weitergeleitet.

Nun müssen Sie auf die Schaltfläche klicken Held CSS Auf Ihrer WordPress-Symbolleiste.

CSS-Held-menu-Wordpress

CSS Hero bietet einen WYSIWYG-Editor (Was Sie sehen, ist was Sie bekommen "Was Sie sehen, ist was Sie bekommen"). Durch Klicken auf diese Schaltfläche gelangen Sie zu Ihrer Website mit einer schwebenden CSS Hero-Symbolleiste auf der rechten Seite.

Bar von Werkzeugen-css-Held

Sie müssen auf das blaue Symbol oben klicken, um die Bearbeitung zu starten.

Bewegen Sie die Maus über Ihr Navigationsmenü und CSS Hero hebt es hervor, indem es seine Ränder anzeigt. Wenn Sie auf das hervorgehobene Navigationsmenü klicken, werden die verschiedenen Elemente angezeigt, die Sie bearbeiten können.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Fertigen-a-Menü-mit-css-Held

Im obigen Screenshot sehen Sie den Menüpunkt, das Navigationsmenü und den Navigationsmenücontainer usw.

Angenommen, wir möchten die Textfarbe aller Elemente im Navigationsmenü ändern. In diesem Fall wählen wir das Navigationsmenü aus, das das gesamte Menü berührt.

CSS Hero zeigt Ihnen nun die verschiedenen Eigenschaften an, die Sie ändern können, z. B. Text, Hintergrundfarbe, Rahmen, Ränder, Abstände usw.

CSS-Eigenschaft-Held

Sie können auf eine Eigenschaft klicken, die Sie bearbeiten möchten. CSS Hero präsentiert Ihnen eine einfache Oberfläche, in der Sie Ihre Änderungen vornehmen können.

edit-a-Immobilien-css-mit-css-Held

Im obigen Screenshot haben wir den Text ausgewählt und es zeigte sich eine schöne Oberfläche zum Auswählen von Schriftarten, Ändern der Textfarbe, -größe und anderer Eigenschaften.

Während Sie Änderungen vornehmen, erhalten Sie eine Live-Vorschau des Endergebnisses.

PREVIEW-to-live-css-Held

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Wenn Sie mit den Änderungen zufrieden sind, klicken Sie auf die Schaltfläche "Speichern" unter " Held CSS Speichern Sie Ihre Änderungen.

Das Beste an dieser Methode ist, dass Sie die vorgenommenen Änderungen problemlos rückgängig machen können. CSS Hero führt einen vollständigen Verlauf aller Änderungen, und Sie können zwischen diesen Änderungen wechseln.

Methode XNUMX: So ändern Sie den Stil Ihres Navigationsmenüs manuell

Bei dieser Methode müssen Sie Ihre WordPress-Themendateien bearbeiten. Sie sollten es nur verwenden, wenn Sie Entwickler sind und Kenntnisse in der Erstellung von WordPress-Designs haben.

Der beste Weg, dies zu tun, besteht darin, Ihr WordPress-Thema anzupassen, indem Sie ein untergeordnetes Thema erstellen. Wenn Sie nur CSS ändern, lade ich Sie ein, unser Tutorial zu lesen wie man benutzerdefinierten CSS-Code auf WordPress hinzufügt.

Die Navigationsmenüs von WordPress werden in einer ungeordneten Liste angezeigt (Aufzählung).

Wenn Sie das folgende PHP-Tag verwenden, wird eine Liste ohne zugehörige CSS-Klassen angezeigt.


Ihre Liste mit Aufzählungszeichen enthält das "Menü" des Klassennamens, wobei jedes Listenelement eine eigene CSS-Klasse hat.

Dies könnte funktionieren, wenn Sie nur einen Menüpunkt haben. Die meisten Themen haben jedoch mehrere Stellen, an denen Sie Navigationsmenüs anzeigen können.

Die Verwendung nur der Standard-CSS-Klassen kann an anderen Stellen zu Konflikten mit Menüs führen.

Dies ist der Grund, warum Sie die CSS-Klasse und den Menüort definieren müssen. Möglicherweise tut Ihr WordPress-Theme dies bereits, indem Sie die Navigationsmenüs mit folgendem Code hinzufügen:

'primary', 'menu_class' => 'primary-menu',)); ?>

Dieser Code teilt WordPress mit, dass das Thema hier das Hauptmenü anzeigt. Es wird auch eine CSS-Klasse hinzugefügt. " Grundmenü Im Navigationsmenü.

Jetzt finden Sie den Stil Ihres Navigationsmenü CSS Struktur.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

#header .primary Menü {} // Klasse Container #header .primary Menü ul {} // Klasse Container erste ungeordnete Liste #header .primary Menü ul ul {} // ungeordnete Liste Innerhalb einer ungeordneten Liste #header .primary -menu li {} // Jedes Element Navigation #header .primary Menü li {} // Jede Navigations item # header li Anker .primary Menü ul {} // ungeordnete Liste, wenn es Elemente Dropdown #header .primary -menu li li {} // fallen Jede unten Navigationspunkt li li .primary Menü # Header hat {} // Jedes Blatt Anker nach unten Navigationspunkt

Ersetzen Sie #header durch die Containerklasse oder " ID Wird von Ihrem WordPress-Theme verwendet.

Diese Struktur hilft Ihnen dabei, das Aussehen Ihres Navigationsmenüs vollständig zu ändern.

Das war's für dieses Tutorial. Ich hoffe, Sie können damit die Menüs Ihres WordPress-Blogs anpassen. Teilen Sie es mit Ihren Freunden in Ihren bevorzugten sozialen Netzwerken.

 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

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

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie1
tweet1
Registrieren