So erstellen Sie ein Elementor-Off-Canvas-Menü ohne Codierung (4 einfache Schritte)

Ein Off-Canvas-Menü verschönert die Benutzeroberfläche Ihrer Website. Darüber hinaus ist es auch in der Lage, Ihre Besucher oder Kunden auf Ihrer Website zu halten. Darüber hinaus öffnet ein Elementor-Off-Canvas-Menü auch die Tür zu verschiedenen Geschäftsmöglichkeiten.

Daher wird das Hinzufügen zu Ihrer Website zur absoluten Notwendigkeit, wenn Sie die Benutzeroberfläche und UX Ihrer Website nicht gefährden möchten. Glücklicherweise gibt es Optionen zum Hinzufügen des Elementor-Off-Canvas-Menüs in WordPress, die völlig kostenlos sind.

Sie können jeden von ihnen adoptieren. Obwohl die Verwendung von ElementsKit die am besten geeignete und einfachste Option ist, da Sie damit innerhalb weniger Sekunden ein Off-Canvas-Menü hinzufügen können.

Also, lasst uns das erkunden Der einfachste Vorgang zum Hinzufügen eines Off-Canvas-Menüs mit ElementsKit. Aber werfen Sie vorher noch einen kurzen Überblick über dieses Off-Canvas-Menü und seine Bedeutung.

Was ist ein Off-Canvas-Menü in Elementor?

Ein Off-Canvas-Menü ist ein Flyout-Menü scheint so von der Seite Ihrer Website indem Sie auf ein Symbol, ein Bild oder einen Text klicken. Dies ist ein moderates Menü steigert das Benutzererlebnis einer Website auf mobilen Geräten oder kleinen Bildschirmen, da Sie damit den Header-Bereich vereinfachen können.

Warum das Off-Canvas-Menü von Elementor verwenden?

Der Hauptvorteil dieses Off-Canvas-Menüs besteht darin, dass es möglich ist Sparen Sie viel Platz auf Ihrer Website, dass Sie das Header-Menü anzeigen müssen. Daher im Falle der Anzeige von Websites mit Bessere Benutzeroberfläche auf kleinen Bildschirmen, müssen Sie dieses Off-Canvas-Menü benötigen.

Sie können es jedoch tun besondere Rabatte fördern auf diesem Off-Canvas-Menü. Auch die Präsentation von Rabatten auf dem Off-Canvas-Menü kann die Aufmerksamkeit Ihrer Website-Besucher erregen.

Darüber hinaus eignet es sich auch zur Darstellung bestimmter Abschnitte im Off-Canvas-Menü. Sie können beispielsweise bestimmte Rabattprodukte anzeigen und so Ihre Werbung herausragender und konvertierender gestalten.

Seit mehr als die Hälfte der Besucher der Website Wenn Sie eine Website über Mobilgeräte besuchen möchten, müssen Sie dazu dieses Off-Canvas-Menü auf Ihrer Website verwenden Vervielfachen Sie Ihre Geschäftsmöglichkeiten. Darüber hinaus wird der Zweck des Off-Canvas-Menüs erfüllt, wenn es für mobile Benutzer verwendet wird.

Darüber hinaus bietet ein Off-Canvas-Menü noch weitere Vorteile. Sie können es für verschiedene Zwecke verwenden und verschenken Weg zu Ihren Geschäftszielen indem man es sinnvoll nutzt.

Da Sie alle Möglichkeiten des Off-Canvas-Menüs kennen, lassen Sie uns mit der einfachsten Methode beginnen, dieses zu Ihrer Website hinzuzufügen.

Schritte zum Erstellen eines Elementor-Off-Canvas-Menüs

Obwohl die Verwendung des Elementor-Off-Canvas-Menüs zahlreiche Vorteile bietet, benötigen Sie einige Sekunden, um es zu Ihrer WordPress-Site hinzuzufügen. Darüber hinaus ist es so 100% kostenlos, um das Elementor-Off-Canvas-Menü hinzuzufügen verwenden ElementsKit. Denn in ElementsKit finden Sie ein spezielles kostenloses Widget namens „Header Offcanvas“.

Das Hinzufügen eines Off-Canvas-Menüs mit diesem Widget erfordert keinerlei Codierung. Außerdem können Sie dieses Menü ohne Einschränkungen nach Ihren Wünschen anpassen. Sie können auch ein Off-Canvas-Menü hinzufügen, indem Sie der einfachsten Methode folgen, die aus nur 4 Schritten besteht. Gehe durch die 4 einfache Schritte Und Fügen Sie ein Off-Canvas-Menü hinzu zu Ihrer WordPress-Seite:

Schritt 1: Installieren Sie ein Off-Canvas-Menü-Plugin.

Um die Vorteile des Off-Canvas-Menü-Widgets von ElementsKit nutzen zu können, müssen Sie es zuerst installieren. Um das Off-Canvas-Menü-Plugin zu installieren, Klicken Sie auf „Neu hinzufügen“. Option unter Plugins und Suchen Sie nach ElementsKit im Suchfeld. Nachdem ich ElementsKit gesehen habe, Klicken Sie auf „Jetzt installieren“. Taste und aktivieren Sie es später.

Schritt 2: Aktivieren Sie das Header-Off-Canvas-Widget.

Im zweiten Schritt müssen Sie Besuchen Sie ElementsKit >> ElementsKit Und Klicken Sie auf die WIDGETS Abschnitt.

Im Widget-Bereich Aktivieren Sie das Widget „Header Offcanvas“. Und Drücken Sie die Taste ÄNDERUNGEN SPEICHERN Taste.

Schritt 3: Fügen Sie das Elementor-Off-Canvas-Menü hinzu.

Jetzt ist es an der Zeit, Ihrer Elementor-Website ein Off-Canvas-Menü hinzuzufügen. Das zu tun, Klicken Sie auf „Neu hinzufügen“. Option unter Beiträge und einen Titel geben zum Beitrag. Danach, Klicken Sie auf „Mit Elementor bearbeiten“. Schaltfläche zum Hinzufügen des Off-Canvas-Menüs in WordPress.

Dadurch werden Sie zum Elementor-Dashboard weitergeleitet, wo Sie es benötigen Suchen Sie nach dem Header-Offcanvas-Widget und nachdem ich es gefunden hatte, Ziehen Sie es per Drag & Drop auf das Plus Symbol.

Jetzt, Klicken Sie auf das Hamburger-Symbol um Menüs oder Elemente zu Ihrem Off-Canvas-Menü hinzuzufügen.

Dann Klicken Sie auf „Inhalt bearbeiten“. Option und fügen Sie Ihrem Menü nach Belieben Elemente hinzu. Es bringt Sie zum Widget-Bereich Von hier aus können Sie verschiedene Elemente zu Ihrem Off-Canvas-Menü hinzufügen, um Variationen hinzuzufügen.

Zum Beispiel, Suchen Sie nach dem vertikalen Menü Und Ziehen Sie es per Drag & Drop auf dem Plus-Symbol, genau wie beim Header-Off-Canvas-Widget. Befolgen Sie anschließend den gleichen Vorgang, um beliebige Elemente zu Ihrem Off-Canvas-Menü hinzuzufügen.

Nachdem Sie ein vertikales Menü-Widget hinzugefügt haben, Wählen Sie das Menü aus Sie möchten in Ihrem Elementor-Off-Canvas-Menü anzeigen und es entsprechend anpassen. Wenn alle Ihre Anpassungen abgeschlossen sind, Klicken Sie auf „Aktualisieren“. Taste.

Nachdem Sie Ihrem Header-Off-Canvas-Menü Elemente hinzugefügt haben, können Sie dies tun anpassen und aktualisieren die folgenden Bereiche:

• Overlay-Farbe: Wählen Sie hier die Farbe für Ihr Off-Canvas-Menü aus.
• Menütyp: Sie finden Symbole, Text und Symbole mit Textoptionen. Wählen Sie aus, was Sie anstelle des Off-Canvas-Menüs in der Kopfzeile anzeigen möchten.
• Symbol: Wenn Sie das Symbol im Menütyp auswählen, wird dieser Abschnitt angezeigt, in dem Sie ein Symbol auswählen müssen.

Direkt neben der Registerkarte „Inhalt“ finden Sie eine Registerkarte „Stil“. Klicken Sie auf die Registerkarte „Stil“ und passen Sie die folgenden Elemente für Ihr Off-Canvas-Menü an:

• Farbe.
• Hintergrundfarbe.
• Hover-Farbe.
• Hintergrundfarbe beim Schweben.
• Rahmenfarbe für Hover.
• Symbolgröße.
• Randtyp.
• Ausrichtung.
• Box Schatten.
• Grenzradius.
• Polsterung.
• Marge.

Nach der Bearbeitung außerhalb der Leinwand; du musst Bearbeiten Sie die Breite, den Hintergrundtyp, die Position und den Abstand des Off-Canvas-Panels. Endlich, Klicken Sie auf „Veröffentlichen“. Klicken Sie auf die Schaltfläche, wenn Sie mit der Anpassung fertig sind.

Schritt 4: Schauen Sie sich abschließend das Header-Off-Canvas-Menü an.

Hier ist die Übersicht oder das Beispiel Ihres mit ElementsKit erstellten Off-Canvas-Menüs. Sie können jedoch weitere Variationen hinzufügen, indem Sie Ihr Off-Canvas-Menü über den Widget-Bereich anpassen.

Beginnen Sie mit dem Off-Canvas-Menü für die Kopfzeile

Durch die Verwendung eines Off-Canvas-Menüs wird Ihre Website besser interaktiver und ansprechender da es viel Platz auf Ihrer WordPress-Site sparen kann. Außerdem ist es perfekt zum Mitnehmen bessere UI & UX auf kleinen Bildschirmen. Dennoch ist das Hinzufügen eines Off-Canvas-Menüs super einfach und schnell.

Alles, was Sie brauchen, ist, die oben genannten vier Schritte zu befolgen, und schon sind Sie bereit, die hervorragenden Vorteile und Möglichkeiten des Header-Off-Canvas-Menüs zu genießen. Oben haben wir ElementsKit verwendet, da es die einfachste Möglichkeit bietet, dieses Menü hinzuzufügen.

Darüber hinaus finden Sie viele Funktionen, wenn Sie ElementsKit verwenden. Da es ein ist All-in-One-Addon für Elementor Das bietet alle Optionen, um Ihre Website nahtlos und wettbewerbsfähig zu machen. Nutzen Sie also das beste Plugin, um ein Off-Canvas-Menü auf Ihrer Elementor-Website hinzuzufügen.