Qué es Elementor y cómo usarlo: guía para empezar

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.
• Colonnes: 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:

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).

100. Comment utiliser Elementor : votre première page étape par étape

99. Passons à la pratique. Avec Elementor installé et activé :

1. 98. Créez la page: Páginas → Añadir nueva, ponle título y pulsa “Editar con Elementor”.
2. 96. Choisissez le modèle de page: 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.
3. 94. Ajoutez le premier conteneur: 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).
4. 92. Faites glisser les widgets91. : depuis le panneau gauche, faites glisser un widget Titre vers le conteneur et écrivez votre message principal. En dessous, un widget Texte avec le sous-titre et un widget Bouton avec votre appel à l'action.
5. 90. Donnez du style89. : sélectionnez le conteneur et, dans l'onglet Style, ajoutez un arrière-plan (couleur, dégradé ou image). Sélectionnez chaque widget et ajustez la typographie et les couleurs dans son propre onglet Style. Les changements sont visibles instantanément.
6. 88. Dupliquez pour créer les sections suivantes87. : clic droit sur le conteneur → Dupliquer, et modifiez le contenu. Dupliquer et éditer est beaucoup plus rapide que de créer à partir de zéro, et cela maintient la cohérence visuelle.
7. 86. Vérifiez la version mobile85. : dans la barre inférieure, activez le mode responsive et vérifiez la page sur tablette et mobile. Vous pouvez ajuster les tailles de police, les marges et même masquer des éléments par appareil (onglet Avancé → Responsive). Ne publiez pas sans cette étape : plus de la moitié de vos visites proviendront du mobile.
8. 84. Publiez: botón verde “Publicar”. Para seguir editando después, entra en la página y pulsa de nuevo “Editar con Elementor”.

82. Le raccourci des modèles

81. Si la page blanche vous bloque, utilisez la bibliothèque : l'icône de dossier sur la toile ouvre des dizaines de modèles de pages et de blocs prédéfinis que vous insérez en un clic et adaptez à votre contenu. C'est le moyen le plus rapide d'obtenir un résultat professionnel tout en apprenant. Elementor permet également de sauvegarder vos propres sections comme modèles réutilisables : concevez une fois votre bloc de témoignages et utilisez-le sur toutes les pages.

80. Cinq bonnes pratiques qui font la différence

1. 79. Définissez les réglages globaux avant de concevoir78. : dans le menu de l'éditeur (☰) → Réglages du site, configurez les couleurs globales et les typographies globales. Si vous changez ensuite la couleur corporative, tout le site est mis à jour en une seule fois. Ne pas le faire condamne à éditer page par page.
2. 77. Moins de sections et plus propres76. : les sites professionnels n'ont pas quinze animations. Des espaces blancs généreux, deux typographies maximum et une palette courte l'emportent toujours. Si vous avez besoin d'inspiration sur le thème de base à combiner avec Elementor, consultez notre guide pour 75. choisir le thème parfait pour votre site WordPress 74. (avec Elementor, plus le thème est léger, mieux c'est : Hello Elementor, Astra ou GeneratePress).
3. 73. Optimisez chaque image avant de la télécharger72. : les designs d'Elementor sont gourmands en images, et c'est là que se joue la vitesse. Redimensionnez-les aux dimensions réelles d'utilisation et convertissez-les en WebP avec notre convertisseur d'images en WebP 71. gratuit avant de les télécharger dans la bibliothèque de médias.
4. 70. Utilisez des conteneurs flexbox, pas les anciennes sections69. : si votre installation propose encore les deux, activez-les dans Elementor → Réglages → Fonctionnalités. Ils génèrent moins de code et offrent plus de contrôle.
5. 68. Ne mélangez pas les constructeurs67. : choisissez Elementor ou Gutenberg pour les pages de design, mais n'alternez pas les deux sur la même page. Et pour les articles de blog, l'éditeur de blocs normal est plus que suffisant (et plus rapide).

66. Les inconvénients d'Elementor (oui, ils existent)

65. Elementor n'est pas gratuit en termes de performances, et il est honnête de le dire :

• 64. Poids supplémentaire63. : un constructeur visuel charge des CSS et JavaScript supplémentaires sur chaque page. Une page faite avec Elementor pèsera toujours plus que la même page en Gutenberg pur. Cela est atténué avec un thème léger, des images optimisées et un bon plugin de cache comme WP Rocket61. , mais le surcoût existe.
• 60. Dépendance (lock-in)59. : si un jour vous désactivez Elementor, vos pages ne disparaissent pas, mais elles perdent tout leur design et le contenu reste avec des résidus de mise en page. Changer de constructeur implique de refaire les pages.
• 58. Coût annuel de la version Pro57. : la licence est un abonnement ; si vous arrêtez de payer, les widgets Pro ne reçoivent plus de mises à jour (le design déjà créé est conservé).
• 56. Excès de liberté55. : entre des mains inexpérimentées, tant d'options de design produisent des sites surchargés et incohérents. Les réglages globaux et la modération sont l'antidote.

54. L'alternative à considérer avant de décider : l'éditeur de blocs de WordPress s'est considérablement amélioré et, avec les thèmes de blocs modernes, il couvre les designs simples avec de meilleures performances. Elementor gagne lorsque vous avez besoin d'un contrôle visuel précis, de modèles complexes ou de construire le site complet sans limitations. Pour approfondir l'éditeur natif, la documentation officielle de WordPress sur es.wordpress.org 53. est un bon point de départ.

52. Elementor et la vitesse : checklist d'optimisation

51. Comme la performance est la critique numéro un, voici une liste concrète pour que votre site avec Elementor se charge rapidement :

• 50. Thème léger conçu pour Elementor (Hello Elementor est l'officiel).
• 49. Conteneurs flexbox activés et le minimum de sections imbriquées.
• 48. Images en WebP, redimensionnées et avec lazy loading (actif par défaut dans WordPress).
• 47. Plugin de cache configuré (cache de page + minification CSS/JS).
• 46. Typographies : deux familles maximum, et si possible hébergées localement (Elementor → Réglages permet de désactiver les Google Fonts externes).
• 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).
• 44. Mesurez avant et après avec PageSpeed Insights ; les 43. réglages PHP pour accélérer WordPress 42. aident aussi si votre hébergement est juste.

41. Avec cette liste appliquée, un site avec Elementor peut parfaitement obtenir un score vert dans les Core Web Vitals. Sans elle, il est facile de se retrouver avec des temps de chargement de 4 à 6 secondes qui font fuir les visiteurs.

Questions fréquentes

40. Elementor est-il gratuit ?

39. Oui, la version de base est gratuite et sans limite de pages ni de temps : éditeur complet, plus de 40 widgets et design responsive. La version Pro, à partir d'environ 59 $/an, ajoute le Theme Builder, les formulaires, les popups, le WooCommerce Builder et des widgets avancés. De très nombreux sites fonctionnent uniquement avec la version gratuite.

38. Elementor rend-il le site lent ?

37. Il ajoute du poids, c'est un fait, mais la lenteur n'est pas inévitable : avec un thème léger, des images en WebP, des conteneurs flexbox et un plugin de cache bien configuré, un site avec Elementor se charge en moins de deux secondes sans problème. Les sites lents avec Elementor combinent souvent un thème lourd, des add-ons à profusion et des images non optimisées.

36. Puis-je utiliser Elementor avec n'importe quel thème WordPress ?

35. Avec presque tous, oui, mais tous ne sont pas aussi performants. Les thèmes conçus pour cohabiter avec lui (Hello Elementor, Astra, GeneratePress, Blocksy, Kadence) sont légers et n'interfèrent pas avec le design. Les thèmes polyvalents anciens et lourds peuvent dupliquer les styles et ralentir. Si vous partez de zéro, choisissez l'un des thèmes légers.

34. Que se passe-t-il si je désinstalle Elementor ?

33. Le contenu (textes et images) n'est pas perdu : il reste stocké dans WordPress. Ce qui est perdu, c'est toute la mise en page : les pages s'afficheront comme du texte brut avec le design du thème. C'est pourquoi il est conseillé de choisir le constructeur au début du projet et non comme une expérience à mi-chemin.

Conclusion

32. Vous savez maintenant ce qu'est Elementor : le constructeur visuel qui a mis le design web professionnel à la portée de quiconque sait glisser-déposer. Sa version gratuite suffit pour créer des pages attrayantes dès le premier jour ; la version Pro transforme WordPress en un studio de design complet avec des en-têtes, des modèles et des popups sur mesure. En contrepartie, elle exige deux compromis : un surpoids technique qui se contrôle avec de bonnes pratiques (thème léger, WebP, cache) et une dépendance qu'il convient d'assumer consciemment. Si votre priorité est la liberté créative sans code, c'est la meilleure porte d'entrée qui existe ; si votre site est simple et que la performance est primordiale, évaluez d'abord l'éditeur de blocs natif. Quel que soit votre choix, la méthode est la même : réglages globaux d'abord, conception du contenu ensuite et le mobile toujours vérifié avant de publier.