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

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
¬°Ponme nota!
5/5

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.

Un puntazo.

2. Es un theme r√°pido. Muy r√°pido.

Vale pero… ¬Ņqu√© es muy r√°pido?

Mira, te voy a ense√Īar lo que tarda en cargar una p√°gina de este blog 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, 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.

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?

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.

¬ŅC√≥mo se usa Elementor?

Elementor es 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¬Ľ.

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.

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.

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.

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:

  • El men√ļ y la cabecera
  • El footer o pie de p√°gina.
  • La p√°gina de resultados de b√ļsqueda.
  • La p√°gina de archivos del blog.
  • La p√°gina de posts de autor.
  • Y muchas otras.

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:

  • Archivos: Ser√≠an las p√°ginas como archivos de autor, fechas, resultados de b√ļsqueda, etc. Todas ellas con el mismo dise√Īo.
  • P√°gina est√°ndar: Ser√≠a un esqueleto para una p√°gina t√≠pica, sin tocar nada.
  • Footer: As√≠ es como se muestra el pie de p√°gina en todas las URLs del blog.
  • Header Principal: El men√ļ y la cabecera (logo, buscador, etc), sale en todo el sitio.
  • Post est√°ndar: El dise√Īo normal de un post normal antes de tocar nada.
  • Post de blog: Aqu√≠ estoy trabajando en un dise√Īo especial para post de blog, pero todav√≠a no lo tengo asignado.

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.

¬Ņ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.

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 de pago.

Vamos, que la cosa va para largo.

Mi idea es mostrarte, para cada elemento de dise√Īo:

  • Como queda en real, que para eso uso Elementor.
  • Un pantallazo de la configuraci√≥n
  • Si existe v√≠deo, tambi√©n te lo pondr√©.

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.

Elementos de dise√Īo de Elementor b√°sicos

Vamos con los 10 elementos de dise√Īo que trae la versi√≥n gratis de Elementor.

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.

Se ve mejor con un gif, fíjate:

seccion-interior-elementor

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.

Verse en real se ven así:

Esto es un encabezado verde de prueba en H5

Y, dentro de Elementor, 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.

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.

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.

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.

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 bien.

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.

elementor-dise√Īos-pro-general

Post: Un listado de artículos

El 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.

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.

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.

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.

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, 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.

Media Carousel, otra cosa molona

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

Pues no te preocupes, que también puedes.

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 puedes 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.

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 puedes 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 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, quedar√≠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.

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.

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 puedes.

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:

  • Primer elemento de prueba
  • Segundo elemento de prueba
  • Tercer elemento de prueba

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.

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:

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 un comentario

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.