Erstellen Sie eine einseitige Website mit einer Seitennavigation in WordPress (mit Bonus)

Möchten Sie eine Website für Ihr Unternehmen erstellen, haben aber nicht die Zeit, eine große zu erstellen? Oder sind Sie nicht bereit, sich für eine langfristige Website-Pflege zu verpflichten?

Dann sollten Sie sich für eine Single Page Website mit One Page Navigation entscheiden. Eine einseitige Website stellt alle Informationen auf attraktive Weise bereit und verleiht Ihrer Website ein atemberaubendes Aussehen, damit Ihre Benutzer mehr interagieren können.

In diesem Blog erfahren Sie nicht nur, wie Sie eine einseitige Website mit einer Seitennavigation in WordPress erstellen, sondern auch, wie Sie als Bonus ein Kontaktformular in einem Popup hinzufügen.

Die meisten Leute verlassen die Website, wenn sie keinen richtigen Weg finden, den Eigentümer zu kontaktieren, also wird dieser Bonustipp Ihrer Website wirklich einen außerordentlichen Wert verleihen.

Lassen Sie uns keine Zeit mehr verschwenden und beginnen Sie mit der Erstellung einer umwerfend aussehenden Website mit einer einseitigen Elementor-Navigation . Sie können das endgültige Aussehen der Website über die Schaltfläche unten überprüfen:

Was ist One-Page-Navigation?

Eine Seitennavigation ist, wie der Name schon sagt, ein Navigationsmenü, das speziell entwickelt wurde, um zu verschiedenen Teilen einer Website mit einer einzigen Seite zu navigieren. Die One-Page-Navigation mit einem reibungslosen Scroll-Effekt macht das Navigieren zu verschiedenen Abschnitten zu einer einfachen und benutzerfreundlichen Erfahrung.

"Einfachheit ist die entscheidende Kultiviertheit." —Leonardo da Vinci

Und diese Einfachheit gibt Single-Page-Websites den Vorteil, den sie gegenüber anderen benötigen. Eine einseitige Website eignet sich hervorragend für kleine Unternehmen wie Hochzeitsplaner, Fotografen, kleine Salons, Restaurants usw.

Wenn Sie jedoch ein großes E-Commerce-Unternehmen haben, das zu viele Produkte verkauft oder mehrere Dienstleistungen anbietet und ein größeres Publikum ansprechen muss, dann ist eine Single-Page-Website nichts für Sie.

Was sind die Vorteile einer Single-Page-Website mit One-Page-Navigation?

Sie sollten nicht daran denken, eine einseitige Website für Ihr Unternehmen zu erstellen, nur weil Ihr Unternehmen klein ist. Es gibt viele weitere Vorteile einer einseitigen Website, insbesondere einer einseitigen WordPress-Website. Schauen wir uns einige der Profis an:

• Erstens ist es mobilfreundlich. Dies ist eine wichtige Sache, die es zu beachten gilt, wenn es um Website-SEO (Search Engine Optimization) geht. Ab 2021 nutzen 70 % der US-Bürger ein mobiles Gerät, um im Internet zu suchen. Daten wie diese sind der Grund, warum Google eine für Mobilgeräte optimierte Website priorisiert. Mit dem Single-Page-Design landet Ihre Website von Anfang an in den guten Büchern von Google.

• Die meisten Menschen bevorzugen eine schlichte, schöne und auf den Punkt gebrachte Website gegenüber einer unnötig langen.
• Google zählt die Linkautorität auf Domain- und Seitenebene zu 40 %. Dies ist ein weiterer Bereich, in dem Ihre One-Page-Site einen Vorteil haben wird.
• Einseitige Websites werden schneller geladen als Websites mit vielen Seiten. In Anbetracht der Tatsache, dass die Menschen heutzutage unbegrenzte Möglichkeiten haben, ist es wirklich nicht verhandelbar, eine schnell ladende Website zu haben.
• One-Page-Sites sind einfach zu pflegen.
• Da eine Single-Page-Website alle Informationen auf einer Seite enthält, erleichtert die Scroll-Navigation die Navigation und ein reibungsloser Scroll-Effekt macht die Benutzererfahrung beruhigend.

Ich kann noch einige Zeit weitermachen, aber ich denke, die obigen Informationen vermitteln die Botschaft, dass Sie mit der kleinen Website mit einer Seitennavigation große, ja wirklich große Vorteile erzielen können, wenn Ihr Unternehmen klein ist. Lassen Sie uns also zum Hauptprozess springen, ohne Zeit zu verschwenden.

So erstellen Sie eine einzelne Web-Website mit One-Page-Navigation in WordPress

In diesem Blog zeige ich Ihnen nicht nur, wie Sie eine Website erstellen, sondern auch eine modern aussehende One-Page-Navigation in WordPress, die Ihre potenziellen Kunden beeindrucken wird. Für dieses Tutorial werde ich den beliebten Website-Builder WordPress verwenden (ich weiß, dass es im Titel steht!)

Also lasst uns anfangen…

Schritt #1: Installieren Sie die erforderlichen WordPress-Plugins

Sobald Sie WordPress auf Ihrem System installiert haben. Sie müssen die folgenden WordPress-Plugins installieren:

• Elementor (kostenlose Version)
• ElementsKit (sowohl kostenlose als auch Pro-Version)
• MetForm (kostenlose Version)

Sobald Sie mit der Installation und Aktivierung der erforderlichen WordPress-Plugins fertig sind, ist es an der Zeit, die Website zu erstellen.

Schritt Nr. 2: Erstellen Sie eine Website mit der vorgefertigten Seite von ElementsKit

ElementsKit bietet viele vorgefertigte Seiten und Vorlagen und Abschnitte, sodass Benutzer eine Website mit jedem gewünschten Design, Layout und Stil erstellen können, ohne zu programmieren. Für diesen Blog werde ich die Hochzeitsplaner-Landingpage von ElementsKit verwenden.

Um Ihre Website zu erstellen, gehen Sie im WordPress-Dashboard zu Seiten ⇒ Neu hinzufügen

• Geben Sie einen Titel wie „Home“ ein und wählen Sie „Element“ oder „Volle Breite“ aus den Vorlagenoptionen
• Klicken Sie zum Veröffentlichen und nach dem Veröffentlichen auf Mit Elementor bearbeiten

• Klicken Sie auf die ElementsKit-Schaltfläche (EK), sobald sich das Elementor Builder-Fenster öffnet

• Gehen Sie zur Registerkarte Seite , suchen Sie nach Hochzeitsseite und klicken Sie auf Einfügen

Klicken Sie nun zum Speichern auf Aktualisieren

Schritt #3: So fügen Sie Elementor eine Seitennavigation mit ElementsKit hinzu

Jetzt, wo wir unsere Website haben, ist es an der Zeit für den lustigen Teil, nämlich das Hinzufügen einer Scroll-Navigation auf einer Seite. Die Scroll-Navigation auf einer Seite von ElementsKit ist einfacher zu verwenden und verleiht Ihrer Website ein atemberaubendes Aussehen. Es ist sehr unwahrscheinlich, dass Sie ein anderes Elementor-Addon mit einer Seitennavigation finden, das so gut ist wie ElementsKit.

Sehen wir uns nun den Schritt-für-Schritt-Prozess zum Hinzufügen eines Navigationslinks zum Scrollen einer Seite zu Ihrer WordPress-Site an:

3.1 Schalten Sie das Onepage Scroll-Modul ein

Um Ihrer WordPress-Site eine Scroll-Navigation hinzuzufügen, müssen wir zuerst das Onepage Scroll-Modul aktivieren.

• Gehen Sie zu: WordPress Dashboard ⇒ ElementsKit ⇒ Module
• Schalten Sie Onepage Scroll ein
• Klicken Sie zum Aktualisieren auf Änderungen speichern

3.2 One Page Scroll in den Seiteneinstellungen aktivieren

• Klicken Sie auf das Einstellungssymbol in der unteren linken Ecke des Elementor-Bedienfelds
• Öffnen Sie die Registerkarte ElementsKit-Einstellungen
• Aktivieren Sie die Onepage Scroll-Option

Hinweis: Wenn Sie die Option Onepage Scroll Setting nicht finden können, haben Sie Ihr ElementsKit Pro wahrscheinlich nicht aktiviert

3.3 Wählen Sie den Navigationsstil

Jetzt ist es an der Zeit, den Navigationsstil auszuwählen. ElementsKit bietet Ihnen mehrere Optionen für die Navigation. Zum Beispiel erhalten Sie unter dem Kreis „Skalieren“, „Ausfüllen“, „Ausfüllen“ usw. Für ein quadratisches Muster haben Sie Optionen wie „Skalieren“ und als Teil von „Linie“ erhalten Sie Optionen wie die zu vergrößernde Linie, die Linienfüllung , Linienschrumpfung usw.

Sie können einen beliebigen Stil auswählen, für diesen Blog werde ich das benutzerdefinierte Symbol auswählen. Sobald Sie ein benutzerdefiniertes Symbol ausgewählt haben, erhalten Sie eine Option zum Auswählen eines Symbols für die Option One Page Scroll Navigation Style. Sie können ein Symbol entweder aus der Symbolbibliothek auswählen oder ein benutzerdefiniertes SVG-Symbol hochladen.

So wählen Sie ein benutzerdefiniertes Symbol aus

• Wählen Sie die Option „Benutzerdefiniertes Symbol“ aus der Dropdown-Liste „Navigationsstil“.
• Bewegen Sie den Mauszeiger auf das Navigationssymbol und klicken Sie auf die Symbolbibliothek
• Suchen Sie das gewünschte Symbol und fügen Sie es ein

3.4 Richten Sie andere Navigationseinstellungen ein

Sobald Sie einen Navigationsstil ausgewählt haben, erhalten Sie Zugriff auf die folgenden Einstellungen:

• Navigationsposition: Sie können die Navigationsposition oben, rechts, unten oder links einstellen.
• Offset der Navigationsposition: Hier können Sie den Offset-Wert der Navigationsposition auswählen.
• Navigationsabstand: Wählen Sie den gewünschten Abstand zwischen den einzelnen Navigationssymbolen.
• Navigationsfarbe: Wählen Sie eine Farbe für das Navigationssymbol aus.
• Tooltip-Typografie: Hier können Sie Familie, Schriftgröße, Gewichtstransformation, Stil, Dekoration und Zeilenhöhe für den Tooltip auswählen.

3.5 Seitenabschnitte zu Navigationslinks hinzufügen

Nachdem alle Einstellungen vorgenommen wurden, ist es an der Zeit, die Abschnitte hinzuzufügen, die in der Navigation angezeigt werden sollen. Dazu

• Bewegen Sie den Mauszeiger über den Abschnitt und klicken Sie auf das Symbol Abschnitt bearbeiten
• Gehen Sie zur Registerkarte Erweitert
• Erweitern Sie die ElementsKit-Onpage-Scroll-Option
• Schalten Sie Abschnitt aktivieren ein , um den Abschnitt sichtbar zu machen
• Aktivieren Sie die Option Punkt aktivieren, um diesen Abschnitt als einen der Navigationslinks hinzuzufügen
• Geben Sie einen Namen für den Tooltip-Text ein. Der Tooltip-Text wird angezeigt, wenn jemand mit der Maus über den Link fährt
• Klicken Sie abschließend auf Aktualisieren, um zu speichern

Sie können den oben beschriebenen Vorgang wiederholen, um alle gewünschten Abschnitte zur Navigation hinzuzufügen.

Hinweis: Sie können der Navigation einen Abschnitt hinzufügen, nicht den inneren Abschnitt. Daher finden Sie die ElementsKit-Onpage-Scroll-Option nicht unter der Registerkarte „Erweitert“ für den inneren Abschnitt oder ein anderes Widget.

Nachdem Sie die gesamte Navigation vorgenommen haben, aktualisieren und klicken Sie , um die Vorschau der Navigation auf einer Seite in WordPress anzuzeigen und auch die Links des Navigationsmenüs zu überprüfen.

Schritt #4: Kopfzeile Fußzeile mit dem vorgefertigten Kopfzeilen-Fußzeilenabschnitt von ElementsKit hinzufügen

Nun, Sie haben jetzt eine einseitige Website-Navigation in WordPress, aber Sie benötigen immer noch eine Kopfzeile, um Ihre Website zu vervollständigen. Kopf- und Fußzeilenbereiche einer Website sind sehr wichtig, um Ihr Logo und wichtige Informationen anzuzeigen, damit Ihre Kunden sie leicht sehen können.

ElementsKit bietet Ihnen viele vorgefertigte Kopf- und Fußzeilenabschnitte zur Auswahl. So verwenden Sie die ElementsKit-Kopfzeile Fußzeile:

• Gehen Sie zu ElementsKit ⇒ Kopfzeile Fußzeile ⇒ Klicken Sie auf Neu hinzufügen

• Wählen Sie Typ als Header , Bedingungen als Gesamte Site , schalten Sie die Option Aktivieren/ Deaktivieren ein und klicken Sie abschließend auf Änderungen speichern .

• Um nun einen Header-Abschnitt hinzuzufügen, klicken Sie in dem von Ihnen erstellten Menü auf Bearbeiten
• Klicken Sie auf Inhalt bearbeiten
• Klicken Sie auf die Schaltfläche EK und gehen Sie zur Registerkarte Abschnitte
• Wählen Sie das gewünschte Header-Design und klicken Sie auf Einfügen

Sie können dem Video unten folgen, um eine schöne Kopfzeile für Ihre Website zu erstellen.

Hinweis: Sie können die gleichen Schritte wie in der Kopfzeile ausführen, um einen Fußzeilenabschnitt für Ihre Website mit vorgefertigten Abschnitten von ElementsKit zu erstellen.

Schritt #5: Kontaktformular als modales Popup hinzufügen (BONUS)

Es ist an der Zeit, Ihrer Website ein Kontaktformular hinzuzufügen, damit Ihre potenziellen Kunden einfacher mit Ihnen kommunizieren können. Das Hinzufügen eines Kontaktformulars mit einem Popup würde Ihrer einseitigen Website ein attraktiveres Aussehen verleihen, zusammen mit dem dringend benötigten Formular, das Sie benötigen.

Um ein modales Popup hinzuzufügen, werde ich die RSVP- Schaltfläche durch ein Popup-Modal ersetzen und ein Kontaktformular hinzufügen.

• Gehen Sie zu ElementsKit ⇒ Widgets ⇒ Aktivieren Sie das Popup-Modal ⇒ Klicken Sie auf Änderungen speichern

• Gehen Sie zu Ihrer All Page ⇒ Homepage (oder wie auch immer Sie Ihre Seite genannt haben) und klicken Sie auf Edit with Elementor

• Scrollen Sie im Bearbeitungsmodus zum Abschnitt „RSVP“ und löschen Sie die Schaltfläche „RSVP“.
• Ziehen Sie das modale Popup-Fenster per Drag-and-Drop an die Stelle der RSVP-Schaltfläche

• Um den Text der modalen Schaltfläche zu ändern, gehen Sie zu Inhalt ⇒ Toggler Button ⇒ Label und ändern Sie „Open Modal“ in RSVP (oder was auch immer Sie wollen).

• Wechseln Sie zur Registerkarte Stil ⇒ Umschaltfläche, um die Hintergrundfarbe der Schaltfläche, die Textfarbe, den Randradius und andere Einstellungen für die normale und die Hover-Ansicht zu ändern.

• Gehen Sie jetzt zu Inhalt und aktivieren Sie Vorlagenmodus aktivieren, damit wir unser Kontaktformular hinzufügen können.
• Klicken Sie auf die Popup-Schaltfläche. Klicken Sie nach dem Öffnen auf das Bearbeitungssymbol im Hauptteil, um den Elementor-Editor zu öffnen

• Suchen Sie nach Metform, ziehen Sie das Widget per Drag & Drop
• Klicken Sie auf das Formular bearbeiten, um das Kontaktformular auszuwählen
• Wählen Sie das gewünschte Formular aus der Liste aus und klicken Sie auf Speichern & Schließen
• Klicken Sie abschließend auf Aktualisieren, um zu speichern

Hinweis: Ich hatte das RSVP-Formular bereits mit Metform erstellt und auch die Farbe und den Stil ein wenig geändert, um sie an die Landing-Page-Vorlage anzupassen, die wir verwenden. Im Blog erfahren Sie, wie Sie Kontaktformulare mit Metform erstellen und gestalten .

Sie können sich auch das folgende Video ansehen, um Anweisungen zum Erstellen eines benutzerdefinierten Kontaktformulars mit Metform zu erhalten.

Schritt Nr. 6: Aktualisieren und sehen Sie sich die Vorschau an. Einzelne Website mit One-Page-Navigation

Nun, alles ist erledigt. Nun zum letzten Schritt, dem einfachsten und aufregendsten. Nachdem Sie alle oben genannten Anpassungen und Schritte abgeschlossen haben, klicken Sie auf die Schaltfläche Aktualisieren , um alles zu speichern, und klicken Sie auf die Schaltfläche Vorschau , um Ihre Website anzuzeigen.

Vorausgesetzt, Sie haben alle Schritte korrekt befolgt, sollten Sie eine einseitige Website mit einer einseitigen Navigation in WordPress wie die folgende erhalten:

Einpacken

Gib dir einen Klaps auf die Schulter! Weil Sie mit Elementor und ElementsKit erfolgreich eine modern aussehende, schöne Website mit One-Page-Navigation erstellt haben. Mit einer Single-Page-Website können Kunden einfach zu verschiedenen Abschnitten Ihrer Website navigieren, um sich über Ihr Unternehmen zu informieren. Und dieses modale Ein-Klick-Popup mit Kontaktformular macht die Kommunikation wirklich nur einen Klick entfernt!

Wenn Sie von dem, was Sie erstellt haben, beeindruckt sind, dann machen Sie sich bereit, noch mehr überrascht zu werden, denn ElementsKit eröffnet WordPress- und Elementor-Benutzern unbegrenzte Möglichkeiten, zu experimentieren und eine fantastisch aussehende Website zu erstellen. Nehmen Sie sich also Zeit, um andere erweiterte Widgets und Module von ElementsKit auszuprobieren.

Um mehr über das Erstellen von Websites mit WordPress, Elementor und dem magischen ElementsKit zu erfahren, folgen Sie uns auf unseren Social-Media-Konten.