𝐖𝐢𝐞 𝐦𝐚𝐧 𝐬𝐞𝐢𝐧𝐞 𝐄𝐥𝐞𝐦𝐞𝐧𝐭𝐨𝐫 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 𝐞𝐢𝐧𝐫𝐢𝐜𝐡𝐭𝐞𝐭
ein Beitrag von Julia Liebknecht
Hallo zusammen!
Seit meinem letzten Beitrag zum Thema Elementor Website einrichten, im Februar, hat sich einiges getan. Daher nun ein Update. Dies ist der Stand vom 1. Juli 2024
Immer wieder wird die Frage gestellt, wie man eine optimale Elementor Website grundsätzlich einrichtet (von den Einstellungen her). Daher hier nun eine von mir empfohlene Vorgehensweise. Falls Fragen dazu bestehen, einfach in der Elementor-Gruppe unter diesem Beitrag stellen oder einen eigenen Beitrag schreiben. 
Vorbemerkungen
1. Ich empfehle tatsächlich jedem, der die Website nicht nur für eine Webseite z.B. zur Ausstellung der eigenen Gartenzwergsammlung nutzt, Elementor Pro zu erwerben. Ja, es kostet etwas, aber man erspart sich so viel Zeit und Stress, dass wenn man Geld für einen Hoster ausgibt und Zeit in die Webseite investiert, die 59 oder 99 Euro pro Jahr meiner Meinung nach absolut ihr Geld wert sind.
Extrem kurz zusammengefasst warum: Durch Elementor Pro erspart man sich kostenlose Plugins (auch und insbesondere Elementor Add-ons, die oft zu Problemen führen). Außerdem muss man dann nicht den Umgang mit den zusätzlichen Plugins lernen, sondern in diesem Zusammenhang nur Elementor (Pro). Auch erwähnt werden sollte, dass viele Elementor Add-ons oft Sicherheitslücken aufweisen.
2. Elementor wird ständig weiterentwickelt. Das bedeutet, dass sich Einstellungsoptionen und Funktionen ändern können. Dazu später etwas mehr. Ich erwähne das schon hier, weil es wichtig ist, sich auf dem Laufenden zu halten. Auf der Elementor Website kann man z.B. einmal im Monat ganz runterscrollen und dann auf „Blog“ gehen. Und wenn man da mal etwas nicht versteht, kann immer hier in der Gruppe nachgefragt werden oder Google zurate gezogen werden.
Tipp: Wenn man statt Google auf Bing geht und dann oben auf Copilot klickt, bekommt man einen kostenlosen Chatbot. Und da kann man dann ganz gezielt Fragen stellen. Bitte nur immer beachten, dass diese Antworten auch mal (teilweise) inkorrekt sein können. Aber grundsätzliche Fragen z.B. nach Begrifflichkeiten werden eigentlich in der Regel richtig beantwortet. Wenn man Anfänger ist, kann man es dem Chatbot auch sagen und bekommt dann eine entsprechende Antwort.
Zurück zu Elementor:
Neben Elementor und Elementor Pro empfehle ich das kostenlose Hello Theme (von Elementor) zu verwenden.
Kurze Erklärung: Themes kommen mit Funktionen. Hello ist (extrem simplifiziert) relativ leer, denn in Elementor Pro integriert ist der sog. Theme Builder. Da werden einem nicht irgendwelche Funktionen (wie bei anderen Themes) aufgedrückt, sondern man kann sich selbst alles erstellen, wie man es für die eigene Website benötigt. Und das Beste ist, dass man dafür kein Programmierer sein muss, sondern alles logisch und schnell erledigt werden kann.
Als letzten Punkt, bevor ich eine Grundeinstellung empfehle, möchte ich dringend davon empfehlen, die Webseite zuerst auf einem Localhost zu erstellen. An diesem Punkt benötigt man nicht einmal eine Domain oder einen Hostingvertrag. Für absolute Anfänger mag das erstmal wie eine weitere Hürde klingen, aber mit dem kostenlosen Programm Local (by Flywheel) ist es wirklich einfach.
Eine deutsche Anleitung zur Installation ist hier: https://youtu.be/57lYfkXKLU4?feature=shared
Von der Verwendung des live Links rate ich ab (ist sehr unzuverlässig und buggy).
Sobald die Website im Local Dashboard angelegt ist (noch bevor ihr auf die lokale Website anlegt), solltet ihr ein (lokales) SSL Zertifikat anlegen. Das ist nicht schwierig, aber tatsächlich für manche der schwierigste Teil vom Localhost einrichten.
Hier ist eine (englische, aber auch für Leute, die wenig bis fast kein Englisch sprechen gut verständliche) Anleitung für Mac: https://youtu.be/uD-SqbuZXzw?feature=shared
Da ich keinen PC verwende, kann es sein, dass die folgende Aussage falsch ist (falls ja bitte korrigieren), aber ich glaube, da reicht es bei der neuen Website einfach auf „Trust“ zu klicken.
Tipp: Finger weg von Add-ons (die auch schon von Flywheel kostenlos angeboten werden).
Wenn die erste Localhost Website installiert ist, muss man tatsächlich nur (noch) drei Dinge tun:
1. Hello Theme installieren und aktivieren
2. Elementor installieren und aktivieren
3. Elementor Pro installieren (und mit Elementor verbinden und aktivieren)
Die gute Nachricht lautet, dass eine Elementor Pro Installation auf einem Localhost nicht zum Kontingent zählt. Wenn man also eine 3 Website Version gekauft hat, dann hat man nach der Aktivierung im Localhost immer noch 3 Aktivierungen übrig.
Ein bisschen Vorarbeit in WordPress
In meinem Tutorial geht es um Elementor, aber vorher sind ein paar Dinge in WordPress zu erledigen.
Vorab: Geht zu Beiträgen und löscht den Beispielbeitrag. Dann geht zu Seiten und löscht die Beispielseite auch. Dann erstellt bitte eine Seite mit dem Namen „Startseite“ oder „Home“.
Nun geht es bei den Einstellungen in WordPress los:
Allgemein -> Abgesehen von euren individuellen Einstellungen, könnt ihr jetzt schon die URL(s) auf https ändern und speichern klicken. Ihr werdet dann (mit hoher Wahrscheinlichkeit) ausgeloggt, aber das ist okay. Einfach wieder einloggen.
Schreiben -> Da noch keine Seiten oder Beiträge existieren, könnt ihr diesen Punkt (zu diesem Zeitpunkt ignorieren).
Lesen -> Hier ändert ihr die Homepageeinstellung auf „Eine statische Seite“ und unter „Homepage“ wählt die gerade von euch erstellte Seite aus.
Den Rest könnt ihr auf der Seite ignorieren, mit Ausnahme von „Sichtbarkeit für Suchmaschinen“. Diese Box sollte angeklickt werden. Zwar kann euren Localhost niemand sehen, aber wenn ihr die Website an einem Punkt umzieht, ist es hilfreich, wenn das schon angeklickt ist. 
„Speichern“ klicken nicht vergessen!
Diskussion -> Die Einstellungen hängen davon ab, ob ihr einen Blog haben möchtet oder nicht. Was ich aber in jedem Fall empfehlen würde, ist unten „Avatare anzeigen“ zu deaktivieren. Falls jemand eine Erklärung möchte, einfach in den Kommentaren fragen.
Medien -> Bitte alle Werte durch 0 ersetzen. Auch das Häkchen zwischen den Werten rausnehmen. Das untere Häkchen (bzgl. der Uploads) kann man drin lassen, falls man das möchte. Auch hier dann wieder „Speichern“ klicken.
Permalinks -> Hier sollte „Beitragsname“ angeklickt sein. Uuuund speichern.
Datenschutz -> Das könnt ihr an diesem Punkt ignorieren.
Bevor man irgendetwas anderes macht, sollte man nun ein Backup Plugin installieren. Das kann z.B. All-in-one-migration oder (mein präferiertes Backup Plugin) UpdraftPlus sein.
Sobald alles eingerichtet ist, sollte man das erste Backup machen. Und dann immer nach größeren Änderungen. Sollte dann mal irgendwas sein, kann man die Website immer wieder leicht zurücksetzen und verliert nicht unter Umständen Wochen an Arbeit.
Je nach Wissensstand würde ich nun die Installation eines weiteren Plugins empfehlen. Aber ich möchte es ganz deutlich sagen: Das gilt nur für Leute, die Wissen was sie tun. Wer keine Ahnung von PHP hat, der sollte sich den folgenden Schritt sparen!
1. Das Plugin „Code Snippets“ installieren.
2. Folgende Code Snippets würde ich empfehlen:
a)
/*Deaktiviert Gutenberg Editor*/
add_filter(‚use_block_editor_for_post‘, ‚__return_false‘, 5);
b)
/*Verhindert Gutenberg Block Library CSS davon im Frontend zu laden*/
function smartwp_remove_wp_block_library_css(){
wp_dequeue_style( ‚wp-block-library‘ );
wp_dequeue_style( ‚wp-block-library-theme‘ );
}
add_action( ‚wp_enqueue_scripts‘, ’smartwp_remove_wp_block_library_css‘ );
c)
/*Verhindert Thumbnailerstellung*/
function disable_thumbnail_images($sizes) {
unset($sizes[‚thumbnail‘]); // disable thumbnail size
return $sizes;https://design-netzwerk.eu/elementor-grundeinrichtung/
}
add_action(‚intermediate_image_sizes_advanced‘, ‚disable_thumbnail_images‘);
d)
/*Zusätzliche Maßnahme, um das Laden von Google Fonts zu verhinden*/
add_filter( ‚elementor/frontend/print_google_fonts‘, ‚__return_false‘ );
An alle die jetzt gerade lachen: Ja, ich mag Gutenberg echt nicht. Hehe
Hello Einstellungen
Wie bereits erwähnt, empfehle ich das Hello Theme. Hier nun also die von mir empfohlenen Einstellungen:
Im WordPress Dashboard -> Design -> Theme Einstellungen: Bitte toggled „Disable page Title“ an. Dann Einstellungen speichern.
Es werden vermutlich noch weitere Themes neben dem hochgeladenen (und mittlerweile aktivierten) Hello Theme vorhanden sein. Bitte löscht alle außer einem. Das eine dagelassene wird nicht gebraucht, es sei denn, ihr habt mal ein Problem und wollt schauen, ob das aktive Theme das Problem sein könnte (kurzzeitiger Themewechsel). Bitte denkt daran, dass auch deaktvierte Plugins und Themes (die eigentlich vermieden werden sollten) immer upgedatet sein sollten.
Auch noch unter Einstellungen -> Design -> diesmal Customizer:
1. Klickt auf „Website-Informationen“
Hier könnt ihr (falls vorhanden) euer Logo und euer Website Icon/ Favicon einfügen. Achtet bitte darauf, dass es nicht zu groß, aber auch nicht zu klein ist. Grundsätzlich empfehle ich webp als Bildformat zu nehmen, aber hier (und mit ganz wenigen Ausnahmen) empfehle ich png. Zumindest beim Favicon. Wie auch sonst, wer es erkärt haben möchte, einfach fragen.
2. Zusätzliches CSS kann in Elementor an vielen Stellen verwendet werden. Es gilt jedoch, dass, wann immer möglich, man es zentral an einer Stelle haben sollte (damit man die Übersicht behält und Dinge schnell ändern kann).
Grundsätzlich bin ich dagegen, Custom Code zu verwenden, den man nicht selbst versteht und ggf. anpassen könnte.
Für zusätzliches CSS (um alles an einem Ort zu haben) kann man hier den Customizer verwenden oder unter WordPress -> Elementor -> Custom Code.
Letzteres hat den Vorteil, dass man einzeln seine Code Snippets aufgeführt hat und die Anzeige-Konditionen festlegen kann. Wichtig dabei: wenn CSS da eingefügt wird, muss es in style tags gesetzt werden. Also:
<style>
Hier kommt mein Snippet mit einem Klassen Namen
</style>
Für alle, die nun also Custom CSS einfügen möchten, ein paar Empfehlungen:
/*Sicherstellung, dass der Footer immer ganz unten ist*/
body {min-height: 100vh;
display: flex;
flex-direction: column;
}
.elementor-location-footer {
margin-top: auto;}
/*Entfernt den automatischen Abstand unter dem Text Widget*/
.elementor-widget-text-editor p:last-child{margin-bottom:0px;}
/*Entfernt den automatischen Abstand unter dem Icon Widget*/
.elementor-icon-wrapper {
display: flex;
align-items: center;
}
.elementor-icon-wrapper a { display: flex;
align-items: center; justify-content: center;
}
.elementor-icon-wrapper a i {
margin: 0;
padding: 0;
line-height: 1;
}
/*Es werden für normalen Text nur Systemschriften verwendet*/
body {font-family: system-ui,sans-serif!important;}
Zum letzten Punkt: Wenn ihr z.B. nur einen Custom Font (also eine eigene Schrift) in Elementor hochladet z.B. für eure Überschriften, aber ansonsten die Webseite einfach nur schnell haben möchtet, und wollt, dass eure Besucher auf den Inhalt und nicht auf die tollen Schriften achten, dann könnt ihr mit dem letzten Code bestimmen, das der jeweilige Systemfont vom Gerät des Webseitenbesuchers verwendet wird. Diese Schrift ist der Person vertraut (sie fällt nicht auf) und es gibt durch diesen Trick auch Geschwindigkeitsvorteile (weil die Schrift ja nicht vom Server geladen werden muss).
Bitte oben auf Veröffentlichen klicken.
Im WordPress Dashboard geht es nun zu „Elementor“
Generell
-> Inhaltstypen „Seiten“ und falls es einen Blog geben soll „Beiträge“ anklicken. Falls man z.B. ACF (Advanced Custom Fields) verwendet und Custom Post Types erstellt, würde man die hier auch anklicken.
-> „Standardfarben deaktivieren“: bitte anklicken.
-> „Standardschriftarten deaktivieren“: bitte anklicken.
Integration
Wenn man einen Newsletter hat und (als Beispiel) Mailchimp verwendet, kann man hier den API Schlüssel eingeben. Den Schlüssel bekommt man in dem Beispiel hier bei Mailchimp.
Erweitert
Da würde ich nur Folgendes ändern:
Google Fonts und Schlagwort-Generator bitte deaktivieren.
Ungefilterte Dateiuploads könnte notwendig sein zu aktivieren, aber bitte vor Migration/ Liveschaltung der Website unbedingt aus Sicherheitsgründen wieder deaktivieren. (WordPress mag in der Grundeinstellung keine SVG z.B.)
Leistung
-> CSS-Ausgabemethode: Bitte auf „Externe Dateien“ stellen.
-> Optimized Image Loading: In den meisten Fällen würde ich es aktivieren und nur bei Problemen deaktivieren.
-> Optimized Gutenberg Loading: Falls Gutenberg verwendet wird/ es nicht deaktiviert wurde, bitte aktivieren.
-> Element Cache Expiration: 1 Tag sollte in den meisten Fällen okay sein.
Wie immer gilt: Speichern bitte nicht vergessen.
Eigenschaften
Hier ändern sich Dinge am häufigsten. Um zu vermeiden, dass man bei einem Update eine (böse) Überraschung erlebt, empfehle ich dringend, niemals eine Einstellung auf „Standard“ zu lassen, da Elementor sonst den Status (aktiviert oder deaktiviert) jederzeit ändern kann.
Normalerweise sollte man niemals Funktionen im Betastadium implementieren, aber Elementor ist notorisch dafür das Betastadium für manche Funktionen extrem in die Länge zu ziehen. Daher gibt es hier Ausnahmen für diese Regel. Zumindest wenn man eine „saubere“ Website an, wie sie gerade hier angelegt wird. Wenn man zahlreiche Add-ons hat, nicht Hello verwendet usw. kann es durchaus auch bei eigentlich stabilen Funktionen (die offiziell noch in Beta sind) zu Problemen kommen.
Das nun vorausgeschickt, hier meine Empfehlungen (die Reihenfolge und Existenz der Funktionen variiert teilweise je nach Elementor Version):
-> Optimized Control Loading: Aktiv
-> Editor Top Bar: Aktiv (Anmerkung: Diese Editor Version unterscheidet sich visuell vom klassischen Elementor Editor, bietet aber einige Vorteile, u.a. auch Geschwindigkeit. Dennoch kann es etwas verwirrend sein, wenn man Tutorials anschaut, in denen noch der alte Editor verwendet wird).
-> Startseiten: Inaktiv (Mir persönlich ist noch nie ein Fall untergekommen, wo diese Funktion Mehrwert gebracht hätte und alles was man deaktiviert, wird nicht geladen, von daher… weg damit)
-> Nested Elements: Aktiv!
-> Hintergrundbilder nachladen: Aktiv (wenn Hintergrundbilder verwendet werden, ansonsten deaktivieren)
-> Element Caching: Stand Ende Juni 2023 ggf. Inaktiv, aber man kann es auch aktivieren und schauen, ob es keine Probleme gibt. Diese Funktion steht noch ganz am Anfang, bringt aber viele Vorteile. Wichtig dabei ist jedoch, dass man sich schlau macht, was es ist und wie man in Elementor damit umgeht.
-> Bedingungen anzeigen: Aktiv
-> Menü: Wenn man nicht nur ein ganz einfaches Menü erstellen möchte, sondern ein Mega Menü, dann aktivieren. Aber die meisten Anfänger sollten es deaktivieren, da es doch etwas aufwendiger ist und man auf Vieles achten muss dabei.
-> Taxonomy Filter: Aktiv, wenn benötigt, ansonsten bitte auf Inaktiv setzen.
-> Verbessertes Laden von CSS: Aktiv
-> Inline-Schriftarten-Symbole: Aktiv
-> Additional Custom Breakingpoints: Aktiv
-> Flex Container: Aktiv
-> Grid Container: Aktiv
-> Upgrade Swiper Library: Aktiv (aber ist derzeit kein Muss)
-> Default to New Theme Builder: Aktiv
-> Header & Footer: Inaktiv (über den Theme Builder erledigt man alles, da braucht man das hier nicht, meiner Meinung nach)
-> Build with AI: Inaktiv (Erklärung: Die Funktion ist derzeit nicht besonders gut, man hat nur ein begrenztes Kontingent bevor man zahlen muss und wenn man selbst nicht Coden kann, gibt es eine große Gefahr von Fehlern, die unter Umständen auch erst später auffallen.)
-> Form Submissions: Aktiv (wenn man Formulare verwendet)
Speichern bitte nicht vergessen!
Wichtig zu erwähnen, ist, dass es sehr gut investierte Zeit ist, zu verstehen/ lernen was da genau angeklickt wird. Es gibt zahlreiche Videos auf Youtube (bitte immer schauen, wann die erstellt wurden), aber auch und insbesondere die Elementor Website selbst bietet sehr viele Informationen!
Erwartet für Mitte Juli gibt es noch die zusätzlichen Einstellungen:
-> Search: Obwohl noch sehr neu, würde ich tendenziell zum Aktivieren raten.
-> Link in Bio: Zum Zeitpunkt dieses Beitrages ist es noch nicht ausgereift. Es sollte also mit Vorsicht aktiviert werden (Wenn man es überhaupt benötigt).
-> Floating Buttons: Hier gilt dasselbe wie für Link in Bio
Globale Einstellungen
Jetzt geht es zu unserer einzigen Seite (also Startseite/ Home). Wir klicken auf Bearbeiten mit Elementor und gehen dann links oben zu den Website-Einstellungen.
Globale Farben -> Hier legt ihr die Farben (entsprechend eures Farbschemas) fest. Bitte informiert euch über Farbschema (falls noch nicht geschehen) und behaltet immer die Notwendigkeit von ausreichend Kontrast im Hinterkopf. In der Einstellung findet ihr die Möglichkeit, eigene Farben hinzuzufügen.
Tipp: Übertreibt es nicht mit der Farbvariation (weniger ist mehr!) und legt unter den eigenen Farben z.B. weiß und transparent an.
Globale Schriftart und Typography (darunter) können verwirren, weil beides in den Elementor Einstellungen ist. Man fragt sich dann u.U., ob das nicht dasselbe ist. Jein!
Die Globalen Schriftart(en) beziehen sich auf die Arbeit in Elementor. Die Typography bezieht sich auf WordPress.
Ein konkretes Beispiel: Ein Blogbeitrag Template wird erstellt in Elementor. Dieses wird dann automatisch auf jeden Beitrag angewandt. Aber der Beitrag selbst wird in WordPress geschrieben und da kommt dann die Typografie (von WordPress) zum Tragen. Also die klassischen Überschriften-Tags (h1, h2, usw.)
Wegen dieser Verwirrung gibt es die abenteuerlichsten Einstellungen. Viele ignorieren sogar das eine oder das andere.
Da wir mit Elementor arbeiten, sollten (mindestens) die Elementor Schriftarten alle eingestellt werden. Tipp: Unter WordPress -> Elementor -> Eigene Schriftarten (Custom Fonts), also den Schriftarten, die man selbst hinzufügen kann, sollte man seine typischen Überschriftgrößen anlegen. Ein klassischer Denkfehler (der aber eigentlich logisch ist), ist, dass man die Überschriften H1, H2 usw. nennt. Aber in Elementor kann man Überschriften unabhängig der tags festlegen. Ich kann z.B. einen ganz kleinen Text in einer Überschrift wählen, aber dieser Überschrift den tag H1 geben. Das ist relevant für SEO, ohne jetzt ins Detail gehen zu wollen. Und solange man in Elementor arbeitet (und nicht im WordPress Editor) spielt es keine Rolle für das Aussehen des Textes, was für einen Tag eine Schrift hat. Das klingt sehr abstrakt, aber wenn man das Prinzip einmal verstanden (und ausprobiert hat), wird es schnell wie das funktioniert.
Meine Empfehlung bei den globalen Elementor Schriftarten ist, den eigenen Überschriften Namen wie „Ganz große Überschrift“, „große Überschrift“ „mittelgroße Überschrift“ usw. zu geben. Und die können (und ich persönlich finde, sie sollten) dann in der Typography erneut eingegeben werden (reinkopiert werden), allerdings da der Größe nach (also „Ganz große Überschrift“ wäre H1 in dem Beispiel oder auch „Große Überschrift“. Der Fantasie und Freiheit sind da kaum Grenzen gesetzt).
Zu Beachten ist, dass die Schriftgröße für jede Gerätegröße eingestellt werden muss. Nicht nur für Desktop.
Übrigens ist nach dem Custom CSS der (meine Empfehlungen nach) eingegeben wurde „Default“/ „Standard“ der System Font. Da muss also nichts mehr angegeben werden bzgl. Schriftart.
Verwendet bitte keine Pixel für die Größenangaben. Rem oder idealerweise Clamp sind da das Richtige. Hier ist mal eine Erklärung, was das ist: https://youtu.be/Cte0oYy9kYY?si=Waz4oSYtvMlE-_D9
Tipp: Setzt euch mal für eure Gerätegrößen in Pixel (ja, Pixel, aber wartet es ab). Schaut einmal auf Desktop bzw. Widescreen und einmal auf Mobile. Wenn es euch gefällt für die jeweilige Schriftgröße, dann schreibt euch die Werte raus.
Dann geht ihr hierhin: https://clamp.font-size.app/ und gebt euren Maximalwert und den Minialwert ein. Ich persönlich würde als Minimum viewport width 350px nehmen und als Maximum viewport width 2000px. Aber das ist nur eine Möglichkeit von vielen.
Unten seht ihr dann die Clamp. Wenn ihr dann zu der Schriftgrößeneinstellung in Elementor geht, seht ihr PX, Rem usw. als Einheit. Wählt das Stiftsymbol aus. Dann kopiert diesen Wert, den euch der Kalkulator gegeben hat einfach in das leere Feld. Dann löscht „font-size:“ das Freizeichen vor „clamp“ heraus. Wichtig: Wählt Desktop Ansicht aus und fügt dort die Clamp ein. Eigentlich sollte es automatisch für alle Größen funktionieren. Da es aber nicht standardmäßig eingestellt ist, würde ich empfehlen, es für jede Gerätegröße noch einzufügen.
Bzgl. line-height könnt ihr mal schauen, was euch liegt und es entsprechend einstellen. Hier kann es übrigens Sinn machen, em als Einheit zu nehmen (etwas, was nur extrem selten Sinn macht).
Typography
In der Typography achtet bitte darauf, eure Link Farbe (und die Schrift i.d.R. dieselbe wie body/ Text) anzugeben.
Eine Sache noch zur Body bzw. Textgröße: Gerne werden 16px für alle Gerätegrößen als Richtwert angegeben. Es mag seltene Fälle geben, wo das Sinn macht, aber in den meisten Fällen empfehle ich 1.125rem (das entspricht 18px) bzw. 1.25rem (das entspricht 20px und wer je an 4k Monitoren gearbeitet hat oder Sehprobleme hat, wird dem Webdesigner für diese Kleinigkeit danken).
Tipp: Wer nicht alles mühsehlig nochmal eingeben will (zusätzlich zu den globalen Schriftarten), kann hier zu Custom Code gehen und einfach alles dort (für WordPress) festlegen. Das sieht dann so aus von der Struktur:
h1 {font-size: clamp(2.5rem, 1.75rem + 3vw, 4rem); font-weight: 800;}
h2 {font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem); font-weight: 800;}
h3 {font-size: clamp (1.75rem, 1.125rem + 2.5vw, 3rem); font-weight: 700;}
h4 {font-size: clamp (1.5rem, 1rem + 2vw, 2.5rem); font-weight: 500;}
h5 {font-size: clamp (1.25rem, 0.875rem + 1.5vw, 2rem); font-weight: 500;}
h6 {font-size: clamp(1rem, 0.75rem + 1vw, 1.5rem); font-weight: 500;}
body {font-size: clamp(rem, 0.875rem + 0.5vw, 1.25rem); font-weight: normal;}
p {font-size: clamp 1rem, 0.875rem + 0.5vw, 1.25rem); font-weight: normal;}
Dies sind nicht Werte die ich verwende, aber als Beispiel finde ich das recht gut geeignet.
Ggf. kann es Sinn machen, auch line height hinzuzufügen. Zum Beispiel:
p {font-size: clamp 1rem, 0.875rem + 0.5vw, 1.25rem); font-weight: normal; line-height: 1.35em;}
Nun zum Button
Im Idealfall macht man sich schon vorher Gedanken, wie der Button aussehen soll (passend zum Website-Design, inkl. Farbschema). Das muss dann hier nur noch eingegeben werden.
Ich empfehle, die Bildeinstellungen und Formulareinstellungen auch in den Elementor Einstellungen durchzuführen. Achtet bitte darauf, sämtliche Gerätegrößen und Konsistenz im Hinterkopf zu behalten.
Die nächsten Punkte in den Einstellungen sind dann Website Informationen (das hatten wir schon erledigt, aber hier könnte es auch eingestellt/ geändert werden), Hintergrund (außer wenn man einen Hintergrund, der immer angezeigt wird, möchte, würde ich hier nichts machen) und Layout.
Layout
Beim Layout wird es nochmal interessant. Wie schon mehrfach erwähnt, gibt es unterschiedliche Herangehensweisen und (fast) jede hat ihre Existenzberechtigung.
Ich empfehle Container-Innenabstand und Lücken grundsätzlich auf null zu setzen. Denn so muss man im Zweifelsfall nicht erst etwas auf Null setzen, sondern hat von Anfang an die volle Kontrolle.
Hinweis: Manchmal fügt Elementor (trotz der Einstellung hier) einen 20px Innenabstand bei allen Containern ein. Also, am Besten da einen Blick darauf haben.
Kurze Erklärung bzgl. der Inhaltsbreite: Das ist für Anfänger oft verwirrend, da man denkt, dass das immer gilt. Tatsächlich kann man im Elementor Editor bei der Inhaltsbreite immer zwischen volle Breite und Boxed wählen. Und Letzteres ist, was wir in den Webseiten Einstellungen unter Inhaltsbreite anlegen.
Hier gibt es auch wieder viele Herangehensweisen, aber egal was man tut, ich persönlich würde von strikten Pixelwerten abraten. Stattdessen empfehle ich, die Breite fließend anzulegen. Und da muss man auch nicht kompliziert coden oder eine Clamp verwenden. Es reicht Folgendes zu schreiben (wieder bei der Einheit den Stift auswählen):
min(70rem, 90%)
Dieses Beispiel sagt aus, dass der Inhaltsbereich maximal 70rem sein soll (was, wenn man die Root Schriftgröße nicht geändert hat, 1120 Pixel entspricht), aber nie weniger als 90%. Also würde auf einem Desktop die Breite 1120 Pixel haben und auf einem Handy 90% Breite (also 5% Innenabstand links und rechts). Somit muss man sich nach dieser Einstellungen nicht mehr mit dem Thema Inhaltsbreite beschäftigen.
Der Vorteil dieser Methode, wie auch bei Clamp Funktionen, ist, dass es bei Größenveränderungen nie ruckelt (wenn man z.B. ein Browser Fenster verkleinert oder vergößert).
Ganz unten bei den Layouteinstellungen findet man dann noch zusätzliche Breakpoints. Immer vorausgesetzt, man hat sie in den Eigenschaften aktiviert (aber das muss jeder selbst entscheiden). Ich nehme sie gerne. Wenn sie nun also aktiviert sind, kann man selbst festlegen, was man sehen möchte und ob man die von Elementor vorgegeben Größen beibehält oder eigene festlegt.
Alle anderen Einstellungen unter Layout kann man i.d.R. ignorieren.
Kurze Erklärung warum man so viel Zeit aufwenden soll das hier alles einzustellen (anstatt einfach loszulegen):
1. Wenn man einmal alles festgelegt hat, braucht man später nur noch auf das Globus-Symbol gehen (einfach mal z.B. im Überschrift Widget als Beispiel zum Stil Tab gehen). Und schon hat man die Einstellungen. Ein Klick reicht.
2. Neben der Schnelligkeit dieser Lösung, sorgt das auch für Konsistenz (etwas sehr Wichtiges im Webdesign). Abstände, Farbwahl, Größen… All das sollte immer einem Muster folgen und konsistent sein.
3. Wenn man etwas zentral festgelegt hat und irgendwann ändern möchte, dann wird man wahnsinnig, weil man es auf jeder einzelnen Seite umstellen muss.
Wenn alles zentral angelegt ist, reicht eine Einstellung und die ganze Seite verändert sich so wie man es möchte.
Abschließendes
Obwohl das jetzt alles sehr lang war, ist dies eine sehr kurze Zusammenfassung. SEO und Datenschutz werden hier gar nicht behandelt (obwohl das natürlich sehr wichtig ist).
Worauf auch nicht eingegangen wird (obwohl es absolut elementar und sehr wichtig ist), ist die Website Sicherheit!
Dabei muss unterschieden werden zwischen dem, was Laien ohne Vorwissen machen können und sollten und was Profis durchführen.
Aber ihr solltet zumindest einen vernünftigen Benutzernamen haben (auf keinen Fall Admin), ein sicheres Passwort (keine Namen und einfache Zahlenkombinationen, sondern etwas mit Sonderzeichen und Groß- und Kleinschreibung und mindestens 10 Zeichen), und verwendet ein Sicherheitsplugin (das richtig eingestellt werden muss ggf. da wirklich einen Profi ranlassen, oder in die Thematik einarbeiten).
Das Sicherheitsplugin wird aber für Localhost nicht gebraucht und sollte auch besser da noch nicht installiert werden!
Ein Tipp noch ganz zum Schluss: Es mag banal klingen, aber schaut euch Elementor an. Es gibt viele Einstellungen und viele Widgets. Macht euch vertraut. Ein häufiger Anfängerfehler ist, nicht zu lernen, was Elementor kann. So werden dann extrem häufig unnötige zusätzliche Plugins installiert, die die Seite verlangsamen können und die Sicherheit und Stabilität unnötig gefährden können.
Wie oben schon erwähnt, für spezifische Fragen einfach einen eigenen Beitrag erstellen.