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](https://wp-pagebuilder-info.de/wp-content/uploads/coming-soon-seite-ergebnis-1024x783.jpg)
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 Zahnrad, um die Seiten Einstellungen zu öffnen.
![Elementor Seitenlayout auf Canvas umstellen](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-1-seiten-layout-canvas-1024x797.jpg)
Stelle das Seitenlayout auf “Elementor Canvas” um. Wechsle im Anschluss den Tab zu “Stil” und ändere die Hintergrundfarbe in Schwarz.
![Elementor Seitenlayout Hintergrundfarbe anpassen](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-2-seiten-hintergrundfarbe-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-3-abschnitt-erstellen-1024x797.jpg)
Wechsle den Tab zu “Stil”, um weitere Einstellungen für diesen Abschnitt vorzunehmen.
![Elementor Abschnitt Hintergrundbild festlegen](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-4-abschnitt-hintergrundbild-1-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-5-abschnitt-animation-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-6-ueberschrift-erstellen-1024x797.jpg)
Passe im Tab “Stil” deine erstelle Überschrift an. Du kannst die Werte übernehmen.
![Elementor Überschrift Widget bearbeiten](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-7-ueberschrift-anpassen-1-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-8-ueberschrift-animation-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-9-text-editor-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-10-text-anpassen-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-11-countdown-hinzufuegen-1024x797.jpg)
Passe deinen Countdown im Tab “Stil” an, indem du Schriftarten und Farben festlegst.
![Elementor Countdown Widget bearbeiten](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-12-countdown-anpassen-1-1024x797.jpg)
![Elementor Countdown Widget bearbeiten](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-12-countdown-anpassen-2-1-1024x797.jpg)
![Elementor Countdown Widget bearbeiten](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-13-countdown-schrift-1-1024x797.jpg)
![Elementor Countdown Widget bearbeiten](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-13-countdown-schrift-2-1-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-14-button-hinzufuegen-1-1024x797.jpg)
Konfiguriere deinen Button im Tab “Stil” und passe Farben, Hover, Abstände, Schriftart und Animation an.
![Elementor Button bearbeiten](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-15-button-einstellen-1-1024x797.jpg)
Ich habe den Button folgendermaßen konfiguriert: Textfarbe in Schwarz, Hintergrundfarbe in Weiß sowie eine Rahmenfarbe in Schwarz.
![Elementor Button bearbeiten](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-16-button-einstellen-1024x797.jpg)
Für die “Hover” Einstellungen des Buttons, habe ich die Farben umgedreht.
![Elementor Button bearbeiten](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-18-button-hover-2-1-1024x797.jpg)
Wechsle den Tab zu “Erweitert” um den Button mittels “Padding” etwas vom Countdown zutrennen.
![Elementor Button bearbeiten](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-19-button-erweitert-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-20-social-media-hinzufuegen-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-21-social-media-anpassen-1024x797.jpg)
![Elementor Social Widget bearbeiten](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-22-social-media-animation-1-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-23-social-media-erweitert-1-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-24-countdown-kopieren-1024x797.jpg)
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](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-25-countdown-erweitert-1024x797.jpg)
Wähle im Anschluss den oberen Countdown aus und verstecke diesen im Tab “Erweitert” unter “Responsiv” für “Smartphones”.
![Elementor Widget auf Smartphones verbergen](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-26-countdown-1-erweitert-1-1024x797.jpg)
Ü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](https://wp-pagebuilder-info.de/wp-content/uploads/tablet-ansicht-1024x797.jpg)
Passe gegebenenfalls die Schriftgrößen deines “Mobilen” Countdowns im Tab “Stil” an.
![Elementor Responsive Ansicht](https://wp-pagebuilder-info.de/wp-content/uploads/schritt-29-countdown-bearbeiten-mobile-3-1024x797.jpg)
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.
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.