Das Standard Elementor Theme „Helo Elementor“ ist schon installiernt
Klicke nun auf Elementor- Einstellungen-Erweitert und deaktiviere Google Fonts. (kann datenschutzrechtlich zu einem Problem werden)
Coming Soon
Zunächst sollten wir eine Coming Soon Seite mit Elementor erstellen:
Klicke dazu auf Elemeentor – Werkzeuge – Wartungsmodus und Wähle „Demnächst verfügbar“ („Coming Soon“) aus
Nun musst Du ein Template erstellen indem Du auf den „erstelle“ Link klickst.
Wähle den Titel: Coming Soon und klicke auf „In Elementor bearbeiten“
Ganz links unten klicke auf die Einstellungen und als Seitelnlayout wähle „Elementor Canvas“ dadurch wird der Titel, Header und Footer von der Seite entfernt und DU kannst Die gesamte Seite in Elementor bearbeiten.
Klicke nun im Elementor Canvas auf den Folder (nicht auf Plus) und in der Suche gib Coming soon ein.
Wähle einfach eine der vorgeschlagenen Seiten aus.
Klicke nun auf „Veröffentlichen“.
Jetzt gehe nochmals auf Elementor – Werkzeuge – Wartungsmodus und Wähle „Coming Soon“ aus. Nun kannst Du auch beim Template „Coming Soon“ auswählen.
Gehst Du nun mit deinem Browser im icognito Modus auf Deine neue Website steht dort „Coming Soon“.
Weitere Seiten erstellen
Dazu gehst Du auf Seiten und erstellst die Seiten:
- Über
- Kontakt
- und weitere Seiten, die Du benötigst.
Gehe nun im Admin Panel auf Seiten, markiere alle Seiten, klick bei Mehrfachoptionen auf Bearbeiten. Klick dann auf Übernehmen.
Wähle unter Template „Elementor VolleBreite“ aus und klicke auf „Aktualisieren“.
Logo & Favicon
Bearbeite eine beliebige Seite in Elementor. Klicke im Elementor Menü links oben auf das Hamburger Menü, dann auf „Website-Einstellungen“ und dort auf „Website Informationen“.
Wähle hier das Icon aus (min 512×512 Pixel).
Gib auch das Favicon an.
Benutzer-Einstellungen
Um später etwas Zeit zu sparen gehe im Elementor auf „Benutzer-Einstellungen:
- Bearbeite eine Seite mit Elementor
- Klicke ganz links oben auf das Hamburger-Menü und dann auf „Benutzer-Einstellungen“
- Mache „Bearbeitungs-Icons“ aktiv und klicke auf Aktualisieren.
Menü erstellen
Einfach auf Design – Menüs gehen.
Unter Name des Menüs gib e.g. „Main Menu“ ein. Klick auf Menü erstellen“.
Markiere nun die Seiten Über, Kontakt und Blog und füge sie dem Menü hinzu. Klicke nun auf Menü speichern.
Header erstellen
Gehe nun auf Templates – Theme Builder und klicke auf „Kopfzeile“ und wähle einen beliebigen Header aus.
Bei Add condition wähle einfach „Entire Site“ / „Gesamte Seite“ aus.
Die bessere Variante ist immer den Header selbst zu gestalten. Hier sind einige nützliche Videos:
- Sticky Header, der sich beim Scrollen etwas verkleinert und schon mit dem Flexbox Container gemacht wurde: https://www.youtube.com/watch?v=LP9QJpbLbog
- Normaler Header mit Bild, Menü sowie Suche: https://www.youtube.com/watch?v=0oEN6sddFgY
Globale Farben
Stelle Deine Globalen Farben ein.
Abstufungen kannst du bei 0to255.com finden: https://0to255.com/
Container Standard-Werte einstellen
Inhaltsbreite: 1200 anstelle von 1140 px
Container Innenabstand: 50 – 10 – 50 – 10 px
Homepage
für die homepage kannst Du Bilder von https://unsplash.com/ , https://www.pexels.com/ , https://pixabay.com/ in der Größe von ca. 1920×1280 suchen und auf WEBP konvertieren! (https://cloudconvert.com/)
Nun kannst Du das Bild als WebP in den Media Manager einbinden: Klick auf Medien und Neu hinzufügen. Gib auch „Alternetiven Text“ und Beschreibung ein.
Bearbeite nun deine Home-Seite in Elementor. Füge den ersten Abschnitt ein und bearbeite ihn. Im Stil als Hintergrund wähle klassisch und füge das Bild ein. Im Layout gib eine mindesthöhe ein. (e.g. VH 75). Im Stil kannst Du nun die Position und die Größe (e.g. Cover) und den Anhang (e.g. Fixed) wählen. (Repeat auf no-repeat!)
Icon Library
Du wirst sicherlich für die Gestaltung Deiner Website eigene Icons benötigen. Die Icons bei Elementor sind sehr begrenzt. Das ist jedoch kein Problem.
Bei Elementor Pro kannst Du eigene Icon Packs einspielen!
Erzeuge ein Gratis Konto bei Fontastic und sammle die Icons Deiner Wahl. Erzeuge dann ein Icon Pack und importiere es in Elementor.
Voila!