Divi Themebuilder im Härtetest
März 20, 2021
Der Divi Themebuilder ist sicherlich einer der besten Theme- und Pagebuilder auf dem Markt. Wie schneidet er im Test ab?
Die häufigsten Fehler,
die Anfänger mit Elementor begehen
Inhaltsverzeichnis
Verwenden Sie Elementor richtig? Mit Elementor, das Millionen von Websites mit Strom versorgt, haben wir die häufigsten Fehler von Neulingen gesammelt. Lernen Sie, sie zu vermeiden, um Ihren Workflow sofort zu verbessern.
Elementor war schon immer führend in Bezug auf Benutzererfahrung und Benutzerfreundlichkeit. Obwohl wir die Dinge einfach machen wollen, wird es immer eine Lernkurve geben. Um Ihnen den Start zu erleichtern, haben wir uns entschlossen, die häufigsten Fehler, die Menschen in Elementor machen, und die Lösungen für diese Fehler aufzulisten.
Wenn Sie feststellen, dass Sie einige dieser Fehler selbst gemacht haben, verprügeln Sie sich nicht. Wenn Sie ein Werkzeug oder eine Aufgabe beherrschen, müssen Sie immer etwas mehr lernen. Die Idee ist, offen zu bleiben, wenn Sie Ihre Fähigkeiten verbessern möchten. Lassen Sie uns diese häufigen Fehler und ihre Lösungen durchgehen, damit Sie Ihre Elementor-Fähigkeiten auf die nächste Stufe bringen können.
Fehler Nr 1 – Sich sofort auf die Erstellung einer Website mit Elementor stürzen.
Wenn ich die Probleme und Anfragen auf der Elementor Community Facebookseite
( https://www.facebook.com/groups/Elementors) lese, habe ich oft den Eindruck, dass viele Elementor Anfänger vergessen, dass Elementor keine Wunderwaffe ist, die alles kann, sondern ein Pagebuilder der auf der WordPress Plattform seine Dienste leisten soll. Ob dies die Grundeinstellungen von WordPress sind, die Permalinks, die Menüeinstellungen oder andere Einstellungen, die ein einwandfreies Arbeiten ermöglichen, ist bei vielen ein Fremdwort. Als Anfänger, und auch manch andere, scheint dies wenig zu interessieren und wundern sich dann, dass vieles nicht einwandfrei läuft.
Lösung: Die Grundschritte von WordPress mit einem der vielen Tutorials lernen. Dies nimmt nicht extra viel Zeit in Anspruch, hilft Ihnen aber im Nachhinein viel Zeit und Ärger zu sparen.
Fehler Nr. 2 – Verwenden eines inkompatiblen Themes
Beginnen wir mit dem zweiten häufigen Fehler in Elementor: der Verwendung eines inkompatiblen Themes.
Elementor ist ein universelles Plugin. Es wurde entwickelt, um den WordPress-Codierungsstandards zu entsprechen, sodass jedes Theme, das dem WordPress-Codex folgt, mit Elementor kompatibel ist. Dies bedeutet jedoch nicht, dass alle Themes, die mit WordPress funktionieren, den Codierungsstandards entsprechen, und es bedeutet auch nicht, dass jedes Theme unter Berücksichtigung von Elementor erstellt wurde. Aus diesem Grund höre ich von Zeit zu Zeit von Benutzern, die Probleme beim Bearbeiten ihrer Seite haben.
Hier sind einige häufige Probleme, die sich aus der Verwendung eines inkompatiblen Themes ergeben:
- Keine Seite in voller Breite
- Schwierigkeiten beim Entfernen von Leerzeichen unter der Kopfzeile
- Schriftarten oder Farben können nicht geändert werden
Lösung: Ändern Sie Ihr Theme
Es gibt verschiedene Lösungen, um diesen Fehler zu vermeiden:
Am einfachsten ist es, Ihr Thema in ein ähnliches zu ändern, das kompatibel ist. Der beste Ort, um WordPress-kompatible Themen zu finden, ist in ihrem Repository. Verwenden Sie noch besser Themen, die mit Elementor gut funktionieren, wie Astra und OceanWP.
Eine andere Möglichkeit, das Problem zu lösen, besteht darin, sich bezüglich des problematischen Themes an das Elementor Support-Team zu wenden und es zu bitten, den Fehler zu beheben, was aber manchmal problematisch sein kann. Alternativ können Sie aber auch die Elementor Community um Hilfe bitten.
Vielleicht ist die beste Lösung, das Hello-Theme und den Theme-Builder von Elementor zu verwenden, um alles so anzupassen, dass es funktioniert und so erscheint, wie Sie es wünschen.
Fehler Nr. 3 – Verwenden von Spalten und Abstandshalter-Widgets zum Positionieren von Elementen
Der nächste häufige Fehler ist die Verwendung von Spalten und Spacer-Widgets zum Positionieren von Elementen. Wir sind auf viele Benutzer gestoßen, die ihre Elemente vom ersten Tag an mithilfe zusätzlicher Spalten und des Spacer-Widgets positioniert und ausgerichtet haben. Dies ist nicht nur unnötig, sondern auch schädlich für Ihre Seite.
Jedes Mal, wenn Sie Ihrer Seite eine Spalte hinzufügen, fügen Sie Ihrem HTML-Code ein Markup hinzu, das als Grundgerüst Ihrer Seite fungiert. All dieses zusätzliche Markup summiert sich und gibt den Systemen mehr Arbeit, was letztendlich den Ausschlag gibt, wenn es um die Ladezeit Ihrer Seite geht. Darüber hinaus vermittelt die Verwendung leerer „Inhalts“ -Elemente zum Anordnen Ihres Layouts Suchmaschinen den falschen Eindruck, was zu einem niedrigeren Ranking für Ihre Website führt.
Lösung: Verwenden Sie Abstand (Padding) und Rand (Margin)
Jedes einzelne Element und Widget in Elementor verfügt über Parameter für Rand, Abstand und Z-Index. Viele haben sogar zusätzliche Ausrichtungs- und Positionierungsoptionen in den Registerkarten Widget-Inhalt und Stil. Durch die Verwendung dieser Optionen stellt Elementor sicher, dass Sie nur minimale Daten für Ihren Code verwenden. Wenn Sie diese Daten im CSS-Code behalten, müssen Sie den Markup-Code nicht mehr hinzufügen. Auf diese Weise können Sie auch den Abstand kopieren / einfügen, wenn Sie die Option Stil einfügen verwenden.
Nur eine kurze Erinnerung: Der Rand definiert den Abstand außerhalb des Widget-Rahmens, während der Abstand den Raum innerhalb des Rahmens zwischen dem Rahmen und dem Element definiert.
Gewöhnen Sie sich an Padding und Margin. Schließlich sind sie dafür konzipiert.
Fehler Nr. 4 – Falsche Verwendung des Widgets für den inneren Abschnitt
Während wir uns mit Spalten befassen, ist es Zeit, einen weiteren häufigen Spaltenfehler zu erwähnen:
Die falsche Verwendung eines Inner-Section-Widgets oder das, was einige Benutzer das Column-Widget nennen.
Wie Sie wissen, können Sie einen neuen Abschnitt am besten hinzufügen, indem Sie auf Neuen Abschnitt hinzufügen klicken. Anstatt einem Abschnitt eine Reihe von Spalten zuzuweisen, haben sich einige Benutzer leider angewöhnt, ein Widget für den inneren Abschnitt zu ziehen.
Lösung: Verwenden Sie reguläre Spalten
Wenn Sie einen Abschnitt einrichten, empfiehlt es sich, die Schaltfläche Neuen Abschnitt hinzufügen zu verwenden und dann die gewünschte Anzahl von Spalten auszuwählen. Dies hält nicht nur alles schön und einheitlich in Ihrem Abschnitt, sondern ermöglicht es Ihnen auch, einige Dinge unabhängig zu machen, wie animierte Hintergründe und Vordergrund, während ein leichtes Markup erhalten bleibt.
Das Widget für den inneren Abschnitt wurde entwickelt, um Benutzern das Erstellen einer Unterscheidung innerhalb eines etwas einheitlichen Abschnitts zu ermöglichen. Wenn Sie Ihrem Abschnitt lediglich eine Spalte hinzufügen möchten, klicken Sie einfach mit der rechten Maustaste auf das Spaltenhandle und fügen Sie eine neue Spalte hinzu.
Fehler Nr. 5 – Bearbeiten ohne Deaktivieren oder Löschen des Cache
Ein weiterer häufiger Fehler ist das Erstellen Ihrer Website, ohne zuvor den Cache zu deaktivieren oder zu leeren. Websites werden ständig geändert und aktualisiert. Es ist etwas, das wir als gegeben betrachten. Ich habe festgestellt, dass Benutzer viel zu oft Stunden damit verbringen, Änderungen an ihrer Site vorzunehmen, nur um festzustellen, dass dies für die Site im Front-End, auf der sie sich befindet, absolut keinen Unterschied macht.
Das Caching für unsere Websites ist so konzipiert, dass es sich im Front-End befindet und die Anfragen nach Inhalten von Personen, die Ihre Website besuchen, erwidert. Ein Cache enthält Inhaltsdaten, die häufig nachgefragt werden und die Downloadzeit verkürzen. Am häufigsten haben wir den Browser-Cache, aber wir haben auch ein Cache-Plugin und einen Website-Cache auf dem Server des Hosts.
Sofern wir dem System nicht mitteilen, dass wir Änderungen vornehmen, senden diese Caches weiterhin den Inhalt, den wir ursprünglich definiert haben.
Lösung: Cache löschen
Hier sind einige Methoden, mit denen Sie diesen Fehler vermeiden können: Durch das Aktualisieren der Seite im Browser wird der Browser-Cache geleert. Sie können dies tun, indem Sie auf dem Mac Befehl + R oder auf einem PC F5 drücken.
Sie können auch in die Einstellungen des Browsers gehen und die Option Cache löschen suchen.
Eine andere Möglichkeit besteht darin, nach der URL in der Adresszeile ein Fragezeichen einzufügen, gefolgt von etwas Kauderwelsch. Dies zwingt den Browser, nach diesen Informationen zu suchen. Dabei wird eine neue Version der Seite neu geladen.
Einige Benutzer verwenden Cache-Plugins wie WP Rocket oder WP Fastest Cache, die das Daten-Caching außerhalb des Browsers durchführen, um das Laden der Seite zu beschleunigen.
Hier empfehle ich Ihnen, das Cache-Plugin im WordPress-Dashboard zu deaktivieren, bevor Sie mit der Bearbeitung oder Änderung Ihrer Website beginnen. Wenn Sie dies vergessen haben, verwenden Sie die Optionen in den Plugin-Einstellungen, um den Cache zu leeren.
Gelegentlich muss das Caching auf dem Hosting-Server aktualisiert werden. Wir können überprüfen, ob dies Probleme verursacht, wenn die Seite nach dem Klicken auf Aktualisieren im Elementor-Editor nicht neu geladen werden kann.
Wenn ja, gehen Sie im WordPress-Dashboard zu Elementor> Extras> und klicken Sie in der allgemeinen Registerkarte auf die Schaltfläche CSS neu generieren und dann auf Speichern.
Fehler Nr. 6 – Verwenden der Bilder in falscher Größe
Der nächste häufige Fehler ist die Verwendung von Bildern mit falscher Größe. Es gibt keinen Mangel an Benutzern, die Bilder hochladen, die entweder zu klein oder zu groß für den zugewiesenen Platz auf der Seite sind. Passen Sie dann die Einstellungen des Bild-Widgets an, um die Anpassung des Bildes zu erzwingen. Dies gilt auch für Benutzer, die Bilder unterschiedlicher Größe in Bildergalerien oder Karussells hochladen und feststellen, dass sie die gleichen Schwierigkeiten haben. Versierte Nutzer werden es wissen und sind sich zweifellos einig, dass Planung der Schlüssel ist, um richtig zu arbeiten und dabei Zeit zu sparen.
Lösung: Optimieren von Bildabmessungen und -größe
Wenn Sie die Größen und Abmessungen jedes Fotos planen und unsere Bilder im Voraus mit Design-Tools wie Sketch oder Photoshop oder sogar Online-Sites wie Pixlr vorbereiten, sparen Sie viel Zeit und Ärger.
Während Sie die Bildabmessungen erarbeiten, können Sie auch die Dateigröße bearbeiten. Hochauflösende Bilder, die das Laden Ihrer Seite verlangsamen, führen definitiv dazu, dass eine große Anzahl von Besuchern von Ihrer Website abprallt. Sie können Tools wie Optimole verwenden , um die Bildgröße automatisch zu reduzieren, oder externe Dienste wie Tiny PNG verwenden.
Fehler Nr. 7 – Keine Standardfarben einstellen
Weiter zum nächsten Fehler: Nicht die Standardfarben einstellen. Es gibt viele Optionen in Elementor, die genau darauf ausgelegt sind, den Benutzern das Leben zu erleichtern. Durch das Festlegen der Standardfarben für Ihr Design sparen Sie wiederum viel Zeit und stellen sicher, dass Ihr Farbschema auf Ihrer gesamten Website konsistent bleibt.
Lösung: Wählen Sie Ihre Farben im Voraus
Am besten tun Sie dies zu Beginn des Seitenaufbaus, sobald Sie Ihre erste leere Seite in Elementor geöffnet haben. Wählen Sie im Menü die Standardfarben aus der Palette und wenden Sie sie an.
Fehler Nr 8 – Das Einkopieren von bestehendem Text in den Texteditor
Im Internet sind wir es gewohnt mit dem Copy/Paste Befehl Texte von überall zu kopieren. Sicherlich ist das direkte Schreiben in den Elementor Texteditor kein Zuckerschlecken. Ich versuche dies bei langen Texten zu vermeiden. Doch oft kopiert man unsichtbare Text- und Formatierungsbefehle mit, die dann dem Text sicherlich nicht das gewünschte Aussehen geben.
Lösung: Bereinigen sie Ihre Texte vor dem Kopieren.
Dies geht relativ einfach, wenn sie den kopierten Text auf eine Wordseite oder sonstigen Texteditor mit dem Befehl control-alt-V einfügen. Damit wird unter anderen die Option unformatierter Text angegeben. Diese Option wählen, um den Text einzufüge
Fehler Nr 9 – Die falschen Typografie- und Farbeneinstellungen wählen
Elementor wie viele andere Pagebuilder ermöglicht separate Typografie- und Farbeinstelungen zu den Theme-Einstellungen vorzunehmen. Besonders bei weit entwickelten Themes sind diese Einstellungen differenzierter vorzunehmen als bei Elementor, was dazu führt, dass viele Nutzer hier ihre Voreinstellungen tätigen.
Dann beim Aufbauen merken sie, dass diese Voreinstellungen nicht übernommen wurden.
Und dann ist man ratlos. Ja, ja liebe Elementor Nutzer, dieses Problem begegne ich regelmäßig bei der Facebook Elementor Community.
Lösung: Basiseinstellungen in Elementor ändern
Die Lösung ist einfach und besteht aus einer Einstellung in Elementor. Hier kann man die Farb- und Schrifteneinstellungen von Elementor desaktivieren oder aktivieren Manchmal hilft dies aber nicht und dann hängt das meistens an einem inkompatiblen Theme (siehe Fehler Nr 2)
Fehler Nr 10 – Unnötige Plugins und Elementor Addons
Die Qual der Wahl ist oft daran schuld dass die Website nicht funktioniert wie sie sollte oder dass die Ladezeit unnötig langsam ist. Ja die vielen WordPress Plugins, die einem das Leben leichter machen sollten, sind leider zu oft ein Hemmschuh.
Hier ein Plugin was das Editieren in Elementor fast unmöglich macht, da ein Elementor Addon, mit vielen „doppelt gemoppelt hält besser“ Funktionalitäten gehört zu den Alltagsfehlern beim Webdesign.
Lösung: Beim Aufbau alle Plugins desaktivieren
Hier gibt es nicht eine, sondern viele Lösungen. Alle Plugins, die nicht für das Editieren und Erstellen der Website notwendig sind, sollten Sie desaktivieren. Nach dem Erstellen der Website, die Plugins einzeln aktivieren, und jeweils kontrollieren, ob hier ein Problem entstanden ist. Gegebenenfalls das Plugin durch ein anderes ersetzen. Außerdem sollten Sie recht geizig mit den Plugins umgehen. Bei den Elementor Addons sollten Sie die Widgets die sich nicht benötigen desaktivieren.
Fazit
Diese Liste enthält nicht alle Fehler, die Benutzer machen. Es gibt viele andere, die wir zum Beispiel hätten erwähnen können. Wenn Sie diese 10 Fehler jedoch überwinden, haben Sie einen guten Start und können Elementor besser verstehen und nutzen.
Sie werden erstaunt sein, wie die ordnungsgemäße Verwendung von Elementor sofort eine enorme Verbesserung der von Ihnen erstellten Websites zeigt.
Wenn Sie der Meinung sind, dass wir häufige Fehler übersehen haben, die erwähnt werden sollten, oder wenn Sie auf einige häufige Fehler gestoßen sind, die Sie oder Ihre Kunden häufig mit Elementor machen, teilen Sie uns diese bitte in den Kommentaren unten mit.
Weitere Beiträge die Sie interessieren könnten
Web-Typografie: Der vollständige Leitfaden für Designer
Dezember 1, 2020
Machen Sie sich bereit, Ihre Webdesign-Fähigkeiten zu verbessern, indem Sie die Besonderheiten der Typografie kennenlernen. In dieser umfassenden Anleitung zur Web-Typografie erfahren Sie alles, was Sie für die Erstellung Ihres Web-Design in punkto Typografie benötigen.
