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
- ¿Cómo se usa Elementor?
- ¿Necesito el Page Builder y el Theme Builder?
- ¿Merece la pena Elementor de pago, o me sirve el gratis?
- Herramientas de diseño de Elementor: Lo que mola de verdad
- Elementos de diseño de Elementor básicos
- Elementos de diseño Elementor Pro
- Cómo descargar fotos y vídeo en Instagram, en ordenador y en Android
- ¿Cuánto cuesta hacer una web? La guía que necesitas
- Quitar fondos de una imagen o foto fácilmente, directamente online, ¡y gratis!
- Cómo descargar fotos y vídeo en Instagram, en ordenador y en Android
- ¿Cuánto cuesta hacer una web? La guía que necesitas
- Quitar fondos de una imagen o foto fácilmente, directamente online, ¡y gratis!
- 7 Plugins de WhatsApp para WordPress que no te puedes perder
- Cómo añadir ligas deportivas en tu WordPress
- Elementor: La guía que esperabas del mejor theme de WordPress que existe ahora mismo
- Esta sería la parte delantera
- Y esta es la parte de atrás
- Este es el encabezado de prueba de Elementor
- Precio de Elementor
- Entonces, ¿merece la pena Elementor?
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:
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:
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:
- 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:
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í:
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.
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:
- 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.
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.
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:
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í:
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.
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:
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:
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:
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.
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:
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.
Pero, lo mejor, es que editar o utilizar el separador es fácil.
Muy fácil.
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.
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:
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:
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.
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:
Cómo descargar fotos y vídeo en Instagram, en ordenador y en Android
No te cuento nada nuevo si te digo que Instagram es la red social del momento y parece que se va a mantener así durante
¿Cuánto cuesta hacer una web? La guía que necesitas
Seamos sinceros, ¿a quién no le ha asaltado la duda de cuánto cuesta una página web alguna vez? Es una duda muy lógica y la
Quitar fondos de una imagen o foto fácilmente, directamente online, ¡y gratis!
Hoy te quiero presentar una herramienta muy útil, que te permite quitar fondos a la imagen que tú quieras directamente online, sin necesidad de programas ajenos, rápido y sencillo para descargar. Vamos, ¡un puntazo!
La herramienta se llama Clipping Magic y bueno, tiene sus limitaciones pero lo que hace (quitar fondos) lo hace muy, muy bien
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:
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í:
Cómo descargar fotos y vídeo en Instagram, en ordenador y en Android
¿Cuánto cuesta hacer una web? La guía que necesitas
Quitar fondos de una imagen o foto fácilmente, directamente online, ¡y gratis!
7 Plugins de WhatsApp para WordPress que no te puedes perder
Cómo añadir ligas deportivas en tu WordPress
Elementor: La guía que esperabas del mejor theme de WordPress que existe ahora mismo
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:
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:
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:
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:
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:
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-
Elemento de lista nº1
-
Elemento de lista nº2
-
Elemento de lista nº3
Este sería un propudcto de prueba
Y aquí la descripción de prueba-
Elemento de lista nº1
-
Elemento de lista nº2
-
Elemento de lista nº3
Ya sabes que puedes hacerlo con las columnas que quieras.
La configuración es sencilla pero tiene varios elementos:
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
Y esta es la parte de atrás
Molón, ¿verdad?
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
Totalmente funcional, se ve bien en móviles y sin plugin adicional.
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.
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:
Bonito, ¿verdad?
La configuración sería esta:
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:
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.
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:
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:
El de Elementor, además de ser muy visual, es compatible de forma nativa con el theme y muy ligero, además, lo puedes usar a modo widget.
Si le añades que puedes editar las redes sociales que muestras, tienen un porrón de ellas, el resultado es que presenta unas ventajas increíbles
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:
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 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:
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:
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í:
Este es el encabezado de prueba
Y esta es la descripción de prueba, como que Elementor mola todo.
Dentro de la configuración:
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í:
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:
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:
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:
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:
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:
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.
El panel de configuración es sencillísimo.
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:
Las opciones que tiene este elemento son muy parecidas a las del carrusel:
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.
Se usan poco para la de funcionalidades que tienen.
Como curiosidad, decirte que las puedes poner en formato horizontal o vertical.
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.
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:
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.
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.
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:
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:
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…
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 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:
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í:
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:
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 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:
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í:
Sergio Ramírez
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 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í:
- Sergio Ramírez
- junio 23, 2020
- 2:00 pm
- No Comments
Y las opciones son sencillas:
¿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-
+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
Elementor Pro Plus
Sirve hasta para 3 sites-
+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
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?