Elementor Website Einstellungen (globale Farben und Schriften)

Elementor Pro* ist der nutzerfreundlichste Page Builder für WordPress. 

Hier findest du meine Anleitung zum Elementor Pagebuilder.

Als Webdesignerin arbeite ich jeden Tag mit Elementor und das mit gutem Grund: seit ich den Pagebuilder nutze, kommen meine Kunden auch allein mit ihren Webseiten klar.

In diesem Video zeige ich, wie du die Pro-Version von Elementor installierst und aktivierst.

Danach zeige ich dir noch mein Elementor Setup. Also meine Elementor Einstellungen, die ich bei jeder neuen Webseite mache.

Wenn du noch mehr Elementor Tutorials sehen willst, dann schau mal hier nach: Elementor Anleitung. 

---

Dein Branding mit wenigen Klicks auf deiner Webseite umsetzen

Wenn du schon eine Marke hast, dann weißt du ja, wie wichtig es ist, immer die gleichen Farben und Schriften zu nutzen.

Dein Branding solltest du einmal zentral festlegen. Und zwar in einem Style Sheet (ich habe eine Vorlage dafür), aber auch auf deiner Webseite. Das geht mit dem Elementor in wenigen Klicks.

---

---

Anleitung: Elementor Website Einstellungen

Hast du deine Farben und Schriften schon ausgewählt und dir eine kleine Farbpalette zusammengestellt? Dann kannst du ja direkt damit starten, das im Elementor einzustellen.

Ich habe ein paar Screenshots gemacht, um das zu erklären.

Mit dem Elementor kannst du hier tatsächlich deine komplette Webseite in deinem Branding gestalten.

---

Globale Farben

Wir starten mit den globalen Farben, weil die Farben wirklich die Basis für jedes gute Design System sind.

Ich empfehle dir aber wirklich, dir die Mühe zu machen und mit deiner eigenen Farbpalette zu arbeiten.

Elmentor gibt vier Systemfarben vor:

---

Was stellt man mit den Elementor Standardfarben ein?

Achtung: Der Elementor ist eine Diva und ab und an lässt er dich nicht einfach alle Farben wählen. Deswegen ist es unheimlich wichtig, dass du weißt, wozu diese vier Farben sind.

Die Buttonfarbe lässt sich manchmal nur ändern, wenn man die Accent-Colour ändert. Dazu kommen wir aber später.

Elementor Globale Schriften

---

Elementor Standardfarben um individuelle Farben erweitern

Du kannst weitere Farben hinzufügen, indem du einfach den Button „Farben hinzufügen“ nutzt.

Indem du auf die Namen der Farben klickst, kannst du die Farben so umbenennen, dass sie in dein Design-System und dein Branding passen.

Oder du fügst neue Farben direkt aus dem Elementor-Bearbeitungsmodus hinzu.

Dazu klickst auf das Plus-Zeichen im Farbwähler und am besten benennst du deine Farbe auch direkt, so dass du später in deinem Design System auch einen guten Überblick behältst.

So kannst du Änderungen sehr einfach und für die komplette Webseite umsetzen.

Deine hellen Hintergründe sollen nicht mehr hellblau sein, sondern hellgrün? Mit einem Klick umgesetzt.

Die Schrift auf den dunklen Hintergründen soll nicht mehr weiß sein, sondern hellblau? Kein Problem. Denn du hast zwei weiß-Töne angelegt. Einen für Hintergründe und einen für Schriften. So entfällt lästiges Nacharbeiten.

---

Globale Farben im Alltag nutzen

Um die globalen Farben zu einem beliebigen Elementor-Widget hinzuzufügen, musst du auf die Elementor-Editor-Seite zurückkehren und nicht über die globalen Einstellungen.
Wähle ein Element aus, gehe zur Registerkarte Stil und klicke auf das blaue Globus-Symbol, um eine Liste der verfügbaren Farben anzuzeigen.

Ab jetzt arbeitest du nur noch mit den globalen Farben. Es werden keine Farben mehr manuell eingegeben. Du wählst IMMER eine der globalen Farben aus. Du erkennst, dass eine globale Farbe ausgewählt ist daran, dass der kleine Globus blau leuchtet (sonst ist der grau).

---

Globale Schriften

Es gibt 4 typografische Stile in den Elementor Website-Einstellungen. Die Global Fonts haben die gleichen Bezeichnungen wie die Global Colours, damit du dich leicht zurechtfindest.

---

Was stellt man mit den globalen Schriften ein

Damit du weißt wie du die globalen Schriftarten nutzen kannst, habe ich sie noch einmal aufgelistet:

---

Theme Stil: Was kann man in den Website Einstellungen noch einstellen

Im Theme Stil hast du die Möglichkeit, deine Webseite passgenau an dein Branding anzupassen.

Typografie

Deine H-Überschriften kannst du über die Typografie anpassen.

Dazu wählst du die Typo Option in den Website Einstellungen aus und gibst

WEnn du deine Schriften einstellst, dann achte darauf, auch hier Farben aus deinem Design-System zu wählen.

Du solltest überall hellblau leuchtende Weltkugeln sehen.

Primary für die Überschriften. Fließtext für den Text. Accent für die Links.

Natürlich könntest. duauch andere Farben auswählen, aber der Elementor ist im Bezug auf die Farben ab und an eine Diva und nicht besonders kompromissbereit.

Für deine Schriftgrößen hast du die Möglichkeit zwischen folgenden Einheiten zu wählen:

• PX: Pixel (px) sind absolute Einheiten.
  Wenn du deine Schrift auf 16px setzt, wird die Schrift auch 16 px groß sein. Egal wie gross oder klein andere Elemente sind.
  Pixel zu verwenden kann jedoch in der mobilen Ansicht sehr kompliziert werden.
• EM: Relativ zum Parent-Element. Zum Beispiel der Spalte (oder ab jetzt des Containers) in der das Elementor-Widget liegt.
• REM: Relativ zum Root-Element. Zum Beispiel deine Einstellung in der Seite.
• VW: Steht für Viewport-Width, bezieht sich also auf die Breite des jeweiligen Browser-Fensters.

Was bedeutet das konkret?

• Setzt du die Schriftgrösse in 17px, hat die Schrift diese absolute Größe.
• Setzt du die Schrift auf 1.7rem, entspricht das dem 1.7-fachen der Site Settings (weil Root-Element), in diesem Fall ist die Schrift also 17px groß.
• setzt du die Schrift auf 2em, entspricht das dem 2-fachen der definierten Größe in der Spalte (weil Parent-Element), in diesem Fall ist die Schrift also 34px gross.
• VW und VH: Wenn du die Grösse eines Elements über diese Metriken definierst, beziehen sich VW und VH immer auf die Größe des Fensters. 50vw heißt, dass dein Element halb so breit ist wie das Browserfenster, 50vh logischerweise halb so hoch wie das Browser-Fenster.
  So kannst du unfassbar gut mobil optimieren, ohne dir das Gehirn zu zerdenken.

---

Links formatieren

Im Internet ist gelernt, dass Links unterstrichen sind. Ich kann also nur empfehlen, dass du deine Links auch unterstreichst.

---

Buttons formatieren

Im Theme-Stil kannst du deine Buttons formatieren.

Wenn deine Links unterstrichen sind, werden auch deine Button Texte unterstrichen. Das sind nämlich auch Links.

Wähle bei Auszeichnung „keine“ statt Unterstrichen und schon sehen deine Buttons wieder „normal“ aus.

---

Gerade die Buttons eignen sich hervorragend, um deiner Webseite einen unverwechselbaren Stil zu verpassen.

Du kannst über die Farben und auch über die Typo schon viel vorgeben. Oder über einen Schatten.

Spannend wird es aber vor allen Dingen beim Eckenradius, aber auch beim Innenabstand. Das sind Stilmittel, die nur selten von Laien angepasst werden und jeder Webseite direkt richtig viel Professionalität verleihen.

Wie ich die gleiche Startseite mit anderen Buttons komplett anders designe, kannst du dir hier anschauen:

---

Bilder formatieren

Gib deinen Bildern einen unvergleichlichen Look.

Das sogar die Bilder einheitlich passend zum Branding formatiert werden, sehe ich nur extrem selten. Dabei ist das eine Möglichkeit, noch mal mit Design Elementen zu spielen.

Deine Bilder können alle einheitlich einen Box Shadow (Box-Schatten) haben. Das gibt deiner Seite Tiefe.

Du kannst die Bilder aber auch alle mit einem Rahmen oder abgerundeten Ecken versehen. Oder eben nur einer abgerundeten Ecke.

Ich habe einem meiner Bilder abgerundete Ecken und einen schwarzen Rahmen mit Schatten gegeben. Der „Trauer-Rand“ macht ziemlich viel Wind.

ACHTUNG: Wenn du global Design Elemente festlegst, hat das oft Auswirkungen, an die du gar nicht denkst.

Wie die unterstrichenen Links auf den Buttons oder eben die Tatsache, dass dein Logo im Menü auch ein Bild ist.

Du kannst deine Seite aber auch einfach etwas interaktiver gestalten, indem du Hover-Elemente gestaltest. Also deine Bilder nur beim Hover mit einem Schatten oder einem Rand versiehst (oder etwas durchsichtiger gestaltest).

---

Formularfelder Designen

Wenn du mehrere Formulare auf deiner Webseite hast (für Bestellungen, Kontakt oder Newsletter), dann macht es Sinn, die Formularfelder einmal sauber zu stylen.

Sollen deine Formularfelder langweilig, grau und mit abgerundeten Ecken sein?

Oder willst du sie in deiner Hintergrundfarbe gestalten, angepasst an die Ecken deiner Buttons (also zum Beispiel messerscharfe Kanten).

---

Fazit: Das erste was ich an jeder Website einstelle sind die globalen Farben und Schriften

Mit den globalen Farben in Elementor gibst du deiner Website ein einheitliches Aussehen, das sich durch alle deine Seiten zieht. Das ist ein wichtiger Schritt, den du schon früh im Designprozess machen solltest, denn er hilft dir, eine gut gestaltete Website zu erstellen, die professionell (und teuer) aussieht. Außerdem kannst du so ohne groß nachzudenken schnell und einfach neue Widgets oder Elemente zu bestehenden Seiten hinzufügen. Nutzt du die globalen Farben schon für deine Webseite?