Elementor Tutorials auf Deutsch

Elementor Gutschein

Damit du einfacher mit dem tollen WordPress Page Builder Elementor durchstarten kannst, findest du hier auf dieser Seite eine Sammlung an Tutorials in Form von Beiträgen und Videos. Falls du Fragen hast oder Hilfe zu bestimmten Elementor Themen benötigst, hinterlasse einfach unten einen Kommentar.

Elementor Tutorials (Beiträge)

Eine Übersicht an ausgewählten WPC Artikeln über den beliebtesten WordPress Page Builder Elementor

Hast du Interesse an Elementor PRO?
Dann würde ich mich sehr freuen, wenn du mich und meinen Blog unterstützen und die PRO Version über den folgenden Affiliate Partner Link kaufen könntest.

Elementor Video Tutorials

In den Video Tutorials werden die Elementor Basics, das richtige Setup und die besten Elementor Themes behandelt. Diese Anleitungen sind ideal für alle Elementor Einsteiger, die gerade erst angefangen haben, sich mit dem tollen WordPress Page Builder auseinanderzusetzen. Weitere Tutorials auch für fortgeschrittene Elementor User sind bereits in Produktion.

(Hinweis zum Datenschutz: Bei den folgenden Videos wurde der private Modus aktiviert. Das bedeutet, dass die Informationen über den Besucher erst dann an YouTube gesendet werden, wenn man auf den Play-Button klickt.)

Elementor installieren - kostenlos und Pro

Das Video zeigt, wie du die kostenlose und die Pro Version von Elementor auf deiner Seite installieren und aktivieren kannst.

Elementor Standardschriftarten einstellen

Das Video zeigt, wie du in Elementor die Schriftarten / Fonts global einstellen kannst.

Elementor Standardfarben einstellen

Das Video zeigt, wie du in Elementor die Standardfarben und den Farbwähler global einstellen kannst.

Elementor Inhaltsbreite und Inhaltstypen

Das Video zeigt, wie du die Inhaltsbreite global einstellen und Elementor für verschiedene Inhaltstypen aktivieren kannst.

Elementor Anatomie - Elementor Aufbau

Das Video zeigt, wie Elementor aufgebaut ist – Seite, Abschnitt, Spalten, Elemente etc.

Die besten Elementor Themes

Das Video zeigt, die besten WordPress Themes für Elementor inklusive einem Performance Test.

Kostenlose WordPress & Elementor Video Tutorials

Jetzt YouTube Channel von WPC abonnieren und keine Tutorials mehr verpassen!

Elementor Motion Effects

Das Video zeigt, wie du Bewegungseffekte (Motion Effects) auf deiner Website einsetzen kannst.

Elementor & Custom Post Types (CPT)

Das Video zeigt, wie du ein Custom Post Type erstellen und mit Elementor verwenden kannst.

Elementor Single Template erstellen

Das Video zeigt, wie du ein Single Template mit Elementor erstellen und es einem (Custom) Post Type zuordnen kannst.

Elementor & Advanced Custom Fields (ACF)

Das Video zeigt, wie du individuelle Felder mit dem Plugin Advanced Custom Fields (ACF) erstellen und in Elementor verwenden kannst.

Elementor & Custom Taxonomies

Das Video zeigt, wie du WordPress mit Custom Taxonomies erweitern und diese in Elementor verwenden kannst.

Elementor Tipp: Dynamisches CSS

Ein Klasse Tipp für alle Elementor User! CSS Klassen dynamisch vergeben mit Elementor und ACF.

Elementor Widget selbst erstellen

Wie du mit dem Widget Creator von Unlimited Elements kostenlos dein eigenes Elementor Widget erstellen kannst.

elementor tutorials deutsch

Coming Soon: Weitere Elementor Tutorials

YouTube Kanal abonnieren und keine Elementor Tutorials mehr verpassen!

Danijel

Hi, mein Name ist Danijel Rose, ich bin der Gründer von WebGeckos, WordPress Trainer und Berater aus Bad Tölz, südlich von München. Über meine WordPress Erfahrungen blogge ich hier auf WPC. Mit WordPress erstelle ich vor allem gerne hochwertige Firmenwebsites, Mitgliederseiten und WordPress Multisites.

Das könnte Dich auch interessieren …

20 Antworten

  1. Urs sagt:

    Hallo … habe frisch gestartet mit elementor und kann das Plugin nicht öffnen – es escheint die Nachricht ‚Die Vorschau konnte nicht geladen werden. Unter Debug erscheint ein 404 Fehler – was kann ich da machen?

    Vielen Dank!

    • Danijel sagt:

      Hallo Urs,
      wahrscheinlich gibt es da einen Plugin-Konflikt. Du könntest z. B. erstmal das Page Template „Elementor Canvas“ aktivieren und schauen, ob der Fehler bestehen bleibt. Ansonsten müsstest Du auf Fehlersuche gehen, indem Du alle anderen Plugins deaktivierst und sie dann wieder nacheinander aktivierst. Dazwischen immer schauen, ob Elementor aufgeht. Welches Theme verwendest Du mit Elementor?
      Schöne Grüße, Danijel

  2. Markus sagt:

    Hallo Danijel,
    weißt du, ob Neuronto Plugin (https://t3n.de/news/neuronto-wordpress-plugin-deepl-1189089/) mit Elementor kompatibel ist?
    Danke

    LG
    Markus

    • Danijel sagt:

      Hallo Markus,
      Ich muss gestehen, dass ich das Neuronto Plugin noch gar nicht getestet habe. Deswegen kann ich dazu leider keine Aussage machen, sondern nur eine Vermutung äußern.
      Ich kann mir nicht vorstellen, dass das Plugin nicht mit Elementor kompatibel ist, da Elementor die Texte nicht hinter Shortcodes verbirgt, wie mach anderer Page Builder.
      Sicher bin ich mir jedoch nicht.
      Wäre super, wenn du hier nochmal einen Kommentar hinterlassen könntest, falls du es ausprobierst.
      LG, Danijel

  3. Maike sagt:

    Hallo Danijel,
    Du empfiehlst ja eine Containerbreite von 1280. Mich würde mal interessieren, welche Bildgrößen ich dann in den WordPress Einstellungen verwenden sollte und mit welcher maximalen Größe ich Bilder hochladen sollte? Danke für die tollen Tutorials!

    VG
    Maike

  4. Katrin sagt:

    Hallo, ich habe ein schönes Theme (MeloKids) und nun mit Elementor einen Header und Footer gebaut. Footer funktioniert 1a, nur wenn ich den Header einschalte, verschwindet der gesamte Body der Seite. Gibt es da eine Möglichkeit das zu ändern? Herzlichen Dank für jede Hilfe!

    • Danijel sagt:

      Hallo Katrin,
      soweit ich das sehen kann, hat das WordPress Theme MeloKids den Visual Composer integriert. Du solltest auf jeden Fall vermeiden, Elementor zusammen mit einem anderen Page Builder zu verwenden. Du könntest versuchen, Visual Composer zu deaktivieren und am besten gleich zu löschen. Wenn das nicht geht, gibt es eigentlich nur zwei Möglichkeiten: Entweder nicht Elementor verwenden oder ein anderes Theme wählen. Wenn du beide Page Builder verwenden möchtest, wirst du früher oder später immer auf Probleme stoßen.
      Ich wünsche dir viel Erfolg mit deinem Projekt!
      Schöne Grüße, Danijel

  5. Nancy sagt:

    Hallo, kurze Frage zur Kombi Elementor, WooCommerce und Germanized Pro. Gibt es Erfahrungen ob die rechtlich nötigen Infos (MwSt. & Versandkosten) in der individuellen Produktseite mit auftauchen?

    Vielen Dank schon mal vorab.

    • Danijel sagt:

      Hallo Nancy,
      vielen Dank für deinen Kommentar! Ich wollte eigentlich direkt antworten, aber es ist gut, dass ich es nochmal vorher getestet habe. Somit konnte ich eine Inkompatibilität zwischen Elementor Pro und OceanWP feststellen.
      Ich nehme an, deine Frage bezieht sich auf die Pro Version von Elementor. Denn mit der kostenlosen Version von Elementor lässt sich die Produktseite sowieso nicht stylen. Ich habe gerade ein Single Product Template mit Elementor Pro auf einer WooCommerce Seite erstellt. In Verbindung mit dem Theme OceanWP wird mir tatsächlich nicht die MwSt. angezeigt. Die Produktseite ohne Elementor funktioniert ohne Probleme – dort wird die MwSt. sehr wohl angezeigt. Nachdem ich das Standard Theme 2017 aktiviert habe, war die MwSt. auch auf dem Single Product Template zu sehen.
      Eigentlich wäre meine Antwort auf deine Frage gewesen: Egal ob man Elementor verwendet oder nicht, die Produktinformationen und Meta Daten werden immer angezeigt. Denn für diese Daten ist nicht Elementor, sondern WooCommerce verantwortlich. Elementor kümmert sich nur um das Design (einige Styles können aber auch durch das Theme überschrieben werden). Und leider gibt es anscheinend auch Themes, bei denen die Erstellung einer Produktseite mit einem Single Product Template nicht so gut funktioniert, wie z. B. das OceanWP.
      Schöne Grüße, Danijel

  6. Conny sagt:

    Hallo, ich möchte eine Überschrift in (Desktop H2) mobil optimieren (H4). Wenn ich in der responsiven Ansicht (mobil ist dann blau gekennzeichnet) mobil auf H4 stelle und speichere übernimmt er dies jedesmal auch im Desktop. Hast du hier einen Tipp? Vielen Dank im Voraus.

    • Danijel sagt:

      Hallo Conny,
      man kann die Einstellungen für die unterschiedlichen Gerätetypen (Desktop, Tablet, Handy) nur dort vornehmen, wo die 3 kleinen Icons zu sehen sind. Wenn eine Einstellung diese kleinen Icons (Desktop, Tablet, Handy) nicht hat, kann dort auch kein mobil-optimiertes Styling eingestellt werden. Das gilt eben auch für den HTML-Tag bei der Überschrift. Dieses HTML-Tag muss für alle Geräte gleich sein. Was man jedoch schon für die einzelnen Bildschirmgrößen einstellen kann, ist die Schriftgröße. Ich nehme an, das ist auch das, was du erreichen wolltest, oder?
      Schöne Grüße, Danijel

  7. Hallo Danijel,
    vielen Dank für Deine Kurse, die ich gerade durcharbeite! Ich verzweifle trotzdem gerade an einem Versuch, ein Pop-up mit Menüfunktion zu erstellen. Wenn ich ein Formular auf dem Pop-up platziere, kann ich das Pop-up durch Klick auf den Absenden-Button schließen. Ich will aber ein Menü designen, womit es möglich sein soll, dass ich einen Text anklicke, der dann zu einer CSS-ID weiterleitet. Das Weiterleiten funktioniert auch problemlos, nur weiß ich nicht, wie ich das Pop-up dann automatisch schließen kann. Es gibt für Texte ja keine Funktion „Aktion nach dem Versenden“ mit der Möglichkeit, das Pop-up zu schließen. Er scrollt also zur gewünschten Stelle, ich muss aber zusätzlich händisch das Pop-up schließen, was sehr nervig ist. Hast Du eine Idee?
    Vielen Dank schon mal und beste Grüße!

    • Danijel sagt:

      Hallo Steffen,
      das Verhalten, welches Du beschreibst ist eigentlich, ein One-Pager Menü mit einem Elementor Popup zu erstellen. Dabei ist es egal, ob es sich um ein Off-Canvas oder ein Fullscreen Menü handelt. Sobald man auf ein Element klickt (z. B. ein Menülink), scrollt die Seite zu dem entsprechenden Abschnitt und das Popup verschwindet.
      Ich habe tatsächlich nur eine Lösung mit Custom Code gefunden, um das umzusetzen. Folgenden jQuery Code müsste man in ein HTML Widget im Popup mit einfügen (habe ich jedoch noch nicht getestet):
      jQuery( document ).ready(function($){ $(document).on('click','.elementor-location-popup a', function(event){ elementorProFrontend.modules.popup.closePopup( {}, event); }) });
      Aber es muss doch von Elementor oder einem der vielen Addons eine elegantere Lösung geben, oder? Vielleicht hat ein andere(r) Leser(in) einen besseren Vorschlag? Ich werde auch mal das Off-Canvas Menü von meinem Affiliate Partner UAE ausprobieren und hier berichten, ob es geklappt hat.
      Viel Spaß und Erfolg mit meinen Kursen und vielen Dank für die Teilnahme!
      Schöne Grüße, Danijel

      • Hallo Danijel,

        ich habe die Lösung vom Support-Team von Elementor erhalten! Man muss ein HTML-Element mit folgendem Code irgendwo auf dem popup einbauen:

        document.addEventListener(‚DOMContentLoaded‘, function() {
        jQuery(function($){
        $(document).on(‚click‘,‘.elementor-location-popup a‘, function(event){
        elementorProFrontend.modules.popup.closePopup( {}, event);
        });
        });
        });

        Funktioniert bei mir hervorragend. Bin ich froh…
        Beste Grüße!
        Steffen

        • Steffen Wildt sagt:

          leider hat die Antwort das einführende und ausführende script-Zeichen ( und verschluckt. Kannst Du das einfügen? Besten Dank!

          • Steffen Wildt sagt:

            … ok, schon wieder verschluckt… 🙂 Deshalb in -Textform: Zu Beginn fehlt noch Kleiner-als-script-größer-als und am Ende natürlich Kleiner-als-slash-script-größer-als. 😉

  8. effi sagt:

    Hi Danijel, danke für deine tollen Tutorials, sie haben mir schon oft geholfen. Ich habe allerdings ein Problem mit dem Widget „Beitrag Kommentare“, für das ich keine Lösung finde: Ich nutze das Elementor-Theme Hello und der Button „Kommentar abschicken“ ist deshalb hartnäckig in pink. Was kann ich tun, um den Stlye des Buttons an meine Website anzupassen? Über einen Tipp wäre ich sehr dankbar! VG Effi

    • Danijel sagt:

      Hallo Effi,
      vielen Dank für dein nettes Feedback!
      Wenn es in einem Theme keine passende Customizer-Einstellung gibt und wenn auch die globalen Einstellungen von Elementor nicht greifen, gibt es immer die Möglichkeit die entsprechende Einstellung über das „Zusätzliches CSS“ anzupassen. Die genaue Vorgehensweise ist im Beitrag Eigenes CSS & Browser Entwicklertools oder im dazugehörigen YouTube Tutorial erklärt.
      Damit kannst du auch natürlich die Farbe des Buttons anpassen.
      Schöne Grüße, Danijel

  1. 12. November 2019

    […] dem WPConsultant Blog findest du weitere hilfreiche Elementor Tutorials, falls du den beliebtesten Page Builder auf deiner WordPress Seite […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Wir verwenden Cookies, um die Website für dich optimal zu gestalten und zu verbessern. Durch die weitere Nutzung der Website stimmst du der Verwendung von Cookies zu. Mehr Informationen findest du in der Datenschutzerklärung.