Elementor Page Builder. Guía completa para diseñar tu web WordPress

Hace un par de décadas, la creación de un sitio web implicaba muchas vueltas entre desarrolladores, redactores y gestores de proyectos. Se necesitaban meses para actualizar un par de cambios sencillos. 

Hoy en día, no es necesario saber programar para crear sitios web atractivos. Los creadores de páginas como Elementor hacen que sea muy fácil para cualquier persona crear el sitio web de WordPress que quieran. En este artículo, te explicaré todo sobre Elementor Page Builder. De modo que puedas conocerlo mejor y decidir si te interesa o no.

Elementor Page Builder es un plugin que puedes encontrar en el repositorio oficial de WordPress para diseñar la apariencia visual de tu página. Ofrece una completa libertad a la hora de diseñar tu web y su uso es tan simple como arrastrar y soltar los diferentes widgets que incorpora a las secciones de tu página. Sin duda la combinación entre un tema flexible y rápido como los que vimos + Elementor harán que consigas un resultado profesional a la hora de diseñar tu web WordPress.

Si en tus planes esta darle un nuevo aspecto visual a la página que estas construyendo con esta guía, Elementor podría ser el plugin más efectivo que puedas utilizar.

No hay necesidad de ser un experto WordPress en diseño y desarrollo web o tener demasiada experiencia con HTML, CSS, JS, PHP u otros lenguajes de programación. Es de fácil uso y la mayoría de las funciones que lo componen son totalmente gratis, aunque cuenta con la versión Elementor PRO que amplía notablemente sus funcionalidades y lo lleva al siguiente nivel. Sin duda una pequeña inversión que merece la pena para conseguir un resultado profesional en tu web.

¿Qué es Elementor para WordPress?

Elementor Page Builder es uno de los plugins más populares e intuitivos de WordPress para la creación de sitios web, y cuenta con más de cuatro millones de instalaciones activas. Proporciona opciones de personalización ilimitadas con solo arrastrar y soltar y más de 90 widgets de gran calidad.

Viene con un conjunto de herramientas exclusivas que permite un control completo sobre todos los componentes fundamentales del sitio web, como cabeceras, pies de página, menús, entradas de blogs, así como otros. Además, Elementor mejora la experiencia de creación de sitios web al permitir la adición de landing pages, ventanas emergentes, animaciones y formularios.

Además de las numerosas funciones nativas de Elementor, cuenta con el apoyo de un amplio ecosistema de funciones de terceros, como temas, plantillas, widgets y mucho más.

Elementor cuenta con un diseño limpio y sencillo. Pero sin dudas, la mejor parte es que no necesitas código para crear páginas web. Esto muestra ser una ventaja para aquellos particulares o empresas que necesiten un sitio en internet.

Elementor Page Builder es un maquetador visual que permite construir y diseñar el sitio web que vas a utilizar en tiempo real a través del proceso de drag & drop, es decir, arrastrar y soltar diferentes widgets o módulos a diferentes secciones con la finalidad de crear y editar el contenido de la página.

Elementor ayuda a construir todo tipo de diseños desde cero en tiempo mínimo. Ideal para aquellas personas que desean comenzar cuanto antes su proyecto, además de que permite vivir la experiencia única de crear la página que quieras de la forma que quieras sin tener que ser un diseñador web, solo sentirte apasionado por tu proyecto.

Existen temas, plantillas u otros plugins que permiten una personalización de tu web WordPress, pero sin duda la combinación de Elementor+Hello Theme hace que los resultados sean totalmente satisfactorios y a un precio muy razonable. Además como veremos más adelante las características y optimización que presenta Elementor no lo vas a poder encontrar en otros Page Builder como Divi por ejemplo.

Elementor no solo ofrece una buena forma de editar la apariencia visual de una página de forma rápida y sencilla, sino que también ofrece una amplia gama de colores, plantillas y añadidos que los otros editores visuales no suelen ofrecer.

Características de Elementor

• Rapidez: A diferencia de la mayoría de constructores visuales, Elementor posee una gran rapidez al momento de usarlo. Ofrece todas las opciones de forma rápida y sin trabas, haciendo el proceso más sencillo y cómodo.
• Tiempo real: La edición en tiempo real es otra de las ventajas que ofrece Elementor, mientras se está utilizando se pueden ir corroborando los cambios que se estén haciendo, dando la oportunidad al usuario de ir viendo cómo va quedando su sitio web.
• Código abierto: Elementor permite ser utilizado por diversas plataformas web, además de que es compatible con la mayoría de las plantillas que existen, haciendo más fácil su edición. Esta cualidad no suele ser encontrada en otros constructores visuales.
• Uso: No es necesario ser un experto diseñador web, por sí mismo, Elementor facilita su uso y ofrece muchos tutoriales para sacarle un mejor provecho.
• Diseño: A diferencia de otros constructores, Elementor puede ayudar a editar un sitio desde cero sin necesidad de tener que hacer uso códigos CSS, lo que le brinda al constructor, una mejor libertad de movimiento y rapidez.
• Eficacia: Se puede construir una página y diseñarla por completo en menos de 10 minutos, dándole toques personalizados y aspectos diferenciados.
• Eficiencia: Utiliza menos de la mitad de todos los recursos que suelen usar otros editores visuales.
• Responsive: Elementor Page Builder permite la edición del formato visual en teléfonos y Tablet de forma completamente sencilla y fácil. Este aspecto positivo, es tal vez uno de los que mayor peso tiene al momento de ser elegido por los usuarios.
• Idiomas: Se encuentra traducido a muchos idiomas, lo cual facilita su uso a nivel mundial. Cualquiera puede implementarlo en su sitio web.
• SEO: Brinda todas las ventajas necesarias para hacer una buena aplicación SEO en la construcción visual de la página que estés diseñando.
• Valoraciones 5 estrellas: Posee la aprobación de la mayoría de los usuarios que han tenido la oportunidad de hacer uso de este asombroso diseñador web.
• Versión gratuita: Elementor ofrece una versión gratuita para que cualquier persona pueda hacer uso de sus funcionalidades, sin embargo también cuenta con la versión PRO que amplía sus características y que para mí es algo indispensable si realmente buscas un buen resultado en tu web.

¿Cuál es la diferencia entre Elementor y Elementor PRO?

Elementor Page Builder tiene dos versiones, Elementor y Elementor Pro. La versión gratuita no carece precisamente de funciones. Al contrario, aporta mucho. Sin embargo, hay muchas diferencias en lo que ofrece la versión Pro. 

Por supuesto, la versión premium hace todo lo que puede hacer la versión gratuita. Eso significa que puedes utilizar la misma herramienta de construcción de arrastrar y soltar. Sin embargo, ya no estás limitado a usar esa misma herramienta en las áreas de contenido de tu sitio. La funcionalidad del constructor de temas de Elementor Pro te permite usar el editor del plugin para modificar casi cualquier parte de tu sitio web.

Por ejemplo, puedes utilizar el constructor de arrastrar y soltar para crear encabezados y pies de página. También puedes diseñar páginas que antes eran inaccesibles, como el archivo y las páginas de una sola entrada. Para todos estos elementos, puedes crear plantillas y utilizarlas en todo el sitio, o aplicar diseños específicos sólo a determinadas páginas.

El otro gran beneficio de la compra de Elementor PRO es que se obtiene acceso a una mayor biblioteca de:

• Widgets
• Plantillas
• Bloques

Podrás añadir funciones más avanzadas a tu contenido, como formularios, sliders y tablas de precios. Esto amplía enormemente los tipos de páginas que puedes crear y, de nuevo, te evita tener que instalar un montón de complementos adicionales.

¿Qué puedes crear con Elementor?

Elementor es algo mágico para los desarrolladores web. Con un solo plugin, puedes crear formularios atractivos, pop-ups llamativos, sliders, efectos de animación, y mucho más. 

La versión gratuita de Elementor te ofrece solo 50 widgets básicos, mientras que la versión PRO ofrece decenas de widgets premium adicionales. Por eso, te voy a mostrar lo que puedes crear con Elementor PRO.

Un tema de WordPress sin código

Para crear un tema de WordPress, era necesario dominar PHP, HTML y CSS. Ahora puedes crear un tema de WordPress sin escribir ni una sola línea de código. Puedes hacerlo incluso si no tienes ningún conocimiento de programación. La versión PRO de Elementor incluye la función Theme Builder.

En general, un tema de WordPress consta de los siguientes elementos:

• Un encabezado
• Un pie de página
• Una plantilla de entrada
• Una página 404
• Una plantilla de página de archivo

El Theme Builder de Elementor te permite crear estos elementos a través del editor visual del propio plugin. Todo se arrastra y suelta en el editor front-end.

Ventanas emergentes o pop-ups

Con Elementor PRO, ya no es necesario instalar un complemento de construcción de ventanas emergentes, ya que esta versión viene con una función de este tipo. Y lo que es más interesante, Elementor ofrece decenas de plantillas de ventanas pop-up listas para usar entre las que puedes elegir. 

Podrás utilizar el Constructor de Pop-ups de Elementor para mostrar banners de tus ofertas especiales, formularios de suscripción por correo electrónico, un botón flotante para compartir en redes sociales, por mencionar algunos.

Páginas web

Tanto si usas Elementor Gratuito como Elementor PRO, tienes acceso a la biblioteca de plantillas de Elementor. Con una plantilla de Elementor, puedes crear una página en tu WordPress en cuestión de minutos. Simplemente importa tu plantilla preferida, adapta el contenido y tu página estará lista para publicar. 

Ahora bien, la versión gratuita de Elementor no tiene acceso al kit de plantillas de Elementor ni a todas las plantillas etiquetadas como «PRO».

Una landing page

Como se mencionó anteriormente, la versión gratuita de Elementor ofrece sólo unos 50 widgets y son muy básicos. Con estos widgets básicos, sólo podrás tocar la parte superficial de Elementor. Sin embargo, hay un montón de opciones interesantes que te ofrece la versión profesional. 

La versión PRO de Elementor te permite dar rienda suelta a tu creatividad sin ninguna restricción. Puedes crear una landing page más atractiva añadiendo widgets premium como Encabezado Animado, Tabla de Precios, Flip Box, Testimonios, Reseñas y mucho más.

Si todavía no conoces las Plantillas Elementor Gratuitas y las Plantillas Elementor PRO que ofrezco, te invito a echarles un vistazo. Estoy seguro que te ayudarán para agilizar el proceso de creación web.

Una tienda de e-commerce

Otra característica que ofrece la versión PRO de Elementor es WooCommerce Builder. Esta función es especialmente útil si quieres crear un sitio web de e-commerce con WordPress. Con WooCommerce y Elementor Pro instalados, puedes crear una página de producto única sin ningún esfuerzo. 

El WooCommerce Builder de Elementor ofrece bloques listos para usar. Y en el caso de contar con una página de WordPress, WooCommerce es una mejor alternativa que Shopify. 

Trabajos realizados con Elementor

A lo largo de estos años he realizado cientos de proyectos con Elementor y WooCommerce, aquí tienes una pequeña recopilación de algunos de las páginas webs que he diseñado con Elementor.

¿Cómo instalar Elementor?

Al igual que otros plugins de WordPress, instalar Elementor es rápido y sencillo. Hay dos formas de hacerlo.

Instalar Elementor a través de Elementor.com

Paso 1: Entra en Elementor.com y haz clic en Empezar.

Paso 2: Introduce tu dirección de correo electrónico y contraseña para crear una cuenta.

Paso 3: Responde a algunas preguntas sobre a quién va dirigido el sitio web y cuánta experiencia tienes en la creación de sitios web.

Paso 4: Selecciona cómo quieres crear tu sitio. Puedes comprar el plugin Elementor PRO o un paquete que incluye el plugin. Así como una instalación de WordPress y alojamiento, si aún no lo tienes. 

Paso 5: Como Elementor requiere que tengas un sitio WordPress activo, introduce el dominio de tu sitio web en el verificador para asegurarte de que tu sitio está en la plataforma.

Paso 6: Una vez confirmada la compatibilidad de tu sitio, haz clic en Instalar Elementor.

Paso 7: Si el sistema te dirige a la página de inicio de sesión del administrador de tu sitio web, inicia sesión. Si ya has iniciado sesión, accederás directamente a la página del plugin de Elementor. Haz clic en Instalar ahora en la esquina inferior derecha.

Paso 8: Después, llegarás a una página con un mensaje de confirmación. Haz clic en Activar Plugin.

Instalar Elementor a través del panel de control de WordPress

Paso 1: Desde tu panel de control, haz clic en Plugins > Añadir nuevo.

Paso 2: En el campo de búsqueda, introduce Elementor y localiza Elementor Website Builder.

Paso 3: Haz clic en Instalar ahora. Después de la instalación, pulsa Activar.

El constructor de páginas de Elementor se añadirá automáticamente a tu barra lateral.

Precios de Elementor PRO

El constructor de sitios web Elementor PRO viene con 4 planes:

1. Plan Esencial

Este plan contiene todo lo necesario para empezar a crear su sitio web. Incluye todas las características PRO, soporte Premium, activación de 1 sitio web PRO y kits de sitios web. Y te cuesta 49 € al año.

2. Plan Experto

Este plan te da acceso a todas las características del plan esencial más características adicionales como kits de sitios web para expertos, 25 activaciones de sitios web PRO y un perfil de Elementor para expertos. Cuesta 199 € al año.

3. Plan Estudio

Este plan te da acceso a todas las características del plan experto más características adicionales como activación de 100 sitios web PRO y soporte VIP. Cuesta 299 € al año.

4. Plan Agencia

Este plan de Elementor PRO te da acceso a todas las características del plan estudio más otras. Puedes obtener hasta 1000 sitios web pagando por este plan, que, además, es el más caro de los cuatro. Tiene un coste de 999 € al año.

Theme Builder de Elementor PRO

Si confías en un tema para personalizar la apariencia de tu sitio web, tendrás que afrontar muchas limitaciones. Los temas de WordPress modernos de hoy en día ofrecen más opciones de personalización, pero aun así sería ideal si se pudiera personalizar cada parte de su sitio web sin límites. 

El uso de un creador de temas como el Theme Builder de Elementor te permite personalizar cada parte de tu sitio web, de una manera visual, sin ninguna restricción. Puedes establecer tus propios diseños, elementos, colores, tipografías, patrones de comportamiento, y así sucesivamente. Todo se puede hacer arrastrando y soltando.

La opción de visualización permite incluso establecer dónde se aplicará una determinada plantilla personalizada. En otras palabras, es posible que tengas distintas secciones, como encabezados, en un mismo sitio web.

Hello Theme de Elementor

Hello Theme de Elementor es un tema del creador del propio plugin.  El tema se basa en la idea de ser la estructura principal del constructor de páginas Elementor. Es un tema rápido, fluido y minimalista que hace el trabajo de ponerse detrás de Elementor para adornar tu sitio web. 

Puedes estar seguro de que nunca habrá problemas de compatibilidad mientras trabajes con este tema y Elementor. Además, es posible implementar las características de Elementor sin pensar en que el tema sea visual o funcionalmente disruptivo. 

¿Y para quién es el Hello Theme de Elementor?

Hello Theme de Elementor es un tema exclusivo. No es para todo el mundo. De hecho, si no utilizas Elementor para tu sitio de WordPress, lo más probable es que Hello Elementor no sea tu tema predilecto. Ya que carece de las características necesarias si no utilizas el plugin.

Optimizar Elementor

Si quieres crear sitios web WordPress exitosos para ti o para tus clientes, aprender cómo acelerar tu sitio WordPress es esencial.

Mientras que muchas personas se centran en el diseño y el contenido de un sitio web, la rapidez con que carga el sitio es tan importante, e incluso más. Los tiempos de carga afectarán a la experiencia de usuario de la página, el posicionamiento SEO, las tasas de conversión, las tasas de rebote y mucho más.

Contando con las herramientas necesarias, podrás optimizar WordPress, mejorando así la rapidez y velocidad de tu sitio web. Una de las que yo recomiendo usar es WP Rocket. Éste se basa en las optimizaciones de Elementor para ayudarte a mejorar el rendimiento de tu sitio.

WP Rocket implementa automáticamente el almacenamiento en caché de páginas tan pronto como activas el plugin. Esto, por supuesto, mejorará el rendimiento del back-end.

En lugar de forzar a tu servidor a procesar PHP de forma continua para cada visita, WP Rocket te permite almacenar las versiones terminadas de tu página en una caché HTML estática. Lo que hace que el sitio de WordPress vaya con mayor fluidez.

Algo más que puedes hacer es utilizar Flexbox para maquetar tu página de forma más efectiva. El uso adecuado de contenedores Flexbox para el diseño de tu sitio web, puede mejorar el rendimiento drásticamente. Ya que reduces las divisiones creadas con Secciones, que era el anterior maquetador utilizado en WordPress.

SEO en Elementor

El SEO es fundamental para el crecimiento de cualquier sitio web, pero para muchos usuarios sigue siendo un misterio. Dicho eso, el SEO en Elementor es bastante intuitivo. Elementor permite crear páginas altamente personalizadas, modernas y atractivas con menos código, especialmente para usuarios sin experiencia.

Esto, es especialmente bueno para aquellos que no tengan mucha idea sobre el SEO, ya que puede llegar a ser complicado. Con Elementor puedes elegir qué etiqueta HTML quieres que tenga cada uno de tus encabezados o contenido de texto. Esta opción es de especial importancia cuando se trata de la parte más técnica del SEO.

Si quieres aplicar las mejores prácticas de SEO con etiquetas HTML, asegúrate de que cada página siga estas reglas:

• Cada página debe tener sólo un encabezado H1. Este H1 debe describir de qué se trata en su totalidad dicha página
• Los encabezados H2 corresponden a los temas principales de los H1
• Los H3 son para los subtemas de los H2
• Y los H4 son para los subtemas de los H3

Para mejorar el SEO de tu página web de WordPress, tendrás la posibilidad de agregar plugins SEO. Cada uno de ellos funciona a la perfección con Elementor. Algunos de los mejores son:

• Yoast SEO
• Rank Math
• All in One SEO Pack
• The SEO Framework

Crocoblock vs Elementor PRO

Como ya sabes, Elementor PRO es una versión más extensa de Elementor, con él tienes acceso a más funciones para construir tu página web tal y como la deseas. En cambio, Crocoblock es un plugin de Elementor que hace básicamente lo mismo que Elementor PRO. Sin embargo, ambos tienen sus similitudes y diferencias. Para algunos usuarios uno es mejor o más útil que el otro. 

Si bien tengo un artículo en detalle sobre Crocoblock que puedes leer, te voy a explicar un poco acerca de las ventajas y desventajas de cada uno.

Elementor PRO

Ventajas

• Tiene un editor CSS integrado que te permite insertar estilos personalizados
• Cuenta con una compatibilidad total con WooCommerce
• Hay plantillas globales que se pueden utilizar en diferentes páginas y cambiar de forma flexible
• Existe una gran cantidad de documentación, tutoriales, cursos y soporte por parte de una amplia comunidad

Desventajas

• No cuentas con una suscripción vitalicia. Todas son anuales
• Puede haber una baja velocidad y fluidez en el sitio si no está optimizado. Esto es por el exceso de CSS

Crocoblock

Ventajas

• La integración con WooCommerce es perfecta
• Es compatible tanto con Elementor como con Gutenberg
• Sus plantillas son dinámicas y bien diseñadas
• Soporte técnico 24/7

Desventajas

• Algunos plugins pueden causar problemas de rendimiento
• No tiene versión gratuita

Cabe destacar que, en lo personal, yo utilizo el plugin de Crocoblock para complementar las funciones que ya tiene Elementor. Me resulta útil y no lo reemplazo. Si bien no puede ser para todos, si eres un diseñador web, merece la pena probarlo alguna vez.

Divi vs Elementor 

Elementor y Divi son los constructores de páginas de WordPress más populares y dan vida a la mayoría de los sitios web que ves hoy en día. Elementor es un plugin constructor para WordPress. Y Divi es tanto un tema como un plugin para WordPress también.

Ambos son constructores de páginas visuales de arrastrar y soltar que permiten a los usuarios crear sitios web sin necesidad de conocer ningún código back-end. 

La principal diferencia entre Elementor y Divi es el precio. Elementor tiene una versión gratuita y PRO, como ya te mencioné, que comienza a partir de los 49 € al año para 1 sitio. Divi cuesta 89 € al año o 249 € para acceso de por vida a sitios web ilimitados. Divi es el único que ofrece una licencia de por vida para ser utilizado en sitios web ilimitados.

Si quieres saber más sobre ambos y te gustaría compararlos para saber cuál maquetador de páginas de WordPress utilizar, tengo un artículo dedicado de Divi vs Elementor. En él podrás saber todo acerca de ambos constructores web, además de mi opinión al respecto.

Widgets de Elementor

Los widgets de Elementor son los bloques de construcción de tu sitio web. Añaden funcionalidad a tu página, permitiéndote hacer cualquier tarea, desde escribir texto hasta añadir datos dinámicos. 

Tal vez uno de los aspectos más positivos que tiene para ofrecer al público Elementor, es que cuenta con un gran número de widgets posibles para utilizar en la construcción visual de la página web.

Existen Widgets para casi cualquier opción que te venga a la cabeza a la hora de diseñar ya sea una web personal, blog o incluso tienda online.

Su uso es super sencillo. Basta crear una sección y arrastrar alguno de los widgets para modificar la apariencia visual.

Desde sus opciones permite modificar la apariencia en tablet y móvil, consiguiendo una web responsive de manera muy fácil. Además puedes hacer uso del Widget global, de manera que puedes guardar y reutilizar un mismo widget en diferentes páginas sin modificarlo una a una.

Cada versión de Elementor, tanto la gratuita como la PRO, tiene sus propios widgets, así como también WooCommerce para facilitar la creación de tu tienda online. Te voy a explicar un poco acerca de ellos:

Widgets de Elementor gratuito

Los widgets más utilizados de Elementor gratuito son: el widget de encabezado, el widget de editor de texto, el widget de imagen y el widget de botón. Estos cinco widgets por sí solos, ya pueden ofrecerte los bloques para una página básica con encabezado, una sección hero y una llamada a la acción.

Widgets de Elementor PRO

Ahora, si quieres una página web con funciones y características más avanzadas, es recomendable que adquieras la versión PRO de Elementor. Puedes encontrar widgets más complejos. Estos incluyen botones para compartir, un botón de PayPal, tablas de contenidos, titulares animados, entre otros.

Widgets de WooCommerce

Si gestionas un sitio web de WooCommerce y quieres ofrecer a tus clientes la mejor experiencia de compra online, los widgets de WooCommerce son para ti. Permiten personalizar la barra lateral de WordPress y otras áreas preparadas para widgets añadiendo contenido, funciones y otros elementos. 

Entre los widgets de WooCommerce más utilizados están: el título de producto, añadir al carrito, menú del carrito, página de productos, por mencionar algunos. 

[BONUS] Plantillas Elementor

Como se que al principio es dificil empezar a realizar tus primeros pinitos con una nueva web, he decidido crear y ofrecer plantillas gratis y premium para Elementor.

Iré actualizando las plantillas cada cierto tiempo, pero de momento cuentas con alguna para crear una base y empezar a desarrollar tu web con WordPress.

Instrucciones instalación de Plantillas

1. Descomprime el archivo.zip y dirígete al panel de administración de WordPress.
2. Una vez dentro, en el apartado Elementor-> Mi biblioteca clica arriba de todo el botón que dice importar plantillas
3. Selecciona el archivo.json que te has descargado
4. Crea una nueva página y clica editar con Elementor
5. Pulsa el botón Añadir Plantilla y selecciona la que quieras que hayas descargado en el botón insertar.
6. Listo! Ya tienes la plantilla funcionando. Modifícala a tu gusto.

Espero que te haya resultado de utilidad esta parte de la guía. Ahora podrás empezar a diseñar tu primera página con WordPress.

Palabras finales

Ya sabiendo lo más importante, espero que puedas ver por qué Elementor es un constructor de páginas fantástico que elimina muchas de las confusiones del diseño web. Aporta un equilibrio ideal entre facilidad de uso y funcionalidad, lo que lo convierte en uno de los constructores de páginas más accesibles que existen para WordPress. 

En este blog comparto de forma regular, guías y novedades de Elementor. Si quieres saber más acerca de uno de los mejores constructores de páginas web, te invito a leerme.

Y si necesitas ayuda para tu proyecto web, como experto en Elementor, estaré encantado de ayudarte con el diseño y desarrollo web en WordPress, la creación de tu tienda online con WooCommerce u ofrecerte formación y consultoría de Elementor.