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.

Waren Sie schon einmal auf einer Website und haben festgestellt, dass oben immer ein Navigationsmenü angezeigt wird?

Grundsätzlich werden Navigationsmenüs so angezeigt, dass sie beim Scrollen der Seite verschwinden. Die immer sichtbaren Navigationsmenüs schweben und sind so, egal wie der Benutzer nach unten scrollt.So erstellen Sie ein schwebendes WordPress-Menü 1

In diesem Tutorial zeigen wir Ihnen, wie Sie auf einfache Weise ein schwebendes Menü in Ihrem WordPress-Blog erstellen.

Wenn Sie noch keine Website oder kein Blog auf WordPress erstellt haben, laden wir Sie ein, zu konsultieren, wie man ein WordPress-Blog in 7 Schritten installiert, dann, Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren

Wenn es fertig ist, gehen wir auf das ein, was uns heute beschäftigt.

1-Methode: So fügen Sie ein schwebendes Menü in WordPress mithilfe eines Plugins hinzu

Diese Methode ist einfacher und ist schnell. Wenn Sie die Navigationsmenüs noch nicht eingerichtet haben, können Sie lerne wie es geht.

Sticky Menü WordPress Plugin

Als erstes müssen Sie das Plugin installieren und aktivieren. " Sticky-Menü (oder alles!) Wir Blätter “. Wenn Sie nicht wissen, wie man ein Plugin installiert, können Sie kann unser Tutorial lesen.

Nach der Aktivierung müssen Sie " Einstellungen »Sticky Menu So konfigurieren Sie die Einstellungen dieses Plugins.

Sticky Menü WordPress Plugin

Zuerst müssen Sie die CSS-IDs des Navigationsmenüs eingeben, das Sie schweben lassen möchten.

Sie müssen das "Inspect" -Tool Ihres Browsers verwenden, um das verwendete CSS zu finden.

Gehen Sie zu Ihrer Website und bewegen Sie die Maus zum Navigationsmenü. Danach müssen Sie mit der rechten Maustaste klicken und "Inspizieren" auswählen.

Gehen Sie weiter und entdecken Sie Wie man ein Wordpress-Theme mit gelben Bleistift anpassen

Überprüfen Sie einen Tutorial-WordPress-Code

Dies teilt (standardmäßig) Ihren Browser-Bildschirm und Sie können den Quellcode Ihres Navigationsmenüs sehen. Sie müssen eine ähnliche Zeile finden:

In diesem Beispiel lautet die CSS-ID unseres Navigationsmenüs " Site Navigation ".

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

Geben Sie die CSS-ID des Menüs in den Plugin-Einstellungen wie folgt ein: "# site-navigation".

Die nächste Option bei den Plugin-Einstellungen besteht darin, den Abstand zwischen dem oberen Bildschirmrand und dem schwebenden Navigationsmenü festzulegen. Sie können diese Einstellung verwenden, wenn sich Ihr Menü mit einem Element überschneidet, das Sie nicht ausblenden möchten. Andernfalls ignorieren Sie diese Einstellung.

Danach müssen Sie auf das Feld direkt neben der Option "Check Bar Admin" klicken. Dadurch kann das Plugin Platz für die WordPress-Symbolleiste hinzufügen, die für angemeldete Benutzer hinzugefügt wird.

Mit der nächsten Option auf der Einstellungsseite können Sie das Navigationsmenü ausblenden, wenn ein Benutzer Ihre Website über einen kleineren Bildschirm wie ein Mobilgerät besucht.

Sie können testen, wie dieses Menü auf Mobil- und Tablet-Geräten angezeigt wird. Wenn es Ihnen nicht gefällt, können Sie dieser Option 780px hinzufügen.

entdecken Sie auch Wie eine ansprechende Menü für mobile Wordpress erstellen

Vergessen Sie nicht, auf " Einstellungen speichern Speichern Sie Ihre Änderungen.

Sie können jetzt Ihre Website besuchen, um Ihr schwebendes Navigationsmenü in Aktion zu sehen.

Wordpress Float-Menü

Methode 2: Manuelles Hinzufügen eines Navigationsmenüs

Diese Methode erfordert das Hinzufügen von benutzerdefiniertem CSS-Code zu Ihrem WordPress-Design.

Zuallererst muss man besuchen " Aussehen> Anpassen So starten Sie den WordPress Customizer.

Zusätzlicher CSS WordPress Customizer

Sie möchten Ihre Produkte im Internet verkaufen?

Laden Sie WooCommerce kostenlos herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen und ganz einfach Ihren Online-Shop zu erstellen. Perfekt für Anfänger.

Klicken Sie auf " Zusätzliches CSS Fügen Sie im linken Bereich diesen CSS-Code hinzu.

# Site-Navigation {background: #fff; Höhe: 60px; z-index: 170; margin: 0 auto; border-bottom: 1px feste #dadada; Breite: 100%; Position: fixed; top: 0; links: 0; rechts: 0; text-align: center; }

Ersetzen " # Site Navigation Geben Sie die Kennung Ihres Navigationsmenüs ein und klicken Sie auf die Schaltfläche « Registrieren ".

Sie können jetzt Ihre Website besuchen, um Ihr schwebendes Navigationsmenü in Aktion zu sehen.

Wenn Ihr Navigationsmenü normalerweise nach dem Website-Header angezeigt wird, kann dieser CSS-Code den Website-Titel und den Header überlappen.

Dies kann einfach angepasst werden, indem Sie mit dem folgenden Code einen Rand in Ihren Kopfbereich einfügen:

.Site-Branding {margin-top: 60px; }

Hier endet unser Tutorial. Jetzt können Sie ein schwebendes Menü auf Ihrer Website erstellen oder hinzufügen.

Wenn Sie nach anderen WordPress-Plugins suchen, mit denen Sie Menüs verwalten können, finden Sie hier einige Premium-WordPress-Plugins, die dieser Aufgabe gewidmet sind. 

1. Menü-Held

Mit diesem Plugin können Sie in wenigen einfachen Schritten Ihr eigenes personalisiertes WordPress-Menü erstellen. Sie können damit einfach und intuitiv ein elegantes und professionelles WordPress-Menü erstellen. Vom komplexesten Mega-Menü voller Funktionen bis zum einfachsten Menü mit Dropdown-Menü, dem WordPress-Plugin HeroMenu richtet jede Art von Menü ein und bringt es in wenigen Minuten zum Laufen.

Hero Menü Responsive WordPress Mega-Menü-Plugin

In Bezug auf Funktionen bietet es unter anderem: perfekt funktionierende Funktionen für PC, Tablet und Smartphone, benutzerfreundliche, anpassbare Inhalte, benutzerdefiniertes CSS zum Hinzufügen eigener Menüstile, Megamenü-Designer, unterstützte Browser: Chrome, Firefox, Safari , Opera, IE9 und mehr.

Download | Demo | Web-Hosting

2. Slick-Menü

Slick-Menü ist nicht nur ein Menü-Plugin für WordPress. Es kann verwendet werden, um unbegrenzte Menüebenen sowie Seitenleisten mit umfangreichen Inhalten, mehreren Stiloptionen und animierten Effekten zu erstellen.

Slick Menü Responsive WordPress Vertical Menü

Jede Menüebene kann mit Hintergrundfarben, Bildern, Videos, benutzerdefinierten Schriftarten und mehr angepasst werden. Dieses Plugin reagiert vollständig und verfügt über mehr als 45 Animationen für die Menüpunkte.

Download | Demo | Web-Hosting

3. 8Degree Flugmenü

8Degree Fly Menu ist ein Premium-WordPress-Plugin, mit dem Sie ein Canvas-Menü auf Ihrer Website hinzufügen können, um ein Erscheinungsbild zu erhalten, das Ihre Informationen auf einfache Weise hervorhebt. Es verwendet die Standard-WordPress-Menüfunktion, um seine Menüs zu erstellen.

8-Grad-Fly-Menü reagiert auf Canvas-Menü-Plugin für WordPress

Sie können den Standardmenüelementen zusätzliche Elemente hinzufügen, z. B. Symbole, Menüslogans, eine Pseudo-Gruppierungsüberschrift und eine lange Beschreibung. Außerdem ist ein WYSIWYG-Editor enthalten, mit dem Sie Ihre lange Beschreibung benutzerfreundlich erfassen und Shortcodes verwenden können.

Download | Demo | Web-Hosting

Andere empfohlene Ressourcen

Wenn Sie weitere Informationen zum Erstellen oder Anpassen der Menüs Ihres Blogs oder Ihrer Website benötigen, empfehlen wir Ihnen, die folgenden Links zu konsultieren.

Fazit

Hier ! Das war's für dieses Tutorial. Ich hoffe, Sie können damit ein schwebendes Menü in Ihr WordPress-Blog einfügen. Wir laden Sie ein Teile diesen Artikel mit deinen Freunden in deinen sozialen Netzwerken.

Wenn Sie Vorschläge oder Anmerkungen haben, sind diese willkommen. Und wenn Sie neu in WordPress sind, konsultiere dies Ressource.

...