Nachfolgend finden Sie unsere Best Practices zum Aufbau einer Website mit Elementor. Die Abfolge entspricht der Reihenfolge im Projektverlauf.
1.024 MB memory_limit hinterlegt sein, damit ausreichend Ressourcen für die Seitenbearbeitung mit Elementor zur Verfügung stehen.Hello Elementor von Elementor ist eine schlanke Basis für das individuelle Theme. Das Theme lässt sich im Einrichtungsprozess von Elementor direkt installieren.Wir empfehlen unter Elementor > Einstellungen > Erweitert folgende Einstellungen zu setzen:
Ungefilterte Dateiuploads aktivieren > Aktivieren, damit Sie SVGs hochladen könnenGoogle Fonts > Deaktivieren damit keine externen Schriften geladen werdenSchlagwort-Generator > Deaktivieren Zudem setzen Sie bei diesen Eigenschaften im Reiter Generell einen Haken:
Standardfarben deaktivierenStandardschriftarten deaktivierenAußerdem sollten im Tab Eigenschaften die folgenden Optionen gesetzt werden:
Grid Container > AktivNested Elements nur aktivieren, wenn Sie diese auf der Website auf verwenden. Dies kann den Editor von Elementor spürbar verlangsamen.Additional Custom Breakpoints > AktivFlexbox Container > AktivHello Theme Header & Footer > InaktivAnschließend können Sie eine beliebige Seite mit dem Elementor Editor öffnen. Wählen Sie in der Werkzeugleiste oben nun Mit Elementor bearbeiten > Website-Einstellungen.
Layout > Layout-Eisntellungen > Inhaltsbreite die gewünschte Standard-Breite.Layout > Breakpooints alle Breakpoints, außer Breitbild.In den Elementor-Einstellungen sollten die globalen Farben und Fonts deaktiviert werden. Diese kann man später trotzdem hinterlegen und verwenden, allerdings erhält man über diese Vorgehensweise mehr Optionen im Hello Elementor.
Alle Farben sind global zu hinterlegen. Ansonsten muss man später bei einer Änderung von Fonts alle einzelnen Elemente anpassen. Das Farbset sollte mindestens folgende Farben umfassen
Die gewünschten Fonts müssen im Bereich Benutzerdefinierte Schriften von Elementor manuell hochgeladen werden, damit Elementor nicht auf Google Fonts zurückgreifen muss.
Neben dem Regular ist der Bold Schriftschnitt empfehlenswert. Von beiden sind auch die Italic Varianten sinnvoll.
Außerdem sollten die Google Fonts deaktiviert werden. Im Elementor muss dazu unter Einstellungen > Erweitert die Einstellung Google Fonts laden auf Blockierung stehen. Es sollte sichergestellt werden, dass in den Elementor-Einstellungen beim Punkt Standardschriftarten deaktivieren kein Häckchen gesetzt ist.
In den Website-Einstellungen von Elementor sollten Sie nun die gewünschten Fonts anlegen. Wichtig ist dabei zu beachten, dass die Zeilenhöhe eingetragen werden muss, da mehrzeilige Überschriften ohne Angabe eines Wertes unschön aussehen.
Das Logo sollte als SVG hochgeladen werden. Der SVG-Upload kann in den Einstellungen von Elementor aktiviert werden. Damit das SVG-Logo auf allen Browsern korrekt dargestellt wird, ist eine Breite im Element anzugeben.
Häufig befindet sich zwischen dem Header und dem Content ein gleichbleibender Abstand. Diesen können Sie direkt im äußersten Container des Headers hinterlegen. Falls an den Header direkt ein Bannerbild oder ein anderes Element anschließen soll, dann ist kein Margin-Bottom notwendig.
Für den Abstand oberhalb des Footers gilt das gleiche, wie beim Header: Wenn der Abstand direkt im äußersten Container des Footers hinterlegt wird, sparen Sie sich später jede Menge arbeit, da der Abstand ansonsten auf jeder Seite hinterlegt werden muss.
Die Inhaltselemente umfassen die einzelnen Bausteine einer Seite. Einige typische Inhaltselemente finden Sie auf dieser Seite.
Bei der Gestaltung der Inhaltselemente geht es noch nicht darum, den Content der Website auf verschiedenen Unterseiten einzupflegen. Stattdessen soll im ersten Schritt auf einer Unterseite eine Sammlung aller verfügbarer Inhaltselemente entstehen.
Die vollständig gestalteten Inhaltselemente speichern Sie später als Standards und Templates ab, um diese auf beliebigen Unterseiten einzufügen und mit Content zu befüllen.
Weitere Tipps:
margin-bottom des jeweils umschließenden Containers zu steuern. Wenn man margin-top und margin-bottom stattdessen mischt, verliert man leicht den Überblick. padding-left und padding-right wieder auf den Standardwert von 10 px gesetzt werden.Aktivieren Sie in den Elementor-Einstellungen die Breakpoints für Desktop, Laptop, Tablet Landscape, Tablet Portrait, Mobile Landscape und Mobile Portrait. Dadurch stehen im responsiven Modus von Elementor mehr Möglichkeiten zur Steuerung der responsiven Anzeige zur Verfügung. Außerdem ist die Responsivität allein durch die Aktivierung der Breakpoints besser.
Da die Einstellungen im responsiven Modus von Breakpoint „groß“ nach „klein“ übernommen werden, empfehlen wir, bei der Optimierung ebenfalls mit den großen Breakpoints zu beginnen. Dabei lösen sich einige Probleme auf kleinen Endgeräten oft von alleine, da diese bereits auf einem größeren Breakpoint behoben wurden.
Die Animationen hinterlegen Sie am besten jeweils auf Ebene des äußersten Containers, welcher das gesamte Inhaltselement umfasst.
Verschachtelte Elemente sollten möglichst nur auf oberster Ebene animiert werden. Wenn man beispielsweise einen Button animiert, welcher sich innerhalb eines Containers befindet, welcher wiederum animiert ist, dann führt das auf iOS dazu, dass der Button nicht ordentlich klickbar ist.
Nehmen wir an, dass Sie ein Element, beispielsweise ein Akkordeon, mit Elementor gestaltet haben. Wenn Sie nun ein weiteres Akkordeon aus der Elementliste einfügen, dann hat dieses wieder den regulären Standard-Stil.
Theoretisch könnten Sie das gestaltete Akkordeon als Template anlegen oder kopieren. Stattdessen können Sie den Standard-Stil aber auch per Rechtsklick auf das gestaltete Element und Auswahl von Als Standard speichern dauerhaft ändern. Das nächste Akkordeon, welches Sie aus der Elementliste einfügen, hat dann den gewünschten Stil.
Wichtig: Die Elemente sind nicht dauerhaft miteinander verknüpft. Wenn Sie den Stil des Elements nachträglich ändern, wirkt sich dies nicht nachträglich auf die anderen Elemente aus.
Templates bestimmen das Aussehen von Unterseiten des gleichen Typs, wie beispielsweise Blogbeiträgen.
Das Page-Template ist zu diesem Zeitpunkt vermutlich bereits vorhanden. Zudem machen abhängig vom Anwendungsfall verschiedene weitere Templates Sinn:
Neben diesen wiederkehrenden Seiten werden häufig benötigt:
Abschließend können Sie die einzelnen Inhaltselemente ebenfalls als Templates speichern, damit diese beim nächsten Schritt einfach geladen werden können.
Nachdem die Seiten- und Inhaltselement-Templates nun verfügbar sind, können Sie den Content auf den einzelnen Unterseiten einpflegen. Dies sollte immer der letzte Schritt sein, da Sie ansonsten Änderungen am Design aufwendig auf alle einzelnen, eingefügten Elemente übertragen müssen.