Erstellen Sie eine einseitige Website mit einseitiger Navigation in WordPress (mit Bonus)

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

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 stärker interagieren können.

In diesem Blog erfahren Sie nicht nur, wie es geht Erstellen Sie eine einseitige Website mit einseitiger Navigation in WordPress sondern auch, wie man als Bonus ein Kontaktformular in einem Pop-up hinzufügt.

Die meisten Leute verlassen die Website, wenn sie keinen geeigneten Weg finden, den Eigentümer zu kontaktieren. Dieser Bonustipp wird Ihrer Website also einen außergewöhnlichen Mehrwert verleihen.

Verschwenden Sie keine Zeit mehr und beginnen Sie mit der Erstellung einer atemberaubend aussehenden Website mit einem Elementor-Navigation auf einer Seite. Sie können sich das endgültige Erscheinungsbild der Website über die Schaltfläche unten ansehen:

Was ist One-Page-Navigation?

Eine Seitennavigation ist, wie der Name schon sagt, ein Navigationsmenü, das speziell für die Navigation zu verschiedenen Teilen einer einseitigen Website entwickelt wurde. Die Navigation auf einer Seite mit sanftem Bildlaufeffekt macht die Navigation zu verschiedenen Abschnitten zu einem einfachen und benutzerfreundlichen Erlebnis.

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

Und diese Einfachheit verschafft Single-Page-Websites den Vorteil, den sie gegenüber anderen benötigen. Eine einseitige Website eignet sich hervorragend für kleine Unternehmen wie Hochzeitsplaner, Fotografie, 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, ist eine Single-Page-Website nicht das Richtige für Sie.

Was sind die Vorteile einer einseitigen 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. Werfen wir einen Blick auf einige der Vorteile:

• Erstens ist es mobilfreundlich. Das ist ein entscheidender Punkt, den es zu berücksichtigen gilt, wenn es um Website-SEO (Suchmaschinenoptimierung) geht. Ab 2021, 70% eines US-Bürgers nutzt ein mobiles Gerät, um im Internet zu suchen. Daten wie diese sind der Grund dafür Google legt Wert auf eine mobilfreundliche Website. Mit dem Single-Page-Design landet Ihre Website von Anfang an bei Google.

• Die meisten Leute Bevorzugen Sie eine Website, die schlicht, schön und auf den Punkt kommt statt einer unnötig langen. 
• Google zählt Domain- und Seitenebene Linkberechtigung bis zu einem Grad von 40%. Dies ist ein weiterer Bereich, in dem Ihre einseitige Website von Vorteil sein wird.
• Einseitige Websites werden schneller geladen als Websites mit vielen Seiten. Angesichts der Tatsache, dass die Menschen heutzutage unbegrenzte Möglichkeiten haben, ist eine schnell ladende Website wirklich nicht verhandelbar.
• Einseitige Websites sind einfach zu pflegen.
• Da eine einseitige Website alle Informationen auf einer Seite enthält, erleichtert die Scroll-Navigation die Navigation erheblich und ein sanfter Scroll-Effekt sorgt für ein beruhigendes Benutzererlebnis.

Ich kann noch etwas weitermachen, aber ich denke, dass die obigen Informationen die Botschaft vermitteln, dass man, wenn sein Unternehmen klein ist, tatsächlich groß werden kann Große Vorteile durch die kleine Website mit einer Seitennavigation. Kommen wir also zum Hauptprozess, ohne Zeit zu verschwenden.

So erstellen Sie eine einzelne 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 verwende ich den beliebten Website-Builder WordPress (ich weiß, dass es im Titel steht!)

 Also lasst uns anfangen…

Schritt #1: Installieren Sie die erforderlichen WordPress-Plugins um Elementor One Page Scroll zu erstellen

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

Eine Website Elementor eine Seite scrollen:

• Elementor (Freie Version)
• ElementsKit (Kostenlose und Pro-Version)
• MetForm (Freie Version)

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

Schritt #2: Erstellen Sie eine Website mit der vorgefertigten ElementsKit-Seite

ElementsKit bietet viele vorgefertigte Seiten und Vorlagen und Abschnitte, damit Benutzer eine Website mit jedem gewünschten Design, Layout und Stil erstellen können, und das auch ohne Codierung. Für diesen Blog werde ich das verwenden Landingpage des Hochzeitsplaners von ElementsKit.

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

• Gib ein Titel Wählen Sie „Zuhause“ aus Elementor in voller Breite aus den Vorlagenoptionen
• Klicken Sie zum Veröffentlichen und nach der Veröffentlichung klicken Sie auf Bearbeiten mit Elementor

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

• Gehe zum Seite Registerkarte „Suchen nach“. Hochzeit Seite und klicken Sie auf einfügen

Jetzt klicken beim Update zum Speichern

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

Jetzt, da wir unsere Website haben, ist es Zeit für den unterhaltsamen Teil, nämlich das Hinzufügen der einseitigen Scroll-Navigation von Elementor. Die ElementsKit Onepage-Scroll-Navigation ist einfacher zu verwenden und verleiht Ihrer Website ein atemberaubendes Aussehen. Es ist sehr unwahrscheinlich, dass Sie ein anderes One-Page-Scroll-Elementor-Add-on finden, das so gut ist wie ElementsKit.

Schauen 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 Aktivieren Sie das Onepage-Scroll-Modul

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

• Gehe zu: WordPress Dashboard ⇒ ElementsKit ⇒ Module 
• Anmachen Onepage-Scroll
• Klicke auf Änderungen speichern aktualisieren

3.2 Aktivieren Sie den One-Page-Scroll in den Seiteneinstellungen

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

Notiz: Wenn Sie die Option „Onepage Scroll Setting“ nicht finden können, ist dies wahrscheinlich nicht der Fall Ihr ElementsKit Pro 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. Unter dem Kreis erhalten Sie beispielsweise die Optionen „Vergrößern“, „Ausfüllen“, „Ausfüllen“ usw. Für quadratische Muster stehen Ihnen Optionen wie „Vergrößern“ zur Verfügung und als Teil von „Linie“ erhalten Sie Optionen wie „Vergrößern der Linie“ und „Linie füllen“. , Linienverkleinerung usw.

Sie können einen beliebigen Stil wählen. Für diesen Blog werde ich das benutzerdefinierte Symbol auswählen. Sobald Sie ein benutzerdefiniertes Symbol ausgewählt haben, erhalten Sie die Möglichkeit, ein Symbol für die Option „Einseitiger Scroll-Navigationsstil“ auszuwählen. Sie können entweder ein Symbol aus dem auswählen Symbolbibliothek oder laden Sie eine benutzerdefinierte hoch SVG-Symbol. 

Um ein benutzerdefiniertes Symbol auszuwählen

• Wählen Sie „Benutzerdefiniertes Symbol“. Option aus dem Navigationsstil-Dropdown-Menü
• Schweben auf dem Navigationssymbol und klicken in der Symbolbibliothek
• Suchen und einfügen das Symbol, das Ihnen gefällt

3.4 Richten Sie weitere Navigationseinstellungen ein

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

• Navigationsposition: Sie können die Navigationsposition als oben, rechts, unten oder links festlegen. 
• Navigationspositionsversatz: Hier können Sie den Offsetwert für die 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.
• 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 abgeschlossen sind, ist es an der Zeit, die Abschnitte hinzuzufügen, die in der Navigation angezeigt werden sollen. Um dies zu tun

• Schweben auf den Abschnitt und klicken Sie auf Abschnitt bearbeiten Symbol
• Gehe zum Registerkarte „Erweitert“.
• Expandieren ElementsKit Onpage Scroll-Option
• Aktivieren Sie die Option zum Aktivieren des Abschnitts um den Abschnitt sichtbar zu machen
• Aktivieren Sie „Enable do“.Mit dieser Option können Sie diesen Abschnitt als einen der Navigationslinks hinzufügen
• Geben Sie einen Namen für das an Tooltip-Text. 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 genannten Vorgang wiederholen, um alle gewünschten Abschnitte zur Navigation hinzuzufügen.

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

Nachdem Sie die gesamte Navigation vorgenommen haben, aktualisieren und klicken zu sehen Vorschau der One-Page-Navigation in WordPress und auch zur Überprüfung der Navigationsmenü-Links.

Schritt #4: Fügen Sie eine Kopf- und Fußzeile hinzu, indem Sie den vorgefertigten Kopf- und Fußbereich von ElementsKit verwenden

Nun, Sie haben jetzt eine Website-Navigation auf einer Seite in WordPress, benötigen aber noch eine Kopf- und Fußzeile, 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 vorgefertigter Header Und Fußzeilenabschnitte wählen von. So verwenden Sie die Kopf- und Fußzeile von ElementsKit:

• Gehe zu ElementsKit ⇒ Kopf- und Fußzeile ⇒ Klicken Sie auf Neue hinzufügen

• Wählen Sie „Typ als“. Header, Bedingungen als Ganze Seite, Anmachen die Option Aktivieren/Deaktivieren und klicken Sie abschließend auf Änderungen speichern.

• Um nun einen Kopfzeilenabschnitt 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 Kopf- und Fußzeile für Ihre Website zu erstellen.

Notiz: Sie können die gleichen Schritte wie in der Kopfzeile ausführen, um mit den vorgefertigten Abschnitten von ElementsKit einen Fußzeilenabschnitt für Ihre Website 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 über ein Popup würde Ihrer einseitigen Website ein attraktiveres Aussehen verleihen und zusätzlich das dringend benötigte Formular enthalten.

Um ein modales Popup hinzuzufügen, werde ich das ersetzen RSVP Klicken Sie auf die Schaltfläche mit einem Popup-Fenster und fügen Sie ein Kontaktformular hinzu.

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

• Gehen Sie zu Ihrer Seite „Alle Seiten“ ⇒ Startseite (oder wie auch immer Sie Ihre Seite benannt haben) und klicken Sie auf Bearbeiten mit 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 Modalschaltfläche zu ändern, gehen Sie zu Inhalt ⇒ Umschaltschaltfläche ⇒ Beschriftung und ändern Sie „Modal öffnen“ in „RSVP“ (oder was auch immer Sie möchten).

• Gehen Sie zur Registerkarte „Stil“ ⇒ Umschaltschaltfläche, um die Hintergrundfarbe der Schaltfläche, die Textfarbe, den Rahmenradius und andere Einstellungen für die Normal- und Hover-Ansicht zu ändern.

• Gehen Sie nun zu „Inhalt“ und aktivieren Sie den Modus „Vorlage 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 Bearbeiten-Formular, 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

Notiz: Ich hatte das RSVP-Formular bereits mit Metform erstellt und auch die Farbe und den Stil ein wenig geändert, um sie an die von uns verwendete Landingpage-Vorlage anzupassen. Sie können sich den Blog hier ansehen wie man Kontaktformulare mit Metform erstellt und gestaltet. 

Sie können sich auch die ansehen Anweisungen finden Sie im Video unten erfahren Sie, wie Sie mit Metform ein benutzerdefiniertes Kontaktformular erstellen.

Schritt #6: Aktualisieren und sehen Sie sich die Vorschau einer einzelnen Website mit One-Page-Navigation an

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 Schaltfläche „Aktualisieren“. um alles zu speichern und klicken Sie auf Schaltfläche „Vorschau“. um Ihre Website zu sehen.

Vorausgesetzt, Sie haben alle Schritte korrekt ausgeführt, sollten Sie eine einseitige Website mit einseitiger Navigation in WordPress wie die folgende erhalten:

Letzte Worte zur Elementor One Page Scroll-Website

Klopfen Sie sich selbst auf die Schulter! Weil Sie mit Elementor und ElementsKit erfolgreich eine modern aussehende, schöne Website mit einer Seitennavigation erstellt haben. Mithilfe einer Single-Page-Website können Kunden problemlos zu verschiedenen Abschnitten Ihrer Website navigieren, um mehr über Ihr Unternehmen zu erfahren. 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 lassen Sie sich noch mehr überraschen, denn ElementsKit eröffnet WordPress- und Elementor-Benutzern grenzenlose Möglichkeiten, zu experimentieren und eine fantastisch aussehende Website zu erstellen. Nehmen Sie sich also die Zeit, sich andere anzusehen Erweiterte Widgets und Module von ElementsKit.

Um mehr über die Website-Erstellung mit WordPress, Elementor und dem magischen ElementsKit zu erfahren, folgen Sie uns auf unseren Social-Media-Konten.