Elementor Pro Anleitung: Theme Builder, Popups und Formulare richtig einrichten

22. August 2026 ·5 Min. Lesezeit

Elementor Pro ist der Page Builder, den ich bei den meisten Kundenprojekten vorfinde – aus gutem Grund. Die kostenlose Version reicht für einzelne Seiten, aber erst Pro macht aus WordPress ein vollständiges Design-System: Theme Builder, Popups, echte Formulare, dynamische Inhalte. Hier zeige ich, wie du das sauber einrichtest, ohne die typischen Anfängerfehler.

Was Elementor Pro zusätzlich bringt

Die kostenlose Version von Elementor baut einzelne Seiten. Für eine ganze Website fehlen drei Dinge, die erst Pro liefert:

Theme Builder – Header, Footer, Archivseiten und Single-Templates selbst gestalten, statt sie dem Theme zu überlassen
Popup Builder – Newsletter-Popups, Cookie-Hinweise oder Exit-Intent-Fenster ohne zusätzliches Plugin
Formulare mit Aktionen – E-Mail-Versand, Webhooks, Weiterleitung nach Absenden, Integration mit Mailchimp & Co.

Dazu kommen Theme Builder für WooCommerce-Produktseiten, Custom Fields (ACF, Pods, Toolset) und ein größeres Widget-Set. Für eine Firmenwebsite mit individuellem Layout führt an Pro selten ein Weg vorbei.

Installation und Lizenz aktivieren

Kostenlose Elementor-Version zuerst installieren (Plugins → Installieren → „Elementor")
Elementor Pro als ZIP-Datei aus deinem Konto auf elementor.com herunterladen
Unter Plugins → Installieren → Plugin hochladen die ZIP-Datei einspielen und aktivieren
Unter Elementor → Lizenz den Lizenzschlüssel eintragen

Wichtig: Pro braucht immer die kostenlose Basis-Version als Grundlage. Ohne sie erscheint Pro als inaktiv, auch wenn beide Plugins installiert sind.

Nach der Aktivierung lohnt ein Blick in Elementor → Einstellungen → Erweitert: Dort legst du fest, welche Beitragstypen (Seiten, Beiträge, eigene Post-Types) mit Elementor bearbeitet werden dürfen. Alles andere lässt du beim Standard-Editor – das spart spätere Aufräumarbeit.

Theme Builder: Header, Footer und Templates

Der Theme Builder ist der eigentliche Grund, warum Pro sich lohnt. Du erreichst ihn unter Vorlagen → Theme-Builder.

Header und Footer

Neue Vorlage vom Typ „Header" anlegen
Mit Elementor gestalten wie eine normale Seite
Beim Veröffentlichen die Zuordnung festlegen: „Gesamte Website" oder auf bestimmte Seiten eingrenzen

Dasselbe Prinzip gilt für den Footer. Zuordnungsregeln lassen sich kombinieren (UND/ODER), zum Beispiel „Alle Beiträge in Kategorie X, außer Startseite".

Single- und Archiv-Templates

Für Blogartikel oder individuelle Beitragstypen erstellst du ein Single-Template mit dynamischen Feldern:

Widget „Beitragstitel" für den dynamischen Titel
Widget „Beitragsinhalt" für den eigentlichen Text
Featured Image, Autor, Datum als eigene Widgets

Die Zuordnung „Gesamte Website" für ein Single-Template greift für alle Beitragstypen ohne eigenes Template. Konkreter zuordnen (z. B. nur Beitragstyp „Produkte") verhindert, dass ein zu allgemeines Template andere Bereiche überschreibt.

Falle in der Praxis: Legst du mehrere Templates mit überlappenden Zuordnungsregeln an, gewinnt die spezifischere Regel – nicht die zuletzt gespeicherte. Bei unerwartetem Ergebnis zuerst die Priorität der Zuordnungen prüfen (Vorlagen → Theme-Builder → Spalte „Bedingungen").

Popup Builder

Popups erstellst du unter Vorlagen → Popups. Nach dem Design (gleiche Widgets wie bei normalen Seiten) folgen zwei Einstellungsblöcke, die über Erfolg oder Nervfaktor entscheiden:

Auslöser (Trigger):

Seite verlassen (Exit Intent) – für Newsletter-Popups die verträglichste Option
Nach X Sekunden – sparsam einsetzen, wirkt sonst aufdringlich
Scroll-Tiefe erreicht – gut für Angebote am Artikelende
Klick auf Element

Bedingungen für Anzeige:

Wiederholung begrenzen („einmal pro Sitzung", „einmal pro Besucher")
Geräte ausschließen (z. B. Popup nur auf Desktop)
Auf bestimmte Seiten beschränken

Ein Popup ohne Wiederholungsbegrenzung, das bei jedem Seitenaufruf erneut erscheint, ist der häufigste Grund für Absprünge, den ich in Analytics-Daten sehe. Immer „einmal pro Sitzung" als Minimum setzen.

Formulare richtig konfigurieren

Das Formular-Widget ist mächtiger als das kostenlose WordPress-Kontaktformular, hat aber ein bekanntes Problem: Es kommt ohne vernünftigen Spam-Schutz. Wie du das DSGVO-konform ohne reCAPTCHA löst, steht im Artikel zu Anti-Spam für Elementor Pro Formulare.

Für die Grundeinrichtung wichtig:

Felder – Pflichtfelder markieren, Feldnamen sprechend benennen (werden in der E-Mail als Label übernommen)
Aktionen nach Übermittlung – mindestens „E-Mail senden" aktivieren, optional Webhook oder Weiterleitung an ein CRM
E-Mail-Empfänger – unter „Senden an" die Zieladresse eintragen, nicht die Absenderadresse verwenden
Erfolgsmeldung – individuellen Text statt Elementor-Standardtext, das wirkt professioneller

Praxis-Tipp: Formulare landen bei vielen Hosting-Umgebungen im Spam, weil die Absenderadresse nicht zur Domain passt. Ein SMTP-Plugin (z. B. WP Mail SMTP) mit korrekt konfiguriertem Versanddienst behebt das zuverlässig – reiner PHP-Mail-Versand über wp_mail() wird von vielen Zustellservern als unglaubwürdig eingestuft.

Dynamic Content und Custom Fields

Über das Dynamic-Content-Symbol (Datenbank-Icon neben vielen Textfeldern) bindest du Werte aus Custom Fields ein, ohne Code zu schreiben:

Advanced Custom Fields (ACF) – Text-, Bild- und Wiederholungsfelder direkt im Editor auswählbar
Post-Meta – beliebige Metafelder eines Beitrags
Site-weite Daten – Website-Titel, Logo, aktuelles Datum

Das ist besonders für Archiv- und Single-Templates relevant: Ein Template, ein Design, beliebig viele Inhalte darüber.

Elementor schlank halten

Elementor lädt pro Seite eigenes CSS und JavaScript. Unkonfiguriert wird das schnell zum Pagespeed-Problem. Unter Elementor → Einstellungen → Erweitert → Funktionen lohnen sich zwei Schalter:

CSS-Druck-Modus: „Externe Datei" – erzeugt eine Datei statt Inline-Styles
Nicht genutzte Google Fonts entfernen, falls dein Theme eigene Schriften mitbringt

Für die eigentliche Cache- und Ladezeit-Optimierung reicht Elementor allein nicht – dafür braucht es ein Cache-Plugin. Wie du das speziell für Elementor-Seiten einrichtest, steht in der WP Rocket Anleitung.

Häufige Probleme und Lösungen

Weißer Bildschirm nach einem Update

Meist ein Plugin-Konflikt oder ein PHP-Speicherlimit, das nicht ausreicht. Erste Schritte:

Per FTP oder Dateimanager den Ordner wp-content/plugins/elementor-pro kurz umbenennen
Lädt die Seite wieder, liegt es an Elementor Pro selbst – Plugin neu installieren
Bleibt der weiße Bildschirm, PHP memory_limit in der wp-config.php auf mindestens 256M erhöhen

Editor lädt nicht oder bleibt hängen

Cache-Plugin vorübergehend deaktivieren – vor allem CSS/JS-Minifizierung stört häufig den Editor
Sicherheits-Plugins prüfen, die eingebetteten iFrames blockieren können
Browser-Cache leeren, Elementor cacht Editor-Assets aggressiv

Container statt Sections

Seit Elementor 3.6 ersetzt das Container-Layout das ältere Section/Column-System. Für neue Projekte immer Container verwenden – Flexbox-basiert, weniger verschachtelt, bessere Performance. Bestehende Section-Layouts musst du nicht zwangsweise migrieren, aber neue Bereiche solltest du nicht mehr im alten System anlegen.

Checkliste: Elementor Pro Grundeinrichtung

[ ] Lizenz aktiviert, Updates funktionieren
[ ] Header- und Footer-Template im Theme Builder erstellt
[ ] Single-Template für Blogartikel angelegt (falls vom Theme nicht abgedeckt)
[ ] Formulare mit funktionierendem E-Mail-Versand getestet
[ ] Spam-Schutz für Formulare eingerichtet
[ ] Popups mit Wiederholungsbegrenzung versehen
[ ] CSS-Druck-Modus auf „Externe Datei" gestellt
[ ] Editor-Zugriff auf unnötige Beitragstypen deaktiviert

Kostenloser Website-Check

Läuft dein Elementor-Setup rund, oder häufen sich Ladezeit-Probleme und Fehlermeldungen? Wir schauen uns deine Website kostenlos an und sagen dir konkret, wo es hakt – ganz ohne Verkaufsgespräch.

Kostenlosen Website-Check anfragen