One Page Websites machen eine bestimmte Arbeit gut: Sie legen jede Information, die ein Besucher benötigt, auf eine einzige BildlaufrolleNein herumklicken Keine zweite Seite Nur Held, über, Dienste, Kontakt, fertig.
In diesem Leitfaden geht es darum, wie Sie mit Elementor eine einseitige Website erstellen, indem Sie das kostenlose Plugin, ein leichtes Design und eine Handvoll Widgets von Master Addons verwenden, auf denen das kostenlose Elementor-Set abläuft. Am Ende haben Sie eine Website, die sauber scrollt von oben nach unten, mit Navigationslinks, die zu jedem Abschnitt springen, anstatt eine neue Seite zu laden.
Wenn es eilig ist, dann überspringe die Kurzbefassung des Template-Kits ganz unten, wenn du tatsächlich verstehen willst, was du baust, fang von oben an.
Was ist eine einseitige Website und wann funktioniert sie tatsächlich
Eine einseitige Website stellt alle Ihre Inhalte auf eine einzige URL. Anstatt zu navigieren /about oder /services, springt das Menü zu verankerten Abschnitten auf derselben Seite.
Es funktioniert gut für:
- Freiberufler präsentieren ein kleines Portfolio
- Event-Landingpages (Hochzeit, Konferenz, Produkteinführung)
- Kleine Dienstleistungsunternehmen (Berater, Friseure, Designer)
- Coming-Soon-Seiten oder MVP-Ankündigungen
- Persönliche Lebensläufe und Portfolios
Es funktioniert weniger gut für:
- Blogs, die separate Post-URLs für SEO benötigen
- Online-Shops mit mehr als einer Handvoll Produkten
- Websites, die auf mehrere Long-Tail-Keywords abzielen
Wenn Ihr Inhalt in etwa 7-12 Abschnitte passt, ohne sich vollgepackt zu fühlen, ist ein One-Pager wahrscheinlich das richtige Format.
Was Sie brauchen, bevor Sie beginnen
Drei Zutaten:
- Eine WordPress-Installation (selbst gehostet oder auf Ihrem Lieblingshost).
- Kostenlos Elementor Und die freie Hallo Elementor-Theme. Hallo versendet ohne jegliches Styling, was genau das ist, was man will, wenn Elementor alles zeichnet.
- Die freie Master Addons Plugin Für die Widgets enthält Elementor keine (filterbare Galerien, Preistabellen, Infoboxen, Teamkarussells, Styling von Kontaktformular 7).
Das meiste davon kann man mit kostenlosem Elementor alleine bauen, aber ein paar Abschnitte werden ohne extra Widgets umständlich Ich werde sie im Laufe der Zeit markieren.
Wählen Sie das richtige Thema und die richtige Seitenvorlage aus
Installieren Sie Hello Elementor von Aussehen > Themen > Neues hinzufügen. Es ist ein unbeschriebenes Blatt: keine Seitenleisten, keine Standardstile, keine Meinungen Elementor zeichnet die ganze Seite.
Sobald es aktiv ist:
- Eine neue Seite erstellen (Seiten > Neu hinzufügen).
- Öffnen Sie es in Elementor.
- Klicken Sie unten links auf das Einstellungsgetriebe, gehen Sie zu SeitenlayoutUnd wählen Elementor-Leinwand.
Canvas streift den WordPress-Header und die Fußzeile. Ihr einziger Pager wird zur ganzen Seite.
Wenn Sie Theme-Optionen vergleichen möchten, ist die Beste leichte WordPress-Themes für Elementor Roundup deckt Alternativen ab, aber Hello ist aus einem bestimmten Grund die Standardeinstellung.
Die 11 Abschnitte eines einseitigen Elementorlayouts
Die anständigsten Ein-Pager folgen dem gleichen Rhythmus Hier ist der Stapel, den ich verwende:
- Navigationsmenü (klebrig)
- Heldensektion
- Über
- Dienstleistungen oder Funktionen
- Team
- Portfolio- oder Fallstudien
- Preisgestaltung
- Erfahrungsberichte
- Kontaktformular
- Soziale Ikonen
- Fußzeile
Nicht jede Seite braucht alle elf Ein Solo-Freelancer überspringt wahrscheinlich Team Ein B2 B-Berater könnte die Preisgestaltung überspringen Wählen Sie diejenigen aus, die Ihren Besucher tatsächlich näher an die Kontaktaufnahme bringen, und lassen Sie den Rest fallen.
Erstellen Sie das Navigationsmenü
Erstellen Sie zunächst das Menü in WordPress: Aussehen > Menüs > Neues Menü erstellen.
Benutzerdefinierte Links mit Platzhalter-URLs hinzufügen Verwenden Sie vorerst einen Hash (#), gefolgt vom Abschnittsnamen: #about, #services, #pricing. Sie verkabeln sie am Ende ordnungsgemäß, sobald jeder Abschnitt eine passende ID hat.
Speichern Sie das Menü.
Jetzt, im Inneren von Elementor, einen Abschnitt oben mit zwei Spalten ablegen Setzen Sie Ihr Logo in die linke Spalte Für die rechte Spalte haben Sie zwei Möglichkeiten:
- Freier Elementor: Verwenden Sie das WP-Menü-Widget.
- Master-Addons: Nutzen Sie die Widget für Navigationsmenüs. Es unterstützt Mega-Menü, Hover-Effekte, mobiles Umschalt-Styling und greift das Menü auf, das Sie gerade ohne zusätzliche Konfiguration erstellt haben.
Machen Sie den Abschnitt klebrig Abschnittseinstellungen > Erweitert > Bewegungseffekte > Klebrig: Oben. Wenn Sie eine vollständige Komplettlösung wünschen, wird die Klebekopf im Elementor-Guide Zerlegt es.
Entwerfen Sie die Heldenabteilung
Der Held gibt den Ton an Halten Sie sich kurz: ein Versprechen, eine Nebenzeile, ein Knopf.
Fügen Sie einen neuen Abschnitt direkt unter dem Menü hinzu. Öffnen Sie die Abschnittseinstellungen und stellen Sie ein:
- Inhaltsbreite: Volle Breite
- Höhe: Auf den Bildschirm passen
- Vertikal ausgerichtet: Mittel
Fügen Sie eine große Überschrift, eine Zeile beschreibenden Textes und eine Schaltfläche ein. Verwenden Sie ein Hintergrundbild oder eine einfarbige Farbe im Abschnittsstil. Eine dunkle Überlagerung unterstützt die Textlesbarkeit, wenn das Hintergrundfoto ausgelastet ist.
Wenn Sie einen Vorsprung wünschen, liefert Master Addons Hero-Abschnittsvorlagen in der Vorlagenbibliothek. Importieren Sie eine, tauschen Sie Kopie und Bild aus, und Sie sind in wenigen Minuten fertig.
Fügen Sie den Abschnitt Über
Hier ist nichts schick Ein Standardteil mit zwei Spalten:
- Linke Spalte: ein Foto (Ihr, das Ihres Teams oder Ihr Arbeitsbereich)
- Rechte Spalte: Überschrift + Texteditor + Schaltfläche
Zeigen Sie den Ankerlink der Schaltfläche auf den untenstehenden Abschnitt „Dienste“(„Sehen Sie, was ich tue”), damit Besucher, die an „About” vorbeiscrollen, immer noch einen freien Weg nach vorne haben.
Bauen Sie die Abteilung Dienstleistungen auf
Hier verdient sich das Infobox Widget seinen Platz Free Elementor hat eine Icon Box, die aber begrenzt ist Die Master Addons Infobox-widget Gibt Ihnen mehrere Layouts, Symbolpositionierung, Hover-Zustände und ein URL-Feld auf dem gesamten Feld, sodass die gesamte Karte anklickbar ist.
Erstellen Sie einen Abschnitt, fügen Sie eine Überschrift (“Services” oder “What I Do”) hinzu, dann einen inneren Abschnitt, der in drei oder vier Spalten aufgeteilt ist. Lassen Sie eine Infobox pro Spalte fallen.
Jede Box sollte eine Frage beantworten: wofür ist der Service, für wen ist er da und welches Ergebnis er liefert Hier keine Featurelisten dumpen Dafür gibt es eine dedizierte Servicespage, und auf einem Pager hat man keinen.
Fügen Sie eine Teamabteilung hinzu
Überspringen Sie diesen Abschnitt, wenn Sie alleine sind.
Für 1-4 Personen: Verwenden Sie das Team-Mitglieds-Widget. Jedes Mitglied erhält eine Karte mit Foto, Name, Rolle, kurzer Biografie und sozialen Symbolen.
Bei größeren Teams: Verwenden Sie das Teammitgliederkarussell Es zeigt jeweils drei oder vier Mitglieder und scrollt horizontal, wodurch der Abschnitt optisch enthalten bleibt.
Halten Sie alle Teamfotos gleich Crop und Seitenverhältnis Nicht übereinstimmende Kopfgrößen in einem Raster sehen schlampiger aus, als Sie erwarten würden Dokumentation: Widget für Teammitglieder und Teammitglieder KarussellFür einen eigenständigen Leitfaden siehe So erstellen Sie einen Abschnitt für Teammitglieder.
Fügen Sie ein filterbares Portfolio hinzu
Die Bildergalerie von Free Elementor ist für ein statisches Raster in Ordnung, filtert jedoch nicht nach Kategorien.
Wenn Besucher auf “Branding” oder “Web” klicken und die Rasterumbildung durchführen lassen sollen, benötigen Sie eine filterbare Galerie Master Addons hat eine Es unterstützt Kategorie-Tabs, Popup-Lightbox, Bänder (wie “NEUE” oder “GEFÜHRTE” Badges), und eine Metadatenüberlagerung auf hover.
Einrichtung: Drop in der Filtrierbares Galerie-WidgetBilder hochladen, jeweils mit einer Kategorie markieren, und Stil Mehr Kontext in der Elementorfilterbare Galerie-Plugins-Rundup Wenn Sie sehen möchten, wie es mit Alternativen zu tun hat.
Fügen Sie Preistabellen hinzu
Wenn Sie produktive Dienstleistungen oder Abonnements verkaufen, konvertiert ein Preisabschnitt besser als ein vager “Kontakt für Angebot”
Free Elementor hat kein Preis-Widget, also ist dies Master Addons Gebiet Die Preistabellen-Widget Ist in der kostenlosen Version und gibt Ihnen Überschriften, Preis, Feature-Liste mit Scheck - oder Kreuz-Symbolen, ein Abzeichen für den empfohlenen Plan, und eine CTA-Taste.
Drei Spalten sind der Sweet Spot für einen Pager Besucher-Eye-Scan von links nach rechts, und die mittlere Spalte ist, wo Sie den Plan setzen, den Sie eigentlich auswählen wollen Markieren Sie es “Beliebteste” mit einem Band und stylen Sie es etwas anders (boldere Umrandung, gefüllter Knopf) Mehr Muster-Tipps in der Elementor-Preistabelle Widget Beitrag.
Kundenreferenzen hinzufügen
Zwei oder drei echte Erfahrungsberichte schlagen gegen eine Wand aus falsch aussehenden.
Das Testimonial Carousel von Free Elementor übernimmt das Grundlayout, wenn Sie eine sauberere einspaltige Version (ein großes Zitat, das sich dreht) wünschen, funktioniert das Team Members Carousel in Master Addons seltsamerweise auch hier gut: Kundenfotos in die Mitgliedersteckplätze legen und das Zitat in das Biofeld einfügen.
Bitte um Erfahrungsberichte, die eher ein bestimmtes Ergebnis erwähnen (“im ersten Monat 3 Klienten bekommen”) als generisches Lob (“toll zum Arbeiten”).Spezifika überzeugen Vage Adjektive sind Füllmaterial.
Fügen Sie ein Kontaktformular hinzu
Installieren Sie die kostenlose Kontaktformular 7 Plugin Aus dem Plugin-Verzeichnis Erstellen Sie ein Formular, greifen Sie zum Shortcode.
In Elementor legen Sie ein Texteditor-Widget ab und fügen Sie den Shortcode ein. Das Formular wird gerendert, aber es sieht einfach aus.
Dort übernimmt das Widget Master Addons Kontaktformular 7. Anstatt einen Shortcode einzufügen, können Sie damit Beschriftungen, Felder, Ränder, Fehlermeldungen und den Senden-Button aus dem Elementor-Panel gestalten. Kein benutzerdefiniertes CSS.
Vollständiger Komplettdurchgang in der Kontaktformular 7 Anpassungsdokument. Wenn Sie ein Font Awesome-Symbol im Senden-Button wünschen, finden Sie einen separaten Beitrag auf Anwenden von Font Awesome-Symbolen auf CF7-Tasten.
Soziale Symbole hinzufügen
Free Elementor enthält ein Social Icons Widget Es deckt Facebook, X (ehemals Twitter), LinkedIn, Instagram, YouTube, und eine Handvoll anderer Sie steuern Farbe (Marke oder Brauch), Größe, Form (gerundetes Quadrat oder Kreis), und Abstand.
Setzen Sie diese über oder in Ihre Fußzeile Halten Sie die Zählung auf drei oder vier Plattformen, auf denen Sie tatsächlich aktiv sind Zwölf Symbole, die Hälfte davon tote Konten, sehen schlechter aus als drei gesunde.
Ordnen Sie die Fußzeile an
Bei einem One-Pager kann die Fußzeile eine einzelne Zeile sein.
Fügen Sie einen Abschnitt unterhalb des Kontaktformulars hinzu, einzelne Spalte, zentriert Eine kurze Copyright-Zeile (© 2026 Your Name. Alle Rechte vorbehalten) erledigt die Aufgabe, wenn Sie Datenschutzerklärung oder Begriffslinks benötigen, lassen Sie diese auch hier fallen Nichts anderes gehört in eine One-Pager-Fußzeile.
Verknüpfen Sie das Menü mit jedem Abschnitt (dem Teil, in dem die meisten Leute falsch liegen)
Das ist der Schritt, der Anfänger auf die Beine stellt Die Menüpunkte, die du am Start einrichtest (#about, #services, und so weiter) noch nichts machen, denn die Abschnitte haben keine passenden IDs.
Hier ist der Fix, einmal pro Abschnitt gemacht:
- Bewegen Sie den Mauszeiger über einen Abschnitt und klicken Sie auf den Sechs-Punkte-Griff in der Mitte, um ihn auszuwählen.
- Gehe zu den Fortgeschritten Tabulator im linken Bereich.
- Scrollen zu CSS-ID.
- Geben Sie die ID ohne den Hash ein Also
about„Nicht#about.
Speichern. Wiederholen Sie dies für jeden Abschnitt, zu dem das Menü springen soll. Wenn Sie lieber nicht von Hand Drahtanker verwenden möchten, sagen Sie auf einem langen Blog statt auf einer Landingpage a Inhaltsverzeichnis Plugin Baut diese Sprunglinks automatisch für Sie auf.
Dann geh zurück zu Aussehen > Menüs und bestätigen, dass der Link jedes Menüpunkts die Hash-Version ist (#about, #services, #pricing). Speichern Sie das Menü.
Laden Sie das Frontend neu, klicken Sie auf einen Menüpunkt, und die Seite sollte glatt zum passenden Abschnitt scrollen, springt sie abrupt statt zu scrollen, fehlt dem Theme die Smooth-Scroll CSS-Regel Fügen Sie dies hinzu Anpassen > Zusätzliches CSS:
html { scroll-behavior: smooth; }Fertig.
Überspringen Sie die manuelle Arbeit: Beginnen Sie mit einem Vorlagenset
Wer keine Lust hat, elf Sektionen von Grund auf neu zu bauen, der versendet Master Addons 30+ voll VorlagenkitsViele von ihnen sind ein Pager für bestimmte Branchen (Agentur, Restaurant, Portfolio, SaaS, Berater).
Importieren Sie ein Kit, tauschen Sie die Bilder und kopieren Sie, passen Sie die Farben an Ihre Marke an, und Sie sind live an einem Nachmittag statt einer Woche Die So importieren Sie Elementor-Vorlagen Beitrag den Importschritt abdeckt, wenn man es noch nie gemacht hat.
So empfehle ich auch Anfängern, aus einer Arbeitsvorlage zu bauen, zu lernen, wie jeder Abschnitt aufgebaut ist, und dann von dort aus zu optimieren.
Geschwindigkeits- und Leistungstipps für einseitige Websites
Da die ganze Seite auf einer URL lebt, muss diese URL jedes Bild, jede Schriftart und jedes Skript für jeden Besucher laden Ein aufgeblähter Pager ist ein Conversion-Killer.
Schnelle Gewinne:
- Komprimieren Sie jedes Bild vor dem Hochladen (TinyPNG, Squoosh oder ein Plugin wie Imagify).
- WebP-Format verwenden, wo möglich Die Beste WordPress Bildoptimierer Plugins Aufrunden deckt Optionen ab.
- Faul-Load-Unter-die-Falte-Bilder (Elementor verwaltet dies standardmäßig in modernen Versionen).
- Beschränken Sie Webfonts auf zwei Familien, max.
- Minifizieren Sie CSS und JS mit einem Caching-Plugin (LiteSpeed Cache, WP Rocket oder Autoptimize).
Mehr in So beschleunigen Sie Elementor-Websites. Master Addons v3 ist dreimal schneller als v2 und lädt nur das tatsächlich verwendete Widget CSS und JS für Widgets, was auf einer Single-URL-Site wichtiger ist als auf einer Multi-Page-Site.
FAQ
Kann ich mit Elementor kostenlos eine einseitige Website erstellen?
Ja. Free Elementor plus das kostenlose Hello Elementor Theme plus das kostenlose Master Addons Plugin deckt jeden Abschnitt in diesem Guide ab Pro für einen One Pager brauchst du nicht, es sei denn du möchtest extra Widgets oder den nativen Theme Builder.
Was ist das beste Theme für eine einseitige Elementor-Site?
Hallo Elementor. Es wird ohne Styling ausgeliefert, lädt schnell und lässt Elementor die ganze Seite zeichnen. Jedes eigensinnige Thema (Astra, GeneratePress) funktioniert ebenfalls, aber sie fügen Styling hinzu, das Sie überschreiben müssen.
Wie bringe ich Menülinks dazu, in Abschnitte zu springen, anstatt eine neue Seite zu laden?
Jedem Abschnitt eine CSS-ID zuweisen (Abschnitt > Erweitert > CSS-ID, ohne Hash), dann den Menüpunkt mit demselben Namen verknüpfen, dem ein Hash vorangestellt ist Eine Abschnitts-ID von about Übereinstimmt mit einer Menü-URL von #about.
Ist eine einseitige Website gut für SEO?
Für ein einzelnes fokussiertes Keyword oder lokale Absicht, ja. Für breiteres SEO, das mehrere Themen abdeckt, nein. Ein Pager konkurriert um ein primäres Keyword (den Seitentitel).Mehrseitige Websites können auf Dutzende separater Websites abzielen.
Wie lange dauert es, eine einseitige Website in Elementor zu erstellen?
Von Grund auf 4-8 Stunden für einen sauberen Build Von einem Template Kit ausgehend 1-3 Stunden Die meiste Zeit geht in die Kopier - und Bildauswahl, nicht die Elementorarbeit selbst.
Einwickelnd
Eine einseitige Website mit Elementor ist nicht schwer Wählen Sie Hello Elementor, stellen Sie die Seite auf Canvas, erstellen Sie elf Abschnitte (oder weniger), weisen Sie CSS-IDs zu und leiten Sie das Menü an Hash-Links weiter Fertig.
Wo Master Addons die Dinge beschleunigen:
- Navigation Menü Widget mit Mega-Menü und mobilem Umschalten
- Infobox-Widget für Dienste
- Filterbare Galerie für Portfolios
- Preistabelle (kostenlos) mit integriertem Menüband und Funktionsliste
- Kontaktformular 7 Styling ohne CSS zu schreiben
- Karussell für Teammitglieder und Teammitglieder
- 30+ vollständige Template-Kits, wenn Sie den manuellen Build überspringen möchten
Herunterladen der Kostenloses Master Addons Plugin Und beginnen Sie mit dem Abschnitt, von dem Sie am wenigsten sicher sind, von Grund auf neu zu bauen. Arbeiten Sie von dort nach außen.
Verwandte Lektüre: 100 beste Elementor-Addons · So importieren Sie Elementorvorlagen · Widgets und Erweiterungen · Master Addons Preise
