Elementor konfigurieren

Elementor / Einstellungen / Generell

Hier können Sie festlegen, ob Elementor die Einstellungen aus dem Theme Customizer übernehmen soll oder die globalen Einstellungen von Elementor. Kein Häkchen => von Elementor

Flexbox-Container, Nested Elements aktivieren

Elementor / Einstellungen / Eigenschaften

Hier können Sie alle Eigenschaften aktivieren. Sollten sich noch Eigenschaften im Beta-Status befinden, prüfen Sie, ob diese richtig arbeiten, notfalls dann deaktivieren.

Flexbox-Container, Nested Elements müssen auf jedem Fall aktiviert sein.

Erste Seite HOME erstellen

WordPress / Seiten / Neue Seite erstellen / Titel HOME eingeben

Als Entwurf speichern / Mit Elementor bearbeiten

Aussehen der Seite HOME im Elementor

Seiteneinstellung Elementor Canvas
und Titel Home ausblenden

Seite Einstellungen / Einstellungen / Allgemeine Einstellungen

Titel ausblenden: JA
Seitenlayout: Elementor Canvas

Leere Seite wird sichtbar ohne Header, ohne Footer, ohne Titel

Ansicht leere Seite im Seitenlayout Elementor Canvas

lediglich rechts ist noch der zu- und abschaltbare Navigator zu sehen

Globalen Schriftarten in Elementor
- Allgemeine Informationen

Durch das Einrichten und Verwenden von globalen Schriftarten in Elementor können Sie sicherstellen, dass Ihre Website ein einheitliches und ansprechendes Design hat. Dies verbessert nicht nur die Ästhetik, sondern auch die Benutzererfahrung. Hier sind die verschiedenen Schrifteinstellungen im Design-System von Elementor, jeweils mit zwei Beispielen.

1. Primärschriftart

Die Primärschriftart ist die Hauptschriftart, die für Überschriften und wichtige Textelemente verwendet wird.

• Beispiel 1: Für eine moderne Unternehmenswebsite könnte die Primärschriftart „Montserrat“ gewählt werden. Diese Schriftart hat klare Linien und vermittelt Professionalität, was sie ideal für Überschriften und wichtige Informationen macht.
• Beispiel 2: Eine kreative Portfolio-Website könnte die Primärschriftart „Playfair Display“ verwenden. Diese Serifenschrift hat einen eleganten und künstlerischen Charakter, der gut zu kreativen Inhalten passt und die Aufmerksamkeit der Besucher auf sich zieht.

2. Sekundärschriftart

Die Sekundärschriftart wird oft für Fließtext oder unterstützende Texte verwendet.

• Beispiel 1: Auf einer Blog-Website könnte die Sekundärschriftart „Open Sans“ verwendet werden. Diese Sans-Serif-Schrift ist gut lesbar und eignet sich hervorragend für längere Texte, was die Benutzererfahrung verbessert.
• Beispiel 2: Für eine Gesundheits-Website könnte die Sekundärschriftart „Lato“ gewählt werden. Diese Schriftart ist modern und klar, was sie ideal für informative Texte macht, die leicht verständlich sein sollen.

3. Textfarbe

Die Textfarbe ist entscheidend für die Lesbarkeit und das visuelle Design Ihrer Website.

• Beispiel 1: Auf einer E-Commerce-Website könnte die Textfarbe Schwarz (#000000) für den Fließtext verwendet werden, um sicherzustellen, dass die Produktbeschreibungen klar und gut lesbar sind.
• Beispiel 2: Für eine Wellness-Website könnte eine sanfte graue Textfarbe (#666666) gewählt werden, um eine beruhigende Atmosphäre zu schaffen und den Text weniger aufdringlich erscheinen zu lassen.

4. Akzentfarbe

Die Akzentfarbe wird verwendet, um bestimmte Textelemente hervorzuheben, wie z.B. Links oder wichtige Informationen.

• Beispiel 1: Auf einer Reise-Website könnte die Akzentfarbe ein lebhaftes Blau (#007BFF) sein, das für Links und Call-to-Action-Elemente verwendet wird, um die Benutzer zum Klicken zu animieren.
• Beispiel 2: Für eine Finanz-Website könnte eine goldene Akzentfarbe (#FFD700) verwendet werden, um wichtige Informationen oder Angebote hervorzuheben und Vertrauen zu schaffen.

Globalen Farben in Elementor -
Allgemeine Informationen

In Elementor können Sie mit den globalen Farben eine konsistente Farbpalette für Ihre gesamte Website festlegen. Dies erleichtert die Gestaltung und sorgt dafür, dass Ihre Website ein einheitliches Erscheinungsbild hat. 

Zugriff auf die globale Farbverwaltung:

Klicken Sie auf das Hamburger-Menü (drei horizontale Linien) in der oberen linken Ecke des Elementor-Editors. Wählen Sie „Site-Einstellungen“ aus dem Dropdown-Menü.

Globale Farben festlegen:

In den Site-Einstellungen finden Sie den Abschnitt „Globale Farben“. Hier können Sie die Farben für Ihre Website definieren.
Klicken Sie auf die Schaltfläche „+ Farbe hinzufügen“, um eine neue globale Farbe zu erstellen. Geben Sie der Farbe einen Namen (z.B. „Primärfarbe“) und wählen Sie die gewünschte Farbe aus dem Farbwähler aus.

Weitere Farben hinzufügen:

Wiederholen Sie den vorherigen Schritt, um weitere globale Farben hinzuzufügen, wie z.B. Sekundärfarbe, Hintergrundfarbe oder Accentfarbe. Dies ermöglicht Ihnen, eine konsistente Farbpalette für Ihre gesamte Website zu erstellen.

Globale Farben anwenden:

Wenn Sie ein Element auf Ihrer Seite bearbeiten (z.B. einen Textblock oder eine Schaltfläche), können Sie die globalen Farben auswählen, indem Sie auf das Farbsymbol klicken. Wählen Sie die gewünschte globale Farbe aus der Liste aus.

Wenn Sie eine globale Farbe verwenden, wird das Symbol blau angezeigt, was Ihnen hilft, den Überblick über die verwendeten Farben zu behalten.

Änderungen speichern:

Vergessen Sie nicht, Ihre Änderungen zu speichern, indem Sie auf die Schaltfläche „Aktualisieren“ klicken, um die neuen globalen Farben auf Ihrer Website anzuwenden.

Hier die Farben im Klartext

System Farben                     

PRIMÄR DUNKELBLAU                   #020612

SEKUNDÄR WEISS-SANFT             #FDFCFC

TERTIÄR  GELB                               #FDC14E

ROT                                                   #EB1723

Individuelle Farbe

ROSA                                               #D8676E

SCHWARZ TEXT                             #272A35

HELL-GRAU                                    #EAEAEA

WEISS                                             #FFFFFF

SCHWARZ                                       #000000

GRÜN                                              #0B8E67

GELB-HELL                                    #F0EE86F2

BLAU-HELL                                    #6687BB

Globale Farben einrichten

Globale Farben einrichten

ÄNDERUNGEN SPEICHERN

Globalen Schriftarten in Elementor einrichten

Primär ändern in H1

Schriftfamilie: Playfair Display
Größe 90 px
Schriftschnitt: 400 (normal)
Zeilenhöhe: 1,2 em

Weitere Schrifteinstellungen H2 - H6

Es ändert sich lediglich die Schriftgröße, sonst wie H1

H1 = 90 px

H2 = 64 px

H3 = 28 px

H4 = 24 px

H5 = 18 px

H6 = 16 px

Text = 18 px

Button-Text

Schriftfamilie: Open Sans
Größe 16 px
Schriftschnitt: 600 (fett)

Schriftgrößen - normalerweise

1. Überschriften

H1: 36px

Normalerweise liegt die Schriftgröße für H1 bei 36px. Diese Größe wird für die Hauptüberschrift einer Seite verwendet und sollte auffällig sein, um die Aufmerksamkeit der Besucher zu gewinnen.

H2: 30px

Die Schriftgröße für H2 beträgt in der Regel 30px. Diese Überschriftsebene wird für wichtige Unterüberschriften verwendet und sollte ebenfalls gut sichtbar sein.

H3: 24px

H3 hat normalerweise eine Schriftgröße von 24px. Diese wird für weitere Unterteilungen innerhalb des Inhalts verwendet.

H4: 20px

Die Schriftgröße für H4 liegt typischerweise bei 20px. Diese Überschrift wird oft für weniger wichtige Abschnitte verwendet.

H5: 18px

H5 hat in der Regel eine Schriftgröße von 18px. Diese wird für noch weniger wichtige Überschriften verwendet.

H6: 16px

Die Schriftgröße für H6 beträgt normalerweise 16px. Diese wird für die kleinsten Überschriften verwendet.

Normaler Text: 16px

Der Fließtext hat üblicherweise eine Schriftgröße von 16px. Diese Größe sorgt für eine gute Lesbarkeit und ist der Standard für den Hauptinhalt.

Button-Text: 14-16px

Die Schriftgröße für Button-Text liegt normalerweise bei 14px bis 16px. Diese Größe sollte groß genug sein, um auf den Schaltflächen gut lesbar zu sein, aber nicht so groß, dass sie den Platz auf der Schaltfläche überfüllt.