Wermescher Advisory Logo

WordPress Website 2: Gestalten der Website mit Elementor

Inhaltsverzeichnis

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:

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!

Teilen:
Weitere Posts
Lasagne

Lasagne, ein Klassiker der italienischen Küche, erfreut Gaumen weltweit mit ihrem schichtweisen Reichtum an Aromen und Texturen. Dieses Rezept kombiniert saftiges Rinderhack, aromatische Tomatensauce, cremige

Windows Core Prozesse verstehen

SMSS.EXE Die Aufgabe des SMSS.exe-Prozesses ist es, neue Sitzungen zu erstellen. Zuerst werden Session 0 und Session 1 erstellt, sobald das Betriebssystem startet. Sitzung 0

Ubuntu LTS Release Update

Erzeuge einen Snapshot auf Contabo Einloggen auf: https://my.contabo.com/account/login Klick auf Ihre Dienste und suche nach der korrekten IP Adresse Klick auf Verwalten – Steuerung Erzeuge

Sende uns eine Nachricht