Si has buscado cómo diseñar una web en WordPress sin escribir código, la respuesta que más veces habrás encontrado tiene nombre propio. Pero, ¿qué es Elementor exactamente y por qué está instalado en más de diez millones de webs? Se trata de un constructor visual (page builder) para WordPress: un plugin que sustituye el editor estándar por un lienzo donde arrastras y sueltas elementos (títulos, imágenes, botones, formularios) y ves el resultado exacto en tiempo real, tal como lo verá tu visitante. Su éxito se explica por una combinación difícil de igualar: una versión gratuita muy capaz, una curva de aprendizaje suave y un ecosistema enorme de plantillas y complementos. En esta guía vamos a ver cómo funciona su editor, las diferencias reales entre Elementor Free y Elementor Pro, cómo diseñar tu primera página paso a paso, y también sus inconvenientes (que los tiene, empezando por el rendimiento) para que decidas con conocimiento de causa si es la herramienta adecuada para tu proyecto.
Qué es Elementor y cómo encaja en WordPress
WordPress trae de serie el editor de bloques (Gutenberg), que permite maquetar contenidos apilando bloques. Elementor va varios pasos más allá: es un editor de páginas completo que funciona por encima de tu tema y te da control visual sobre prácticamente todo: márgenes, tipografías, colores, fondos, animaciones y diseño responsive, sin tocar una línea de CSS.
Técnicamente es un plugin más: se instala desde el repositorio oficial (Plugins → Añadir nuevo → “Elementor”), y a partir de ahí cualquier página o entrada muestra el botón “Editar con Elementor”. Al pulsarlo se abre su editor propio: la página a la derecha, y un panel de widgets y ajustes a la izquierda.
La estructura de todo diseño en Elementor es una jerarquía de tres niveles que conviene entender desde el primer día:
- Secciones (o contenedores): las franjas horizontales que dividen la página. Desde 2023 Elementor usa contenedores basados en flexbox, más flexibles y ligeros que las secciones clásicas.
- Spalten: divisiones internas de cada sección para organizar el contenido en rejilla.
- Widgets: los elementos finales que el visitante ve: título, texto, imagen, botón, vídeo, mapa, formulario…
Cada nivel tiene tres pestañas de ajustes: Contenido (qué se muestra), Estilo (colores, tipografía, bordes) y Avanzado (márgenes, animaciones, visibilidad por dispositivo). Cuando interiorizas ese patrón, sabes usar el 90% de Elementor.
Elementor Free vs Elementor Pro: qué incluye cada uno
La pregunta inevitable. La versión gratuita no es una demo: incluye el editor completo, más de 40 widgets y las herramientas responsive. La versión Pro (desde unos 59 $/año para un sitio) desbloquea lo que convierte a Elementor en una herramienta profesional:
| Funktion | Free | Pro |
|---|---|---|
| Editor visual completo | Sí | Sí |
| Widgets básicos (título, imagen, botón, vídeo…) | Sí (40+) | Sí (90+) |
| Plantillas prediseñadas | Limitadas | Biblioteca completa |
| Theme Builder (header, footer, plantillas de blog) | Nein | Sí |
| Formularios nativos | Nein | Sí |
| WooCommerce Builder (fichas de producto, tienda) | Nein | Sí |
| Popup Builder | Nein | Sí |
| Contenido dinámico y campos personalizados | Nein | Sí |
La frontera práctica es clara: con Free diseñas páginas sueltas estupendas (una landing, una página de servicios), pero el header, el footer y las plantillas del blog siguen dependiendo de tu tema. Con Pro, Elementor pasa a controlar el sitio entero gracias al Theme Builder: diseñas visualmente la cabecera, el pie, la plantilla de las entradas y hasta las fichas de WooCommerce.
¿Necesitas Pro? Si es tu primera web o una landing puntual, empieza con Free; siempre puedes ampliar. Si vives de hacer webs o quieres control total del diseño sin depender del tema, Pro se amortiza en el primer proyecto. Alternativa intermedia: mantener Free y cubrir los huecos con un buen tema (los formularios, por ejemplo, se resuelven con un plugin gratuito de formularios).
Cómo usar Elementor: tu primera página paso a paso
Vamos a lo práctico. Con Elementor instalado y activado:
- Crea la página: Páginas → Añadir nueva, ponle título y pulsa “Editar con Elementor”.
- Elige plantilla de página: en Ajustes (icono de engranaje, abajo a la izquierda), selecciona “Elementor Canvas” si quieres un lienzo en blanco sin cabecera ni pie (ideal para landings), o “Ancho completo” para conservar el header y footer de tu tema.
- Añade el primer contenedor: pulsa el “+” del lienzo y elige la estructura de columnas (una sola, dos al 50%, tres…). Este contenedor será tu sección de portada (hero).
- Arrastra los widgets: desde el panel izquierdo, arrastra un widget Título al contenedor y escribe tu mensaje principal. Debajo, un widget Texto con el subtítulo y un widget Botón con tu llamada a la acción.
- Dale estilo: selecciona el contenedor y, en la pestaña Estilo, añade un fondo (color, degradado o imagen). Selecciona cada widget y ajusta tipografía y colores en su propia pestaña Estilo. Los cambios se ven al instante.
- Duplizieren Sie, um die nächsten Abschnitte zu erstellen: Rechtsklick auf den Container → Duplizieren, und ändern Sie den Inhalt. Duplizieren und Bearbeiten ist viel schneller als von Grund auf neu zu erstellen, und nebenbei wird die visuelle Kohärenz beibehalten.
- Überprüfen Sie die mobile Version: Aktivieren Sie in der unteren Leiste den responsiven Modus und überprüfen Sie die Seite auf Tablet und Mobilgerät. Sie können Schriftgrößen, Ränder anpassen und sogar Elemente pro Gerät ausblenden (Registerkarte Erweitert → Responsiv). Veröffentlichen Sie nicht ohne diesen Schritt: Mehr als die Hälfte Ihrer Besucher wird von mobilen Geräten kommen.
- Veröffentlichen: botón verde “Publicar”. Para seguir editando después, entra en la página y pulsa de nuevo “Editar con Elementor”.
Der Vorlagen-Shortcut
Wenn die leere Leinwand Sie blockiert, nutzen Sie die Bibliothek: Das Ordnersymbol auf der Leinwand öffnet Dutzende von vorgefertigten Seiten- und Blockvorlagen, die Sie mit einem Klick einfügen und an Ihren Inhalt anpassen können. Es ist der schnellste Weg, ein professionelles Ergebnis zu erzielen, während Sie lernen. Elementor ermöglicht es auch, eigene Abschnitte als wiederverwendbare Vorlagen zu speichern: Gestalten Sie Ihren Testimonial-Block einmal und verwenden Sie ihn auf allen Seiten.
Fünf bewährte Praktiken, die den Unterschied machen
- Definieren Sie die globalen Einstellungen vor dem Design: Im Editor-Menü (☰) → Website-Einstellungen konfigurieren Sie die globalen Farben und globalen Schriftarten. Wenn Sie später die Unternehmensfarbe ändern, wird die gesamte Website auf einmal aktualisiert. Dies zu überspringen, verurteilt Sie dazu, Seite für Seite zu bearbeiten.
- Weniger und sauberere Abschnitte: Professionelle Websites haben keine fünfzehn Animationen. Großzügige Weißräume, maximal zwei Schriftarten und eine kurze Farbpalette gewinnen immer. Wenn Sie Inspiration benötigen, welches Basistheme Sie mit Elementor kombinieren sollen, schauen Sie sich unseren Leitfaden an, um das perfekte Theme für Ihre WordPress-Website auswählen (mit Elementor gilt: je leichter das Theme, desto besser: Hello Elementor, Astra oder GeneratePress).
- Optimieren Sie jedes Bild vor dem Hochladen: Elementor-Designs sind bildintensiv, und hier spielt die Geschwindigkeit eine Rolle. Passen Sie die Größe an die tatsächlichen Nutzungsmaße an und konvertieren Sie sie mit unserem Bildkonverter zu WebP kostenlos, bevor Sie sie in die Medienbibliothek hochladen.
- Verwenden Sie Flexbox-Container, nicht die alten Abschnitte: Wenn Ihre Installation noch beide anbietet, aktivieren Sie sie unter Elementor → Einstellungen → Funktionen. Sie erzeugen weniger Code und bieten mehr Kontrolle.
- Mischen Sie keine Builder: Wählen Sie Elementor oder Gutenberg für die Designseiten, aber wechseln Sie nicht zwischen beiden auf derselben Seite. Und für Blogbeiträge ist der normale Block-Editor mehr als ausreichend (und schneller).
Die Nachteile von Elementor (ja, sie existieren)
Elementor ist in Bezug auf die Leistung nicht kostenlos, und das muss man ehrlich sagen:
- Zusätzliches Gewicht: Ein visueller Builder lädt auf jeder Seite zusätzliche CSS- und JavaScript-Dateien. Eine mit Elementor erstellte Seite wird immer mehr wiegen als dieselbe Seite in reinem Gutenberg. Dies wird durch ein leichtes Theme, optimierte Bilder und ein gutes Cache-Plugin wie WP Rocket, aber die Mehrkosten existieren.
- Abhängigkeit (Lock-in): Wenn Sie Elementor eines Tages deaktivieren, verschwinden Ihre Seiten nicht, aber sie verlieren ihr gesamtes Design und der Inhalt bleibt mit Layoutresten zurück. Der Wechsel des Builders bedeutet, die Seiten neu zu erstellen.
- Jährliche Kosten für Pro: Die Lizenz ist ein Abonnement; wenn Sie nicht mehr zahlen, erhalten die Pro-Widgets keine Updates mehr (das bereits erstellte Design bleibt erhalten).
- Übermaß an Freiheit: In unerfahrenen Händen führt eine solche Fülle an Designoptionen zu überladenen und inkonsistenten Websites. Globale Einstellungen und Zurückhaltung sind das Gegenmittel.
Die Alternative, die man vor der Entscheidung in Betracht ziehen sollte: Der WordPress-Block-Editor hat sich enorm verbessert und deckt mit modernen Block-Themes einfache Designs mit besserer Leistung ab. Elementor gewinnt, wenn Sie eine feine visuelle Kontrolle, komplexe Vorlagen oder den vollständigen Aufbau der Website ohne Einschränkungen benötigen. Um den nativen Editor zu vertiefen, finden Sie die offizielle WordPress-Dokumentation unter es.wordpress.org ist ein guter Ausgangspunkt.
Elementor und die Geschwindigkeit: Optimierungs-Checkliste
Da die Performance die größte Kritik ist, hier eine konkrete Liste, damit Ihre Elementor-Website schnell lädt:
- Leichtes Theme, das für Elementor konzipiert ist (Hello Elementor ist das offizielle).
- Flexbox-Container aktiviert und die minimale Anzahl verschachtelter Abschnitte.
- Bilder in WebP, in der Größe angepasst und mit Lazy Loading (standardmäßig in WordPress aktiv).
- Cache-Plugin konfiguriert (Seiten-Cache + CSS/JS-Minifizierung).
- Schriftarten: maximal zwei Familien, und wenn möglich lokal gehostet (Elementor → Einstellungen ermöglicht das Deaktivieren externer Google Fonts).
- Desactiva los widgets Pro que no uses y evita apilar addons de terceros (cada paquete de “200 widgets extra” es peso que cargan todas tus páginas).
- Messen Sie vorher und nachher mit PageSpeed Insights; die PHP-Einstellungen zur Beschleunigung von WordPress helfen auch, wenn Ihr Hosting knapp bemessen ist.
Mit dieser angewandten Liste kann eine Elementor-Website bei den Core Web Vitals perfekt im grünen Bereich punkten. Ohne sie landet man leicht bei 4-6 Sekunden Ladezeit, die Besucher abschrecken.
Häufig gestellte Fragen
Ist Elementor kostenlos?
Ja, die Basisversion ist kostenlos und ohne Seiten- oder Zeitlimit: vollständiger Editor, über 40 Widgets und responsives Design. Die Pro-Version, ab etwa 59 $/Jahr, fügt Theme Builder, Formulare, Popups, WooCommerce Builder und erweiterte Widgets hinzu. Sehr viele Websites funktionieren nur mit der kostenlosen Version.
Macht Elementor die Website langsam?
Es fügt Gewicht hinzu, das ist eine Tatsache, aber Langsamkeit ist nicht unvermeidlich: Mit einem leichten Theme, WebP-Bildern, Flexbox-Containern und einem gut konfigurierten Cache-Plugin lädt eine Elementor-Website problemlos in weniger als zwei Sekunden. Langsame Elementor-Websites kombinieren oft ein schweres Theme, unzählige Add-ons und unoptimierte Bilder.
Kann ich Elementor mit jedem WordPress-Theme verwenden?
Mit fast allen, ja, aber nicht alle leisten dasselbe. Themen, die für die Zusammenarbeit mit Elementor konzipiert sind (Hello Elementor, Astra, GeneratePress, Blocksy, Kadence), sind leichtgewichtig und stören das Design nicht. Alte und schwerfällige Mehrzweckthemen können Stile duplizieren und die Geschwindigkeit verlangsamen. Wenn Sie bei Null anfangen, wählen Sie eines der leichten Themen.
Was passiert, wenn ich Elementor deinstalliere?
Der Inhalt (Texte und Bilder) geht nicht verloren: Er bleibt in WordPress gespeichert. Was verloren geht, ist das gesamte Layout: Die Seiten werden als Fließtext mit dem Design des Themes angezeigt. Deshalb sollte man den Builder zu
Es ist ratsam, mindestens einmal pro Quartal ein vollständiges SEO-Audit durchzuführen. Sie sollten jedoch die Leistung Ihrer Keywords und den Zustand Ihrer Website wöchentlich überwachen. Inhaltsaktualisierungen und kleinere Optimierungen können regelmäßiger vorgenommen werden.
Du weißt bereits, was Elementor ist: der visuelle Builder, der professionelles Webdesign für jeden zugänglich gemacht hat, der Drag & Drop beherrscht. Seine kostenlose Version reicht aus, um vom ersten Tag an ansprechende Seiten zu erstellen; die Pro-Version verwandelt WordPress in ein komplettes Designstudio mit maßgeschneiderten Headern, Vorlagen und Popups. Im Gegenzug fordert es zwei Tribut: ein technisches Übergewicht, das mit Best Practices (leichtes Theme, WebP, Cache) kontrolliert wird, und eine Abhängigkeit, die man bewusst eingehen sollte. Wenn deine Priorität kreative Freiheit ohne Code ist, ist es der beste Einstieg, den es gibt; wenn deine Website einfach ist und die Leistung alles ist, solltest du den nativen Block-Editor vorher in Betracht ziehen. Egal, welche Wahl du triffst, die Methode ist dieselbe: zuerst globale Einstellungen, dann Inhaltsdesign und das Handy immer vor der Veröffentlichung überprüfen.
