Elementor: un maquetador visual para WordPress

Está claro que cada vez son más los usuarios que se deciden a utilizar WordPress para crear su proyecto web y para ello el tiempo es oro. Hoy te quiero hablar sobre Elementor: un constructor visual para WordPress.

Ya te hablé sobre Elementor en el episodio nº 14 de mi podcast, y te dije que su llegada había revolucionado WordPress. Hoy te quiero hablar un poco más sobre este plugin que te va a permitir construir tu página de forma totalmente visual.

¿Qué es Elementor?

Elementor es un plugin, que dispone de una versión gratuita (que puedes descargar GRATIS) y de una versión PRO a un precio muy asequible. Se encuentra encuadrado dentro de lo que se conoce como constructor visual de WordPress.

Se llama así precisamente porque te permite ir construyendo tu sitio en tiempo real, mediante la técnica de arrastrar y soltar bloques o widgets a lo largo de una página en blanco.

Este tipo de plugins permiten a usuarios inexpertos poder crear cualquier tipo de página en muy poco espacio de tiempo, pudiendo dedicar el resto a crear contenido de calidad que, a fin de cuentas es lo realmente importante.

¿Por qué Elementor?

Es cierto que existen otros constructores visuales mucho más conocidos que Elementor, con mayor trayectoria dentro de WordPress y que quizás ofrecen algunas características comunes con este plugin… sin embargo, son varias las diferencias que, a simple vista, debes tener en cuenta a la hora de elegir uno de ellos.

Aunque la que posiblemente más te llame la atención sea el precio [recordemos que Elementor es un plugin gratuito frente al alto coste que tienen los más conocidos como Visual Composer (35$), Beaver Builder (99$), Thrive Content Builder (67$), y el famoso Divi (89$/año)], existen otras diferencias que te harán amar a Elementor.

Entre las principales características de Elementor, podrían destacar:

• Resultados en tiempo real. No necesitas esperar para ver los resultados de lo que estás haciendo, aparecen al instante.
• De código libre. Es el primer constructor visual con open source que te permite modificar su código fuente y adaptarlo a tus necesidades.
• Compatible con una gran variedad de plantillas. No necesitas comprar e instalar sus propias plantillas como es el caso de otros constructores visuales.
• Puedes crear tus propias plantillas, guardarlas y reutilizarlas todas las veces que quieras
• Exportar / Importar plantillas. Puedes utilizar las plantillas en diferentes proyectos exportando e importándolas.
• Totalmente personalizable con multitud de widgets que puedes configurar a tu antojo y distribuir por la página.

Te recomiendo también que leas el artículo donde te cuento las últimas novedades para usuarios de Elementor, que seguro que te van a resultar de interés-

¿Cómo funciona Elementor?

Para conocer el funcionamiento básico del plugin, te voy a comentar los pasos en varios apartados, para que no pierdas detalle de nada.

1.- Instalación de Plugin

El primer paso, obviamente, consistirá en descargar, instalar y activar el plugin, que puedes encontrar de forma gratuita en el repositorio oficial de WordPress.

En este punto tengo que aclararte algo: Elementor cuenta con una versión GRATUITA, que es la que te explico en este artículo y una versión extendida, que tiene un coste determinado y que, además de soporte, te ofrece muchas otras opciones adicionales.

Para que funcione la versión PRO, debes tener instalada previamente la versión gratuita de Elementor.

2.- Haz que tu theme sea compatible con Elementor

Aunque, como te he comentado anteriormente, Elementor es compatible con la mayoría de themes actuales (e incluso es totalmente compatible con Genesis), es requisito imprescindible que el theme que estás usando traiga definida una o varias plantillas de ancho completo, ya que si no, no te funcionaría bien el plugin.

Solucionar este paso es muy sencillo y puedes hacerlo de alguna de estas dos formas:

• Descargar la versión modificada de la plantilla TwentySexteen que han desarrollado los creadores de Elementor.
• Instalar otro plugin, llamado Page Templater For Elementor  que se encargará de añadir dos plantillas de página a tu theme actual.

3.- Añade funciones adicionales a Elementor

La versión gratuita de este plugin trae varios widgets que puedes usar sin problema, aunque en algunos casos necesitarás insertar widgets que sólo están disponibles en la versión premium.

Sin embargo, una de las ventajas de ser un plugin de código abierto, es que permite a otros desarrolladores crear addons para este plugin.

Por ejemplo, puedes descargar estos del repositorio oficial de WordPress:

• Contact Form7 Widget For Elementor Page Builder que te servirá para poder insertar formularios de contacto.
• Elementor Addon Elements te incorporará nuevos widgets como texto animado, separadores, listado de artículos, cajas que voltean… etc
• Tables For Elementor Muy útil para crear, por ejemplo, tablas de precios.
• Addon Widgets For Elementor Añade varios widgets con opciones de WooCommerce

4.- Crear una página con Elementor

Una vez que ya tienes los dos pasos anteriores completados, estarás listo para crear una página. Para ello tendrás que ir hasta Páginas > Añadir Nueva

Ahora verás que se te ha activado un nuevo botón que pone “Editar con Elementor”. Antes de pinchar sobre este botón es muy importante que en la barra lateral vayas hasta la caja de atributos de página y en el desplegable, cambies el tipo de plantilla y elijas una que sea “Fullwidth”.

Si te has saltado este paso, Elementor no va a funcionar, por lo que deberás volver atrás, seleccionar el tipo de página, guardar y volver a editar (en este orden).

Estructura básica de Elementor

La primera pantalla que vas a ver al entrar en Elementor, va a ser similar a la que tienes aquí. Si pulsas sobre cada botón redondeado, leerás una breve explicación del funcionamiento.

Secciones y Columnas

Las secciones son la parte básica del diseño con Elementor. También puedes llamarlo bloque si te resulta más fácil. Puedes insertar tantos bloques como quieras dentro de tu página y dentro de cada bloque puedes insertar tantos widgets como quieras.

Al pinchar sobre “Agregar nueva sección” te pedirá que elijas una estructura, donde aparecerán distintos diseños con varias columnas distribuidas en el bloque.

Una vez elegida la estructura, ya estarás listo para arrastrar y soltar los widgets del menú izquierdo dentro de cada columna, y configurarlos a tu gusto.

Configurar Elementor

Una vez que tengas abierto Elementor y estés en la edición de la página, puedes pinchar sobre el icono que te aparece arriba  la izquierda, compuesto por tres líneas, y accederás al menú de configuración.

Desde este menú podrás configurar distintos parámetros como por ejemplo:

• Colores que se aplicarán por defecto en los elementos que incluyas en tu diseño, independientemente de los que use tu theme.
• Fuentes que se utilizarán en las cabeceras de tu diseño o en el texto del cuerpo, con independencia de las que tu theme tenga establecidas en su hoja de estilos.
• Historial de revisiones, con lo que podrás volver a una versión anterior a alguna modificación que hayas realizado en el diseño
• Configuración de la página, que te permitirá elegir la posibilidad de mostrar u ocultar el título, elegir el tipo de plantilla a aplicar a la página y guardarla como borrador o publicarla.
• Eliminar todo el contenido te permitirá empezar de cero el diseño de la página.
• Desde la opción de configuración de Elementor, accederás a la sección de ajustes del Escritorio de WordPress, desde donde podrás, por ejemplo, elegir para qué tipo de entradas quieres tener disponible el maquetador, los roles de usuario que no quieres que tengan acceso a él, consultar tu biblioteca de plantillas, importar otras, sincronizar las plantillas existentes, etc…

Aprender a usar Elementor a fondo

Si te has quedado con ganas de aprender más a fondo a usar Elementor, te recomiendo que eches un vistazo a mi Curso de Elementor, donde a lo largo de 20 vídeos te explico paso a paso cómo funcionan todas las opciones del constructor visual Elementor.

Encontrarás casi 3 horas de formación guiada que te enseñarán a usar este constructor visual para WordPress.

¿Cuándo usar Elementor?

Mi recomendación es que utilices el maquetador visual únicamente para crear páginas: landing page, home, página de contacto, quién soy, etc…

En realidad no tiene mucho sentido hacerlo para las entradas o Custom Post Types, ya que son entradas con contenido dinámico que variará en función del texto que escribas.. no tendría sentido ir maquetando una por una todas las entradas, pues te quitaría mucho tiempo.

La gran diferencia de Elementor

Y si algo distingue realmente a Elementor del resto de maquetadores visuales para WordPress que existen actualmente, es que el día que decidas desinstalar el plugin o cambiar de tema, no encontrarás shortcodes esparcidos por el código fuente de las páginas.

Es decir, la mayoría de constructores visuales, además de consumir muchos más recursos, lo que hacen es insertar determinados shortcodes que el constructor tiene que “leer” para saber qué bloque tiene que mostrar y con qué aspecto.

Elementor no funciona de este modo, por lo que, además de reducir el tiempo de carga, tampoco te hará que tengas que revisar manualmente el código fuente el día que desinstales el plugin o cambies de theme para ir borrando manualmente esos códigos.

Conclusión

Elementor se presenta como la gran solución para todos los usuarios que se inician en el entorno WordPress y que no tienen conocimientos de programación.

Un plugin gratuito pensado para arrastrar y soltar bloques de contenido y crear una página en cuestión de minutos, con multitud de opciones de personalización.

Tanto si estabas buscando un maquetador visual  como si estás ya habituado a utilizar este tipo de plugins, te animo a que descargues elementor y lo pruebes gratis y, por supuesto, me dejes tu experiencia en los comentarios de este artículo para poder ayudar a otros usuarios.