Elementor page builder WordPress: el maquetador visual definitivo

Esta guía es un centro de recursos propios y externos fácilmente consultable sobre el plugin Elementor Page Builder WordPress. La idea es que no te quedes con dudas sobre este maquetador visual WordPress. Veremos en detalles todo lo referente a Elementor y Elementor Pro. Y ser irá actualizando a menudo con nuevos vídeos y secciones.

Entre los recursos, también incluyo un tutorial en el que recorro todas las opciones del plugin con instrucciones precisas, pantallazos y ejemplos de manera que puedas conocer a fondo su funcionamiento.

Es una guía extensa. No es un artículo para leer del tirón sino para consultar según tu necesidad. Utiliza los enlaces del menú para ir a la sección que más te interesa.

Te dejo a continuación los dos primeros vídeos de 5 en los que replico la plantilla Divi Cafe con Elementor a todo lujo de detalles. Para que te hagas una idea. Al final de esta guía ya tienes los otros 4 videos e iré añadiendo más replicando otros themes.

Vídeo 2

Page Builder WordPress o maquetador visual para diseñar una web

Los términos maquetador visual WordPress y Page Builder WordPress en realidad son dos formas de hablar de lo mismo. Un maquetador visual, al final, es un conjunto de herramientas que sirven para diseñar páginas web más rápido y de una forma más visual e intuitiva que como se ha hecho hasta hace poco tiempo.

Antes, si querías ser diseñador web o crear tu propia web, tenías que aprender código HTML, CSS, PHP y Javascript al menos. Eso era una barrera de entrada muy grande y definía a un profesional con un perfil más de desarrollador que de diseñador web. Así que terminabas encargando tu web a alguien que controlaba mucho de programar pero que por lo general no tenía muy buen gusto a la hora de diseñar.

Pero hoy día, cualquiera puede crear una web profesional si aprende WordPress y a manejar un maquetador visual como Elementor por ejemplo. Y además, ahora sí, con los page builders, si quieres puedes contratar a un diseñador web para crear tu página. No necesitarás un programador a no ser que quieras algo muy a medida.

Pero como decíamos, y como dice Wix en sus odiosos anuncios: “Nesesitas una página web… ¿por qué no crearla tú mismo?”.

Crear paginas web no es complicado hoy en día. Las curvas de aprendizaje no son muy pronunciadas y en pocas semanas, si te lo curras, puedes dedicarte al diseño web para crear tu propia página y no depender nunca más de un tercero. O incluso para crear páginas web para tus clientes.

A grandes rasgos, los maquetadores visuales son muy interesantes porque:

• No necesitas saber nada de código para empezar
• Te facilita la creación y mantenimiento de contenido con cierto diseño y estructura
• Permite crear de forma visual y ver el resultado a tiempo real
• Ahorras tiempo en diseñar tu página web y puedes dedicarlo a tu verdadero negocio
• Cómo funcionan los maquetadores visuales en WordPress

En realidad los page builders o maquetadores visuales tienen un funcionamiento similar todos ellos.

Por lo general hay una superficie de edición donde encontraremos todo tipo de elementos, widgets y módulos ya preparados simplemente para colocarlos en nuestro contenido y configurarlos para ajustarlos a nuestras necesidades. Los más actuales además, eliminan la página de edición de la ecuación, de forma que editas directamente sobre el contenido que va a ver la gente. Lo que llaman Live visual design.

Digamos que eso sería una idea vaga y general de todos los maquetadores. Después veremos que cada uno funciona de modo un poco diferente. Pero al final esa es la idea.

Lo importante es que en vez de tener que programar esos módulos prediseñados, sólo tendrás que rellenarlos con tu contenido y listo.

A nivel código, los maquetadores visuales pueden usar:

Shortcodes

Los shortcodes son fragmentos de código (o pequeños programas que hacen algo concreto) incrustados en el html de tu contenido a través de abreviaturas entre corchetes de manera que tu añades el shortcode y este revela el código que encierra mostrándolo en la web.  Su aspecto sería algo así:

[shortcode], así [shortcode] [/shortcode] ó así [shortcode id=”223″ option= “true”]

El peligro de los shortcodes, es que si un día desistalas tu page builder o decides cambiar a otro, esos shortcodes quedarán huérfanos en tu contenido.  Aparecerán tal cual, sin mostrar el html que contenían. De manera que no habrá manera sencilla de limpiar ese contenido. Mira te dejo una imagen del artículo Comparing Drag and Drop WordPress Page Builders de Chris Lema para que veas un contenido creado con un maquetador visual que usa shortcodes. Verás a que me refiero.

Html y CSS

Es lo más indicado porque si algún día decidieras desinstalar tu maquetador visual mantendrías al menos un código limpio de residuos en HTML. Quizá no tendrías el diseño tal y como se mostraba porque el CSS desaparecerá, pero tu contenido seguirá maquetado y será mucho más fácil de limpiar o actualizar y volver a dejar perfecto. Aquí te dejo un pantallazo para que veas cómo queda un contenido cuando desactivas o desinstalas un maquetador visual que usa html.

Maquetadores visuales WordPress disponibles

Existen muchos más, pero vamos a centrarnos 6 de los WordPress Page Builders más conocidos en la actualidad y voy a ser muy breve con ellos. Esto no es una comparativa de maquetadores visuales para WordPress. Si quieres más información pincha en los botones al final de cada descripción:

Maquetador Visual Composer

Te dejo algunos datos destacables del maquetador Visual Composer:

• Precio: poco más de 28 € (34$), pago único, licencia para un sitio
• Más de 310.000 ventas
• Casi 5 estrellas sobre 5 aportadas por casi 10.000 usuarios
• Instalado en miles de themes que puedes encontrar en Themeforest
• Usa shortcodes

Ver visual composer

Divi Builder: Visual Drag and Drop Page Builder

A continuación te dejo algunos datos de interés sobre el page builder WordPress Divi Builder:

• Precio: es una subscripción de unos 75 € (89$) al año y tienes acceso ilimitado a todos los plugins y themes y a sus actualizaciones y soporte.
• Antes de ser un plugin, Divi Builder ya existía como maquetador web dentro del theme Divi
• Gran comunidad creando plantillas WordPress listas para usar gratis o de pago
• Usa shortcodes

Ver WordPress Divi Builder

Thrive Content Builder (ahora Thrive Architect)

Iba a contarte algunas características del archiconocido Thrive Content Builder y cuando he ido a la página me encuentro con la noticia de que están creando un nuevo entorno y concepto llamado Thrive Architect. No tenía ni idea de lo absorbido que estoy por Elementor.Este movimiento tan profundo en el proyecto (hasta el punto de que un page builder como Thrive Content ni aparezca en la web) tiene que ser muy serio. Y me suena precisamente a reacción ante el éxito de Elementor.Esperemos a ver que ocurre. Actualizaré para entonces.

Ver Thrive Architec

Site Origin Page Builder

Ésta sería la opción que he utilizado hasta la llegada de Elementor al mercado. Es un poco menos visual pero es el de mejor código. Y mucho más ligero. Sus números hablan por si solo.

• Gratis, libre y siempre lo será según los desarrolladores
• Más de 1.000.000 de Instalaciones activas
• 5 estrellas de más de 800 usuarios en el repositorio de WordPress
• No usa shortcodes

Ver Site Origin Page Builder

Gutemberg

Gutenberg es un proyecto de page builder. Actualmente es un plugin en desarrollo pero se pueden ir  probando los avances. No te hagas mucha ilusión. Está en pañales todavía.La idea es que en un par de años se convierta en un page builder básico incorporado al core de WordPress. Eso sería lo suyo. ¡Wordpress con maquetador visual propio! Por el momento, el desarrollo va lento, ya que incorporar algo al código base de WordPress no es un moco de pavo. Hay que tener en cuenta muchas cosas y cada paso requiere de mucho trabajo y revisión. Así que tendremos que esperar.

Ver Gutenberg

Elementor Page Builder For WordPress

Bueno, éste es el que más recomiendo. Por eso estoy haciendo esta guía ¿no? A lo largo de ella vamos a hablar en detalle de las características, pero te adelanto que hay Elementor gratis y una versión de Elementor Pro de pago.

Ver Elementor Pro

Otros maquetadores visuales para WordPress

Aunque hay más todavía, te dejo a continuación otra tanda más de WordPress page builders destacados:

• Forge
• MotoPress Content Editor
• Themify Builder
• Page Builder by WooRockets.com
• Live Composer

Por qué Elementor como Page Builder WordPress: características principales

Ya hemos visto el valor que añade utilizar un page builder para crear una página web. En resumen, usar un maquetador visual rompe las antiguas barreras de la programación y pone al alcance de cualquiera la posibilidad de diseñar páginas web.

Ahora bien, hay maquetadores y maquetadores. A continuación vamos a ver algunas características que me hacen decantarme por Elementor como Page Builder WordPress. Pero antes resumo en puntos rápidos:

• El más rápido y optimizado que he probado
• Visual 100%. Esto es así. Los hay que tienen una parte visual pero no funciona muy bien
• El código del plugin es de mucha calidad y Open Source
• En 1 año tiene más de 100.000 activaciones
• Tiene sistema de plantillas propio
• Historial de cambios. Se puede hacer un deshacer
• Edición móvil súper sencilla e intuitiva
• Abierto a terceros (así otros programadores pueden crear addons)
• Tiene un montón de plantillas ya diseñadas y gratis (también hay otras cuantas que vienen con la versión pro)
• Cada vez hay más plugins, widgets y funcionalidades en el repositorio oficial
• Integración con otros plugins como (WPML o con Woocommerce)
• Se está creando una gran comunidad alrededor (en Facebook, Google +, foros… etc)

Elementor Page Builder funciona genial con el theme Astra.

En mis webs y en las de mis clientes utilizo siempre Genesis Framework y un child theme. Cuando probé Elementor noté que los tiempos de carga aumentaban lógicamente. Con cualquier maquetador visual te va a pasar esto porque traen mucho código y generan mucho código.

Lo bueno, es que Elementor sólo carga ese código en las páginas diseñadas con Elementor. No en todas las páginas. Aunque te parezca increible esto es así. Hay otros maquetadores que cargan las hojas de estilo y determinados scripts uses o no uses el maquetador en esa página.

Si a esta característica de Elementor Page Builder le sumas que Genesis es muy ligero (mira mis resultados en Pingdom Tools desde Sweden y GTMetrix pinchando en estos enlaces) consigues una web con un diseño espectacular que carga muy rápido. Es un gustazo.

Gran planteamiento del sistema de secciones y columnas

Elementor está muy bien pensado. Su forma de plantear las secciones y columnas nos abren un abanico casi infinito de posibilidades a la hora de diseñar. Lo vas a ver en profundidad en el tutorial.

Puedes crear secciones, duplicarlas, guardarlas como plantilla para ser reutilizadas. Y configurar estas secciones como realmente quieras sin tocar código: colores de fondo, degradados tan de moda ultimamente, imágens de fondo, vídeos como fondo con una foto de portada mejorar tiempos de carga…

Las columnas funcionan de forma muy similar y te dejan personalizar casi cualquier cosa.

La combinación de ambas es simplemente liberta creativa.

Gran velocidad sin competencia del Elementor Live Preview

Como ya hemos dicho, Elementor es 100% visual. Es decir, toda la edición de diseño se hace directamente en el front end (la página pública, lo que ve el usuario vamos). Pero es que además, es rapidísimo.

Incluso el Live Preview de Site Origin (que es el maquetador visual más ligero de todos) se queda atrás.

Esto es una gran ventaja porque tu flujo de diseño no se verá interrumpido. No tendrás que estar esperando para ver cómo queda. Haces el cambio y se ve instantáneamente. Te gusta, se queda. No te gusta, vuelves a editarlo y listo. Pero todo a tiempo real. ¡Gran punto para Elementor Page Builder!

Estabilidad y gran funcionamiento

En el tiempo que llevo usando Elementor Page Builder no he tenido ningún percance. No se ha quedado colgado, siempre se graba todo bien y responde como debe en cada momento. Es totalmente fiable.

Por el momento es así, pero iré actualizando esta parte según tenga más proyectos a mis espaldas.

Con elementor es muy fácil configurar las vistas de móvil y tablet

La edición responsive es una maravilla. Mi consejo es que maquetes un página. Cuando hayas acabado la ves en tablet y corriges si es necesario. Después lo mismo para móvil. Total, es tan rápido que no te va a dar ni pereza.

Casi todo tiene su opción para móvil. ¿Qué es eso de que un encabezado no se redimensiona en móvil? Eso en Elementor no es nada. Un segundo.

Plantillas de Elementor

En elementor vienen incluidas cantidad de plantillas que puedes usar como punto de partida para tus diseños. Pero es que en [eafl id=”2198″ name=”Elementor Pro” text=”Elementor Pro”] vienen otras tantas y de composición más compleja.

Así puedes plantear tu diseño rápidamente usando la plantilla completa o guardando como plantilla las secciones que más te gusten de esa plantilla.

Porque eso es otra. Puedes guardar cualquier sección, sea tuya o de una plantilla, y luego reutilizarla cuando quieras. Como todo en Elementor Page Builder de una forma rápida y sencilla.

No genera estilos inline

Sí. Hay varios maquetadores muy potentes y que usa mucha gente que todavía generan estilos inline. Esto quiere decir que incluyen reglas CSS dentro del propio código HTML de la web. Por lo tanto, la web tardará más en cargar.

Lo suyo es crear clases CSS y luego llamarlas desde su hoja de estilos. Esto es lo que hace Elementor de forma automática.

Funciona con HTML no con Shortcodes

Hoombre. Esto ya lo hemos estado hablando ¿no?. Es una de las características principales. Olvídate de código lleno de shortcodes que te complican la vida a la larga. Elementor usa Html de buena calidad.

Licencia y precio de Elementor Pro

Actualmente tienes 3 opciones si estás pensando en comprar [eafl id=”2198″ name=”Elementor Pro” text=”Elementor Pro”]. Te dejo aquí sus tablas de precios.

Como ves, si sólo necesitas Elementor Pro para un sitio, puedes elegir el plan Personal de Elementor Pro por 41,5 euros (49$). Este es el plan indicado si lo quieres simplemente diseñar tu propia página web en WordPress.

Después, si tienes varios negocios online puedes elegir el plan Business de Elementor Pro por unos 84 € (99$). Con este plan puedes utilizar Elementor Pro hasta en 3 sitios web distintos con la misma licencia.

Y por último, tanto si eres una agencia o un diseñador web freelance y crear páginas para tus clientes es el core de tu negocio quizá lo que más te interese es el plan Unlimited de Elementor Pro que cuesta unos 168 € (199$) y te servirá para instalarlo en tantas webs como necesites.

Con cualquiera de las licencias tendrás derecho a soporte y actualizaciones de Elementor Pro durante un año. Al terminar este año podrás renovar tu licencia o no. Elementor Pro seguirá funcionando. Simplemente te perderás las actualizaciones y no dispondrás de soporte. Si te decides por renovar tu licencia de Elementor Pro page builder ¡te hacen un renwal discount del 50%!

En cualquier caso, en el sitio web de Elementor Pro dejan muy claro que el servicio no se trata de una suscripción y ningún cargo se hará automáticamente al acabar tu licencia. Tendrás que ser tú personalmente quien la renueve.

Una vez te has decidido a comprar Elementor Pro y rellenas el formulario accederás al panel de usuario.

El panel de usuario en la Web de Elementor Pro es muy sencillo y desde ahí podrás gestionar tu licencia, las webs a las que está asociada, los upgrades y las renovaciones de licencia. Todo muy limpio, sencillo y bien organizado.

Documentación oficial de Elementor

La verdad es que es muy clara y se encuentra muy bien todo. No me sorprende que aunque lleven poco tiempo en el mercado (apenas algo más de un año cuando escribo esta guía) tengan una documentación de tanta calidad. Se ve a la legua que Elementor es un proyecto bien planificado, en el que han pensado a largo plazo y en el que prima la calidad.

Y eso a parte de verse en el ritmo de las actualizaciones constantes queda reflejado en su sólida documentación.

Te parecerá una tontería pero fijándote en la documentación de un theme, plugin o proyecto en general te puedes hacer una idea de la seriedad de ese proyecto.

Lo que más me gusta son los vídeos que hay por todos lados. Que quieres saber cómo funciona un widget, tienes vídeo. Que quieres saber como usar tal herramienta, vídeo. Video. Video tutoriales Elementor por todos lados. Eso sí, como el resto de documentación, están en inglés.

Si no tienes problemas con el inglés, con la documentación oficial de Elementor podrías prepararte para ser diseñador web en pocas semanas. Si el inglés no es lo tuyo o prefieres que te lo cuente yo, sigue leyendo.

Addons gratuitos para Elementor

¡Hay docenas de addons para Elementor gratis! En breve actualizaré la guía y meteré aquí los que vaya probando. De momento, si quieres ir conociéndolos pon “Elementor” en la caja de buscar plugins en el repositorio dentro de tu WordPress y aparecerán 3 páginas dedicadas a ellos.

¿He dicho ya que Elementor Page Builder tiene un año escaso de vida? Flipo con la aceptación que ha tenido y la comunidad de gente que se ha creado alrededor en tan poco tiempo.

Si eres novato y no tienes muy claro cómo buscarlos desde dentro de tu web te dejo este tutorial donde hablo de cómo instalar plugins y se ve el camino.

Themes + Elementor

Próximamente.

¿Con que themes funciona mejor Elementor page builder? Es un tema que quiero tocar en una próxima actualización de esta guía.

Elementor y Elementor Pro: instalación y entorno

Vamos a comenzar con el tutorial, pero antes aclararemos algunos aspectos, hablaremos de Elementor y Elementor Pro y dejaremos instalado todo. En este apartado no voy a ver una comparación entre la versión gratis y la pro porque más abajo, durante el tutorial veremos que elementos y características son de cada uno.

Aspectos previos a tener en cuenta

Hay algunos detalles a tener en cuenta a la hora de utilizar cualquier maquetador visual:

Theme

En mi caso personal utilizo Elementor sobre Astra o Hello Elementor.

El caso es que puedes utilizar el tema que quieras pero hay que tener en cuenta algunos aspectos:

• Si tu theme tiene o no barras laterales. Necesitarás desactivarlas para utilizar el ancho completo.
• Si los encabeados de tu theme son h1. Necesitarás saberlo para cuando añadas nuevos cabeceros no duplicar un h1, cosa que no va muy bien para SEO.

Elementor

Antes de comprar Elementor Pro, quizá deberías mirarte si con la versión gratuita tienes suficiente. En la mayoría de los casos puede ser así.

Elementor Pro

Funciona como una extensión del plugin Elementor. Por eso, antes de instalar Elementor Pro tienes que tener la versión gratis de Elementor cargada.

Instalar Elementor

Para instalar el plugin Elementor haremos lo que hacemos siempre. Vamos a Plugins-> Añadir nuevo y en la pestaña de buscar ponermos “Elementor”. Rápidamente aparecerá.

Si eres nuevo y no sabes de lo que te hablo mirate este tutorial donde explico como se instalan los plugins en WordPress

Instalar Elementor Page Builder Pro y activar la licencia

Ahora llega el momento de instalar Elementor Page Builder Pro. Para ello tendrás que comprarlo y puedes hacerlo desde aquí mismo. Una vez lo hayas comprado, ingresa en tu panel de cliente y copia la clave de la licencia.

Ahora vuelve a la zona de administración de tu WordPress y ve a Elementor -> License. Allí podrás pegarla.

Guarda cambios y listo.

Solo una cosa más. Vuelve al panel de usuario de la web de Elementor y comprueba que se ha activado bien. Sino, también puedes enlazar la web desde allí mismo.

¡Ya está!

Ahora cuando estemos utilizando el plugin aparecerán todas las nuevas opciones.

Venga, pues ya lo tenemos. Comencemos con el tutorial.

Configuración y menús

A continuación vamos a ver todas las opciones del plugin Elementor Page Builder con cierto grado de detalle. Además adjunto enlaces a puntos que pueden ampliar tus conocimientos tanto internos a mi blog como externos a blogs de terceros.

Estaremos trabajando con la versión 1.6.5. Si hubiera algún cambio importante en futuras versiones lo dejaría indicado aquí mismo. Vamos a ello.

Ajustes

Tras la instalación se añade un nuevo menú dentro del panel de administración de WordPress. Es el menú Elementor. Vamos a ir a Elementor->Ajustes. Allí encontraremos 4 pestañas.

Pestaña General, pestaña de Estilos, pestaña de Integraciones y pestaña Avanzado. Vamos a empezar con los ajustes de la pestaña General.

Configuración general del maquetador visual Elementor

Tipos de entradas

Aquí aparecerán todos los tipos de contenidos que tengamos en nuestra web. Desde entradas hasta custom post types de cualquier tipo (productos de Woocommerce por ejemplo o Staff si tenemos un custom post type de Equipo)

Lo primero es colocar elementor sólo para páginas.

El motivo es que si luego cambiamos de maquetador visual, las páginas suelen ser pocas, pero las entradas serían muchísimas.

Perfiles excluídos

Quién no quieres que pueda utilizar elementor

Desactivar los colores globales

Nos permite desactivar los ajustes globales de color para elementor y así respectar los del theme.  Si la activamos, prevalecen los colores del theme. Si no, los que digamos a elementor.

Desactivar las fuentes globales

Si activamos la casilla se aplicarán las fuentes del theme.

Mejora elementor

Si marcamos esta casilla estaremos ayudando a los desarrolladores de Elementor a mejorarlo y conseguir mejores actualizaciones.

Simplemente les permites recabar datos de tu instalación. No es peligroso porque los datos son solo estos. Te recomiendo que les ayudes.

A continuación pasamos a la pestaña de Estilo para ver los siguientes ajustes de Elementor.

Ajustes de estilo

Fuentes genéricas predeterminadas

Sirve para establecer la fuente predeterminada si en un momento dado no encuentra una fuente indicada. Viene con la San-serif como fuente predeterminada.

Ancho del contenido

Viene como 1140 px de ancho como predeterminado. Lo suyo es que lo ajustemos al mismo ancho que da el theme y así que todo quede unificado. Piensa en que medidas vas a utilizar más y pon esa como predeterminada y cambia cada caso concreto a la que necesites en ese momento.

Espacio entre Widgets

Podemos dejar aquí establecido el valor por defecto par estos espacios que luego podremos sobreescribir con valores concretos en cada elemento.

Extender hasta ajustar la sección

Éste será el contenedor que usará elementor para trabajar. No debes tocarlo en casi ningún caso.

Selector del título de página

Viene por defecto h1.entry-title que es lo suyo.

Mesa de luz de imágenes

Sirve para abrir las imágenes en un pop up emergente tipo Light Box. Yo no utilizo esta opción. Normalmente no coloco enlaces a las fotos para que no se puedan abrir.

Integraciones de Elementor Page Builder WordPress

Aquí podemos añadir nuestras site keys para utilizar el ReCAPTCHA de Google.

Ajustes avanzados de Elementor Page Builder

Y por último pasaríamos a la pestaña de Avanzado, donde veremos un par de aspectos técnicos que es importante entender para el buen funcionamiento y rendimiento de nuestra web con elementor.

Método de impresión de CSS

Conviene elegir un fichero externo para así no generar una hoja de estilos demasiado grande.

Cambio de método de carga del editor

Tal y como se explica ahí, sirve para resolver problemas de conflictos con las configuraciones de algunos servidores.

Mi biblioteca

Elementor -> Mi Bibliotecta

Éste es el lugar donde gestionaremos nuestras plantillas. La interfaz es muy similar a cualquier página de gestión en WordPress.

Hay dos botones, el de añadir una nueva plantilla o el de importar una plantilla externa. Más adelante veremos como guardar aquí plantillas para después reutilizarlas.

Herramientas

Nada más abrir el apartado de Herramientas del plugin elementor vemos 4 pestañas que separan diferentes opciones. Vamos a ir viendo cada una.

General

Elementor crea hojas de estilos para organizar el CSS que genera. Con otros maquetadores éste CSS es en línea o inline CSS, que significa que directamente está colocado en el html o php de la página a través de la etiqueta style.  Lo que no es nada conveniente para los tiempos de carga y para la propia limpieza del código.

Es posible que por nuestro sistema de caché o por el propio navegador, a veces no carguen bien estos estilos o se muestren versiones no actualizadas.

El botón de Regenerar CSS sirve precisamente para esto. Para forzar la carga de los ficheros CSS actualizados. Así que si tienes algún problema de que no se muestren los cambios que estás realizando ven aquí pincha sin miedo.

Por otro lado, aquí también tenemos la opción de Sincronizar la biblioteca. Ésta se refiere a las plantillas del repositorio de elementor. Y es que cuando accedemos a esta biblioteca de plantillas, la estamos cargando desde la caché de nuestra instalación.  Así que puede darse el caso de que no estemos viendo la versión más actualizada del mismo.

Para solucionarlo sólo tienes que pinchar en el botón de Sincronizar la Biblioteca y todo listo.

Reemplazar URL

La segunda pestaña alberga una sorpresa. Y es que Elementor viene con una opción de cambiar las urls de toda nuestra web como si un plugin de migraciones haría. No se por qué pero hay que investigar esto. Y ver que pinta aquí. Nos ahorraríamos un plugin.

Control de versiones

Para revertir a la versión anterior si al actualizar has tenido problemas. Cada vez más plugins traen este sistema de seguridad tan interesante. Elementor Page Builder WordPress no podía ser menos.

Modo de mantenimiento

En la cuarta pestaña tenemos esta herramienta tan útil que nos servirá para crear nuestra página de mantenimiento con el propio elementor. Así que otro plugin que nos evitamos.

Se puede elegir entre varios modos (en los que damos diferentes respuestas a Google para que sepa en que estado está la web) y quien podría acceder a la página cuando esté este modo activado.

Y por último hay que elegir una plantilla de nuestra biblioteca para utilizar en la página de mantenimiento.

Información del Sistema

Aquí Elementor recopila todos los datos de nuestra instalación WordPress. Así, si tienes una incidencia puedes copiarlo y pegarlo en tu ticket de soporte. También puedes utilizar el botón de abajo para crear un archivo xml que puedes adjuntar en tu ticket.

Bueno, pues hasta aquí los ajustes de configuración de Elementor. Como ves son pocos y sencillos.

Ahora vamos a empezar a trabajar con el plugin a ver que nos encontramos.

Elementor Page Builder tutorial en español

Para ir entendiendo el funcionamiento del plugin vamos a crear una página y ver que hay de nuevo en ella.

Para ello, como siempre vamos a Páginas -> Añadir nueva.

Lo primero que vemos es un gran botón azul que dice Editar con Elementor. Ahora volveremos aquí.

Pero antes, si vamos al apartado de atributo de página y seleccionamos el desplegable de las plantillas veremos que aparece una nueva plantilla llamada elementor canvas.

Plantilla Elementor Canvas

Si elegimos esta plantilla tendremos una página completamente en blanco. Es decir, una página sin menú, barras laterales ni footer. Lo que sería una landing page en la que el theme no aporta ningún estilo.

Casi todos los child-themes de Genesis en sí ya trae una plantilla así. Pero Elementor trae la suya propia. Ésta será la que usemos cuando queramos montar una landing page.

Editar con Elementor

Ahora sí, vamos a pulsar el botón de editar con Elementor. Nada más hacerlo, el sistema nos saca de la página de edición y nos muestra la misma página desde su front. Es decir, la página tal y como la vería un usuario si estuviera publicada.

A la izquierda veremos el personalizador de Elementor, que recuerda mucho al propio personalizador de WordPress.

Y en el contenido veremos una caja con la que podemos añadir una nueva sección, añadir una plantilla o arrastrar un widget de los que tenemos en el personalizador de Elementor.

Además, ahora si nos ponemos encima del texto que hayamos añadido a la página, veremos que aparecen cantidad de iconos que nos muestran las posibles ediciones que podemos ir haciendo.

Antes de entrar en ello vamos a ver un poco más el personalizador de Elementor.

El Editor de Elementor

El personalizador se puede hacer más ancho o delgado a nuestro gusto simplemente arrastrando desde el lateral. Además se puede ocultar o mostrar pulsando en su flechita lateral.

En esta interfaz podemos ver todos los elementos que nos brinda Elementor listos para usar y diseñar. Pero además hay otros del propio editor o personalizador.

Lo primero que veremos son las pestañas de Elementos y Global. Hablaremos más adelante sobre ellas en este tutorial.

En la barra inferior del personalizador de Elementor podemos ver de izquierda a derecha los siguientes iconos:

El aspa o X para cerrar Elementor. Cuando lo pulsamos nos da la opción de que se muestre la página (ya sin Elementor) o de ir directamente al escritorio cuando se cierre Elementor.

El icono de un ordenador sirve para indicarnos que ahí, si pulsamos, se nos mostrarán las opciones para ver lo adaptable que es nuestro diseño. Así que al pulsar vemos que podemos elegir entre Desktop, Tablet y Mobile.

Interrogación de ayuda. Al pinchar nos muestra las opciones de ver un vídeo de introducción a Elementor y la opción de ir a la documentación de Elementor.

La carpeta de plantillas. Al pulsar en este icono se nos da la opción de visitar el repositorio de plantillas donde podremos elegir una (ya hablaremos de ello) o la opción de guardar la página que estamos maquetando como plantilla para ser reutilizada más tarde.

El botón de Guardar

En la barra superior hay un menú de hamburguesa y un icono que sirve para volver al dashboard del personalizador de Elementor (donde están los elementos).

Vamos a ver en profundidad cuales son las opciones dentro del menú de hamburguesa:

Colores globales

Aquí se mostrarán las paletas de colores que podemos elegir para nuestros diseños siempre que no hayamos marcados la casilla para deshabilitar estos colores en ajustes tal y como veíamos aquí.

Así podríamos elegir cualquiera de las paletas que vienen por defecto. Al elegir un paleta se muestra arriba del todo los colores de esa paleta y sobre qué elementos actúa.

Y si quisiéramos podríamos ir color a color personalizándolos a través de selectores de color hex. Así que no te tienes que ceñir a las paletas de ejemplo. Más bien son un punto de partida.

Pero ojo, si vas a usar los colores desde estas opciones, intenta ser lo más coherente posible con tu plantilla para que todo quede bien integrado.

Fuentes Globales

Al igual que en el caso de los colores globales, esta opción se puede deshabilitar desde ajustes para que Elementor herede las fuentes del theme. Yo siempre recomendaré esto porque me encantan las plantillas de Génesis tal y como vienen. Pero es posible que tu quieras usar tus propias fuentes.

Desde aquí podemos establecer una fuente específica para el encabezado primario (o título del contenido), para un encabezado secundario, para el texto del cuerpo y por último para lo que llama texto de acento, que no es más que el texto de las llamadas a la acción y botones.

Cuando abrimos cualquiera de estos subapartados podemos elegir la familia de la fuente desde las fuentes del propio sistema o cualquier fuente de Google Fonts. Además podemos especifícar el peso o grosor de la misma.

Selector de Color

En este apartado podemos establecer qué colores se mostrarán en los selectores de color de forma predeterminada cuando estemos diseñando un elemento que requiere de color.

Así, no tendremos que ir a buscar el color, sacar su código y pegarlo en el selector de colores.

Directamente podremos elegir entre 8 colores destacados que podemos dejar preparados.

NOTA: Este ajuste, como todos los demás, sólo aplican a aquellos contenidos que sean editados con Elementor. En nuestro caso, sólo las páginas.

Ajustes de página

Estos ajustes son únicamente para la página que estamos maquetando. Cuando entramos en ajustes de página vemos dos pestañas. La primera hace referencia a los ajustes de la página propiamente dichos y nos muestra opciones que podríamos hacer directamente editando la página con WordPress como siempre.

Así son como accesos directos y podemos:

• Cambiar el título de la página que estamos maquetando
• Esconder éste títul0 (ojo, que ya hemos explicado arriba que lo haría con css con lo que no es una buena opción)
• Elegir qué plantilla queremos aplicar a esta página
• Cambiar el estado de la página (publicado, borrador, privada… etc)

La segunda pestaña se centra en el diseño que podemos dar a esta página. Y nos permite:

• Utilizar un color sólido como fondo
• Crear un degradado para usar como fondo de la página
• Colocar una imagen como fondo de pantalla
• Hacer todos los ajustes necesarios según la opción que hayamos elegido

Ajustes globales

El apartado de ajustes globales no sirve para reescribir en esta página los ajustes que hayamos colocado como globales en el apartado de ajustes -> estilo. Se trata simplemente de un acceso directo a esta sección que ya hemos analizado arriba.

Así tenemos dos pestañas en las que están repartidas las opciones que encontrábamos en el apartado mencionado. La primera pestaña se llama estilo y la segunda Mesa de Luz. En ésta última se ve lo relacionado con las imágenes y cómo se muestran. En la primera pestaña se ve el resto de elementos del estilo que se pueden ajustar.

Pero como ya digo, esto actúa como acceso directo y si cambiamos algo aquí se cambiará también en Elementor -> Ajustes ->Estilo.

Historial de revisiones

En este menú tenemos acceso directo a las revisiones de nuestro diseño. ¡Como lo oyes! Podemos ir viendo los cambios que hemos realizado y así volver a una versión anterior si fuera necesario.

Es tan sencillo como marcarla en la lista y aparecerá el diseño tal y como estaba en esa versión. Si quiero establecerla como versión buena, solo tendré que guardar y listo. Ya he vuelto a mi versión anterior.

Es recomendable que vayas borrando revisiones que no sirven para nada o las que nunca vayas a volver para no acumular datos innecesarios en la base de datos.

Eliminar todo el contenido

Simple. Es un opción para borrar todo el diseño que hayamos hecho en esta página. Una especie de reset.

Al hacer click en este menú, sólo nos da la opción de borrar o cancelar.

Ajustes de Elementor

Es un enlace directo que nos abre en una pestaña nueva la página de ajustes de Elementor Elementor -> Ajustes

Sobre Elementor

Es un enlace externo que nos abre una pestaña nueva que nos lleva a la página del plugin Elementor Page Builder.

Otros elementos del personalizador o editor de Elementor

Otros elementos que encontramos en el personalizador o editor de Elementor son:

Secciones y columnas en Elementor

Primero vamos a hablar sobre todo lo referente a Secciones en Elementor. Después atacaremos lo referente a Columnas en Elementor.

Para el ejemplo, vamos a crear una página nueva y vamos a pulsar el botón de “Editar con Elementor”.

Ahora, ya en el front de la página, vemos a la izquierda el personalizador de Elementor y a la derecha nuestra página. De momento vacía. Pero ya podemos observar dos botones grandes.

El de la derecha dice “Añadir Plantilla” y sirve para eso claro está. Pero de momento no vamos a hablar de plantillas. Vamos a ver cómo diseñar libremente. Aunque más adelante nos daremos cuenta de las ventajas y beneficios de diseñar con plantillas.

El botón más a la izquierda dice “Agregar nueva sección” y es lo que vamos a hacer.

Al pinchar nos ofrece diferentes estructuras para que elijamos nuestro punto de partida.

De momento vamos a elegir una sola columna para nuestra sección. Ya iremos viendo el resto de estructuras según las necesitemos.

Así que pulsamos sobre la primera opción y se nos creará una nueva sección de una sola columna.

Lo primero que voy a hacer es ponerme sobre la sección y aparecerán nuevos iconos sobre un fondo azul. Además la sección queda recuadrada en azul también para que sepamos qué estamos editando. Si pulsamos los iconos de izquierda a derecha valen para:

• Ver todos los ajustes de la sección (en la imagen por ejemplo he pinchado en este primero y a la izquierda vemos todas las opciones)
• Duplicar o clonar la sección
• Añadir una nueva sección
• Guardar la sección dentro de la biblioteca como plantilla
• Borrar la sección

Antes de seguir con todas las configuraciones de la sección, te cuento que en esta sección podemos arrastrar elementos del editor y así ir diseñándola. Con respecto a los elementos luego hablaremos de cada uno de ellos. Pero de momento, para poder ir viendo ejemplos voy a añadir un encabezado y un editor de texto simplemente arrastrándolos a mi nueva sección. Continuamos.

Editar Sección

A continuación vamos a ver todas las opciones de una sección. Para ello, te recuerdo que tras crear la sección, me he puesto encima de ella y cuando han aparecido los iconos he pulsado el primero de todos.

Ahora se han abierto en el personalizador de Elementor todas las opciones de esa sección y sólo tendré que ir ajustándolas. Fíjate que hay 3 pestañas disponibles. Vamos a comenzar con la primera de ellas.

Disposición de una sección en Elementor

Extender sección sirve para convertir la sección a ancho completo

Ancho de contenido sirve para delimitar si el contenido debe mostrarse también a ancho completo o dentro de una caja. Si eliges caja, entonces puedes marcar el ancho de la caja en pixeles.

Espacio entre columnas sirve para indicar el espacio tamaño del espacio entre las diferentes columnas que pudiera haber en esta sección. Como nuestra sección sólo tiene una columna, no podremos ver nada aquí. Pero más adelante lo vemos.

Alto sirve para indicar la altura de la sección. Podemos dejarlo como viene predeterminadamente, podemos ajustar el alto de la sección para que se ajuste a la pantalla completa ó podemos darle la altura que deseemos si ponemos altura mínima e indicamos en el deslizador los píxeles de altura que deseamos.

Posición del contenido nos permite ajustar nuestro contenido en la vertical. Podemos elegir entre arriba, en medio o debajo. Es lo que se llama vertical align en CSS.

Etiqueta HML nos da la opción de cambiar la etiqueta hml de la sección que estamos editando. Hasta el momento no he necistado hacer ningún cambio en esta etiqueta.

El espacio de estructura que se muestra debajo nos sirve para recordarnos cuantas columnas tiene nuestra sección. Así, dependiendo del número de columnas nos dará diferentes disposiciones (medidas) para las mismas. Pero ahora hablamos de Columnas en Elementor un poco más detalladamente.

Estilo de una sección en Elementor

Bien, ya tenemos nuestra sección configurada. Ya ahora vamos a ver todo lo relacionado a la apariencia o look and feel. Para ello vamos a ir a la segunda pestaña, a la relativa al Estilo de una sección en Elementor.

Como puedes apreciar en la imagen, el estilo de una sección en Elementor tiene disponibles 4 apartados para ajustar al detalle tu diseño.

Éstas son Fondo, Capa de fondo, Borde, Forma del divisor y Tipografía.

Vamos a ir viendo todas las opciones de cada una de ellas.

Fondo de una sección en Elementor

Lo primero que vemos al pulsar sobre fondo en esta versión 1.6 es la opción de elegir si nos estamos refiriendo al fondo normal o al fondo sólo cuando nos pongamos encima con el ratón. Es decir un fondo en hover.

Vamos a ver las opciones sólo para el fondo normal. Ya que serían prácticamente las mismas para la opción de hover (encima).

Lo primero que podemos hacer es elegir el Tipo de fondo: 

El primero, representado con un pincel, es el que llaman fondo clásico. Éste nos deja elegir un color sólido como color de fondo. Sólo tenemos que ir al apartado de color, pinchar y elegir el color que queremos del selector de colores.

También podríamos elegir una imagen en vez de un color sólido. En ese caso aparecerán nuevas opciones. Vamos a verlas.

Recuerda que si elegiste bien tu paleta de colores y la colocaste en el apartado de selector de colores, ahora se mostrarán ahí esos colores de tu paleta. Súper cómodo.

Las opciones para la imagen de fondo en una sección de Elementor son las siguientes:

• Posición: nos permite mostrar zonas de la imagen siempre que esta sea lo suficientemente grande. No te aconsejo poner imágenes que sobrepasen las medidas que se van a visualizar. Más que nada porque estarás cargando más la página sin necesidad. Mira, te dejo aquí un vídeo tip en el que muestro como optimizar las imágenes para WordPress.
• Adjunto: es una opción interesantísima puesto que entre sus posibilidades nos deja elegir que el adjunto quede fijo. Con esto conseguiríamos lo que se llama efecto Paralax en una sección de Elementor. A golpe de click y súper sencillo. Una genialidad.
• Repetir: sirve para repetir la imagen en el eje vertical u horizontal. Esto nos viene bien cuando nuestra imagen es pequeña y necesitamos que se repita para cubrir la sección. Es ideal si quieres construir tu imagen con un patrón sencillo y ligero. Pero eso ya es un tema más específico del diseño. Si sabes de que hablo ahí lo tienes a golpe de click.
• Tamaño: nos da la opción de ajustar nuestra imagen a la sección de distintas formas. Con la opción de Abarcar, ampliaremos la imagen todo lo que haga falta para que cubra toda la franja. Esto significa que pueden quedar zonas no visibles de la imagen. Y con la opción de Contiene utilizaremos las dimensiones de nuestra imagen y se hará todo lo grande que pueda pero siempre se mostrará la imagen completa. Esto significa que si la imagen no puede cubrir toda la sección necesitaremos utilizar la opción de repetir para cubrirla.

Algo importante que debes tener en cuenta para que quede bien tu sección es utilizar una imagen cuyo fondo permita la legibilidad del contenido. Por ejemplo, la que he utilizado yo no nos serviría si no cambiamos el color de las fuentes del contenido.

Bien, pues visto el fondo clásico vamos a pasar ya al Degradado en una sección de Elementor.

Lo primero que debemos hacer es establecer un color primario. Después un color secundario. Así sin hacer nada más conseguiremos un efecto como el de la imagen.

Pero si queremos jugar con la posición y cantidad de degradado tendremos que usar los desplazadores de ubicación de ambos colores. Toquetea un poco esto hasta que tengas lo que buscas. Es súper divertido y rapidísimo.

Además podemos decidir si queremos que el degradado sea linear o angular. En incluso indicar que ángulo queremos usar.

Todas estas opciones de degradado puede que te recuerden mucho a programas de diseño como Photoshop. Sí. Es increible que podamos hacer esto online y a tiempo real. Una maravilla más del plugin Elementor Page Builder.

Pasamos ahora a la tercera opción. Y es que si ya te parecían increíble las opciones que hemos visto hasta ahora, también podemos poner un vídeo como fondo de una sección en Elementor.

Bueno, aunque en la imagen de la khaleesi sólo puedes ver eso, una imagen, en realidad esto es un vídeo. Al elegir el icono de la cámara en tipo de fondo, se nos muestra una caja para colocar el enlace de un vídeo.

Poner un vídeo como fondo en una sección de Elementor es de lo más sencillo. Sólo tienes que ir a youtube, coger la url del vídeo y pegarla aquí. El vídeo se incrustará al tamaño de tu sección, se reproducirá automáticamente, no mostrará los controles de youtube ni ninguna informacion excepto el vídeo y además lo hará sin audio. También puedes poner un vídeo propio que hayas subido a tu biblioteca, pero esto no te lo aconsejo si quieres ahorrar espacio en tu servidor y datos de transferencia.

En cuanto a opciones, sólo nos da la posibilidad de colocar un fondo alternativo para cuando el vídeo, por lo que sea, no se pueda mostrar o para que cuando carga la página no tengamos que esperar a las llamadas al servidor (propio o Youtube).

También se aplicará este fondo en la vista de móvil automáticamente.

Capa de Fondo de una sección en Elementor

Con capa de fondo nos estamos refiriendo al típico Overlay o transparencia que podemos aplicar sobre un fondo.

El apartado del editor de Elementor es muy sencillo al respecto. Al igual que antes podemos elegir si la capa de fondo se aplicará directamente o solamente cuando estemos encima del elemento.

Después podemos elegir entre el tipo de fondo clásico donde podremos seleccionar o un color sólido o una imagen (a la que podremos aplicar opacidad con un deslizador) ó con un fondo degradado.

Básicamente lo mismo que el fondo pero para que se aplique sobre el propio fondo.

Ten en cuenta el color que utilizas de fondo para que la combinación con la capa de fondo quede bien. Lo normal es utilizar este tipo de capa cuando de fondo hemos utilizado una imagen o sobre todo un vídeo. Así podríamos salvar los posibles cambios de color del vídeo.

Borde de una sección en Elementor

Tras elegir si queremos el border siempre o sólo cuando nos pongamos encima de la sección, debemos elegir el tipo de borde que queremos colocar. Son los típicos, borde sólido, borde doble, borde punteado, borde de líneas.

Luego indicaremos en píxeles el ancho del mismo y dónde lo queremos: arriba, derecha, abajo, izquierda o en todos los lados de nuestra sección.

Obviamente, en secciones que ocupen el ancho completo, nos interesa solo poner borde arriba y abajo.

Para poder seleccionar los lugares donde queremos poner borde tendremos que pulsar en el icono de los eslabones y así dejaran de estar linkeados. Si no lo hacemos, el borde se aplicará a todos los lados de la sección.

Tras elegir el ancho y los lugares donde estará el borde hay que indicar el color que queremos para el mismo.

Y después podríamos añadir redondeo a nuestros bordes con el apartado de Radio del borde (nos permite hacerlo con pixeles o con porcentaje).

Pero no acaba aquí la cosa, porque además, si queremos, podemos añadir sobra a la sección completa activando el apartado Sombra de caja. Al hacerlo, se desplegarán todas las opciones para dejar perfecta esta sombra. Te invito a que toques los deslizadores y la posición hasta que des con la configuración perfecta para tu diseño.

Forma del divisor

Con este apartado me quedé completamente alucinado (toma rima!). Y es que con Elementor es súper fácil crear divisores muy vistosos y muy flexibles para que se adapten a lo que buscas.

En realidad, cuando utilizamos estos divisores lo que estamos aplicando es un tipo de borde vectorial especial  que podemos elegir si queremos que vaya arriba o debajo de la sección.

Tiene diferentes modelos pre-creados, pero al elegirlos podemos tocar cantidad de valores para modificarlos a nuestro antojo.

Te voy a dejar algunos de los que más me han gustado aquí a modo de ejemplo.

Aquí puedes ver uno de los más sencillos. Esta forma de divisor de sección en Elementor se llama Piramides.

El siguiente que me encanta es el de Nubes.

Otro que me gustaría destacar es el de Montañas.

Y para terminar te dejo también otro muy chulo. El de Cepillo de Olas.

Tipografía de la Sección

En esta opción dentro del estilo de una sección en el maquetador visual Elementor lo que podemos hacer es cambiar el color de las fuentes y el alineado del texto de esa sección sin tener que entrar en cada elemento. Como ves en la imagen podemos atacar al color del encabezado, del texto, del enlace y del enlace cuando estás sobre él.

Además podemos alinear el texto.

Es muy cómodo y reduce las reglas CSS en comparación con si lo hicieras elemento a elemento.

Como puedes ver en la imagen, estas opciones no van a funcionar si Colores Globales está activado.

Opciones avanzadas de una sección en el maquetador visual Elementor

Y para terminar con las secciones en Elementor Page Builder vamos a ver la pestaña de Avanzado.

Estilo del elemento

En este apartado podemos hacer algunos ajustes avanzados sobre el estilo general de la sección. Lo primero que podemos modificar es el margen de la sección. Solo tendríamos que añadir los valores deseados para los márgenes y listo. Si no estás familiarizado con el concepto, te comento que el margen es el espacio que puedes dejar entre un elemento y el siguiente.

No se puede añadir dos secciones una al lado de la otra, por eso en el caso de las secciones solo podremos ajustar los margenes superior e inferior. En este caso el margen sólo sirve para separar en la vertical una sección de la siguiente.

A continuación podemos hacer lo mismo con el relleno o padding de una sección en Elementor. En el caso del relleno, nos estamos refiriendo al aire o espacio entre los elementos dentro de la sección.

Por ejemplo, el espacio en la horizontal que hay entre una columna y otra, o el espacio en la vertical entre la columna y la sección.

Mira, para que te quede más claro te dejo este esquemita aquí.

El siguiente apartado que vemos es el de Z-index. Aquí podemos añadir un valor para que nuestra sección se muestre en una capa u otra de nuestro diseño. Con este valor podríamos hacer que la sección tapara el menú fijo de nuestra web por ejemplo. Me explico: ¿Has visto que cuando tenemos un menú superior fijo, éste siempre se muestra por encima del contenido? Es como si el contenido pasase por debajo del menú ¿verdad?. Pues, este efecto se consigue con un z-index.

Lo siguiente sería la Animación de entrada, que sirve para dotar de dinamismo y movimiento la aparición de la sección. La verdad, es que estos efectos no se suelen aplicar a secciones completas, sino más bien a elementos concretos. Lo veremos más adelante, pero si quieres, puedes probar a jugar con las diferentes animaciones que vienen incorporadas.

ID de CSS y clases CSS son opciones de diseño un poco más avanzado. Sirve para dotar de un ID a toda la sección y así poder aplicar en tu hoja de estilo tus propias reglas CSS a esa sección. Pero esto ya es más de CSS que de Elementor así que no voy a entrar en detalles en esta guía.

Responsive

Aunque veremos más adelante que se puede aplicar un diseño distinto para vista de móvil, tableta o escritorio en cada elemento, sección, columna…  en este apartado nos dan unas opciones generales para toda la sección. Vamos a ver cuales son estas opciones responsive del maquetador visual Elementor para las secciones.

La primera es la de columna invertida. Tal y como se explica en el propio editor de Elementor, si activamos esta opción, el orden de las columnas se cambiará en el móvil.

Esto es especialmente útil en composiciones donde tenemos una sección que se compone de una columna de foto y otra de texto, y debajo una de texto y otra de foto.

Si no aplicamos esta opción, en móvil resulta que veremos foto de la primera fila, texto de la primera fila, texto de la segunda fila y foto de la segunda fila. Quedando así los dos textos pegados y las fotos una arriba del todo y otra debajo del todo.

Pero si aplicamos esta opción de columnas invertidas tendremos foto 1, texto 1, foto 2, texto 2. ¡Genial! Esto ha sido siempre un quebradero de cabeza. Y Elementor lo soluciona con un click.

Después vemos la opción de Visibilidad. Aquí podemos decidir si nuestra sección se mostrará en todos los dispositivos o queremos ocultarlo en algunos de ellos.

Imagina que tu sección contiene un vídeo, o una CTA super grande. Quizá estos elementos funcionan bien en una vista de escritorio, pero en móvil no.

Pues nada, pulsamos en ocultar en móvil y listo. Ahora yo lo que haría sería crear una sección alternativa para el móvil y la ocultaría en escritorio y tableta. De esta manera cuando este en vista escritorio veré una sección y cuando esté en vista móvil veré una específicamente diseñada para móviles. Esto también es una maravilla que hacen del maquetador visual Elementor una de las mejores opciones entre todos los Page Builders WordPress.

Y por último, tenemos una opción para incluir CSS personalizado directamente ahí. A diferencia de ID de CSS y clases de CSS que veíamos en el apartado de Estilo del elemento hace un moment0, en esta ocasión no sería necesario usar nuestra hoja de estilos. Sino que podríamos escribir directamente en este apartado nuestras reglas CSS para esta sección.

Por cierto, esta es una opción de la versión Pro de Elementor.

Como has visto, hay cantidad de opciones para editar las secciones. Todo empezó poniéndonos encima de la sección y pulsando el icono de editar sección. Pero al lado, había otros botones también. Los vamos a ver ahora antes de pasar a las Columnas.

Duplicar Sección

Si nos ponemos sobre una sección de Elementor y pinchamos este icono simplemente estaremos duplicando esa misma sección con todos los ajustes que hayamos hecho sobre la misma. Esto es de gran utilidad si un mismo diseño vas a necesitar secciones similares. Al final lo vas a usar mucho.

Añadir Sección

Esto es un simple botón de añadir una nueva sección de Elementor en tu diseño.

Guardar Sección

Cuando nos ponemos encima de una sección y pulsamos el icono de guardar Sección en Elementor se crea una plantilla de esta sección en nuestra biblioteca lista para ser reutilizada cuando la necesitemos.

Eliminar Sección

Si necesitas eliminar una sección en Elementor sólo tienes que ponerte encima de ella y pulsar el icono con el aspa. Tranquilo, te preguntará si estás seguro antes de eliminarlo completamente.

Columnas en Elementor Page Builder

Ya hemos visto una de las partes estructurales más importantes. La secciones. Y ahora toca ver cómo funcionan las columnas en el maquetador visual Elementor.

¿Te acuerdas, cuando empezamos con el tutorial que al pulsar en agregar una nueva sección lo primero que nos pedía era indicar la estructura que queríamos? Desde el primero momento al añadir una sección, Elementor ya nos decía cuántas columnas queríamos dentro de esa sección.

Es decir, que podíamos montar la sección directamente con las columnas deseadas.

Pero además, podemos añadir columnas a nuestra sección siempre que queramos de distintos modos. Ahora lo veremos.

Cuando nos ponemos sobre una sección, además de aparecer los iconos que acabamos de ver para esa sección, también aparece un icono gris para las columnas. Si nos ponemos encima veremos las diferentes opciones. De igual modo que hicimos con las secciones vamos a ver las columnas.

Editar Columna

Al igual que en las secciones, cuando pulsamos editar Columna en Elementor Page Builder se abrirán todas las opciones en el personalizador o editor de Elementor. Allí veremos que posibilidades tenemos para maquetar esa columna.

Ya te adelanto que es muy similar a cuando trabajamos con secciones con lo que vamos a ver sólo los elementos diferenciales. Para el resto, puedes guiarte con lo que hemos trabajado en las secciones. ¡Vamos a ello!

Lo primero que vemos al editar una columna en Elementor Page Builder es que al igual que en las secciones vemos tres pestañas. Vamos con la primera de ellas.

Disposición de una Columna en el maquetador visual para WordPress Elementor

Ancho de columna sirve para indicar el ancho que queremos que tenga nuestra columna dentro de nuestra composición. Lo indicaremos en porcentaje. Y como veremos más adelante, podremos cambiar esta medida según el dispositivo con el que se va a visualizar.

Posición del contenido es como vimos en las secciones.

Espacio entre Widgets se refiere al espacio en la vertical que habrá entre un widget o elemento dentro de la misma columna. Por ejemplo, entre el encabezado de la columna y su texto. Se indica en pixeles.

Etiqueta HTML lo hemos visto para las secciones. Es lo mismo.

Estilo de una columna en Elementor Page Builder WordPress

Todas las opciones de estilo de una columna en el maquetador visual para WordPress Elementor las hemos visto ya cuando hemos trabajado con las secciones.

Opciones avanzadas de columnas en Elementor

Al igual que el estilo, son las mismas que hemos visto para las secciones.

Duplicar Columna

Sirve para clonar la columna que hemos seleccionado. Esto hará que se copien todos los ajustes y elementos que hayamos trabajado en esta columna. Sin duda nos ayudar a ser mucho más productivos.

Añadir Columna

Simplemente añade una columna de cero en nuestra sección.

Eliminar Columna

Sirve para desechar esa columna de forma rápida. Nos preguntará si estamos seguros antes de eliminarla completamente.

Widgets Elementor

Lo primero, antes de empezar, sería aclarar que Elementor llama a sus elementos de diseño Widgets. Ahora vamos a ir viendo los Widgets que podemos usar uno a uno. Pero te dejo aquí una lista con todos los que hay en la versión 1.6

Pero, ¿cómo se usan los Widgets de Elementor?

• Simplemente tenemos que arrastrarlos a nuestra zona de diseño. Esperamos a que aparezca una línea azul que nos muestra donde se va a colocar el Widget y soltamos.
• Una vez colocado en su lugar, si nos ponemos encima del Widget nos aparecerá los iconos para sus opciones. Aparecerá el de editar, duplicar y eliminar.
• Si pulsamos en editar, aparecerán todas sus opciones de edición en el editor o  personalizador de Elementor. Así podremos controlar cada uno de estos Widgets tal y como lo hemos estado haciendo con las secciones y columnas encima.

Así, que sabiendo ya cómo funciona, vamos a ver por encima qué elementos o Widgets trae Elementor y para qué vale cada uno. Con respecto a las opciones de cada elemento, sólo las comentaré por encima. Siempre puedes investigar cada una tu mismo tal y como hemos hecho antes.

Recuerda, que si prefieres ver en vídeo cada uno de estos elementos y en profundidad, tengo disponible el curso donde no te quedará la menor duda de cómo usar correctamente cada Widgets de Elementor.

Columns o Widget de Columna en Elementor Page Builder

Otro modo de añadir Columnas a nuestra sección. Tras arrastrarlo, automáticamente se creará una sección que dentro incluye otra sección con dos columnas.Si de partida ya prefieres que tu sección tenga dos columnas es preferible que al crear la sección utilices la estructura de dos columnas directamente.

Posts o Widget para crear listados de Artículos en Elementor Page Builder

Llega el momento de presentar el primero de los Widgets de Elementor Pro. Y empezamos fuerte, ya que se trata de un Widget muy completo que te deja personalizar al detalle y añadir un listado de post donde quieras en tu web.

Ajustes del feed del Blog

Disposición en Grid

Disposición en Masonry

Ajustes del feed del Blog 2

Tras insertar el Widget de Posts vemos cantidad de opciones en la pestaña de contenido del editor de Elementor.Veámoslo un poco por encima:

• Diseño del Layout (podemos elegir entre clásico o tarjetas)
• Columnas del Layout
• Post por página del Layout
• Si queremos mostrar o no la imagen destacada
• Si queremos que tenga disposición en Masonry (para lo que tendremos que haber colocado al menos dos columnas)
• Tamaño de la imagen
• Mostrar o no el Título de cada post
• Etiqueta de los títulos de los posts
• Si queremos mostrar o no el Excerpt o extracto del post y la longitud en palabras que queremos que tenga
• Los metadatos que queremos que aparezcan (autor, fecha, hora, comentarios)
• Etiqueta de Leer más
• Si queremos Placa o chapa en las entradas (habría que elegir si se muestra la categoría o la etiqueta)

Pero las opciones de contenido no acaban aquí. Y ademas hay otras cuantas en la pestaña de Estilo. Si quieres conocer bien a fondo este Widget, lo vemos en profundidad en el curso de Elementor.

Form o Widget para crear formularios con Elementor Pro para WordPress

Otro de mis Widgets favoritos que vienen con Elementor Pro es el Widget de Formularios. Olvídate de instalar un plugin para crear tus formularios. Y lo mejor, olvídate de personalizarlos con código CSS. Con Elementor Pro puedes crear formularios visualmente atractivos, integrarlos con tu correo y todo lo que sea necesario en formularios de una forma muy muy sencilla.Un juego de niños vamos.

Animated Headline o Widget para crear Encabezados Animados con Elementor Pro WordPress

Un paso más allá y por delante. Esto no lo había visto antes. Encabezados animados muy estéticos y sencillos pero efectivos. Otro gran acierto de Elementor Pro es este widget tan original. Si quieres destacar un título utilíza el Widget de Encabezados animados y rompe con la monotonía.Los ajustes son variados y sencillos. Cuestión de gustos.

Comentarte que además de los widgets gratis de Elementor y los Widgets exclusivos de la versión Pro siempre podremos añadir los widgets de WordPress, nuestro propio theme o widgets que vengan incorporados en plugins.

Te dejo aquí este diseño rápido para que veas cómo se muestran en Elementor.

Antes de pasar al siguiente punto, hay algo nuevo en la versión Pro que es otro de los motivos que harán que no dudes ni un segundo en comprar Elementor Pro. Ya hemos adelantado que hay una pestaña en el editor de Elementor llamada Global y de la que todavía no hemos hablado.

Widgets Globales

De primeras, si accedes aquí seguramente no tengas nada.Y es que esto es un espacio donde aparecerán todos los widgets que guardes como globales.

Para que quede claro, siempre puedes ir a un widget de tu contenido, el que sea, y guardarlo como Global. Esto significa que podrás usarlo tal cual esté diseñado en otra plantilla de tu web. Pero la gracia, es que cuando edites este Widget global desde una plantilla podrás decidir si quieres editarlo sólo para esa plantilla o para todas las plantillas donde se este utilizando. Es decir a nivel Global.

Esto, al igual que el Widget Template es una característica de las que hace brilla a Elementor. Imagina las opciones.

Edición responsive en Elementor Page Builder

Algo que también me gusta bastante en Elementor Page Builder es su sistema para la edición adaptable de nuestro diseño web a todos los dispositivos.

Por lo general, los elementos son suficientemente responsive sin tocar nada. Pero siempre hay cosas que pueden depender del theme o plantilla WordPress que estemos usando y que pueden hacer las cosas menos responsive. O la combinación de algunos elementos no resulte del todo responsive. En esos casos no te preocupes porque este maquetador visual esta muy bien preparado para dejarlo todo perfecto.

Mi consejo es que diseñes primero la versión escritorio y luego la repases para otros dispositivos corrigiendo a tiro hecho digamos.

Pues bien, para ver cómo está quedando nuestro diseño en una tableta o móvil, podemos ir a la barra inferior del editor de Elementor y pulsar en el icono del ordenador.

Automáticamente aparecerá un panel como el de la imagen. Como ves nos indica que estamos en vista escritorio (más oscurecida) que es la predeterminada. Pero podríamos elegir Tablet o Móvil. En cuanto a las medidas que dice ahí son las standard. Hay matices claro.

Si quieres asegurarte del todo de que tu diseño web es responsive totalmente pasa cada url que quieras comprobar por herramientas online gratuitas como:

• Responsive Design Checker
• Responsinator

El caso es que cuando seleccionamos otra vista cambia nuestra zona de contenido y se muestra como ese dispositivo elegido. Pero también cambian nuestros ajustes. Y ahí está la gracia. Ahora, mientras vemos nuestra versión de tablet, por ejemplo, también podemos hacer los ajustes que fueran necesario sólo en tablets.

Cuando necesitesadaptar algo, ya sea una sección, una columna o un widget simplemente ponte sobre el y haz click. Sus opciones aparecerán en el editor automáticamente en la vista en la que estás navegando. ¡A editar!

Otra forma de ver si cualquier elemento es responsive es elegir la vista e escritorio (que a no ser que lo hayas cambiado es la predefinida) y hacer click en el icono del ordenador que aparece al lado de casi cualquier ajuste. Entonces se desplegarán los botones de Tablet y móvil. Si pulsas en una de ellas se cambiará a las opciones de esa vista.

¿Fácil no? Y como siempre todo en directo y viendo los cambios a tiempo real.

En mi opinión es la mejor edición responsive que he visto en un maquetador visual. Y la más amplia. Pero aún así, hay elementos que no pueden cambiarse para la versión móvil. Por lo general, se pueden cambiar tamaños de elementos, tamaños de fuentes, medidas, márgenes, paddings, alineaciones… todo lo que tenga que ver con el espacio digamos.

¿Qué podemos hacer entonces para que una sección tenga el fondo rojo en escritorio y blanco en móvil? Caso Práctico

1. Pues para este ejemplo yo lo que haría es duplicar esa sección.
2. Una la pondría con fondo rojo y otra con fondo blanco.
3. Después me iría a las opciones de la sección de la roja, y en la pestaña de avanzado, en visibilidad la ocultaría para móviles.
4. Después me iría a la sección del fondo blanco, la editaría e iría a la pestaña de opciones avanzadas, y en visibilidad la ocultaría para escritorio y tablet.

Con este truquito ya no hay nada que no puedas hacer a nivel diseño responsive.

Como ves, es una maravilla también.

Uso de plantillas con el maquetador visual Elementor

Ya he hablado más arriba sobre esta característica. Las plantillas son una grandísima forma de ahorra tiempo.

Es cierto que casi todos los maquetadores visuales tienen la opción de guardar las plantillas que vas creando. Y también la de elegir entre plantillas prediseñadas. Pero ninguno tan sencillo y rápido de usar.

Vamos a ver cómo guardar plantillas, cómo reutilizar nuestras plantillas guardadas, como usar plantillas prediseñadas, como conseguir más plantillas… etc

Guardar plantillas Elementor en la Biblioteca para reutilizarlas después

Vamos a poner el caso que has terminado tu diseño. Le das al botón guardar y ya está. Tienes lo que necesitabas. Pero ¿y si resulta que necesitas diseñar otra página muy parecida a la que acabas de terminar? No problem. Nos vamos al editor de Elementor page builder de esa página, y en la barra inferior pinchamos en el icono de la carpeta.

Aparecerá dos opciones como ves en la imagen. La de Biblioteca de plantillas y la de guardar como plantilla. Pinchamos en guardar plantilla. Aparecerá un pop up donde tenemos que poner el nombre para nuestra plantilla y pulsar guardar. Listo. Ya la tenemos en nuestra Biblioteca de plantillas.

Insertar plantilla Elementor desde la Biblioteca

Algo que te recomiendo es que antes de empezar a diseñar algo veas si existe una plantilla que más o menos pueda adaptarse a ese trabajo. Tiene que ser extructuralmente muy parecido para que merezca la pena. Si no casi es mejor empezar de cero nuestro diseño.

Así que en esta ocasión vamos en vez de elegir guardar plantilla vamos a pinchar donde dice Biblioteca de plantillas y se nos abrirá un pop up con 2 pestañas:

Plantillas predeterminadas

Que son las que vienen prediseñadas con Elementor. Ojo, que si tienes elementor Por son muchas más. El caso es que es un grid con las miniaturas de las plantillas disponibles y si pinchas una de ellas se abre un preview ahí mismo. Si te gusta, pinchas en el botón insertar y ya la tienes en tu zona de contenido lista para tus ediciones.

Truco para diseñar webs más rápido

Muchas veces te gustan algunas secciones de una plantilla prediseñada pero no toda ella. En esos casos inserta la plantilla, ve a la sección que te gusta y guárdala como plantilla. Si esto lo haces con cada plantilla que te agrada, tendrás una bibilioteca de diseños de secciones que te puede venir muy bien.

Mis plantillas

Aquí es donde se van guardando las plantillas de páginas completas o secciones que guardas en tu biblioteca. Al pinchar en Mis plantillas verás que puedes ponerte encima de cualquier plantilla o sección guardada y previsualizarla, borrarla, exportarla o insertarla.

Replicando Themes con Elementor (vídeos)

En esta sección voy a ir adjuntando vídeos en los que replico diseños de otras páginas pero con Elementor.

Divi con Elementor

Al inicio de esta guía te mostraba los 2 primeros vídeo de la serie Replicando Themes con Elementor que estoy creando. Y comenzábamos con Divi Cafe. Aquí puedes encontrar el resto de vídeos.

Vídeo 3

Vídeo 4

Vídeo 5

También te dejo el contenido donde vemos los pasos y demás notas sobre los vídeos donde estoy replicando el Theme Divi Cafe con Elementor.

Salient con Elementor

Próximamente

Uncode con Elementor

Próximamente

Avada con Elementor

Próximamente

Y hasta aquí esta guía completa de Elementor Page Builder WordPress. Espero que te haya sido útil. Y si tienes cualquier consulta puedes usar el formulario de abajo para ello. ¡A diseñar!

Si esta guía sobre Elementor Page Builder WordPress te ha parecido útil y crees que también puede ayudar a alguien más, te agradeceré que la compartas en redes sociales. ¡Muchas gracias!