Elementor Page Builder, Review y Tutorial [+VIDEO]

Vuelvo a insistir que Elementor es un plugin, no un tema. Por lo tanto, lo puedes usar donde quieras dentro de tu web con WordPress. Pero que lo puedas usar donde quieras no quiere decir que lo tengas que hacer. Por eso te voy a dar una recomendación, de hecho lo que te voy a contar es mi forma de trabajar. Mi recomendación es que lo uses para realizar páginas, pero no para escribir tus artículos. Para los artículos es recomendable que uses el editor propio de WordPress y que sea tu tema quien establezca el diseño. Como ejemplo de páginas me refiero a la página de inicio, sobre mí, de contacto, páginas de venta, etc. Porque si en un futuro decides cambiar de tema o dejas de usar Elementor por otro builder que aparezca, trabajando como te digo vas a tener separado el contenido del diseño, y no vas a tener que hacer nada.

Antes de empezar a usar Elementor lógicamente hay que instalarlo. Para instalar la versión base de Elementor hay que hacer lo mismo que con cualquier plugin, ir al repositorio de WordPress en tu web. Tienes que ir en tu Escritorio al menú Plugins y dentro de él elegir Añadir nuevo. Cuando se abra la nueva pantalla, verás que aparecen los plugins más destacados y arriba a la derecha tienes disponible un buscador. Solo tienes que poner “elementor” en el buscador (sin las comillas) y te aparecerá en primer lugar un plugin llamado Elementor Page Builder. Pues ese es el que tienes que instalar.

Si tienes actualizado tu instalación de WordPress (si no, te recomiendo que lo hagas) lo podrás instalar y después activar directamente desde esta página, sin necesidad de salirte. Una vez que lo hayas activado, ya tienes Elementor disponible en tu web.

Con la versión que acabas de instalar puedes empezar a trabajar sin ningún problema, pero tienes que saber que Elementor Page Builder cuenta con una versión de pago que añade nuevos elementos y funcionalidades a la versión básica. Por ejemplo, vas a tener plantillas predefinidas con las que puedes realizar una página completa con unos pocos clicks. Cargas la plantilla, cambias el contenido que incluye por el tuyo y ya tienes tu página con un diseño espectacular.

También vas a tener widgets muy útiles como cuentas atrás, slider, formularios sin necesidad de plugins adicionales, login de usuarios, etc. (después los vamos a ver todos en detalles). La versión Pro te cuesta 49$ para una web, 99$ para tres y 199$ para webs ilimitadas. Si no te dedicas a construir webs para otros con la versión de una web o tres es suficiente. Y poder contar con todos los añadidos por 49$ me parece un muy buen precio.

Para instalar la versión Pro tienes que tener instalado primero la versión básica que hemos visto en el punto anterior. Si no lo haces, no te preocupes. Si instalas primero la versión Pro, te va a aparecer un mensaje con un botón diciéndote que para que funcione la versión Pro necesitas la básica, y si haces click en el botón se instala la versión básica. Todo muy fácil.

Cuando hagas la compra, te podrás descargar un archivo comprimido zip y obtendrás una clave de licencia. Para instalar el archivo tienes que ir al menú Apariencia y añadir nuevo. Pero en esta ocasión vas a hacer click en el botón que te aparece arriba Subir plugin. Se te abrirá una pantalla donde tienes un botón para seleccionar un archivo. Pues el archivo que tienes que seleccionar es el que te has descargado de Elementor. Tendrá la estructura elementor-pro-version.zip, donde versión es un número que será diferente dependiendo de en qué momento te lo descargues.

Para usar la versión Pro, aparte de instalar el archivo que acabas de hacer, tienes que introducir tu clave de licencia. Para hacerlo tienes que ir al nuevo menú Elementor y dentro a License. Ahí verás que aparece un cuadro de texto donde tienes que pegar tu clave y un botón que pone Activar para finalizar la activación de tu versión Pro.

Cuando ya tengas instalado Elementor vas a ver que en los menús de tu Escritorio de WordPress ha aparecido una nueva opción llamada precisamente Elementor. Aunque te pueda parecer un poco pesado este bloque, es necesario que antes de empezar a usar Elementor, lo tengas bien configurado. Unos pocos minutos al principio te puede ahorrar mucho trabajo después. Merece la pena. Volvemos al menú. Este nuevo menú cuenta con 5 submenús: Ajustes, Mi biblioteca, Herramientas, Información del sistema y Licencia.

A nosotros nos interesan los tres primeros que son en los que podemos configurar el funcionamiento de nuestra web. Los dos restantes nos aportan información de tu web y de la licencia con la que estés usando Elementor. Échales un vistazo si quieres pero no son importantes para usar Elementor.

A continuación te voy a explicar qué ajustes puedes configurar en esta pantalla.

Un último apunte antes de empezar a usar Elementor tienes que tener en cuenta que el diseño que crees se va a adaptar a tu tema. ¿Qué quiero decir con esto? Pues que si tú quieres crear una landing sin cabecera ni menús, esto lo tienes que configurar antes de arrancar con Elementor. Un ejemplo para que lo entiendas mejor. Si tu web cuenta con una página de inicio con una zona de contenido más un sidebar, el diseño que crees con Elementor se va a añadir en la zona de contenido. Pero el sidebar no se va a perder.

Por eso es importante que antes de comenzar a usar Elementor sepas qué diseños quieres. Y así elegir la plantilla de página que más se adapte. Si quieres hacer una landing page Elementor incluye una plantilla de página llamada Elementor Canvas. Esta plantilla elimina la cabecera, sidebar o footer que tenga tu web. Vas a tener una página en blanco.

Comenzar a usar Elementor es muy sencillo. En primer lugar tienes que crear o abrir la página que quieras editar con Elementor. Si lo que quieres es editar alguna página que ya tengas creada tienes que saber que los elementos que añadas con Elementor se van a añadir al contenido que ya exista. Pero la buena noticia es que ese contenido que ya tengas creado también lo puedes editar con Elementor, así que no tienes que escribirlo otra vez ni empezar a copiar y pegar para darle un nuevo estilo. Una vez que tienes abierta tu página te vas a encontrar el siguiente botón:

Pues solo tienes que hacer click para iniciar el editor de Elementor. Más fácil imposible. Se abrirá el editor a pantalla completa. Aunque parezca que te has salido de tu web, no lo has hecho. Observa como el dominio es el tuyo. Se trata simplemente de que el editor se muestra a pantalla completa para aprovechar el espacio al máximo. No te asustes.

Una vez que ya hemos visto los widgets básicos vamos a ver los widgets de la versión Pro. Recuerda que estos widgets solo están disponibles si optas por la versión de pago. Si no te aparecen estos widgets es porque estás usando la versión básica. Si has pagado por la versión Pro y aun así no te aparecen los widgets de esta sección prueba a sincronizar de nuevo los archivos en la herramienta de Elementor que vimos antes.

Con este widget vas a poder incluir artículos que hayas creado. Es una forma muy sencilla de incluir una sección en tu página Home donde aparezcan los últimos artículos, artículos destacados, etc. Como todos los widgets se añade arrastrando con el ratón el widget a la zona que queramos y después configurando las opciones. Vamos a ver a hora las opciones. Se encuentran divididas en opciones de contenido y de estilo. En las opciones de contenido tenemos la agrupación de Layout.

Ya hemos visto como configurar como se va a mostrar la información que se obtenga de nuestro contenido. Ahora en el siguiente bloque Query vas a poder elegir qué contenido quieres obtener.

Por último, puedes configurar una paginación para navegar entre artículos. Esta opción tiene sentido si quieres que se pueda acceder a todos los artículos. Pero si solo quieres mostrar los últimos artículos o 3 artículos destacados por ejemplo, no tiene sentido añadir paginación. La paginación puede ser por números, incluyendo enlaces de Anterior y Siguiente o combinando las dos opciones.

Una vez que ya hemos visto las opciones para añadir contenido, vamos a ver las opciones para aplicar un estilo a esta información. Las opciones de estilo vienen separadas por el tipo de contenido. En primer lugar viene el estilo del Layout, de la distribución de elementos:

En Image vas a configurar la imagen destacada de tu contenido.

En Content vas a configurar toda la parte de tu contenido que sea texto. Esto es el título, los meta datos, el extracto y el enlace de Leer más. Los ajustes son los mismos para todas las partes. Y son opciones muy sencillas. El color, la tipografía y Spacing que es el mismo caso que ya hemos visto en la imagen.

Por último están los ajustes para los enlaces de la paginación. Lo único a destacar que no hayamos visto antes es el color. Tienes tres colores diferentes a configurar. Normal es el que color general, Hover ya hemos visto que se aplica cuando se pasa el ratón por encima y Active es el enlace que apunta a la página en la cual se está. Si por ejemplo estás en la página 2, el enlace que apunte a la página 2 será el enlace Active.

Que el nombre de este widget no te confunda. Con él vas a poder recuperar las imágenes del tipo de contenido que selecciones. El tipo de contenido que puedas seleccionar va a depender del tema y plugins que tengas en tu WordPress. Vamos a ver en primer lugar las opciones de  distribución (Layout) de las imágenes:

En las opciones de Layout has configurado como quieres que se vea el contenido, en las opciones de Query vas a configurar qué contenido quieres mostrar:

Por último, tienes la posibilidad de incluir una barra de filtrado de contenido para que la use el usuario. Se diferencia de los filtros que has visto antes en que este filtrado va a ser público y lo van a poder usar los usuarios que visiten tu web. En las opciones de Estilo existen opciones que ya has visto antes como color de espacio o espacio entre elementos.

Con este widget vas a poder crear un slider pero de diapositivas. Con diapositivas me refiero a que no te tienes que limitar a solo imágenes sino que también puedes escribir texto en varios formatos o enlaces. En cada elemento del slider puedes configurar las mismas opciones. Vienen divididas en tres secciones:

Luego tienes opciones que son comunes a todas las diapositivas. Vamos a verlas:

En las opciones de Estilo vas a poder configurar colores, tipografías de los distintos elementos que forman parte del slider: encabezado, texto, botón y navegación.

Con este widget vas a poder incluir de forma muy sencilla un formulario de contacto. Cuando un usuario use este formulario te va a llegar un email a la dirección que configures con el contenido del mensaje. En este widget vas a tener que configurar más aspectos aparte de los habituales. Pero no te preocupes que vamos a verlo todo. Vamos a empezar por los campos del formulario (Form Fields):

Para el botón tienes las opciones que ya hemos visto en otros widgets como son el texto que va a tener, tamaño, alineación, etc. El bloque siguiente es muy importante porque vas a configurar qué va a ocurrir cuando un usuario envíe el formulario. Cuando selecciones una opción aparecerá otro panel donde configurar los datos necesarios. Te explico las opciones que tienes:

Estas opciones las puedes combinar, no tienes que elegir una sola. Por ejemplo, puedes elegir que se envíen los datos por email a tu correo y se redirija al usuario a la página Home. Por último puedes agregar mensajes para mejorar la experiencia del usuario. Los mensajes que puedes personalizar son si el formulario se envía de forma correcta, si ocurre un error, si no se rellena algún campo obligatorio o si se introduce información no válida. En las opciones de Estilo tienes las opciones de colores, tipografía o espaciado que ya has visto en este manual.

Con este widget vas a poder configurar un login alternativo al que ofrece WordPress. Eso significa que lo vas a poder configurar a tu gusto y así adaptarlo al diseño del resto de tu web. Las opciones son muy sencillas. En primer lugar puedes elegir si mostrar o no las etiquetas de los campos y también el tamaño de los campos de texto. En el botón puedes configurar el texto que va a tener, su tamaño y la alineación que quieres que tenga. Lo más interesante llega en las opciones adicionales. Vamos a verlas en más detalle:

En los ajustes de Estilo vas a poder configurar colores, espacio entre elementos, tipografía… como ya hemos visto.

Con este widget vas a poder escribir una serie de precios en forma de lista. Es muy sencillo de configurar. Tienes que escribir el título y la descripción del producto, el precio y tienes la posibilidad de incluir una imagen y un enlace.

En las opciones de Estilo vas a poder configurar los estilos de los distintos elementos de la manera que ya hemos visto. Colores, tipografía, espacio entre elementos…

Este widget es similar al anterior en su función pero muestra el precio de una forma más visual y atractiva. Está compuesto por varias partes. En primer lugar tienes la cabecera donde puedes escribir un título y un subtítulo. A continuación tienes el bloque del precio. Aquí puedes configurar la divisa en la que está el precio, la cantidad, puedes escribir el precio original si el precio está rebajado y puedes escribir un texto indicando si el pago es periódico.

Siguiendo al precio puedes escribir una lista de características que tiene tu servicio o producto. Para terminar este bloque tienes el botón donde va a hacer click un posible cliente. Si tienes un botón tienes que configurar el enlace al que va a dirigir y un pequeño texto debajo por si quieres incluir algo más de información.

Un pequeño detalle más que puedes añadir una marca en la parte superior. Es muy útil si tienes varios precios y quieres que un cliente se decante más por uno que por otro puedes incluir esta marca que ponga algo como Más vendido. En las opciones de Estilo vas a poder configurar todos los elementos que hemos visto. El fondo de la cabecera, del resto del bloque, el color del precio, del botón, de cualquier texto… Son opciones que ya has visto y no deberías tener problemas con ellas.

Este widget es muy curioso y puede dar resultados espectaculares. Se trata de dos bloques de texto pero en el que el segundo solo se muestra al pasar el ratón por encima, como una moneda. Las dos cajas que tienes disponibles se llaman Front y Back y las dos se configuran de la misma forma. Puedes elegir un elemento gráfico que aparezca encima del texto. Tienes disponible imágenes, iconos o no poner nada. Las opciones que vas a tener si eliges una imagen o un icono son las que ya has visto.

Además del elemento gráfico tienes un encabezado y un texto. A parte tienes otra pestaña para poder configurar el fondo. Por último tienes ajustes comunes a las dos cajas de texto que configuran las animaciones que van a ocurrir cuando pongas el ratón encima. En las opciones de Estilo vas a poder configurar colores de iconos, encabezados, textos… Todas opciones que ya has visto.

En este widget vas a poder establecer una cuenta atrás. Es muy útil si quieres poner una fecha límite a la contratación de un servicio o la compra de un producto. Las opciones que permiten configurar este widget son muy fáciles de entender. En primer lugar tienes que elegir la fecha y hora límites que quieres configurar. A continuación, tienes una serie de interruptores para mostrar u ocultar la información como días, horas, minutos y segundos.

Después puedes configurar si quieres que se muestren las etiquetas y puedes personalizar el texto como ponerlo en inglés por ejemplo. En las opciones de Estilo puedes configurar las cajas del contador: el color de fondo, borde… Y el color y tipografía de los números y etiquetas. La forma de configurarlo es como ya hemos visto.

En este widgets vas a incluir los botones para compartir la página en las distintas redes sociales que configures. En el botón Agregar Elemento vas a poder añadir las distintas redes disponibles. Y a continuación puedes configurar la etiqueta.

En las opciones de Estilo vas a poder seleccionar el hueco entre botones, el tamaño de los botones, de los iconos… opciones que ya hemos visto.

También puedes elegir que los botones tengan el color oficial de cada red social o elegir un color personalizado que se integre con el diseño de tu web.

Este widget es muy rápido de explicar pero muy útil. Con él vas a poder añadir widgets o diseños que tengas guardados como plantilla. Así puedes añadir cualquier diseño en cualquier lugar de forma rápida y así reutilizar trabajo que ya hayas hecho.

Estos widgets se podrían entender como una versión intermedia de los dos grupos anteriores. Son más avanzados que los básicos pero menos que los de la versión Pro. Con estos widgets vas a conseguir elementos muy visuales de una forma muy sencilla.

Este widget vas a poder configurar un bloque que consiste en una imagen, un encabezado y un texto. La configuración es muy sencilla. Tienes un espacio para seleccionar una imagen, escribir un encabezado y un texto. Lo único diferente a destacar es que puedes configurar un enlace. Ese enlace se va a aplicar al icono y al encabezado pero no sobre la descripción. En opciones de Estilo puedes configurar varios aspectos que ya hemos visto como alineación del texto, color, tipografía…

Seguro que has visto este widget en muchas webs. Se usa sobre todo para describir características de una forma más visual y no usar solo texto que haga el diseño muy monótono. Yo mismo uso este diseño en mi web. En este widget tienes que distinguir entre tres partes: el icono, el encabezado y el texto, llamado descripción en el widget. Lo bueno es que las opciones que tiene las hemos visto. Son opciones como el diseño del icono, colores, tamaños, etc. El enlace al igual que en el caso anterior del Cuadro de imagen se aplica al icono y al encabezado pero no a la descripción.

Con este widget vas a poder crear una galería de imágenes que tengas subidas a tu WordPress. Para agregar las imágenes que quieras tienes que hacer click en Añadir Imágenes. Se te abrirán todas las imágenes que tengas en tu web. Selecciónalas y haz click en el botón Crear nueva galería y a continuación Insertar Galería.

Después puedes configurar las imágenes como su tamaño entre los que tengas disponibles, las columnas en las que quieres que aparezcan las imágenes, el orden o si quieres que al hacer click en una imagen se abra en una ventana aparte. En las opciones de Estilo puedes elegir el espacio entre las imágenes o si quieres ponerles un borde. Además puedes configurar si quieres mostrar la leyenda de las imágenes en caso de que la tengas escrita.

Aquí vas a poder configurar un slider con imágenes. Este widget es muy similar al anterior solo que aquí las imágenes van rotando en lugar de estar fijas. La forma de agregar las imágenes es igual al widget anterior de Galería. El resto de opciones son las propias de un slider:

Con este widget vas a poder crear una lista donde elegir los iconos que se usan delante de cada elemento. Es muy sencillo de configurar. En cada elemento puedes configurar tres cosas: el texto del elemento de la lista, el icono que va a aparecer delante y tienes la posibilidad de convertirlo en un enlace. En las opciones de Estilo vas a poder configurar la separación de los elementos de la lista, la alineación y la opción de incluir un separador entre los elementos. Por último puedes configurar el color de los iconos y del texto.

Con este widget vas a poder escribir un número que aparece con una animación que consiste en que van pasando los números anteriores. Vamos a ver las opciones que podemos configurar:

El widget de barra de progreso es muy útil para mostrar información en forma de porcentaje de una manera muy atractiva a la vista. Se muestra con una animación simulando la barra de progreso que puedes ver al instalar un programa por ejemplo. En el título vas a escribir un texto explicativo del porcentaje que se muestra.

En el tipo vas a poder elegir diseños ya incluidos que ya hemos visto como el de información (azul), éxito (verde), advertencia (naranja) o peligro (rojo). En porcentaje vas a escribir el número hasta el que se va a rellenar la barra y también puedes elegir si quieres mostrar o no el número. Por último puedes escribir un texto que aparecerá en el interior de la barra. En las opciones de Estilo vas a poder configurar el color de la barra y el texto y la tipografía usada.

Con este widget vas a poder incluir de forma muy sencilla y visual los testimonios y recomendaciones de tus clientes. Se usa un texto que se corresponde con el testimonio y a continuación la información de la persona que lo ha escrito. Esa información es una foto, el nombre y el trabajo que tiene.

Las opciones que están disponibles se explican por sí solas. Lo único que puede no quedar claro es los nombres dados a la posición de la imagen. Arriba sí está claro y Minipublicación se pone al lado del nombre y trabajo. Las opciones de estilo ya se han visto a lo largo del tutorial como puede ser colores o tipografías.

Con este widget vas a poder agrupar varios textos en un único bloque. Para navegar por los distintos bloques vas a disponer de pestañas en la parte superior o izquierda según configures. En las opciones de estilo vas a poder configurar colores de los bordes, fondos, encabezados y texto del bloque. Todas las opciones ya las hemos visto.

Con este widget vas a poder escribir bloques de texto donde solo va a ser visible el encabezado y donde para ver el contenido vas a tener que hacer click. Tienes que saber que al hacer click en un encabezado se cerrarán los demás que estén abiertos. Agregar un elemento es tan fácil como hacer click en Agregar elemento y escribir el encabezado y el texto que quieras. En las opciones de Estilo vas a poder configurar los colores y fondo de los encabezados y los textos. Son opciones que ya hemos visto.

Este widget es igual al anterior pero existe una diferencia. Aquí cada vez que abras un bloque de texto los que ya estén abiertos no se van a cerrar.

Con este widget vas a poder configurar los enlaces a tus redes sociales y servicios online. Incluye todas las principales, incluso alguno poco común como Spotify.

En las opciones de Estilo puedes seleccionar que los iconos se muestren por su color o puedes elegir tú el color que van a tener si quieres que esté acorde al diseño de tu web. El resto de opciones que no te he nombrado, ya las has visto antes.

Este widget es una especie de Caja de Texto pero con funciones añadidas. Las funciones añadidas son estilos ya preparados, un borde destacado y un botón para que desaparezca el mensaje. Los estilos, que aquí se llaman Tipo, ya los hemos visto. Información pone un color azul, Éxito para el color verde, Advertencia color amarillo y Peligro para el color rojo. En la pestaña de Estilo puedes configurar los colores a tu gusto.

Con este widget vas a poder añadir un audio alojado en SoundCloud de forma muy sencilla. Solo tienes que copiar y pegar la dirección del audio. Y puedes configurar el tipo de reproductor que quieres usar, uno sencillo de audio o uno más grande parecido a uno de vídeo. Después tienes una serie de interruptores donde configurar qué tipo de información quieres mostrar. Se explican por sí solos. Por ejemplo, puedes hacer que se reproduzca el audio de forma automática, que aparezca el número de reproducciones o el nombre de usuario del audio.

En este widget vas a poder añadir los shortcode que proporcionan otros plugins para aumentar la funcionalidad de la página. Un shortcode es un código del estilo [nombre_plugin id=”123”]. Si por ejemplo, tienes un plugin de formulario y creas uno, el plugin te va a mostrar un shortcode que puedes copiar en este widget y así incluirlo en la página que estás diseñando.

Con este widget vas a poder añadir directamente código HTML en el diseño de la página. Es muy útil para añadir todavía más funcionalidad a Elementor. La verdad es que con la cantidad de widgets disponibles va a ser difícil que tengas que añadir código a mano.

Aquí vas a poder configurar lo que en HTML se llama ancla. Se usa para poder ir a un punto en concreto dentro de una página. Te va a quedar más claro con un ejemplo. Imagina que tienes una página donde presentas tus productos, y tenemos un producto que se llama Producto 3. Usa este widget para poner una marca en este lugar, lo llamamos producto3. Pues si ahora configuras un enlace en un menú así: tupagina.com#proucto3 al pulsar en ese enlace vas a ir directamente a ese producto, sin tener que recorrer todos los productos que aparecen antes en la página.

En este widget de Elementor vas a poder usar cualquier zona de widgets de WordPress que ya tengas configurada en tu web. Observa que estoy distinguiendo entre widgets de Elementor y widgets de WordPress para que no te confundas. No tienes por qué configurar una barra lateral aunque por el nombre te puedas confundir. Tienes que tener en cuenta que se pueden perder los estilos que tengas configurados en tu tema para los widgets en la barra lateral porque estás poniendo un widget de WordPress en otro lugar al que está pensado en un principio.

Aquí vas a encontrar los mismos widgets que tienes disponibles en la sección de widgets en el Escritorio de WordPress. Estos widgets van a variar de una web a otra dependiendo del tema y de los plugins que tengas instalados. La parte buena es que la configuración es la misma que tienes en WordPress, por lo que no tiene ninguna configuración adicional por usarlos en Elementor.

Elementor es un page builder de WordPress que ofrece una versión gratuita (que no está mal para empezar, pero que se queda pequeña enseguida) y otra versión PRO que te ofrece una funcionalidad extra muy interesante (sobre todo por el theme builder). De todas maneras, hay usuarios deseosos de más opciones de diseño y widgets y, por ello, son muchos los desarrolladores que han hecho plugins para añadir todavía más funcionalidad a Elementor. Estas son las mejores extensiones para el page builder de WordPress Elementor:

Después de leer este megatutorial no vas a tener ninguna excusa para poder conseguir diseños increíbles en tu web. Como te he dicho al comienzo no tienes que esperar nada para poder empezar a usar Elementor. Si no te atreves a instalarlo en tu web, sigue este artículo e instala WordPress en tu ordenador. Así tendrás una web de pruebas que solo tú podrás usar y sin miedo a meter la pata.

Como te he dicho a lo largo del tutorial, no hay excusa para no empezar a usar Elementor hoy mismo. Se adapta al tema que tengas en uso, cuenta con una versión gratuita con la que puedes empezar a aprender a sacar todo su potencial y además cuenta con el mejor rendimiento que he visto en un builder. Ánimo, empieza ahora mismo instalando Elementor.