in , ,

Gestalte deine Coming Soon Seite mit Elementor

Werbung, dieser Werbebanner enthält einen Affiliate oder Google-Link. Vielen Dank für deine Unterstützung.

In diesem Beitrag möchte ich dir Schritt für Schritt zeigen wie, du deine Coming Soon Seite in Elementor gestaltest. Wie du eine Coming Soon Seite erstellst und den Wartungsmodus aktivierst, habe ich dir bereits in diesem Beitrag erläutert. Ich erkläre dir in diesem Elementor Tutorial wie ich eine Coming Soon Seite aufgebaut habe, du kannst die einzelnen Schritte übernehmen oder deine eigenen Vorstellungen einfließen lassen.

Im Anschluss dieses Tutorials habe ich dir meine Bearbeitungsdatei zum Download bereitgestellt. Beginnen wir nun mit der Gestaltung deiner Seite.

Coming Soon Seite Vorschau

Elementor Coming Soon Seite Vorschau

Elementor Seitenlayout umstellen

Im ersten Schritt stellst du dein Seitenlayout um, auf unserer Coming Soon Seite möchten wir später, weder Kopf- noch Fußzeile haben. Klicke dazu in der unteren Menüleiste auf das Elementor Einstellungen öffnen Zahnrad, um die Seiten Einstellungen zu öffnen.

Elementor Seitenlayout auf Canvas umstellen

Stelle das Seitenlayout auf “Elementor Canvas” um. Wechsle im Anschluss den Tab zu “Stil” und ändere die Hintergrundfarbe in Schwarz.

Elementor Seitenlayout Hintergrundfarbe anpassen

Erstelle einen Abschnitt

Erstelle nun einen Abschnitt und wähle nur eine Spalte aus. Stelle unter “Layout” die “Inhaltsbreite” auf “Volle Breite”, sowie die “Höhe” auf “An Bilschirm anpassen” aus.

Elementor Abschnitt erstellen

Wechsle den Tab zu “Stil”, um weitere Einstellungen für diesen Abschnitt vorzunehmen.

Elementor Abschnitt Hintergrundbild festlegen

Füge ein Hintergrundbild zu deinem Abschnitt hinzu, stelle die “Position”, “Repeat” und “Größe” deines Bildes ein. Wechsle im Anschluss den Tab auf “Erweitert”. Damit der Hintergrund beim Laden der Seite etwas in “Schwung” kommt, erstellen wir eine “Bewegungsanimation”. Übernehme dazu folgende Werte wie auf dem Bild beschrieben oder verwende eine eigene Animation.

Elementor Abschnitt Eingangsanimation erstellen

Coming Soon Seite mit Inhalt füllen

Nachdem wir nun den Abschnitt mit einem Hintergrundbild und einer Animation belegt haben, kannst du mit dem Inhalt deiner Seite beginnen. Füge dazu ein “Überschriften-Widget” in deine Spalte hinzu.

Elementor Überschrift Widget einfügen

Passe im Tab “Stil” deine erstelle Überschrift an. Du kannst die Werte übernehmen.

Elementor Überschrift Widget bearbeiten

Füge deiner Überschrift eine “Eingangsanimation” hinzu. Vergebe eine Verzögerung von: “2000 ms”, damit die Animation erst nach der Hintergrund-Animation startet.

Elementor Überschrift Widget bearbeiten

Text-Widget hinzufügen

Füge ein Text-Widget unterhalb deiner Überschrift ein und beschreibe deine Seite oder gebe einen Ausblick auf das, was deine Besucher hier in Zukunft erwarten dürfen.

Elementor Text Widget einfügen

Passe deinen Text im Tab “Stil” an. Verwende die selbe Schriftart wie auch in deiner Überschrift. Wie du Schriftarten in Elementor einbindest und verwendest erfährst du in diesem Beitrag.

Elementor Text Widget bearbeiten

Countdown hinzufügen

Damit deine Besucher erfahren wann, deine Webseite fertig ist, fügst du nun ein Countdown-Widget ein.

Elementor Countdown Widget einfügen

Passe deinen Countdown im Tab “Stil” an, indem du Schriftarten und Farben festlegst.

Elementor Countdown Widget bearbeiten
Elementor Countdown Widget bearbeiten
Elementor Countdown Widget bearbeiten
Elementor Countdown Widget bearbeiten

Interaktionsmöglichkeiten hinzufügen

Damit deine Coming Soon Seite mehr Interaktion bietet, kannst du noch einen Button hinzufügen. Du kannst dabei deinen Button mit verschiedenen Funktionen belegen, in diesem Beispiel habe ich mich für eine Newsletter-Anmeldung über ein Popup entschieden. Wie du ein Popup samt Newsletter-Anmeldung erstellst, zeige ich dir in einem anderen Beitrag.

Elementor Button einfügen

Konfiguriere deinen Button im Tab “Stil” und passe Farben, Hover, Abstände, Schriftart und Animation an.

Werbung, dieser Werbebanner enthält einen Affiliate oder Google-Link. Vielen Dank für deine Unterstützung.
Elementor Button bearbeiten

Ich habe den Button folgendermaßen konfiguriert: Textfarbe in Schwarz, Hintergrundfarbe in Weiß sowie eine Rahmenfarbe in Schwarz.

Elementor Button bearbeiten

Für die “Hover” Einstellungen des Buttons, habe ich die Farben umgedreht.

Elementor Button bearbeiten

Wechsle den Tab zu “Erweitert” um den Button mittels “Padding” etwas vom Countdown zutrennen.

Elementor Button bearbeiten

Social Media Buttons hinzufügen

Füge unterhalb deines Buttons Social Media Buttons hinzu, um weitere Interaktionsmöglichkeiten zu schaffen.

Elementor Social Widget einfügen

Passe deine Social Media Buttons im Tab “Stil” an. Du kannst die Farben der Buttons sowie Abstände und Animation anpassen.

Elementor Social Widget bearbeiten
Elementor Social Widget bearbeiten

Damit deine Social Media Buttons etwas mehr Abstand zum Button erhalten, kannst du im Tab “Erweitert” mithilfe von “Padding” den Abstand erhöhen.

Elementor Social Widget bearbeiten

Responsive-Einstellungen vornehmen

Im Prinzip ist deine Coming Soon Seite fertig. Jedoch fällt beim Klick durch die einzelnen Responsive-Ansichten insbesondere im “Mobilen” der Countdown unschön auf. Entweder passt du nun deinen vorhandenen Countdown-Widget an oder duplizierst diesen, um ihn extra für die “Mobile” Ansicht anzupassen.

Elementor Countdown Widget bearbeiten

Stelle die Ansicht unter “View” auf “Block” um. Klicke im Anschluss auf den Tab “Erweitert”. Verstecke unter “Responsiv” dein Countdown-Widget auf “Computern” und “Tablets”. Dein Widget sollte nun leicht “grau” dargestellt werden.

Elementor Widget auf Computern und Tablets verbergen

Wähle im Anschluss den oberen Countdown aus und verstecke diesen im Tab “Erweitert” unter “Responsiv” für “Smartphones”.

Elementor Widget auf Smartphones verbergen

Überprüfe die einzelnen Ansichten indem du die Responsive-Vorschauen durchschaltest. Die ausgegrauten Elemente sind natürlich nur für dich im Bearbeitungsmodus “sichtbar”.

Elementor Responsive Ansicht

Passe gegebenenfalls die Schriftgrößen deines “Mobilen” Countdowns im Tab “Stil” an.

Elementor Responsive Ansicht

Speichere deine Seite ab und starte die Vorschau, um dir das Ergebnis anzuzeigen.

Download Elementor Template-Datei

Lade dir die Bearbeitungsdatei herunter. Du kannst das Template frei verwenden. Wie du ein Template importierst, erfährst du in diesem Beitrag.

Download “Elementor Coming Soon Template” coming-soon-template.zip – 220-mal heruntergeladen – 856,37 kB

Fazit

Das Gestalten einer Coming Soon Seite geht schnell und unkompliziert mit Elementor. Neben zahlreichen Animationen, Schriftarten und Interaktionsmöglichkeiten stehen dir quasi unendliche Möglichkeiten, deine Seite individuell zu gestalten.

Werbung, dieser Werbebanner enthält einen Affiliate oder Google-Link. Vielen Dank für deine Unterstützung.

Was denkst du über diesen Beitrag?

135 Points
Upvote Downvote

Written by wp-pagebuilder-info

Mit einem Faible für Grafikdesign und Webseiten begann ich meine Karriere in einer Werbeagentur für Großformatdrucke. Webgestaltung und Webseiten ließen mich aber nie ganz los, sodass ich nebenbei noch einige Webprojekte und Blogs betreibe. Vor einigen Jahren noch mit Joomla, bin ich nun gänzlich auf WordPress umgestiegen und bedaure diesen Schritt bis heute nicht. Mit dem Page-Builder Elementor habe ich dabei recht früh begonnen zuarbeiten und war von Anfang an begeistert wie dieser mit WordPress harmoniert. So war es nur eine Frage der Zeit bis ich ein Webprojekt, das sich auf diesen Page-Builder konzentriert gestartet habe. Mit diesem Blog möchte ich nun mein gesammeltes Wissen zu WordPress und Elementor weitergeben und hoffe, das du von dieser Erfahrung für deine Projekte profitieren kannst.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Erstelle deine eigene Wartungs- oder Coming-Soon-Seite in Elementor

Coming Soon Seite mit Elementor erstellen

landing page builder WordPress mit Elementor

landing page builder WordPress mit Elementor