Elementor Page Builder:

review + tutorial
Índice de contenidos [Ocultar]
• Características principales de Elementor Page Builder
o Elementor Page Builder es más rápido
o Elementor es de código abierto
o Posibilidad de diseñar tocando el menor código posible
o Facilidad de uso
o Diseñar una web para dispositivos móviles nunca fue tan fácil
o Elementor Page Builder es gratis… y lo va a seguir siendo
o Elementor está traducido a muchos idiomas. Incluido el español
o Es perfectamente compatible con GeneratePress
o Cuenta con la aprobación de prácticamente todos los que lo han probado
o Código de alta calidad optimizado para SEO
• Review y tutorial sobre Elementor Page Builder
• Herramientas de diseño incluidas en Elementor
o Secciones
o Columnas
o Encabezado
o Imagen
o Editor de texto
o Vídeo
o Botón
o Separador
o Espaciador
o Google Maps
o Icono
o Cuadro de imagen
o Caja de icono
o Galería de imágenes
o Carrousel de imágenes
o Listado de iconos
o Contador
o Barra de progreso
o Recomendación
o Pestañas
o Acordeón
o Alternar
o Iconos sociales
 o Alerta
o SoundCloud
o Shortcode
o HTML
o Ancla de menú
o Barra lateral
o WordPress
• Opciones generales de Elementor Page Builder
• Opciones responsive y de plantillas
• Conclusión

Características principales de
Elementor Page Builder
Lo primero que voy a enseñarte son una serie de señas de identidad muy
generales de Elementor que ya hablan muy bien de él a primer golpe de
vista y que denotan que, probablemente, estamos ante el mejor plugin de
este 2016 que se ha desarrollado para WordPress.
•

Elementor Page Builder es más rápido

Nada más instalarlo, este es el primer punto en el que me he percatado
que Elementor destaca notablemente sobre otros editores visuales que he
probado.
Verdaderamente, el plugin carga muy rápido cuando lo ponemos en
acción. Pero no sólo es rápido al cargarse, si no también al utilizarlo.
Mientras lo estás utilizando, su funcionamiento es sumamente fluido. No
se queda “pillado” y realmente no da fallos o problemas de ningún tipo.
Realmente es un editor visual en tiempo real. Yo diría que en tiempo récord
real. 😉
Elementor es de código abierto
Por si no sabes lo que es, algo que es de código abierto significa que su
código fuente está a disposición de todo el mundo para que cualquier
desarrollador pueda crear e implementar sus propias mejoras si lo
consideran necesario.
Por ejemplo, WordPress es un CMS de código abierto y, gracias a ello,
existen tantos plugins y temas creados para él por una gran cantidad de
desarrolladores.
A raíz de este ejemplo que te pongo, seguramente entiendes por qué me
parece un punto tan destacable el hecho de que Elementor Page Builder
sea un editor visual de código abierto.
Que lo hayan hecho así implica directamente que es más probable que
vayan saliendo cada vez más y mejores actualizaciones en el futuro
(aparte de más frecuentes) ya que cualquier desarrollador que se ponga a
estudiar cómo está hecho el editor podrá programar sus propios aportes a
la herramienta y dar solución a una lista de problemas concretos más
variados.

Posibilidad de diseñar tocando el menor código

posible
Otra de las características principales que destacan los propios creadores
de Elementor es que han creado este constructor web teniendo
siempre al diseñador en mente.

Esto es que, a diferencia de otros editores de este estilo, su objetivo es

que se puedan crear grandes diseños de la manera más rápida,
profesional y efectiva posible sin que haya que tocar código o CSS.

Con este fin, han implementado elementos para diseñar que no

estaban incluidos en ningún otro constructor web hasta la fecha.

Ya te aviso por adelantado que lo han logrado con nota. Pero no quiero
anticipar demasiado sobre este tema, ya que quiero contártelo un poco
más adelante de manera más detallada cuando te hable de todo lo que
puedes crear e incluir en tus diseños con Elementor Page Builder.
En cualquier caso, si no me crees o piensas que estoy exagerando, fíjate
como uno de sus desarrolladores crea una Landing Page en poco más de
10 minutos totalmente desde cero.

Por cierto, esto no significa que Elementor se cargue de un plumazo el

hecho de que puedas hacer personalizaciones con tu propio código
CSS o HTML. En esto también han pensado sus desarrolladores y, por
tanto, tampoco se queda atrás de otros editores visuales en este
aspecto. 😉

Facilidad de uso
Nada de esto que te he dicho antes tendría sentido si luego la herramienta
fuese muy complicada de utilizar.
Pero no es el caso. De hecho, me atrevería a decir que es la más sencilla
de este tipo que he utilizado hasta ahora.
Con Elementor podrás controlar una enorme cantidad de parámetros CSS
para dar estilos a cualquier elemento que introduzcas en tu blog o tu web
únicamente utilizando campos para rellenar, deslizadores o elementos
seleccionables con un click de ratón.
Vamos, nada que cualquier usuario con un nivel básico de informática no
sepa hacer.
Se puede decir que, en este sentido, también han mejorado lo que ya había
y se han puesto a la cabeza del ranking. 😀

Diseñar una web para dispositivos móviles nunca fue

tan fácil
Esta característica, sin duda, es de las que más han llamado mi atención
y una de las grandes diferencias respecto a Thrive Content Builder u otros
editores visuales.
Con Elementor Page Builder por fin puedes controlar los media
queries (es decir, el código CSS que hace que el diseño vaya cambiando
en función del tamaño de pantalla del dispositivo) de manera totalmente
visual.
Como verás más adelante cuando te enseñe uno por uno los elementos
del editor, al pulsar sobre cada uno de los iconos responsive (escritorio,
tablet o móvil), puedes establecer desde el frontend mediante sus
opciones de personalización estilos CSS para cada una de las
visualizaciones simplemente utilizando deslizadores o rellenando datos en
los campos preparados para ello.

•
De verdad, una pasada. Cuando lo he visto, ojiplático me he quedado. 😯

Elementor Page Builder es gratis… y lo va a seguir

siendo
Ah, ¿que aún no te he comentado este pequeño detalle?
Pues sí, Elementor Page Builder no te va a costar un duro. Es
totalmente gratuito.
Te preguntarás… ¿cómo algo tan bueno puede ser gratuito? ¿Lo va a
seguir siendo en el futuro o es sólo una estrategia de marketing para captar
clientes?
Pues ya te digo que no, no es una estrategia de marketing.
En su web, los desarrolladores de Elementor dejan bien claro que no han
sacado Elementor de manera gratuita como un gancho o truco alguno, si no
para crear un digno competidor entre los editores visuales DIY cuyo uso
sea el más extendido posible.
De hecho, también aseguran que, a pesar de que piensan sacar el próximo
12 de diciembre una versión premium llamada Elementor Pro (cuyas
funcionalidades van a ir más enfocadas al engagement, a la promoción o
a las conversiones de los sitios web), no piensan quitar con ello ni una sóla
funcionalidad a la versión gratuita.
Es más, no sólo no piensa hacer esto si no que su intención es la de
seguir aportando funcionalidades nuevas en la versión gratuita que
ahora no están implementadas.
Por ejemplo, ya tienen en mente un par de nuevos elementos que van a
incluir próximamente llamados “Person” y “Countdown” así como un
historial de revisiones para que puedas volver a un estado anterior
mientras estás diseñando tus páginas por si te equivocas.

Elementor está traducido a muchos idiomas. Incluido

el español
Pues sí, como lo oyes.
Por defecto, nada más instalar Elementor, toda la herramienta esta
traducida en perfecto castellano sin que tengas que instalar ningún
archivo de traducción o similares.
Seguramente no es la característica más importante (o puede que para
algunos sí que lo sea), pero que quieres que te diga… a nadie le amarga
un dulce. Y si también me facilitan la vida poniendo el constructor web en
mi idioma pues lo agradezco un montón, sinceramente.

Es perfectamente compatible con GeneratePress

Si sigues el blog, ya sabes que desde hace algún tiempo todos mis diseños
los realizo bajo el theme / framework GeneratePress.
Pues bien, otra noticia genial relacionada con Elementor es que… ¡es
100% compatible con esta plantilla!
Y no lo digo yo. Lo dice Tom Usborne, el propio creador de
GeneratePress, el cual en el propio foro de su tema WordPress recomienda
Elementor como el editor visual a utilizar junto a su creación.
Es más, también los desarrolladores de Elementor recomiendan
GeneratePress como una de las mejores plantillas que puedes utilizar con su
constructor web.
Bajo mi punto de vista, esto es un auténtico puntazo en favor de Elementor
Page Builder con respecto a Thrive Content Builder, ya que con el
constructor de la empresa Thrive Themes si es cierto que había ciertas
cosas que no eran del todo compatibles y te veías obligado a utilizar una
herramienta u otra para hacer tus páginas (trucos como el de utilizar Thrive
Leads en las secciones a ancho completo aparte).

Cuenta con la aprobación de prácticamente todos

los que lo han probado
Como te he comentado antes, Elementor Page Builder es muy joven aún.
Salió al mercado el pasado 2 de junio de 2016. Eso significa que apenas
tiene 5 meses de vida en el momento en el que estoy escribiendo estas
líneas.
Sin embargo, en tan poco tiempo, los datos de uso y valoración que han
conseguido por parte de todos los usuarios que usan WordPress son
sencillamente espectaculares.
Actualmente, y con este poquito tiempo de vida que te comentaba,
Elementor ya está siendo utilizado en más de 20.000 instalaciones de
WordPress y la valoración media de todos los que lo usan es de 4.9 sobre
una puntuación total de 5 (puedes ver estos datos en el repositorio de plugins
de WordPress).
No me he puesto a mirar cuantos plugins que cuentan con este número de
usuarios tienen esa valoración. Pero me atrevería a decir que muy, muy,
muy pocos. Y si alguno más lo tiene, no creo que lleve tan poco tiempo en
el mercado como Elementor.
El hecho de que los propios usuarios lo valoren tan alto y estén confiando
en él tan pronto ya es un síntoma claro de que probablemente estamos
ante el rey de los editores visuales de WordPress durante los próximos
meses o años.

Código de alta calidad optimizado para SEO

La última de las características principales con las que cuenta Elementor
no es precisamente la menos relevante.
Los chicos de Elementor Page Builder también han desarrollado este
plugin pensando en el tema del posicionamiento web y el SEO, creando
un código limpio que cumple con los principales estándares recomendados
por los principales buscadores como Google.
Por ejemplo, con Elementor se evita el uso de los estilos “inline”, algo
bastante perjudicial para los tiempos de carga a lo que sí recurren otros
editores visuales.
Evidentemente, esto no significa que por instalar Elementor vas a ser el
primero en las búsquedas que te interesen (para eso debes trabajar tanto
tu SEO on page como tu SEO off page), pero sí que su código ayuda a no
incumplir reglas básicas que te penalicen.

Review y tutorial sobre Elementor

Page Builder
Bien, ya te he hablado de las características a nivel general con las que
cuenta Elementor Page Builder y seguro que, como mínimo, habrán
llamado poderosamente tu atención, ¿me equivoco?
Pues ahora voy a meterme contigo hasta las entrañas de este constructor
web para que veas absolutamente todo lo que puedes hacer con él.
Prepárate para recibir un flechazo directo del Cupido tecnológico (vale,
este termino me lo acabo de inventar. Pero seguro que lo hay por algún
sítio… 😛 ) como el que he sufrido yo.
Como hice con GeneratePress o Thrive Content Builder, voy a dejarte todas
mis impresiones tanto en formato texto como en el siguiente vídeo en el
que voy a hablarte de todo lo que se puede hacer con Elementor Page
Builder. Elige la opción que te sea más cómoda. 😉
Para empezar, vamos a echar un vistazo a la interfaz inicial que nos
aparece nada más abrir el editor.
Por defecto, lo primero que aparece son todas las herramientas de
diseño que Elementor Page Builder pone a nuestra disposición, las
cuáles vamos a repasar una por una a continuación.
Antes de eso, únicamente aclararte que siempre podrás acceder a este
panel de herramientas haciendo click en el icono de la parte superior
derecha del panel de control de Elementor (te lo marco en la siguiente
imagen con un cuadrado azul para que quede más claro).

Herramientas de diseño incluidas

en Elementor
•
Secciones
La primera de las herramientas que encontramos precisamente no se
encuentra dentro del panel de la barra lateral de Elementor, si no que es
uno de los dos botones que aparecen en la página del diseño.
Estoy hablando de la opción “Agregar nueva sección”.
Con ella, Elementor ya está cubriendo una de las grandes carencias que
Thrive Content Builder no ha arreglado durante todo este tiempo en su
editor, que es la de poder crear secciones a ancho completo. 🙂
Esto puede hacerse seleccionando la estructura “limpia” para la sección
(con una sola columna) marcando la opción “Stretch Section” o
seleccionando “Ancho completo” en la opción “Ancho de contenido” que
se encuentra dentro de la sección “Disposición” que configura dicha
sección.
Además, no sólo puedes incluir como fondo de tu sección una imagen
estática normal y corriente… ¡si no que también tienes la posibilidad
de utilizar un vídeo!
No sólo eso, también podemos crear secciones con hasta 12 estructuras
predefinidas que son la mar de variadas como puedes ver en esta imagen.

•
Esto empieza muy bien, ¿verdad? Pues seguimos…

Columnas
El generador de columnas es una de las herramientas más básicas y útiles
a la hora de realizar cualquier diseño.
Nada más incluir un elemento de columna en nuestro diseño, aquí ya se
ve una novedad importante respecto a Thrive Content Builder: podemos
incluir cualquier número de columnas que queramos en una misma
fila con cualquier proporción de ancho para cada una de ellas.
No sólo eso, podemos adaptar el tamaño de las columnas únicamente
posicionándonos entre dos de ellas y reduciéndolas o ampliándolas
haciendo click y arrastrando el ratón de nuestro PC.

•
Esto sencillamente te da un abánico de posibilidades en cuanto a diseño
prácticamente total.
Es cierto que en Thrive Content Builder también se pueden hacer
columnas. Pero sólo se pueden hacer en función de los ajustes
prestablecidos por la herramienta.Por ejemplo, lo máximo por fila son 4
columnas de ¼ de proporción cada uno respecto al ancho.
Pero esto con Elementor no sucede.
Yo puedo tener el número de columnas que quiera y no tienen que respetar
unas proporciones determinadas. Puedo hacer si me place una columna
de un 10% de la pantalla, otra del 20% y otra del 70% (por poner un
ejemplo).
Te puedes imaginar ya que esto sencillamente lo que provoca es que la
herramienta no limita para nada tu creatividad a la hora de diseñar.

Encabezado
El título creo que es bastante descriptivo, ¿no?
Esta herramienta será la encargada de incluir en tus diseños los
encabezados de página pertinentes, pudiendo modificar en ella tanto su
etiqueta html correspondiente (h1, h2, h3, etc.) como las características de
su diseño.
También podrás enlazar los títulos a cualquier página que te interese,
indicar los márgenes y relleno (padding) que te plazca, establecer
imágenes o colores de fondo, dar clases CSS determinadas, poner bordes
alrededor del título con la anchura o forma (radio del borde) que tú quieras
para el mismo, establecer sus opciones responsive por si quieres
esconderlos en escritorio, móviles o tablets…
Decir que la mayoría de estas opciones también las encuentras en
cualquiera de los elementos que vamos a ver, con lo que una vez más
los límites de lo que vayas a crear sólo los va a poner tu creatividad e
imaginación.
¿No es una gozada poder hacer todo esto desde una herramienta visual?
No me digas que no, que ya estás babeando con Elementor Page Builder
igual que yo… 😛

Imagen
Con ella podrás incluir imágenes en los lugares que te plazca, pudiendo
establecer también multitud de opciones como su tamaño, alineación,
opacidad, animaciones al pasar el ratón, borde, leyenda, márgenes,
fondos etc.
Control total y absoluto también en la parte multimedia. 😀

Editor de texto
Permite introducir textos simples en cualquier parte de tu diseño,
pudiendo controlar todas sus opciones de edición y visualización
desde un mini editor similar al de WordPress que aparece en la parte
lateral.
Esto me parece otro punto a destacar, ya que los que estén
acostumbrados al editor nativo de WordPress podrán seguir utilizándolo
fácilmente dentro de la herramienta para crear sus textos, con lo que en
este sentido les facilita la vida al no tener que aprender nada nuevo.
Con Thrive Content Builder también podía hacerse, pero había que incluir
un elemento específico del tipo “Wordpress Content” para utilizarlo.
Además de todo esto, puedes elegir la posición del contenido a tu voluntad
dentro de las columnas o secciones donde lo hayas creado, otorgando una
flexibilidad total a la hora de maquetar de tus textos que te permite ponerlos
prácticamente donde quieras a voluntad.

Vídeo
Te facilita la inclusión de vídeos responsive dentro del diseño de tu blog o
tu web que se encuentre subido en Youtube o Vimeo.
Esta opción si que es bastante similar a Thrive Content Builder, ya que
incluye la posiblidad de autoreproducir el vídeo, mostrar u ocultar el control
de reproducción, los vídeos sugeridos o el título y acción del reproductor.
Sin embargo, Elementor incluye además la posibilidad de que puedas
elegir la proporción de tu vídeo (16:9, 4:3 o 3:2), establecer una imagen de
cubierta personalizada que a ti te interese mostrar antes de que el usuario
pulse el botón “Play” para reproducir el vídeo, animaciones de entrada,
establecer fondos o controlar en que dispositivos quieres que se cargue la
visualización de dicho vídeo.
Otra vez han “rizado el rizo” en este aspecto, sacándose de la manga
varias nuevas funcionalidades de donde no la había. ¡Bravo!

Botón
Por supuesto, no podía faltar el hecho de poder crear botones con
Elementor Page Builder.
Aquí dispones de hasta 5 tipos de botones predeterminados para
implementar. Pero en realidad… estos tipos son lo de menos.
Y es que Elementor te da tantas posibilidades también en este sentido que
se puede decir que puedes crear el tipo de botón que te plazca gracias a
sus personalizaciones.
Han mejorado también a Thrive Content Buider en este aspecto,
ofreciendo una amplia variedad de iconos para botones que pueden
posicionarse antes o después del texto y también a la distancia que tu
desees.
Sin contar que, como ocurre con otros elementos, puedes elegir también
fondos de color o imagen y bordes de diferentes estilos para darle la mayor
personalización posible. Lo mismo ocurre si deseas implementar
animaciones súper chulas para tus botones.
Otro 20 sobre 10 en este sentido para Elementor Page Builder. Sigamos…

Separador
El elemento separador incluye líneas que pueden separar diferentes
secciones o, por ejemplo, los títulos del contenido.
Una vez más, los chicos de Elementor mejoran algo que yo echaba mucho
en falta en Thrive Content Builder: la posibilidad de poder controlar todos
los aspectos de diseño de estos separadores.
Estoy hablando sobre todo de su ancho y su color, algo que desde que
usaba Thrive Content Builder no entendía como no habían podido incluir
como opciones de configuración de este tipo de elemento web.
Obi, obá, cada cosa que veo de ti me gusta más Elementor. 😀
¡Continuamos!

Espaciador
Este es un elemento que puede parecer una chorrada a simple vista…
pero que te quitará muchos quebraderos de cabeza.
Al incluirlo, lo que podrás generar es espacios en blanco del tamaño que
tú decidas para separar otros elementos del diseño.
Sí, esto se puede hacer estableciendo márgenes, lo sé. Pero con esta
herramienta tienes otra opción bajo mi punto de vista mucho más sencilla
e intuitiva para usuarios menos expertos. 😉

Google Maps
Otra novedad importante de Elementor con respecto a Thrive Content
Builder es que puedes incluir directamente mapas de Google Maps en tus
diseños estableciendo fácilmente su dirección o coordenadas, su tamaño,
el nivel de zoom de dicho mapa o impedir que se pueda ampliar dicho
zoom a voluntad del visitante de tu blog o tu web.
Sí, ya sé que Thrive Content Builder incluía ya esta posibilidad en su editor
visual… pero únicamente lo hacía permitiéndote pegar el código.
Elementor, una vez más, ha mejorado esto haciéndolo mucho más intuitivo
y fácil de hacer. Ya no es necesario que sepas que “numeritos” cambiar
en el código que te da Google Maps para dejar tu mapa tal y como deseas.

Como sabes, ver estos mapas en las secciones de “Contacto” de

empresas o negocios suele ser muy habitual para que los visitantes
encuentren su sede física, con lo que el hecho de que te faciliten la vida
para incluir algo tan común se agradece y mucho. 🙂

Icono
También puedes incluir iconos de Font Awesome en cualquier parte del
diseño que se te antoje.
Sí, esto es algo que también podías hacer con Thrive Content Builder.
Peeeero….
Una vez más, Elementor da muchas más posibilidades en cuanto a diseño
se refiere, pudiendo establecer un fondo cuadrado o en círculo para el
icono, determinar lo grande que quieres que sea el relleno del mismo,
establecer colores primarios y secundarios para esta combinación, o si
quieres con un click intercambiar dichos colores establecidos.
Hasta los puedes girar para que no se muestren siempre totalmente en
posición vertical. Una pasada. Detalles como estos denotan mucho interés
por hacer el mejor constructor web del mercado. 🙂
Vamos, que Elementor Page Builder no para de dejarnos tanto a ti como a
mi con la boca abierta a cada cosita que vemos de él, ¿a que sí? 😀

Cuadro de imagen
Esta herramienta es una manera cómoda y sencilla de incluir una imagen
que cuente directamente debajo con un título y una descripción de la
misma.
Naturalmente, como ocurre con todo en Elementor, puedes controlar todos
los parametros referentes a tamaños, colores, fondos, etiquetas de título,
márgenes etc.tanto de la imagen en sí como del encabezado o el texto.

Caja de icono
Similar a la herramienta anterior de “Cuadro de imagen”, pero en esta
ocasión se cambia la imagen por un icono de Font Awesome en la parte
superior.
Es una funcionalidad muy útil, por ejemplo, para crear esas cajas de
destacados que tan habitualmente se encuentran en las páginas de inicio de
los sitios web.

Galería de imágenes
Para mi, otro destacado en las novedades que incluye Elementor con
respecto a otros constructores web.
De una forma súper sencilla, puedes incluir en tu diseño galerías de
imágenes seleccionando las que quieres que aparezcan en ella, tamaño,
número de columnas de la galería, bordes, fondos etc.
Lo único que echo en falta aquí es el hecho de que pudieses crear la
galería de imágenes con diferentes formatos (más ordenados o más
desordenados de tipo grid, por ejemplo) o clasificar la galería de imágenes
en diferentes subcategorías.
Hacer esto último sería un puntazo para crear, por ejemplo, portfolios que
al pulsar en un enlace pudieras ver únicamente las imágenes de una
determinada categoría de dicho portfolio.
Pero vamos, viendo todo lo que ha hecho Elementor en tan poco tiempo…
no descarto que lo acaben implementando. 😉

Carrousel de imágenes
Parecido a la galería de imágenes, pero esta herramienta va más enfocada
a crear los famosos sliders que tanto vemos en muchos sitios web (y que
a mi tan poco me gustan, dicho sea de paso 😛 ).
Tengo que decir que aquí sí que parecen haberse esmerado más los
chicos de Elementor, ya que puedes decidir no sólo las diapositivas a
mostrar, si no también establecer o configurar los elementos de
navegación de las mismas prácticamente a voluntad.
Del mismo modo, tienes la posibilidad de indicar cómo quieres que
funcionen las automatizaciones de tu slider: si se pausará su reproducción
al poner el ratón sobre él, si se auto-reproducirá, cuantos segundos estará
cada imagen en pantalla, cuanto durará cada efecto de transición de
imagen a imagen, en qué dirección se irán desplazando las imágenes etc.
No me quito el sombrero porque ya hace tiempo que lo tiré por la ventana.
Si no me lo quitaría una y mil veces ante los cracks que han desarrollado
este editor visual. 🙂
En fin, prosigamos que aún nos queda un rato…

Listado de iconos
O lo que es lo mismo: listas cuyas viñetas son iconos.
Aquí también las opciones de personalización son mucho mayores que en
Thrive Content Builder, ya que en él apenas encontrabamos 6 estilos
diferentes de lista configurables desde el editor y con sólo 8 colores
predeterminados a establecer en ellas.
En cambio, en Elementor dispones de todos los iconos de Font Awesome
para diseñar tus listas personalizadas, pudiendo establecer cualquier color
que se encuentre dentro del código hexadecimal.
Por si esto fuese poco, el grado de personalización es aún mayor si
tenemos en cuenta que puedes establecer un icono para cada elemento
de la lista, no teniendo que ser necesariamente todos los iconos de una
misma lista iguales.
Vuelvo a hablar desde el punto de vista de los diseñadores cuando os digo
de corazón que os quiero mucho, chicos de Elementor. 😀

Contador
Otra novedad incluida por Elementor respecto a otros constructores web
es esta herramienta de contador con la que podemos crear esas
animaciones con las que en muchos blogs o webs se representan datos.
Las opciones de configuración de este elemento una vez más son
sensacionales, pudiendo establecer el texto que aparecerá debajo del
contador, el número de inicio y fin del mismo, prefijo o sufijo del número y
duración de la animación en su proceso de llegar hasta el número máximo
a contar.

Barra de progreso
Otro elemento muy interesante añadido por este editor visual es este de
las barras de progreso.
Seguro que las has visto en más de una ocasión: son esas barras que se
van llenando con un porcentaje, muy utilizadas, por ejemplo, para mostrar
gráficamente el grado de habilidades o conocimientos de un freelance o
una empresa en una materia determinada.
Elementor te permite configurar también desde su editor todo lo referente
a estas barras: porcentaje a establecer, colores, texto que aparecerá en el
interior o si quieres establecer un título para dicha barra en el exterior de
la misma.

Recomendación
El nombre de este elemento no es demasiado descriptivo en realidad, ya
que hace referencia a implementar testimonios de personas y clientes
acerca de tu marca o servicios.
Personalmente, aquí si que pienso que Elementor ha dado menos
opciones predeterminadas que Thrive Content Builder para que cueste
menos esfuerzo diseñar unos testimonios de clientes chulos.
Pero también hay que decir que combinando esto con otros elementos o
con las propias opciones de diseño de esta herramienta (fondos, bordes,
márgenes etc.) se puede hacer prácticamente cualquier cosa que se te
ocurra en este sentido. Así que tampoco lo veo algo tan grave. 😉

Pestañas
En esta ocasión sí que creo que no hace falta explicar mucho más: esta
herramienta te facilita la posibilidad de que puedas crear contenido dividido
en diferentes pestañas de una manera cómoda y fácil.
Puedes añadir tantas como gustes y, al igual que sucede con la mayoría
de elementos, tienes la posiblidad de configurar el diseño de las mismas a
voluntad en cuanto a colores, tipografías, espaciados etc.

Acordeón
Un elemento muy similar a las pestañas, pero con la diferencia de que en
esta ocasión todos los textos incluidos en cada una de las partes están
ocultos y la estructura de todos ellos se forma de manera vertical.
Para que lo visualices mejor, es exactamente como yo tengo hecha la
sección “Preguntas Frecuentes” en la página de mi servicio de diseño web
en WordPress Base Emprendedora.
Cuenta con ajustes de diseño y configuración similares a las pestañas para
dejar todo a tu gusto, con lo que no me voy a repetir más en este sentido
que bastantes palabras llevo ya a estas alturas como para meterte
“relleno”. 😛

Alternar
Otro tipo diferente de elemento “Acordeón”.
La única diferencia que veo al respecto de este es que el icono que
aparece a la izquierda de cada uno de los cuadros que lo conforman es
una flechita en vez de un simbolo de suma (+).

Iconos sociales
Permite la inclusión de iconos de redes sociales en cualquier parte de tu
diseño, pudiendo ser utilizados para enlazar los mismos desde tu sitio web.
Hay que decir que incluye hasta 27 iconos de redes sociales diferentes,
con lo que es muy raro que no puedas enlazar las que tú usas, incluso si
son algunas menos habituales como SoundCloud o GitHub. 😀
Para cada uno de ellos, puedes establecer si quieres que el icono
aparezca de forma cuadrada, con los bordes redondeados o circular, así
como elegir entre el color oficial de cada una de las redes sociales en
cuestión o personalizar los colores de estos iconos a tu gusto (o, mejor
dicho, en línea con tu diseño).
También puedes escoger el espaciado entre cada icono o el relleno de los
mismos decidiendo su tamaño.
Vamos… lo que quieras y se te ocurra como quien dice. Si no creas unos
iconos a redes sociales únicos y exclusivos con Elementor, será porque
no quieres. 😉

Alerta
Sirve para crear textos destacados inmersos en una caja de color que el
usuario puede cerrar en un momento determinado cuando le plazca (o no,
si decides desactivar esta opción).
En ella, además de las opciones de diseño comunes a otros elementos,
puedes también determinar si quieres que aparezca un borde en la parte
izquierda de la misma (concretando tu también su ancho, color, etc. que
más te interese).

SoundCloud
A mi, personalmente, el hecho de que hayan incluido este elemento ya
sencillamente me parece la caña. Demuestra el grado de perfección en
cuanto a número de posibliidades que desean ofrecer los desarrolladores
de Elementor Page Builder.
Con esta herramienta puedes incluir un archivo de audio de SoundCloud,
algo muy útil si tu web está relacionado con la música, la radio o si tienes
un podcast y subes tus ficheros de audio a esta plataforma.
Pero esto no se queda aquí…
Podrás controlar si autoreproducir el audio, mostrar (o no) botones de
compra, descarga, me gusta, compartir, comentarios, número de
reproducciones, colores de los controles… ¿sigo?
Voy a ir buscando el núemro de un escultor para que les haga un
monumento a estos chicos de Elementor. 😀

Shortcode
Por si los elementos anteriores te saben a poco, ahora vamos a ver ya las
opciones de integración total con cualquier otra cosa (plugin, widget o lo
que sea) que se te ocurra.
El primero de ellos es la posibilidad de incluir shortcodes (esos fragmentos
de código que te dan plugins tan utilizados como el Contact Form 7 o
el Thrive Leads para crear formularios de suscripción).
Evidentemente, como ya te habrás dado cuenta, esta posibilidad te abre
la puerta a colocar multitud de funcionalidades directamente en tu diseño
creado con Elementor Page Builder, ya que es una muy buena vía para
poder utilizar dentro de él plugins externos que nada tienen que ver con él.

HTML
Lo mismo sucede si, por cualquier otra razón, necesitas incluir código
HTML creado por ti mismo.
Elementor no pone trabas en este aspecto y para ello te facilita esta
herramienta llamada “HTML” con la que podrás incluir tus propias
personalizaciones si es que eres diseñador o desarrollador web (o,
simplemente, si tienes unos conocimientos mínimos de código).

Ancla de menú
Otra de las herramientas que me ha dejado con la boca abierta es
precisamente esta llamada “Ancla de menú”.
De hecho, me ha hecho caer en la cuenta de esta “deficiencia”,
provocando mi reflexión sobre cómo algo tan sumamente sencillo no
pudiese estar implementado en Thrive Content Builder en todo este tiempo
que lleva en el mercado.
Gracias a ellas puedes establecer un nombre a una determinada sección
dentro de tu página.
Y tu pensarás… ¿y eso para que narices sirve? ¿Qué tiene de especial?
Bien, pues tiene de maravilloso que estas anclas son la base para poder
crear diseños de una sola página (One Page Design), de tal forma que
puedas indicar en tu menú principal hacia que sección de dicha página se
debe dirigir al pulsar el enlace haciendo ese efecto de “scroll” hacia abajo
o hacia arriba que es tan molón.
Vaya por delante que no soy amigo de estos diseños One Page porque
creo que perjudican al SEO de tu página, pero está bien que incluyan esta
posibilidad a la hora de diseñar porque es cierto que este tipo de webs son
muy atractivas visualmente hablando (y perfectas para dispositivos
móviles).
No sé cuantos puntazos a su favor lleva Elementor a estas alturas, pero
este es uno más sin duda.

Barra lateral
Otra vuelta de tuerca de Elementor Page Builder de cara a la
personalización de tu diseño es el hecho de poder incluir una barra lateral
en el lugar que te plazca de tu diseño sin necesidad de que esta ocupe
todo el alto de la pantalla.
De esta forma, puedes seleccionar cualquier posición de widgets que se
antoje y mostrarla donde te de la real gana.
Por ejemplo, en el caso de GeneratePress puedes incluir donde quieras y
como quieras los widgets que incluyas en la barra lateral derecha, la barra
lateral izquierda, cabecera o en cualquiera de las 5 posiciones que tienes
disponibles en el pie de página a modo de bloque.
¿Cómo dices? ¿Que qué pasa si quieres incluir un único widget
sólamente?
Sin problema, amigo mío. En esto también ha pensado Elementor. Échale
un ojo a la siguiente herramienta. 😉

WordPress
En esta zona cuya cabecera ocupa el nombre de nuestro querido gestor
de contenidos, podrás encontrar de manera individual todos los widgets
que puedes colocar y que los plugins que tengas instalados te permitan
implementar.
Sí, sí… lo has entendido bien.
Puedes usar tus widgets en cualquier parte de tus páginas o entradas.
Llegados a este punto, no sé tú pero yo ya estoy haciendo la ola a estos
fueras de serie que han creado el plugin Elementor.
Pero espera… que aquí no ha terminado esto.

Opciones generales de Elementor

Page Builder
¿Recuerdas que te dije que todo lo mencionado anteriormente era
accesible desde el icono de la parte superior derecha de Elementor?
Si, ¿verdad?
Pero… ¿te has percatado que en la parte izquierda hay otro icono?

•
Si lo pulsas, verás que a través de él podrás establecer opciones
generales para tu diseño sin tener que repetirte como si fueses una sopa
de ajo.
Esto es, puedes establecer los parámetros por defecto que se te antojen
para tu diseño:
– Colores globales, definiendo tu propia paleta de colores o
seleccionando una de las predeterminadas que Elementor pone a tu
disposición.
– Fuentes globales, escogiendo tus tipografías por defecto para texto
normal, diferentes encabezados o títulos (h1, h2,h3) y peso de las mismas.
– Selector de color, para que puedas elegir previamente tu paleta de
colores y sean estos los colores que te aparezcan en las opciones de
Elementor a la hora de estar diseñando cualquier elemento de la web. Más
personalizado imposible. 😀
– Configuración de Elementor, el cual es un enlace hacia la página de
configuración del plugin dentro de tu WordPress.
Dentro de ellas, puedes seleccionar los tipos de entradas donde vas a
querer o poder utilizar Elementor Page Builder, qué tipo de usuarios
tendrán permitido utilizarlo, decidir si quieres heredar las paletas de color
o tipografías establecidas por defecto en tu plantilla o elegir el ancho de la
caja del contenido que mostrará los contenidos que no selecciones como
visibles a ancho completo de la pantalla.

•
– Historial de revisiones, una función para poder volver atrás si te
equivocas en algún momento al hacer algo. A día de hoy, en el momento
que escribo este artículo, no está todavía implementada aunque aparezca
en el menú.
– Eliminar todo el contenido, para resetear el diseño de una página o
entrada por completo si así lo deseas y comenzar de nuevo a crearla desde
cero.
– Sobre Elementor, que lo único que hace es la función de enlazar el
editor visual hacia la web de los desarrolladores.
¿Cómo vas? ¿Estás cansado?
Yo te reconozco que un poco de tanto escribir. 😛
Pero me he propuesto crear la mayor review / tutorial sobre Elementor
Page Builder y aún me quedan algunas cosillas en el tintero que comentar.
Por cierto, son muy interesantes. Más aún si como yo eres diseñador o
desarrollador web. 😉

Opciones responsive y de plantillas

Vamos a irnos a la última sección del Elementor Page Builder, que es la
que se encuentra justamente en la parte inferior del mismo en una barra
pequeña gris que contiene 4 iconos.

•
El primero de esos iconos es un aspa en forma de X que simplemente
sirve para cerrar el editor y volver a tu panel de administración de
WordPress.
Hasta aquí, no hay ningún misterio ni nada destacable, de acuerdo.
Pero a partir del siguiente icono la cosa ya se pone más interesante…
En el segundo de los iconos, al pulsarlo, puedes seleccionar la vista
que prefieras para establecer como se verá el diseño de las páginas
o entradas de tu blog o web en versiones de escritorio, tablets o
móviles.
Pero no es un simple visualizador.
La magia de esto es que para cada una de estas vistas… ¡puedes
establecer unas opciones determinadas que cambiarán el CSS de tu
diseño dependiendo del tamaño de la pantalla elegida!
Es decir, no te hará falta saber sobre media queries para adaptar
fácilmente el diseño de tu blog o tu web a dispositivos móviles.
Por ejemplo, puedes establecer para cualquier elemento de tu diseño que
en la versión de escritorio tenga un margen y un padding determinado,
mientras que en la versión de tablet tenga otro distinto y otra variante más
en tu versión móvil.
De esta manera puedes adaptar a voluntad desde el editor absolutamente
todo, independiemente del dispositivo en el que se vaya a mostrar tu
página web.
De verdad, esto para mi ha sido ya la guinda del pastel.
Ningún otro plugin o herramienta de este tipo que yo conozca te permite
controlar a través de ellos el diseño de las versiones de tablets y
smartphones, con lo que esto me parece un adelantamiento a la velocidad
de la luz en toda regla por parte de Elementor Page Builder con respecto
a otros constructores web o editores visuales.
El tercer icono de este mini-menú corresponde al acceso directo a
toda la documentación oficial publicada sobre Elementor.
No está de más que le eches un ojo detenidamente, ya que en este sentido
los creadores del plugin también se han esmerado y poseen una cantidad
importante de información que responde a muchas dudas que puedas
tener al respecto de su funcionamiento el de las herramientas contenidas
en él.
Por último, el cuarto icono te permitirá diseñar tus páginas o entradas a
partir de plantillas prediseñadas con Elementor Page Builder (a día de
hoy un total de 26 ya están disponibles para ser utilizadas), así como a
guardar tus propias plantillas y poder importarlas en otros proyectos
que te interese hacerlo.

•
Comparativa y ventajas frente a
Thrive Content Builder
Si has llegado hasta aquí, te habrás dado cuenta que ya sobre la marcha
he ido comparando Elementor con Thrive Content Builder en algunos de
sus aspectos o herramientas que los diferencian.
Sin embargo, en este último punto quiero destacar de una forma más
generalizada los aspectos en los que este editor aventaja, bajo mi punto
de vista, al editor visual de Thrive Themes, así como también reseñar en
los que creo que aún supera el segundo al primero.

Secciones a ancho completo de pantalla

Aquí creo que Elementor ha pegado una “barrida” importante a Thrive
Content Builder, ya que en este la única manera de crear secciones a
ancho completo era o bien utilizando una plantilla de landing page que ya
las tuviera, o bien adquiriendo algún tema de Thrive Themes.
Con Elementor este problema desaparece por completo. Puedes crear tus
secciones sin problemas en unos pocos clics sin tener que adquirir nada
en especial (salvo una plantilla que sea compatible con esta funcionalidad
como, por ejemplo, lo es GeneratePress).
Incluso si tu plantilla no permite este tipo de secciones, también tienes una
solución a tu problema: utilizar el plugin Elementor Page Templater , el cual
añadirá un par de plantillas más a Elementor que te permitirán crear estas
secciones a ancho completo sin problema alguno.
El único “pero” (por poner uno) que le pongo es que no han creado una
opción para que estas secciones a ancho completo puedan diseñarse bajo
el efecto conocido como parallax.
Pero tranquilo, porque esto no es un problema demasiado grave, ya que
si usas GeneratePress puedes usar sus secciones a ancho completo para
realizar dicho efecto o, incluso, con un poquito de código CSS por tu parte
se puede llevar a cabo esto sin problema dentro del propio Elementor.

No tienes que cargar a propósito tipografías

específicas o iconos
A mi personalmente se me hacía un poco tedioso en Thrive Content
Builder el hecho de que, para utilizar frecuentemente una tipografía
concreta dentro del editor o unos determinados iconos, primero tuviera que
cargarlos en la parte correspondiente de la herramienta que se encontraba
fuera de la pantalla de maquetación.
Con Elementor Page Builder esta incomodidad también desaparece, ya
que puedes utilizar directamente todas las tipografías de Google Fonts y los
más de 400 iconos disponibles de Font Awesome sin previa carga o subida
en un fichero .zip de estos últimos.

Muchas más opciones de CSS avanzadas sin tocar

código desde el editor y animaciones
Para cualquier herramienta de las que te he enseñado antes en Elementor,
las opciones de personalización y diseño son mucho mayores y más
avanzadas en su editor que las que puedes encontrar en el de Thrive
Content Builder.
Se puede decir que la versatibilidad es infinitamente superior en este
sentido, que realmente han pensado en que prácticamente cualquier cosa
se pueda hacer de manera visual. Sin grandes impedimentos o barreras
independientemente de que sepas más o menos código.
Thrive Content Builder también conseguía esto, pero es cierto que es más
limitado y que, para según que cosas, requiere de que conozcas un poco
de CSS o HTML para dar una personalización máxima sin que parezca a
simple vista que tus páginas están hechas bajo dicho plugin.

Posibilidad de bordes y fondos personalizados en

cualquier elemento de tu diseño
En este punto también pienso que Elementor Page Builder ha dado una
buena vuelta de tuerca con una pequeña pero muy útil modificación como
es la de poder aplicar bordes y fondos a cualquier elemento de diseño que
construyas con el editor.
Es una manera muy simple y sencilla de crear títulos más llamativos o
diferentes, ampliando bastante el horizonte de posibilidades que Thrive
Content Builder ofrecía en este sentido.
Más facilidad para controlar tu diseño web
responsive
Creo que es la tercera vez que recalco esto y, por ello, no voy a ahondar
más de lo que ya lo he hecho en el tema.
Pero si que quería volver a destacarlo porque el hecho de que puedas
controlar tan al milímetro los estilos y el diseño de tu blog o web en tablets
y teléfonos móviles me parece una bestialidad por parte de Elementor y un
claro aspecto diferenciador respecto a su competencia directa.

Más herramientas o elementos individuales

tremendamente útiles y mejora de lo que ya había
Espaciadores, secciones, galerías y sliders de imágenes, contadores,
barras de progreso, iconos sociales, incursión de ficheros de audio y
podcast, anclas de menú…
Realmente Elementor se ha esmerado en incluir muchas cositas que,
aunque pueden parecer insignificantes, realmente la suma de todas ellas
te facilitarán mucho la vida a la hora de dejar tu blog o tu web tal y como
tú deseas.
No sólo eso: todos los elementos que ya incluía Thrive Content Builder los
ha mejorado en cuanto a facilidad de implementación, opciones de estilo
u opciones de diseño.

Es lo que he dicho anteriormente: han pensado en diseñadores o

desarrolladores pero sin dejar de lado a la gente que no tiene tantos
conocimientos técnicos. Y ambos perfiles agradecerán todas estas
incursiones.
Lo único que más he echado en falta en este sentido con respecto a Thrive
Content Builder ha sido la posibilidad de incluir un “grid” con los últimos
artículos del blog o los artículos más destacados, una herramienta muy útil
y que yo he usado mucho en mis diseños con el editor de Thrive Themes.
Pero esto también se puede solucionar facilmente con el plugin WP Show
Posts(también creado por Tom Usborne, el padre de GeneratePress), el
cual es 100% compatible con Elementor Page Builder. Con lo cual,
tampoco es un obstáculo insalvable ni una situación para dramatizar con
ella. 😉
Del mismo modo, Thrive Content Builder tiene la opción de incluir en tus
diseños botones para compartir directamente en redes sociales tus
páginas o artículos, algo que he echado en falta en Elementor (aunque
supongo que esto lo incluirán en la versión de Elementor Pro).

Mejor rendimiento y rapidez

Es cierto que no lo he utilizado tanto como Thrive Content Builder, pero la
sensación que me ha dejado Elementor en las primeras pruebas es que
está bastante mejor optimizado en cuestiones de rendimiento y velocidad.
Carga rápido, no se queda pillado, no desaparecen opciones
misteriosamente sin motivo aparente… ni siquiera me ha dado fallo alguno
hasta ahora.
Mi sensación es que los desarrolladores de Elementor Page Builder han
trabajado en esto a conciencia para mejorar la experiencia de todo el que
utilice su editor. Y mi opinión es que lo han logrado al 100%.

El precio
En este punto la goleada por parte de Elementor Page Builder es de
escándalo, ya que como te he dicho antes es gratuito.
Aunque, sinceramente, aunque fuese de pago, también diría que ganaría
a Thrive Content Builder si valiese lo mismo o un poco más (para mi, solo
perdería si el precio que estableciesen se subiese muchísimo a la parra,
obviamente).
Dicho esto, estoy esperando con ganas la versión premium que van a
sacar a partir del próximo diciembre (de hecho, ya la he adquirido en pre-
venta) para ver con qué nos sorprenden, porque pienso que si ofrecen todo
esto gratis… ¡imaginate lo que llegarán a darnos a cambio de unos cuantos
euros!

*Archivo extractado de la pagina: https://www.joseantoniocarreno.com/elementor-page-

builder/#Comparativa_y_ventajas_frente_a_Thrive_Content_Builder