Elementor Page Builder – 8 Tipps zur Webseitenoptimierung

Elementor ist ein einzigartiger Page Builder, mit dem Du Webseiten im Handumdrehen erstellen kannst. Egal, ob Du einen Online-Shop, eine Verkaufsseite oder eine ganze Webseite erstellen möchtest – Elementor hat, was Du brauchst: Einen intuitiven Drag & Drop Editor, zahlreiche Design-Funktionen und einen vollständigen Open-Source-Ansatz. 

Jedoch treten auch bei diesem Page Builder gelegentlich Probleme auf, die Nutzern mitunter Kopfzerbrechen bereiten und viel Zeit kosten können. Damit auch Du Deine Webseite oder Deinen Online-Shop bestmöglich individualisieren und vielleicht sogar finalisieren kannst, bekommst Du 8 Tipps von mir, mit denen Du gängige Probleme des Elementor Page Builders schnell und eigenständig lösen kannst. 

Falls Du aber sagst, „Ich habe keine Zeit zum Lesen, ich will direkt Deine Hilfe in Anspruch nehmen.“, kannst Du mich hier kontaktieren.

Die Webdesign-Agentur aus Berlin hilft bei Elementor Problemen 

Als Geschäftsführer der Webdesign-Agentur „NextGen Media GmbH“ aus Berlin bekomme ich regelmäßig Anfragen zu Problemen mit dem Elementor Page Builder*. Bei den meisten Herausforderungen helfen zwar kleine Tipps, jedoch ist es für eine pixelgenaue Darstellung der Webseite oft unabdinglich einen Experten zu engagieren. 

Die Umsetzung dieser Lösungen ist für viele Anwender oft zu zeitintensiv, aber technisch trotzdem umsetzbar. Für einen professionellen Webauftritt ist es oft nötig auch ein paar Zeilen CSS zu „programmieren“, responsive Einstellungen (mobile Optimierung, für alle gängigen Device-Größen) vorzunehmen und ein wiedererkennbares Design zu kreieren.

Bevor ich Dir jetzt aber zu viel Angst mache, lass uns direkt zu den häufigsten Fehlern springen, damit Du Deiner perfekten Webseite einen großen Schritt näherkommst. 

Divi oder Elementor – WIESO, WESHALB, WARUM???

Übrigens, viele User verwechseln Elementor ziemlich häufig mit Divi. Divi ist auch ein sehr beliebter Page Builder. Falls Du auch zu denen gehörst, die die Themes vertauschen – hier geht es zum Divi-Artikel.

Elementor Experten-Tipp 1: Widgets laden nicht 

Widgets im Elementor ermöglichen eine fortgeschrittene Individualisierung Deines Designs, ohne dass Du Dir weitere WordPress-Plugins installieren musst. Sollten diese mal nicht geladen werden, liegt das häufig an den begrenzten Ressourcen Deines Servers oder an Konflikten mit den verwendeten Plugins oder Add-ons. Zudem beanspruchen zu viele Elementor-Add-ons einiges an Ressourcen und können den Page Builder dadurch stark einschränken. 

Wie kann man das beheben?

Methode 1: Der erste Ansatz sollte das Überprüfen von Plugin-Konflikten sein, indem Du alle Plugins bis auf Elementor und Elementor Pro deaktivierst und schaust, ob Elementor lädt. Wird er korrekt geladen, so liegt die Ursache bei Deinen Plugins. 

Bonus-Tipp 1: Manage Deine Plugins, Elementor-Add-ons und Widgets bewusst – zu viel aktivierter Quell-Code ist ressourcenlastig und kann zudem zu Fehlern bei der Kompatibilität führen. Außerdem ist das Debugging (Fehlerbereinigung) bei einer Vielzahl an Add-ons bzw. Plugins aufwendiger – hier wird zuerst alles deaktiviert, um anschließend wieder einzeln aktiviert zu werden, um das verursachende Add-on ausfindig zu machen. 

Ich weiß, dass sich die vielen Fremdwörter wie bei einem Arzt in der Sprechstunde anhören. Falls Du direkt eine Übersetzung brauchst, kontaktiere mich hier direkt.

Methode 2: Die veraltete PHP-Version Deines Servers kann Fehler beim Laden von Elementor verursachen. Daher empfehle ich Dir mindestens 128 MB an Speicherkapazität. Bei weiteren Add-ons oder Plugins solltest Du auf Nummer sicher gehen und mehr Speicher bereithalten. 

Methode 3:  Solltest Du Deine Webseite über einen Apache-Server betreiben, solltest Du die .htaccess-Datei überprüfen, in der u.a. die Ressourcen-Limits für den Webserver festgelegt werden. Ich empfehle das Erstellen eines Backups, falls Du die Anpassungen an dieser Datei selbst vornehmen möchtest. 

Bonus-Tipp 2: Die Verwendung kostenfreier Elementor-Add-ons wirkt verlockend, jedoch beanspruchen diese auch mehr Ressourcen und erhöhen die Wahrscheinlichkeit für Konflikte und Kompatibilitätsprobleme. Daher ist es empfehlenswert, ein bis maximal drei Elementor-Add-ons gleichzeitig aktiviert zu haben. 

Elementor Experten-Tipp 2: Inhaltsbereich fehlt im Elementor Header 

Der Inhaltsbereich ist der zentrale Bestandteil jeder Webseite. Bei der Arbeit mit Elementor tritt mitunter der Fehler „Inhaltsbereich fehlt“, der folgenden Text ausgibt: „Der Inhaltsbereich in Ihrer Seite wurde nicht gefunden. Sie müssen die Funktion „the_content“ im aktuellen Template aufrufen, damit Elementor auf dieser Seite funktioniert“. 

Was ist „the_content“ und warum ist es wichtig? 

Die the_content-Funktion ist eine WordPress-Funktion, die den Inhalt aus dem Backend filtert und lediglich den gewünschten Teil ausgibt. Elementor kann nicht richtig funktionieren, sollte diese Funktion deaktiviert sein. 

Möchtest Du Dein Theme nicht wechseln, so solltest Du versuchen, die the_content-Funktion dem Quellcode der Seitenvorlage zu ergänzen. Füge Deinem Quellcode hierfür schlichtweg diese eine Zeile hinzu: 

<?php the_content(); ?> 

Elementor Experten-Tipp 3: Graue Seite beim Bearbeiten 

Mangelt es WordPress an Speicher, so kann es sein, dass Dir beim Editieren eine leere Seite angezeigt wird, bspw. wegen zu geringem WP-Speicher. 

Wie kann man das Problem beheben? 

Methode 1: Kontaktiere Deinen Hosting-Anbieter und frage bezüglich einer Erhöhung des WP-Speichers für Deine Website an, um die Systemanforderungen für Elementor zu erfüllen. 

Methode 2: Sollte dies keine Abhilfe schaffen, so gehe zu den WP-Einstellungen ( Dashboard > Elementor > Einstellungen ), klicke auf die Registerkarte “Erweitert”, aktiviere die “Switch-Editor-Loader-Methode” und überprüfe anschließend, ob das Problem behoben ist. 

Methode 3: Stelle sicher, dass die URL im Backend mit jener im Frontend übereinstimmt. 

Methode 4: Führe das Plugin bzw. Elementor-Add-on Debugging wie oben beschrieben durch. 

Elementor Experten-Tipp 4: Änderungen sind nicht sichtbar 

Wie kannst Du das Problem beheben? 

Methode 1: Führe das Plugin bzw. Elementor-Add-on Debugging wie oben beschrieben durch. 

Methode 2: Es ist möglich, dass eine Erweiterung Deines Webbrowsers dieses Problem verursacht. Überprüfe dies, indem Du den Elementor-Editor mit einem anderen Browser öffnest. 

Fehlerbehebung mit Elementor ist keine Hexerei. Falls Deine Änderungen an Deiner Webseite wie druch Zauberhand nicht so wollen, wie Du, dann kontaktier mich gerne hier.

Elementor Experten-Tipp 5: Veröffentlichen der Inhalte funktioniert nicht 

Es kann vorkommen, dass Du beim Bearbeiten einer Seite aufgrund eines Plugin-Konflikts, oder wegen eines Speicherproblems stets zu der entsprechenden Live-Seite weitergeleitet wirst. 

Wie kann man es beheben? 

Methode 1: Bei einem Speicherproblem schafft eine Anfrage beim Hosting-Anbieter um die Erhöhung des PHP-Speicherlimits für die Webseite Abhilfe. 

Methode 2: Führe das Plugin bzw. Elementor-Add-on Debugging wie beim Experten-Tipp 1 beschrieben durch. 

Elementor Experten-Tipp 6: Seite kann nicht bearbeitet werden 

Gelegentlich können Nutzer ihre ausgewählte Seite wegen einem Caching-Problem nicht bearbeiten. 

Wie kann man es beheben?

Methode 1: Gehe in das entsprechende Elementor-Untermenü ( WP Admin > Elementor > 

Tools > Regenerate CSS ) und setze den Cache manuell zurück. 

Methode 2: Mitunter kann die Deaktivierung des Server-Level-Cachings die Ursache für dieses Problem sein. Daher solltest Du an dieser Stelle im Menü sicherstellen, dass diese Einstellung aktiviert ist. 

Methode 3: Sollten beide Optionen nicht helfen, so bleibt lediglich der Wechsel zum Standard Theme. Möchtest Du Dein Lieblings-Theme jedoch unbedingt weiterhin nutzen, so solltest Du die Entwickler kontaktieren. 

Elementor Experten-Tipp 7: WooCommerce Shop funktioniert nicht 

Verwendest Du den von mir empfohlenen WooCommerce Shop, so kann beim Bearbeiten der Shop-Seite eine Fehlermeldung auftreten, wegen der Du Shop-Seiten nicht mehr über den Elementor Page Builder bearbeiten kannst. 

Die Shop-Seiten in WooCommerce sind Archivseiten und verwenden ein anderes Template als normale WP-Posts und -Seiten. Diese benötigen daher nicht die “the_content-Funktion”. Da diese Funktion für Elementor jedoch wichtig ist, um den Inhalt der Seiten aufzurufen, kann die Bearbeitung der Shop-Seiten nicht auf die gleiche Weise wie bei regulären Seiten vorgenommen werden. 

Deswegen musst Du ein neues Produktarchiv-Template erstellen ( WP Dashboard > Templates > Theme Builder > Add New ), um die Shop-Seite mit Elementor anpassen zu können. Setze die Bedingung für die Anzeige des Templates anschließend auf „Shop-Seite“, damit diese von nun an automatisch überschrieben wird. 

Du denkst Dir, dass Dein Online-Shop-Vorhaben endlich vorankommen soll? Ich helfe Dir hier gerne weiter.

Elementor Experten-Tipp 8: Error 500 Fehler 

Als Internetnutzer bist Du sicherlich bereits einem  Error 500-Fehler, also einem internen Fehler des Webservers, begegnet. Als Webseitenbetreiber kannst Du die Fehlerbehebung auch ohne Fachwissen lösen, indem Du die Fehlerprotokolle Deines Servers überprüfst. 

Wie kann man es beheben? 

Methode 1: Die häufigste Ursache für einen 500-Fehler ist ein Problem mit dem Speicherlimit, so die für Elementor mindestens vorausgesetzten 128 MB nicht ausreichen sollten. Die entsprechenden Anpassungen kannst Du auch ohne Vorerfahrungen selbst vornehmen, ich empfehle Dir jedoch, dass Du Deinen Hosting-Provider kontaktierst, damit dieser das PHP-Speicherlimit anpasst. 

Methode 2: Führe das Debugging der Plugins bzw. Elementor-Add-ons wie oben beschrieben durch, um derartige Ursachen auszuschließen. 

Methode 3: An diesem Punkt solltest Du überprüfen, ob beim Admin-Ajax-Skript ein Timeout stattgefunden hat. Drücke hierfür die Taste F12, um Deine Konsole nachfolgender Fehlermeldung zu durchsuchen: „Failed to load resource: the server responded with a status of 413“. Solltest Du diese Meldung finden, so füge Deiner .htaccess-Datei den nachfolgenden Code hinzu, um das dynamische Timeout zu erhöhen: 

<IfModule mod_dtimeout.c> <Files ~ „.php“> SetEnvIf

 Request_URI „admin-ajax.php“ DynamicTimeout=150 </Files> 

</IfModule>

Methode 4: Dieser Fehler kann auch durch die Parameter Deines Servers verursacht werden. Füge Deiner Webseite eine SSL-Zertifizierung hinzu, um diese Ursache auszuschließen. Anschließend musst Du noch die URL der Webseite in Deinem WP-Dashboard ( Elementor > Tools > Replace URL ) anpassen. 

Methode 5: Sollte ein 403-Fehler bei der Aktualisierung einer Seite auftreten, so liegt das Problem zumeist bei einem Sicherheits-Plugin. Aktiviere das Lernmodul des Plugins, oder kontaktiere dessen Support. 

Zusammenfassung

Elementor ist ein ausgezeichneter Page Builder mit einer großen Auswahl an Funktionen. Für den pixelgenauen Feinschliff sind oft viele individuelle Einstellungen und das Wissen eines Experten notwendig. 

Zusätzlich kann ich die CSS-Programmierung Deiner Webseite übernehmen, damit Dein Web-Projekt schnell und professionell umgesetzt wird und Du Dich auf Deine Kernkompetenz konzentrieren kannst.

Falls Du mit Elementor oder der Programmierung Hilfe benötigen solltest, kannst Du mich jederzeit ganz unverbindlich über mein Kontaktformular kontaktieren.