Elementor: La guía que esperabas del mejor theme de WordPress que existe ahora mismo

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on email
Email

Si existe un theme de WordPress del que sólo haya escuchado halagos es, sin duda, Elementor.

En los últimos años, ha venido a revolucionar el concepto de theme a todos los niveles, desde el diseño hasta la usabilidad web o el SEO, y lo está haciendo realmente bien.

4 millones de instalaciones activas lo contemplan, y sigue subiendo como la espuma.

Por eso he querido hacer esta guía, para que veas absolutamente todo lo que te ofrece este theme paso por paso.

Y te aseguro que no ha sido nada fácil.

Primero te voy a contar qué es Elementor y qué características tiene.

Luego pasaré a hablarte sobre cómo se usa y, por último, veremos todas las herramientas de diseño (más de 60).

Vas a flipar.

Tabla de contenidos

Por qué Elementor es el mejor theme de WordPress que existe ahora

Te decía en el título que Elementor es el mejor theme de WordPress que existe ahora mismo, y con los cientos de miles de themes que hay en el mercado, no es nada fácil.

Por ello quiero darte los 5 puntos que le hacen el mejor.

Y tranquilo, que voy a ser breve:

1. Con Elementor puedes tener el SEO perfecto

Empecé a hacer SEO en el lejanísimo año 2008, así que sé de lo que hablo.

Con Elementor puedes tener unos diseños muy bonitos, una usabilidad perfecta y, además, el SEO perfecto.

Normalmente los themes de WordPress tipo Pagebuilders (en otras palabras, los themes que te permiten hacer el diseño que dé la real gana) lo hacían por meter mucho código basura, y el SEO no era bueno.

Pero, con Elementor, no ocurre.

Sólo mete el código que necesita y, además, Google lo entiende perfectamente.

En definitiva, Elementor es más una plantilla de plantillas y una grandísima herramienta que un theme al uso, tiene el código limpísimo para ser un editor visual de páginas, y funciona perfectamente.

Un puntazo.

2. Es un theme rápido. Muy rápido.

Vale pero… ¿qué es muy rápido?

Mira, te voy a enseñar, de la form más visual que puedo, lo que tarda en cargar una página de esta web con más de 20.000 palabras y varias imágenes:

elementor-velocidad

Sí.

Más de 20.000 palabras y un porrón de imágenes en menos de 2 segundos (la página esta, por si quieres entrar a cotillear).

Y sin tocar nada de código, y, además, en un page builder.

Es para flipar.

3. Tiene más de 4 millones de instalaciones activas

No sé si es el theme más descargado de WordPress en la actualidad, pero Elementor se le acerca.

Podría decirte que Elementor lo está usando todo el mundo y no me equivocaría del todo.

Funciona tan bien que se ha ganado un hueco para ser la base en la que trabajan las agencias de desarrollo web de medio mundo.

Sí, como lo oyes.

Su código es tan limpio que, a día de hoy, mandas crear una web de cero a una agencia y te usa un builder como Elementor montado, como mucho, sobre un Genesis, si viene al caso.

Hasta para WooCommerce.

4. Tiene una versión gratuita que puedes probar

No te voy a engañar:

La versión gratuita de Elementor comparada con la de pago sólo sirve para que veas su potencial y nada más, pero siempre se agradece tener parte del producto gratis, ¿no crees?

Por supuesto, esta versión gratuita funciona igual de bien que la de pago, simplemente, tiene menos opciones y el editor está capado, pero lo puedes usar a modo plugin.

Aún así, si dudas, es una versión a tener en cuenta.

5. Y, además, está traducido al castellano

Otra de las cosas que no suelen gustar es que los themes estén en inglés pero, en este caso, Elementor está traducido al castellano.

Esto hace que sea mucho más sencillo moverla, añadir elementos de diseño y que sea todo algo más familiar.

Sí, sé que la mayoría de los plugin que usas que son top también están traducidos, siendo una ventaja si no eres muy ducho con el inglés.

¿Cómo se usa Elementor?

Elementor es un maquetador muy completo, y eso suele dar alguna confusión al principio.

Por eso, quiero contarte las dos partes diferentes que tiene, para que no te hagas un lío.

Pagebuilder, lo que sería el inicio de Elementor

De lo primero que te voy a hablar es de la parte sencilla, que sería el Pagebuilder o «Constructor de Páginas» (también hay gente que le llama maquetador, el concepto es el mismo).

El concepto es sencillo:

Con Elementor puedes modificar el diseño de una página o post de WordPress y ponerlo como te dé la real gana.

Y sí, también puedes hacer un tema nuevo desde inicio, valiendo tanto como plugin, como tema en sí mismo e, incluso, con un montón de widgets de uso.

No voy a entrar en detalle acerca de los elementos de diseño, que de eso hablaremos largo y tendido más adelante, pero sí te voy a contar cómo puedes llegar a él.

Una vez creas un post o página nuevo:

elementor-nueva-entrada

Y se te abrirá el Constructor de Páginas de Elementor, que sería algo así como el maquetador par la página o post de tu tema.

Sería algo parecido a esto (fíjate que he puesto numeritos):

Te cuento qué es cada cosa:

El área que está en el Punto 1 es donde vas a arrastrar los elementos de diseño, y te va a mostrar como quedaría el post o la página específica que estás creando.

Lo que vas a ver en la pantalla sería tu tema en vivo, así ves lo que va quedando.

Para añadir elementos de diseño, basta con arrastrar y soltar (el Drag&Drop de toda la vida).

Es fácil, muy fácil.

En la columna que señala el Punto 2 tienes todos los elementos de diseño disponibles para añadir a tu página o post.

En total, si tienes la versión Pro, hay más de 60.

Vamos, que tienes opciones de sobra para hacer cosas bonitas.

Theme Builder, el constructor de themes de Elementor

El Pagebuilder de Elementor sirve para hacer páginas o post.

Pero, y si quieres que el theme sea Elementor al 100%, ¿cómo haces?

Para eso tienes que crear varias apariencias/secciones, por ejemplo:

Justo eso es lo que te deja crear el Theme Builder de Elementor.

Para llegar a esta parte, tienes que ir aquí, fíjate:

elementor-theme-builder-sidebar

Y, una vez estás aquí en la barra lateral de administración, le das a «Theme Builder» (la tercera opción de la derecha), y te saldrá algo así:

theme-builder-elementor-home

Como ves, en el caso de mi blog tengo un total de 6 «plantillas» distintas dentro de mi blog:

Si entras en cada una de ellas, lo que te va a salir el el Pagebuilder de antes, para que añadas o quites los distintos elementos de diseño.

Así de sencillo.

Es decir, con un tema como Elementor podrás crear un tema que se adapte a ti tanto como tú quieras.

Mi recomendación es que empieces por algo sencillo, creando la página home, el blog y alguna página de servicios.

A eso le añades un footer y un header, y ya tienes todo lo necesario para que funcione.

Si quieres más, puedes tocar css, hacer custom post gracias a alguna herramienta o ir de una sección a otra, pero esto lo dejaría para más adelante.

¿Necesito el Page Builder y el Theme Builder?

Realmente no.

Mucha gente lo que hace es que instala un Generate Press como esqueleto (lo que sería el Theme Builder) y, sobre ese, utiliza los elementos de diseño de Elementor.

Los resultados son muy buenos.

Otros ya empezamos a usar el Theme Builder de Elementor como la plantilla base y, sobre ella, construimos.

La parte buena de hacerlo así es que ahorras Generate Press (50$ su versión premium) y, además, te queda todo más integradito.

Mi consejo es que uses todo sobre Elementor, a día de hoy, es más que suficiente.

¿Merece la pena Elementor de pago, o me sirve el gratis?

Aquí voy a ser muy claro:

Elementor es el mejor theme de WordPress de largo, y su licencia para un dominio es de 49$/año, que serían unos 45€/año.

No es dinero, para nada.

Te va a ahorrar cientos de horas, vas a tener un resultado súper profesional, 100% versátil y, además, vas a cumplir todos los estándares de SEO que quiere Google.

Por esto te recomiendo encarecidamente que, si quieres instalar Elementor para probar, bien.

Pero, si vas a usarlo para un proyecto, compres el de pago.

Te digo esto y que sepas que no soy de recomendar así por que sí herramienta, sólo las que de verdad merecen la pena.

Con este tema tendrás un builder visual, sencillo, compatible con WordPress al 100% para que tengas una web increíble.

Herramientas de diseño de Elementor: Lo que mola de verdad

Nos vamos a meter a ver todos los elementos de diseño que te permite poner Elementor, y quiero hacerlo con todo detalle.

Te los voy a dividir entre los que están disponibles en la edición gratis (10), los pro (24), los generales (20), y luego otros que sirven para las páginas de archivos.

En total van a ser 68.

A mayores, te voy a contar cositas acerca de addons y widgets de pago.

Vamos, que la cosa va para largo.

Mi idea es mostrarte, para cada elemento de diseño, de una forma 100% visual:

La pantalla de configuración es estándar sería algo parecido a esto:

En ella puedes cambiar muchas cosas, entre ellas:

  • La alineación.
  • El color del texto.
  • La tipografía,
  • Las columnas.
  • El espaciado.
  • Los bordes.
  • Separadores.
  • Un largo etc.

Va cambiando según el elemento de diseño pero es algo análogo para todos.

Con lo que quiero que te quedes, antes de empezar, es que este tema es tan visual y está tan bien hecho que las cosas están siempre en el mismo sitio y son 100% configurables y te va a costar mucho menos diseñar de lo que estás pensando.

Elementos de diseño de Elementor básicos

Vamos con los 10 elementos de diseño que trae la versión gratis de Elementor.

Es decir, estos están disponibles para todos. No son como para montar un tema, pero sí una página sencilla a modo plugin.

elementor-basico

Sección interior: Haciendo columnas

Lo que Elementor llama «Sección Interior» no es ni más ni menos que poner una sección dentro de otra.

Esto se traduce en hacer columnas donde puedes meter más elementos de diseño dentro.

Para que sea más visual, una versión en gif, fíjate:

seccion-interior-elementor

Crear columnas en WordPress nunca fue tan fácil, ¿verdad?

Y sí, puedes hacer columnas dentro de columnas, y así tienes secciones de 4.

Fantástico, ¿verdad?

Encabezado: Los H's clásicos de SEO

El segundo elemento de los básicos son los encabezados, que no dejan de ser lo mismo que se usa en WordPress normal.

La parte que te da Elementor era que, como te decía al inicio de esta parte, te deja personalizarlos con color, pesos, puedes poner la tipografía más grande, etc.

Es decir, es molón porque te deja hacer custom headings, vamos, personalizarlos todo lo que quieras, de cualquier forma.

Sin tocar el CSS.

Verse en real se ven así:

Esto es un encabezado verde de prueba en H5

Y, dentro de Elementor, en el maquetador, se vería así:

elementor-encabezado

Puedes ponerle:

  • El texto del título.
  • Si quieres un enlace a la URL que tú quieras.
  • Elegir el tamaño.
  • La etiqueta HTML (es decir el H1-H6).
  • La alineación a izquierda, derecha o centrado.

Vamos, no tendrás queja.

Imagen: Sí, las imágenes normales

Sí, estos primeros módulos son los sencillos.

Ahora toca que te muestre cómo quedan las imágenes, pero lo voy a hacer directamente con la imagen sobre la configuración de este elemento de diseño, así matamos dos pájaros de un tiro.

elementor-imagen

Puedes elegir:

  • La imagen que quieres mostrar.
  • El tamaño.
  • La alineación.
  • Si quieres que salga algo en la leyenda y cómo.
  • Si quieres poner un enlace.

Y, por supuesto, esto sirve tanto para entradas (posts) como para página o dónde tú quieras.

Editor de texto: otro de toda la vida

Como vas a meter módulos distintos al texto normal, tienes un módulo de texto con todas las opciones que trae WordPress.

En real queda como esto mismo que estás leyendo, que está creado con el editor de texto, y la pantalla de configuración sería esta:

editor-de-texto-elementor

No te voy a dar mucho la coña porque es el editor de WordPress como tú lo tengas.

Ni más, ni menos.

Vídeo: Sí, para añadir vídeos a tus páginas o post

El módulo de vídeo tiene muchas cosas interesantes, porque es mucho más que incrustar un vídeo de YouTube.

Un ejemplo real sería este:

La parte guay está en las opciones, fíjate:

video-elementor

Puedes elegir:

  • Si el vídeo es de YouTube, Video, DailyMotion o alojado en tu servidor.
  • Cuando quieres que empiece y termine el vídeo.
  • Si quieres que comience solo.
  • Si quieres silenciarlo.
  • Si quieres ponerlo en bucle.
  • Si quieres que se vean los controles o no (play, parar, etc.).
  •  Si quieres que el vídeo sea privado o no.
  • Si quieres que los vídeos sugeridos que salgan después sean sólo del canal o de todas partes.
  • Si quieres superposición de imagen o no.

Lo que me flipa de este módulo de vídeo es que me parece una herramienta flipante para retocar, de forma visual, sin saber CSS y queda perfectamente integrado.

Una alegría que he aprovechado en mi web tanto como he podido (y lo que aún queda).

Botón: Añadir botones en Elementor

Otra funcionalidad muy interesante de Elementor en su versión básica es que te permite poner botones cómo y dónde quieras.

Para que lo veas en vivo.

Si pinchas, te vas a la home.

Molón, ¿verdad?

Pues así se configura:

boton-elementor

Cosas que puedes elegir:

  • En «Tipo» tienes 4 opciones predefinidas de botón.
  • Puedes poner el texto que quieras al botón.
  • En enlace, lo mismo, el enlace que quieras.
  • Puedes elegir alineado a la izquierda, derecha o centro.
  • Puedes elegir el tamaño del botón (el del ejemplo es el «largo»).
  • Puedes elegir un icono entre cientos de ellos.
  • Puedes elegir si poner el icono antes, después arriba o abajo del texto.
  • Puedes elegir el espaciado.
  • E incluso un ID.
El tema de botones me gusta mucho porque no hay web que no pida tener elementos de conversión, y normalmente te toca irte a un ThriveLeads (y pagar el sobrecoste).
Aquí, gracias al maquetador de Elementor  podrás crear los botones, se integra con lo que tú quieras, queda fetén con tus plantillas y 0 quebraderos de cabeza.

Separador: Mucho más útil de lo que piensas

La función de separador de Elementor la uso un montón, es muy útil para separar en post tipo listas, y queda muy cuqui.

Te la enseño en real:

Y su configuración:

separador-elementor

Puedes elegir:

  • Decenas de estilos, desde línea normal hasta tribales.
  • Cómo lo quieres de ancho.
  • Dónde lo quieres alinear.
  • Si quieres que haya un icono o un texto también puedes.
Como te decía, lo uso mucho como si fuera uno de los widgets de la página, para separar secciones en landing pages o herramientas que suelo crear, haciendo un espacio visual para guiar al usuario.
Pero, lo mejor, es que editar o utilizar el separador es fácil.
Muy fácil.
Si quieres ver un uso real del separador, pásate por la calculadora de marketing online que acabo de crear.

Espaciador entre secciones

El espaciador en sí no lo vas a ver porque por su propia naturaleza es invisible.

Sí, sirve para dar un espacio en blanco entre dos secciones, por ejemplo, justo abajo de estas líneas he puesto un separador con un ancho de 75 píxeles.

Y en la configuración puedes elegir cuánto espacio quieres meter.

Ni más, ni menos.

espaciador-elementor

Google Maps directamente en tu página

Ya casi al final de los básicos tenemos la integración de Google Maps con Elementor.

Se ve así:

Y la configuración, así de sencilla:

google-maps-elementor

Eliges:

  • La ubicación en Google Maps.
  • El nivel de zoom que quieres (a más zoom, más cerca).
  • La altura del mapa, por si lo quieres más alto o más bajo que el estándar.

Y se ve así de esta forma dentro de una sección.

Parece una cosa un poco chorra, pero mejora muchísimo el aspecto en una web del mapa típico de Google Maps, que últimamente dejaba bastante que desear.

Iconos cómo y donde quieras

Dentro de los elementos de diseño básicos de Elementor, este sería el último de ellos.

Sirve para poner un icono cómo y dónde quieras, y se ve así:

Y la configuración:

icono-elementor

Entre las opciones:

  • Elegir un icono entre los cientos que hay disponibles.
  • El tamaño.
  • Si quieres poner un enlace.
  • Cómo lo quieres alinear.

Elementos de diseño Elementor Pro

Después de ver los elementos básicos, nos vamos a meter con los 24 elementos profesionales, que están dentro de la versión de pago.

Ya te adelanto que vas a flipar, hay mucho, muy variado, y muy pintón.

Vas a poder crear cosas muy molonas. No va a ser por tener opción para ello, ya verás.

elementor-diseños-pro-general

Post: Un listado de artículos

Gracias al primero de los profesionales lo que te deja hacer es un listado de los post con varias opciones, fíjate como se ve:

En este caso he puesto que los post sean los 3 últimos, y que salgan con un diseño de tarjetas, pero tienes un panel de configuración tan grande que no me cabe en una pantalla.

Por si no te lo crees:

lista-de-post-elementor

No te voy a poner el listado completo, que sería una locura.

Lo más importante que puedes elegir sería:

  • El tipo de diseño (Clásico, de Tarjetas o todo el contenido).
  • Cuántas columnas quieres poner.
  • Cuántos posts quieres que aparezcan.
  • Si lo quieres con imagen o sin ella, y todos sus tamaños.
  • Si quieres mostrar el título, con qué H y si quieres extracto.
  • Si quieres botón de Leer Más, y cómo quieres ese botón.

En definitiva, un listado de entradas súper visual y con tanta opción que abruma.

Portfolio: Añadiéndolo con un par de clics

Ya sabes que un portfolio es un listado de trabajos que has hecho para clientes.

Puedes añadir un portfolio con Elementor y unos cuantos clics.

Se ve así:

El que ves sería muy sencillo, no me lo tengas en cuenta porque realmente en el blog no tengo un portfolio hecho ad hoc.

El caso es que, gracias a Elementor, puedo hacerlo con dos clics, totalmente compatible con el resto de elementos, y sin esfuerzo.

Simplemente he dicho que vaya a por los últimos post, ponga las imágenes a 300×300, les añada un título y un enlace.

Pasa el ratón por encima de cada uno de ellos, ya verás.

Pero puedes hacer mucho más:

portfolio-elementor

A groso modo, puedes elegir:

  • Cuántas columnas y post por página.
  • Cómo quieres la imagen.
  • Si quieres que se vea el título y qué etiqueta H quieres poner.
  • Qué páginas/post quieres poner.
  • Cómo los quieres ordenar.
  • Si quieres filtrar, cómo.

Mola todo, ¿verdad?

Gallery: Haciendo galerías para tu WordPress como Elementor

No te voy a engañar:

No soy mucho de galerías.

Pero sé que muchos proyectos sí, así que me gustaría enseñarte cómo quedan en Elementor.

Al igual que antes, la configuración tiene tantas opciones que te las tengo que partir en 3:

galeria-elementor

Como puedes ver, demasiadas opciones hasta como para ponértelas todas.

Las más importantes:

  • Puedes elegir una galería múltiple o individual.
  • El sistema de ordenación.
  • Cuántas columnas y espaciado quieres.
  • Cómo quieres filtrar.

Formulario: Sí, también puedes añadirlos

¿Quieres añadir un formulario en tu WordPress sin plugins?

Pues también puedes, fíjate.

Sencillo, rápido y adaptado 100% a móviles.

La configuración, por partes:

Puedes configurar:

  • En el formulario en sí, desde el espaciado de columnas o files hasta la tipografía.
  • Colores de texto, bordes, etc.
  • Toda la apariencia del botón.
  • Y también de los mensajes.

Y, lo más bonito de todo:

Como todo corre a través de Elementor, todo es compatible, los usuarios contentos de poder utilizar los formularios bien, sin errores (en widget o en el cuerpo de entradas y páginas).

Login: Muy útil para muchos proyectos

La funcionalidad de login, es decir, de ingresar en el sistema con usuario y contraseña, no es para todos los proyectos.

Pero es muy útil si tienes un área de clientes, quedaría así:

Y, como todos los elementos de diseño, los puedes poner donde te dé la real gana.

La configuración:

login-elementor

Puedes, desde cambiar la configuración de las etiquetas o el tamaño, hasta el botón o poner una redirección cuando se hace el login.

Una pasada.

Slides, por si las sigues usando

Llevo años sin usar un slide porque me parece que no funcionan bien en móviles, pero sé que a muchos os siguen gustando.

Por eso también quiero tratar este tema aquí, fíjate como quedan:

Por supuesto, puedes cambiar imágenes de fondo, textos, botones, color elegir cuántas slides quieres, y mucho más.

Aquí tienes la pantalla de configuración:

slides-elementor

Nav Menú: Un menú de navegación, cómo y dónde quieras

Si por necesidades necesitas un menú de navegación en algún sitio rarito, no te preocupes, que con Elementor puedes sin problema.

Este sería una copia de lo que en mi sistema es el «Menú Footer», pero le puedo dar varios diseños.

En la configuración puedes:

  • Elegir el menú que quieres mostrar.
  • Si lo quieres en horizontal, vertical o cascada.
  • Cómo alinearlo.
  • El modo en que indicas al usuario en qué elemento está, así como las animaciones.
  • Si quieres que se muestre para tablet o móvil.
  • Si lo quieres de ancho completo.
  • Y muchas más cosas.

Animated Headline: Encabezamientos con un toque molón

Una opción que me gusta usar mucho son los encabezamientos clásicos, pero con un toque de animación.

Quedan fetén, fíjate:

Un ejemplo ,¿verdad?

En sí tiene muchas opciones:

animated-headline-elementor

Puedes a elegir:

  • Si quieres la animación sea para resaltar algo, o quieres que roten las palabras.
  • Qué estilo de animación quieres.
  • Qué vas a poner antes y después del resalte/rotación.
  • Si quieres, un enlace.
  • La alineación.
  • Qué etiqueta de encabezamiento vas a poner.

Price List: Listas de precios a tu alcance

El siguiente elemento de diseño del que te quiero hablar es poder poner listas de precios.

Es muy útil para webs de restaurantes, hoteles, gimnasios y muchos otros.

Fíjate como queda:

La configuración sería esta:

Tan sencillo que, para cada elemento, puedes elegir:

  • El precio del servicio.
  • El título del servicio.
  • También una descripción.
  • Si quieres, una imagen.
  • También si quieres, un enlace.

Price table: Tablas de precio molonas sin plugin

Si te mueves más en servicios tecnológicos, que sepas que también puedes hacer tablas de precio muy chulas con Elementor sin tener que instalar nada.

Fíjate que pasada, a 2 columnas:

Este sería un propudcto de prueba
Y aquí la descripción de prueba
€89
39
99
Mes
  • Elemento de lista nº1
  • Elemento de lista nº2
  • Elemento de lista nº3
ESTE
Este sería un propudcto de prueba
Y aquí la descripción de prueba
19
99
Mes
  • Elemento de lista nº1
  • Elemento de lista nº2
  • Elemento de lista nº3
ESTE NO

Ya sabes que puedes hacerlo con las columnas que quieras.

La configuración es sencilla pero tiene varios elementos:

tabla-precios-elementor

Puedes configurar:

  • En la cabecera, la información del producto.
  • Su precio, así como ponerle si está en oferta o no.
  • Todos los elementos.
  • El texto del footer y, si quieres, poner un enlace.
  • La reseña de destaque superior.

Flipbox, ideal para reducir el rebote

En usabilidad web hay un principio fundamental que dice que lo más difícil de conseguir es la primera interacción.

Si lo consigues, el resto van solas.

Aquí es donde entra el módulo de Flipbox, que es un elemento de diseño que da la vuelta según pinchas o pasas el ratón.

Súper útil y muy pintón.

Así queda:

Esta sería la parte delantera

Tiene un icono muy bonito y puedes poner el mensaje que quieras.
Pasa el ratón, ya verás.

Y esta es la parte de atrás

Es como jugar al cucutrás, pero en WordPress.
Ojo, que puedes poner un botón con un enlace.
Si pinchas, no te va a llevar a ningún lado, esta vez.
PINCHAR

Molón, ¿verdad?

flipbox-elementor

A nivel configuración:

  • Puedes tocar la tarjeta del frente, tanto título, descripción como elemento gráfico.
  • También la tarjeta de atrás, título, descripción, botón y enlace.
  • En los ajustes, puedes elegir entre un porrón de efectos distintos.

Call To Action: CTAs en Elementor

Otro punto importantísimo:

Quizá el elemento web más importante sean las llamadas a la acción, que siempre las conocemos como CTAs.

Pues bien, con Elementor puedes usarlas sin necesidad de plugins.

Este es el encabezado de prueba de Elementor

Aquí la información extra que puedes poner.
El botón no funciona, no he puesto enlace
¡Toma ya!

Totalmente funcional, se ve bien en móviles y sin plugin adicional.

cta-elementor

Cositas que puedes tocar:

  • La imagen a poner, además, puedes ponerla como fondo del CTA o aparte, como la puse yo.
  • El contenido, título, descripción, el encabezamiento, texto del botón y enlace.
  • Si quieres poner un destacado o no.
  • Otra cosa muy molona, el diseño puedes cambiarlo entre 3 opciones.

Personalmente, me gusta mucho, es muy sencillo de utilizar y configurar, compatible al 100% en artículo y página, visual y funciona muy bien.

Media Carousel, otra cosa molona

Que quieres hacer un carrusel mezclando vídeos e imágenes.

Pues no te preocupes, que también podrás con Elementor.

Puedes poner tantos vídeos con las imágenes de portada que quieras, o todas las fotos que quieras.

media-caroursel-elementor

A cambiar:

  • El tipo de diseño del carrusel que quieres.
  • El número de slides y de qué tipo son.
  • Los distintos efectos.
  • El tipo de desplazamiento, paginación.
  • Un montón de opciones sobre los vídeos.

Testimonial Carousel, testimonios muy molones

Una cosa que hace vender más casi de forma automática son los testimonios.

Pues bien, con Elementor podrás tener un carrusel de testimonios súper molones, fíjate:

Molón, ¿verdad?

La pantalla de configuración sería esta:

Como ves, puedes elegir:

  • El número de testimonios.
  • Puedes elegir entre un par de diseños distintos.
  • En qué posición quieres imagen y texto.
  • Qué tipo de paginación, si quieres bucle, autorreproducir, y muchas otras.
  • Lo puedes poner en modo widget, si así lo quieres.
  • Y editar en la forma que te venga en gana.

Reviews, para hacer críticas / opinión de productos y servicios

Además de los testimonios, dentro de la prueba social se encuentran las reviews.

Las reviews son hacer una crítica u opinión sobre un producto o servicio, y sirven para vender más porque generan confianza.

Pues sí, con Elementor también se pueden hacer de forma muy sencilla:

La de antes
La de antes
@cuentainventada
Leer Más
Wow, Elementor ha cambiado mi vida, antes salía en todas las fotos de stock, y ahora, ¡mírame!
David Grima vuelve
David Grima vuelve@grimeitor
Leer Más
Siempre que puedo poner la foto mía con el traje, lo hago, ya sea en Elementor o en la fila del pan.
Previous
Next

Bonito, ¿verdad?

La configuración sería esta:

reviews-elementor

Sí, es parecido al punto anterior, el de testimonios, y es totalmente normal que se así, ya que son bastante análogos.

A mayores aquí puedes elegir un iconito y una URL de enlace, pero el resto es igual.

Table Of Content, la tabla de contenidos de toda la vida

A las Tablas de contenido se les conoce a nivel SEO directamente como ToC, y tiene muchas implicaciones.

Hacen que Google entiendan mejor tu contenido y, además, permiten que el usuario navegue más rápido.

Total, que molan mucho.

Con Elementor, puedes hacer tablas de contenido muy molonas sin esfuerzo, aquí un ejemplo:

Tabla de Contenidos

Como siempre, tienes un montón de opciones:

table-of-content-elementor

Puedes elegir:

  • El nombre que le das a la tabla.
  • Qué encabezamientos quieres incluir y cuáles no.
  • Cómo quieres mostrarlos.
  • Si quieres jerarquía o no.
  • Truncarlo para tablets y móviles o no.
  • Y además, un montón de opciones de diseño.

Countdown, para hacer cuenta atrás en Elementor

Hay un concepto en marketing que es el de «escasez«, que es una mala traducción del inglés «scarcity«.

Lo que dice este concepto es que, si vemos que una promoción tiene una fecha de fin, compramos más.

Pues con Elementor podrás hacer cuentas atrás para tus landing page sin problema.

Días
Horas
Minutos
Segundos
¡Terminó la cuenta atrás!

A nivel opciones, súper fácil:

Puedes elegir:

  • Si el contador tiene una fecha de fin o simplemente una cuenta atrás desde que la persona entra.
  • Puedes verlo por bloques o integrado.
  • Elegir las unidades y traducirlas.
  • Qué quieres que pase una vez termine la cuenta atrás.

Share Buttons, los botones de compartición de Elementor

¡Qué te voy a contar de las redes sociales!

Ya sabes, o estás ahí, o estás muerto.

Pues bien, con Elementor puedes poner botones de compartición muy molones, fíjate:

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on email
Email
Share on telegram
Telegram

Todas las redes sociales principales, incluidas las grandes americanas como Digg o Reddit, sin esfuerzo.

Que digo yo, ya que estás, comparte este post, ¿no?

La configuración, muy sencilla:

share-buttons-elementor

Blockquote, citas con diseño

Me gustan mucho las citas en los textos, porque te permiten mejorar la legibilidad de forma sencilla, y hacer que las personitas se queden más tiempo leyendo.

Y eso mola mucho.

En Elementor también podrás hacerlo, y se ven así:

Esto sería una cita de ejemplo y, además, se puede twittear.

Las opciones, sencillísimas:

blockquote-elementor

Puedes:

  • Elegir entre varios diseños.
  • La alineación.
  • El mensaje y el autor del mismo.
  • Si quieres que se pueda twittear.

Facebook Button, integración con la mayor red social del mundo

Este es tan sencillo que creo que es mejor que lo veas directamente:

La única dificultad es que tienes que meter la ID de la aplicación que crees dentro de Facebook, pero tardarás poco en crearla.

Las opciones, aquí:

facebook-button-elementor

Facebook Comments, los comentarios de Facebook, integrados

Si quieres tener directamente los comentarios de Facebook en vez de los nativos de WordPress, con Elementor puedes de forma fácil.

Tiene sentido siempre que los pongas al final del texto, claro.

Una vez más, tienes que tener una ID de Facebook dentro de las apps para desarrolladores, pero no es complicado y hay tutoriales para ello.

La configuración, así:

Facebook Embed, para incrustar contenido de Facebook

Si lo haces a mano, a veces es complicado incrustar contenido de Facebook en tu web, pero Elementor te lo hace bastante fácil, mira:

Este sería un ejemplo, he querido meter una publicación de Adrift, una de mis bandas preferidas.

La configuración, sencillísima:

facebook-embed-elementor

Poner la URL, decidir si quieres enseñar el contenido entero o no, y listo.

Facebook Page: Para integrar páginas de Facebook directamente en Elementor

No soy muy amigo del autobombo y, de hecho, por aquí no vas a ver las redes sociales del proyecto ni nada por el estilo, pero sé que es lo más normal y, de hecho, lo suelo usar en proyectos de clientes.

En Elementor, si quieres añadir una página de Facebook podrás hacerlo, yquedaría así:

Una vez más, mis queridos Adrift.

La configuración, ahí va:

pagina-facebook-en-elementor

Más sencillo que el mecanismo de un sonajero.

Y, si lo quieres en modo widget para una barra lateral o el footer, lo podrás editar sin problema.

Plantilla, para incrustar una página o post dentro de otra

Voy a hacer una excepción, la plantilla de Elementor no te la voy a mostrar.

Tengo mis razones: Harían esto bastante poco usable, pero te digo de qué va.

Lo que te permite el elemento «Plantilla» es meter una plantilla predefinida que tú tengas dentro de una parte de una página o un post.

Con un clic. Magia.

Esto no se usa para un artículo «normal», pero sí se puede utilizar cuando estás montando plantillas. Con Elementor, podrás hacerlo.

Elementos de diseño de Elementor Generales

Dentro de los elementos de diseño generales en Elementor hay un total de 20, y son de los que más vas a usar.

Ya verás que son muy útiles.

Cuadro de imagen, otro elemento de diseño molón

El cuadro de imagen se usa mucho en Elementor para hacer más bonitas landing pages, páginas home, etc.

Queda así:

elementor-prueba-foto
Este es el encabezado de prueba

Y esta es la descripción de prueba, como que Elementor mola todo.

Dentro de la configuración:

cuadro-de-imagen-elementor

Eliges:

  • La imagen en sí.
  • El tamaño.
  • Título y descripción.
  • Si quieres ponerle un enlace.
  • La etiqueta de encabezamiento.

Caja de icono, algo parecido, pero con iconito

Si en vez de foto quieres elegir un icono de los cientos que tiene Elementor disponibles, también podrás.

Es igual de sencillo, y sería así el tema:

Encabezado Elementor de prueba

Aquí vendría un texto súper molón gracias a tus artes de copywritting.

Se usan muchísimo cuando quieres poner características en una landing page o similares.

La configuración, exactamente igual que el anterior, pero cambiando «imagen» por «icono», ahí va:

Valoración de estrellas, ideales para darles más datos a Google

El tema de poner estrellitas en las páginas y post mola mucho porque es un dato que toma Google y que, a veces, muestra en el SERP.

Hacerlo con Elementor es muy fácil, queda así:

Valoración de estrellitas
5/5

Se usa muchisimo para poner arriba del todo en los textos, y las opciones son estas:

Carrusel de imágenes, un clásico

Más arriba hemos hablado de distintos carruseles y, en esta ocasión, toca el de imágenes.

Igual de sencillo que el resto:

A nivel configuración, como de costumbre:

galeria-imagenes-elementor

Galería básica: Para imágenes sin florituras

Voy a avanzar rápido, porque es muy parecido al anterior:

Es una galería sencilla que te permite añadir columnas y distintos tamaños, aquí la configuración:

galeria-basica-elementor

Listado de iconos: para hacer listas muy molonas

El Listado de iconos es uno de los elementos de diseño que más uso de todo Elementor.

Te permite hacer listas realmente bonitas, por ejemplo:

Da una legibilidad muy superior al texto, que siempre está bien, y hace los post más amenos.

La configuración es facilísima:

listado-de-iconos-elementor

Contador: Un efecto especial a tus páginas

Otro elemento que uso bastantes es el de hacer contadores con Elementor, le da un diseño muy distinto a las páginas y post, permitiéndote diferenciarte de la competencia.

Fíjate como quedan:

0 magdalenas
de chocolate

Creo que has captado el espíritu de para qué se usa, y seguro que los has visto en webs de servicios y productos a dolor.

La configuración, una vez más, fácil, muy fácil:

contador-elementor

Barra de progreso: otro elemento de diseño súper útil

Seguro que has visto en mil sitios las barras de progreso como las que te presento a contiuación, ¿verdad?

Son útiles y molonas porque te permiten hacer diseños diferentes, y siempre es un puntazo.

Esto es una prueba de Elementor
Molonidad 85%
Súper molonidad 90%
Hiper molonidad 95%

El panel de configuración es sencillísimo.

barra-de-progreso-elementor

Y, para añadir el resto de barras, sólo tienes que ir duplicando el elemento de diseño.

Son ideales para partes de la web sobre servicios o soporte.

Recomendación, muy útil para homes y landing page de producto

Más arriba vimos los carruseles de recomendación pero, si quieres poner sólo una, sin carrusel, también puedes.

Mira qué pintonas quedan:

Esta es la típica prueba de recomendación de Elementor, el mejor theme de WordPress del Multiverso

Las opciones que tiene este elemento son muy parecidas a las del carrusel:

recomendacion-elementor

Pestañas en Elementor, ideal para meter mucho contenido en poco sitio

Imagina que tienes una tienda online en la que quieres dar un montón de información de un producto pero no que la persona haga scroll hacia abajo, porque se aleja mucho del botón «Comprar».

Entre otras cosas, para eso sirven las pestañas.

Te enseño cómo quedan en Elementor.

Esto sería la primera pestaña de prueba, aquí puedes poner lo que quieras, porque tienes un editor de texto estándar.

Lo mismo aquí, lo que dé la real gana.

Y, además, optimizado para móviles.

Se usan poco para la de funcionalidades que tienen.

Como curiosidad, decirte que las puedes poner en formato horizontal o vertical.

pestañas-elementor

Acordeón, otro elemento que uso bastante

Tengo que confesártelo:

Soy muy fan de los formatos acordeón, me parecen muy útiles para un gran abanico de cosas.

Además, hacen que la persona vaya dando clics, incrementando la conversión final.

En Elementor quedan así:

Esta sería la primera funcionalidad del acordeón.

Y esta la segunda.

Es un editor de texto, puedes poner todo lo que quieras, y como quieras.

En la configuración hay varias cosas muy interesantes.

  • Puedes ponerle un icono a cada pestaña o no.
  • Puedes elegir el tipo de etiqueta que quieres para SEO.

Por eso Elementor mola tanto.

acordeon-elementor

Alternar: Parecida a Acordeón, pero con matices

La función alternar de Elementor es muy parecida a la esencia del acordeón, pero con algún cambio de diseño que otro.

Fíjate como queda:

Como en la función Acordeón, es un editor de texto.

Y puedes poner las cosas cómo y cuánto quieras.

A nivel opciones, las mismas que arriba:

Iconos sociales: para que integres bien tus redes

Otra opción muy buena para dar prominencia a tus redes sociales y hacer que las personitas te sigan.

¡Elementor está en todo!

Puedes poner tantas redes sociales como quieras, porque eliges directamente el icono de la base de datos de Elementor.

Añades el enlace, y listo.

La configuración:

iconos-sociales-elementor

Alerta: Ideal para mejorar la legibilidad

Es otra funcionalidad de Elementor que uso sin parar.

Es muy buena para resaltar contenido y hacer toques de atención a quien te lee, mejorarndo la legiliblidad muchísimo.

Un ejemplo:

Entre las opciones, la más interesante es que hay 4 formatos predefinidos con distintos objetivos.

Y funcionan.

alerta-elementor

SoundCloud: Integración con tu música

Sí, el que parte el bacalao en términos musicales es Spotify, pero SoundCloud es muchísimo más amigo de las integraciones.

Por eso SoundCloud está en Elementor.

Queda así:

Perfecto para móviles y con un montón de opciones disponibles.

Además aprovecho y te presento a Grajo, otro grupazo.

soundcloud-en-elementor

Shortcode: para añadir cosas de terceros

Hay veces que no te queda más remedio que usar shortcodes para añadir funcionalidades de terceros.

Es un mal, pero un mal necesario, y Elementor te deja hacerlo sin problema.

Te enseño la configuración porque, el shortcode en sí, tampoco tiene mucho sentido:

shortcode-elementor

HTML: Para que puedas añadir el código que quieras

Es parecido al anterior pero, en lugar de añadir un shortcode, puedes añadir el HTML que quieras a la parte de la página o post que quieras.

Rápido y sencillo.

Ancla del menú

La funcionalidad de Ancla del Menú también es de las técnicas.

Te permite fijar una ID de página o post dentro del CSS.

Un poquito friki.

La configuración es esta:

ancla-del-menu-elementor

Barra lateral, la de toda la vida

Imagina que estás montando una página o un post a nivel plantilla, y quieres añadir una barra lateral.

Pues bien, deberás añadir este elemento de diseño y seleccionar qué barra lateral quieres añadir.

Tan fácil como esto.

Te pongo la configuración, pero no la barra lateral porque montaría una importante en el diseño del post…

barra-lateral-elementor

Leer más, útil para las páginas de archivos

Este botón es otro que no te voy a poner en real, porque entonces tendrías que dar a «leer más» para poder leer el resto del post, y me parece que está feo.

Pero vamos, es el típico botón de toda la vida, te dejo la configuración:

Elementor: Elementos de diseño para el sitio

Elementor tiene 6 elementos de diseño específicos que afectan a todo el sitio web.

Tranquilo, que son sencillos, ya verás.

Site logo: Para poner el logo, claro

Todo sitio web necesita un logo, ¿verdad?

Pues con este elemento te permite ponerlo donde quieras.

Evidentemente, se utiliza en la cabecera.

Las opciones son:

site-logo-elementor

Site title y Page Title: Lo mismo, pero con el título

Creo que es bastante autoexplicativo.

Como en el caso anterior, se usa en las cabeceras.

Este sería el Site Title:

site-title-elementor

Nav Menú, el menú de navegación de siempre

Ya le tratamos más arriba.

También sirve para añadirlo en las cabeceras, y se vería así:

La única diferencia con el anterior es que este te sirve para las plantillas y, el otro, para las páginas.

Search Form, el formulario de búsqueda

A la derecha del menú se suele poner un icono para buscar.

Con Elementor, lo tienes hecho.

El elemento en sí sería este:

Y sí, se adapta al ancho, tanto en PC como en móviles.

Las opciones, aquí:

search-form-elementor

Sitemap: Un elemento de mapa del sitio

Sí.

Sé de sobra que los mapas del sitio como concepto están más pasados que el barco del arroz, pero todavía hay quien los usa.

Así quedan:

sitemap-elementor

Elementos de diseño individuales

En cuanto a elementos de diseño, este es el último bloque.

En total son 8 elementos pensados para cuando estás creando la plantilla individual de post y páginas.

Algunos están repetidos con los anteriores. En esos, iremos más rápido.

Post title, para incrustar el título del post

Se usa cuando haces la plantilla de post, y sirve exactamente para eso.

En mi caso y para este post, quedaría así:

Elementor: La guía que esperabas del mejor theme de WordPress que existe ahora mismo

Las opciones:

post-title-elementor

Post Excerpt: Añade el extracto del post

Se usa mucho en la página de archivos. Ya sabes, por fecha, categoría, etc.

Es muy útil porque se usa a modo introducción.

Como en real se ve simplemente como un texto plano, te ahorro verla.

Imagen destacada directamente con Elementor

También para las páginas de archivo se suele usar la imagen destacada para dar más prominencia a los post.

Ojo, se usa también al inicio de los posts, y quedan imágenes a todo ancho:

elementor-destacada

En cuanto a las opciones, te las ahorro. Simplemente puedes elegir una imagen, y nada más.

Table of contents, esta ya la hemos visto

La tabla de contenidos ya la hemos visto antes, así que, con que sepas que también la puedes usar en las plantillas, listo.

AuthorBox, la información del autor

Este elemento de diseño de Elementor se suele usar debajo del contenido del post o la página.

Por ejemplo, yo lo tengo puesto de esa manera, pero no te voy a hacer ir a por él, te lo muestro aquí:

author-box-elementor

En cuanto a las opciones, te permite elegir:

  • Si quieres mostrar foto o no.
  • Si quieres mostrar el nombre.
  • Qué etiqueta HTML.
  • Si quieres enlace.
  • Tu biografía y botón de archivo.
  • Y muchas más cosas.

Post comments, para añadir comentarios a tus post o páginas

Ya sabes de sobra que, al finalizar el post, se suelen poner los comentarios, ¿verdad?

Pues, cuando creas una plantilla de Elementor, usas este módulo y lo colocas debajo del todo.

No te lo voy a mostrar (ve hacia abajo y lo ves en este mismo post).

Post navigation, para poner "anterior" y "siguiente"

Otro elemento que se suele poner debajo del contenido de un post son las flechas de «post anterior» y «post siguiente», para intentar que la persona que te lee siga haciéndolo.

Queda así:

Y, las opciones, sencillas:

post-navigation-elementor

Post info, toda la información del post

Cambiamos de tercio.

En la parte superior del post solemos poner la información del mismo, ya sabes, el autor, la categoría o la fecha.

En Elementor, eso sale así:

Y las opciones son sencillas:

post-info-elementor

¿Esto es todo lo que tiene Elementor?

Te he enseñado los 68 elementos de diseño de Elementor, pero aún hay más.

Elementor tiene paquetes de extensiones (addons se llaman) de otras empresas que, debido a la popularidad del theme, programan especialmente para ellos.

Un ejemplo son la gente de JetElements, que tienen cosas muy chulas.

Puedes, desde integrar el tiempo hasta hacer gráficos, entre otras muchas cosas.

Para ponerte los dientes largos, aquí tienes algún ejemplo:

Las posibilidades son casi infinitas.

Precio de Elementor

En origen, el Page Builder de Elementor es gratis pero, como has visto, merece muchísimo la pena pagar Elementor para tener más funcionalidades.

Pero, ¿cuánto vale Elementor?

Aquí tienes la tabla:

Elementor Pro Plus

Sirve para un 1 site
$ 49 Año
  • +50 Widgets Pro
  • +300 Plantillas Pro
  • Constructor de temas
  • Constructor de WooCommerce
  • Constructor de Popups
  • Soporte por 1 año
  • Actualizaciones por 1 año
Popular

Elementor Pro Plus

Sirve hasta para 3 sites
$ 99 Año
  • +50 Widgets Pro
  • +300 Plantillas Pro
  • Constructor de temas
  • Constructor de WooCommerce
  • Constructor de Popups
  • Soporte por 1 año
  • Actualizaciones por 1 año
Popular

Hay otra versión por 199$ año que es válida para hasta 1.000 sites, pero esa suele ser para agencias.

Como ves, la única diferencia está en está en el número de sites, pero el producto es el mismo.

Entonces, ¿merece la pena Elementor?

Para terminar este artículo, te diré que, según lo veo, Elementor merece muchísimo la pena.

Sinceramente, los 49$ que cuesta la versión de un site (unos 45€ al cambio) no es dinero para todo lo que da, es una pasada.

En especial, porque combina lo mejor de la versatilidad que te da el mejor theme constructor web y, por otro lado, tener la parte SEO perfecta.

Cuéntame en lso comentarios, ¿qué te parece Elementor? ¿Lo has probado?

Sergio Ramírez

Sergio Ramírez

Me gusta más el Marketing Online que las galletas de chocolate. Poca broma.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.