Elementor: el mejor maquetador visual para WordPress

En este post vengo a hablarte de Elementor Page Builder, el mejor maquetador visual para WordPress.

Hasta hace unos años, diseñar una página web tenía bastante enjundia. De hecho, aún hoy todavía la tiene… no cualquiera pueda hacer una página web profesional. Lo que ocurre es que de un tiempo a esta parte se ha “democratizado” el diseño, creación, o llámalo como quieras, de páginas web.

Sobre todo si nos centramos en crear una web en WordPress, que es mi CMS favorito y el que utilizo para mis trabajos, podemos decir que hace unos años se tenían que construir las webs a base de múltiples plugins, aderezados con una parte de programación o desarrollo que, en muchos casos, hacía que aquellos que no dominaban el código se cagasen en la madre del cordero cada vez que un cliente les solicitaba un cambio un poco… ¡jodido!

Hoy en día la cosa ha cambiado bastante, y gracias a los maquetadores visuales, los diseñadores de páginas web han visto la luz… ¡y a la Virgen de los DesamparadosYo entre ellos.

Si estás pensando en ser diseñador web o en crear tu propia página web, no dejes de leer lo que te cuento a continuación, pues no me dejo nada de nada de nadita de lo que necesitas saber de Elementor.

¡¡¡Además, no te pierdas el vídeo al final del post, donde te enseño a diseñar una página de inicio de una web de principio a fin!!!

¡Coge unos pistachos y ponte cómodo, cómoda o Dragón de Comodo! 😛

Qué es Elementor y para qué sirve

Elementor es un plugin de diseño de páginas web con WordPress. con el que podrás crear webs sin tocar ni una sola línea de código.

Su potencia reside en que podrás añadir fácilmente los objetos de diseño al área de trabajo (sistema ‘drag and drop’) y en que dispone de un sinfín de posibilidades para crear páginas web muy modernas y creativas.

Uno de los puntos más positivos de Elementor es que no utiliza shortcodes para añadir el contenido en el área de diseño, sino que lo que tú ves en el área de trabajo es exactamente lo que el usuario verá en la parte frontal de la web al publicarla.

Cuánto cuesta Elementor y cómo obtenerlo gratis

Elementor Page Builder dispone de una versión gratuita y otra de pago.

Eso sí, no ofrecen versión de prueba de la versión PRO. Como mucho te la podrás comprar y devolverla antes de 30 días.

La versión gratuita te ofrece 30 widgets básicos y la versión PRO, además de los widgets gratuitos añade otra buena ristra de addons muy potentes; en concreto más de 50 y subiendo.

Con la versión gratuita tendrás:

  • El maquetador visual Elementor (¡solo jodería!)
  • 30 widgets básicos.
  • Maquetador de páginas y secciones.
  • Una serie de plantillas.

Con la versión PRO, además de lo que te ofrece la FREE, tendrás:

  • Más de 50 widgets PRO.
  • Más de 300 plantillas.
  • Maquetador completo de temas (Páginas, Secciones, Cabecera, Footer, Archivo…).
  • Plantillas FREE y PRO.
  • Maquetador para WooCommerce (Tiendas Online).
  • Creador de Popups.
  • Uso de contenido dinámico: Custom Post Types y Custom Fields.
  • Gestión de roles de uso.
  • Shortcodes para inserción de widgets en cualquier lugar.
  • Soporte y actualizaciones.

Como ves, la diferencia es notable, por eso te recomiendo sobremanera que te rasques el bolsillo si quieres hacer una web súper vistosa y que inviertas en la versión PRO, pues la diferencia que vas a notar va a ser buena de cuidado.

¡Mira a continuación los precios!

Precios de Elementor

Elementor ofrece 5 precios diferentes, según la cantidad de webs que quieras diseñar. En el año 2021 hicieron una subida considerable de los precios, pues antes era bastante más accesible para cualquier bolsillo.

Esto es lo que ofrece cada uno:

  • Essential:
    • 49$/año (44€).
    • 1 web.
    • Soporte Premium.
  • Expert:
    • 199$/año (179€).
    • 25 webs.
    • Soporte Premium.
    • Perfil en su plataforma de expertos.
  • Agency:
    • 999$/año (839€).
    • 1.000 webs.
    • Perfil en su plataforma de expertos.
    • Soporte VIP.
  • Advanced (plan «especial»):
    • 99$/año (89€).
    • 3 webs.
    • Soporte Premium.
Elementor precios
Aunque en la imagen no muestran el plan Advanced, se accede a él desde un enlace que tienen debajo de las cajitas de precios.

Y si te lo estás preguntando, ya te digo que Elementor no proporciona versión Lifetime (uso de por vida con pago único).

Lo sé, es una putada.

Yo tengo la versión Expert y es la mejor inversión que he hecho para mi negocio, sin duda. Que conste que cuando yo la adquirí ofrecían 1.000 webs en ese plan y todavía es así… Ahora los 1.000 sitios son 999$ :O

Instalación y activación de Elementor

La instalación de Elementor es muy sencilla. La versión gratuita solo tienes que buscarla en el repositorio oficial de WordPress, instalarla y activarla.

La versión premium tendrás que descargarla de tu área de cliente del plugin y subirla desde tu equipo.

Te cuento todos los detalles de instalación y configuración de Elementor en este post.

Principales ventajas de Elementor

Elementor posee una serie de ventajas que lo hacen la mejor opción del mercado para diseñar páginas web con WordPress. Aunque muchos usuarios tiren piedras contra Elementor (siempre hay defensores y detractores, ya sabes), Elementor es la mejor opción que te encontrarás para diseñar una web sin tener que utilizar código.

Vemos las ventajas que te ofrece.

1. Es muy fácil de utilizar

Esto es lo primero y lo más básico que debes saber:

“Elementor es tremenda y salvajemente sencillo de utilizar”. ¡Ahora tuitéalo si eso!

Con el sistema de diseño y maquetación que han creado los chicos de de Elementor, podrás diseñar tu página web sin apenas saber de código.

Y si quieres meterte con el código, también podrás hacerlo, gracias a las múltiples opciones que te permite el maquetador visual.

2. Funciona mediante ‘Drag and Drop’

Precisamente la facilidad de uso de la que te acabo de hablar, tiene sentido gracias al sistema de arrastrar y soltar los objetos al área de trabajo.

Gracias a este sistema, podrás añadir los widgets que desees y colocarlos donde te venga en gana de manera rápida y sencilla, moviéndolos a tu antojo con el ratón por el área de diseño.

Eso es lo que los anglosajones (que rima con coj…) llaman sistema ‘drag and drop’.

Draganquéeee??? ¡¡¡Drag and Drop!!!

3. Es WYSIWYG

Elementor funciona con el método WYSIWYG (What You See Is What You Get)…

Guachuquéeeee??? ¡Joder, Edu, relaja ya!

A ver… 

Esto significa que el diseño que vas creando en el área de trabajo (backend) es 100% igual a lo que se mostrará a los visitantes de la página web (frontend)…

No tienes que hacer previsualizaciones, ni precargas, ni actualizaciones varias para visualizar el resultado cada vez que tocas algo.

Traducido al Cristiano Ronaldo sería: 

“¿Ves esto? Pues así va a ser la web”.

Esto está de puta madre, porque podrás ir viendo en tiempo real cómo quedará la web. 

Mola.

En otros editores casi todo funciona con shortcodes que tienes que ir metiendo en cada lugar, con lo que nunca ves cómo está quedando el diseño realmente (con Elementor también puedes utilizar shortcodes, pero podrás ver cómo es el resultado final igualmente).

4. Te permite crear diseños en versión escritorio, tablet y móvil

Hoy en día es primordial que una página web sea responsive, o sea, adaptada a todos los dispositivos.

Elementor te permite desde el mismo área de trabajo crear las versiones de escritorio, tablet y móvil, sin necesidad de irte a otro lado ni tener que hacer tres webs diferentes.

¡Total!

Con esta funcionalidad aprovechas todos los widgets para cada una de las versiones sin tener que crear diferentes versiones al 100%.

Si hay widgets que no deseas que se vean en una versión concreta, puedes ocultarlos.

5. Tiene cientos de plantillas

En la versión FREE, y también en la PRO, dispondrás de una porrada de plantillas creadas por el equipo de diseñadores de Elementor que podrás utilizar para tus diseños.

Captura pantalla Elementor Plantillas de Páginas

 

¿Y cómo funciona esto?

Seleccionas la plantilla, la añades a tu área de trabajo y modificas el contenido.

6. Tiene bloques pre-diseñados

Además de las plantillas completas de las páginas más comunes en una web, Elementor te ofrece un gran abanico de bloques prediseñados por el equipo de creadores del plugin, que podrás aprovechar para montar rápidamente una página con todo lo que necesites, a golpe de clic de ratón.

7. Es súper rápido en todos los sentidos

Es rápido a la hora de trabajar con él y es rápido también con respecto al rendimiento de la web, ya que, aunque haya gente que dice lo contrario, Elementor no penaliza la velocidad de carga; son otros plugins los que hacen que una web vaya lenta.

Yo solo te digo que una web con Elementor y el mejor plugin de caché, que es WP Rocket, va como un tiro… Si luego instalas otros plugins, la cosa cambia…

8. Está muy bien integrado con temas y plugins

Elementor está muy bien integrado con los mejores temas para WordPress, además de que existen un montón de plugins de addons para Elementor, creados por otros desarrolladores, que aumentarán enormemente las capacidades del maquetador visual.

Si deseas utilizar plugins de traducción como WPML o Polylang, debes saber que Elementor está totalmente integrado con ellos y podrás crear webs multiidioma sin problema.

También va como un tiro con WooCommerce, para el cual han creado varios widgets específicos, los cuales te muestro un poco más abajo al detalle.

¡Nada, que lo tienen todo bien montao estos tipos!

9. Animaciones y efectos

Elementor posee unas cuantas opciones muy potentes para crear animaciones y efectos con los objetos y secciones, con el ratón, con el scroll, etc.

Si lo tuyo es la creatividad, con todo lo que te ofrece Elementor, vas a mojar las bragas…

10. Puedes utilizar Custom Post Types y Custom Fields

Uno de los fuertes de Elementor es que puedes sacar provecho de los custom post types y de los custom fields gracias a que permite la adicción de contenido dinámico.

¿Qué carajo es esto, Edu???

Si lo que he contado te suena a chino mandarino, aquí te cuento qué son los custom post types.

Ahora… si utilizas CPTs y custom fields en tu web o en la de algún cliente tuyo, debes saber que Elementor te permitirá utilizar contenidos dinámicos basados en CPTs y custom fields.

¡Cojonudo es poco!

11. Crea código limpio

Y dirás tú:

¡Qué bien que Elementor sea aseadito!

Mira…

Al contrario que otros maquetadores visuales, que meten código y shortcodes por todas partes, penalizando la velocidad de carga, Elementor evita los estilos CSS inline, añadiendo todo el código necesario en un archivo CSS independiente.

Esto a Google le pone cachondo, y a Google hay que hacerlo feliz, si noooo…

12. Es de código abierto

Aunque parezca una pijada, que sea de código abierto nos viene bien a todos, ya que de esa forma podrán surgir desarrolladores que desarrollen mejoras mejoradas para mejorar el plugin y así nos beneficiaremos todos mejor.

¡Ni Mariano Rajoy lo explicaría mejor! 😀

Además, de esta forma, se fomenta el nacimiento y proliferación de nuevos addons creados por otros proveedores que pueden ser añadidos a Elementor, dándole más fuerza que a Son Goku convertido en súper guerrero.

13. Lo actualizan y mejoran continuamente

La gente de Elementor debe comer y dormir poco, porque cada dos por tres están sacando actualizaciones con nuevas funcionalidades, efectos y mejoras que hacen a Elementor cada día más fuerte.

Que si los popups, que si el efecto parallax, que si te bajan factura de la luz (¡ay, esto no lo hacen, mecachis!)

14. Buen soporte técnico

Además de todo lo anterior, si le añadimos que tienen un soporte técnico siempre resolutivo y que escucha las peticiones de los usuarios… ¡lo han bordao!

Elementor y WooCommerce

Una de las mejores cosas que debe tener una herramienta como Elementor es el poder integrarse con otras para aumentar su potencial. Y esto lo han hecho muy bien en general, ya que el maquetador visual se integra con grandes e importantes herramientas del mundillo WordPress.

elementor woocommerce widgets

Una de las mejores integraciones que tiene Elementor es con WooCommerce, la conocida plataforma para crear tiendas online en WordPress.

El propio maquetador y otros addons para Elementor incluyen un montón de widgets para integrar y personalizar nuestra tienda WooCommerce.

Además, el propio Elementor trae varias plantillas prediseñadas para utilizar en WooCommerce, como por ejemplo para productos individuales o las páginas de archivos de la tienda.

Área de trabajo de Elementor

Familiarizarse con Elementor Page Builder es muy sencillo. Las partes principales que te encontrarás en la pantalla de diseño son las siguientes:

Zona de diseño

La zona de diseño es el área blanca de la derecha, que es donde iremos componiendo nuestras páginas.

Al comenzar un diseño desde cero, nos aparecerá un cuadro punteado con dos iconos en su interior:

  • Botón rosa con icono de signo +: para añadir una nueva sección con diferentes opciones por columnas.
  • Botón gris con icono de carpeta: para importar una plantilla de Elementor.

Panel de elementos (Widgets)

En el panel de la izquierda del área de trabajo se encuentran todos los widgets o addons que podrás utilizar para diseñar tu web.

Solo tienes que cogerlos y arrastrarlos dentro del área de trabajo para poder utilizarlos a tu gusto.

Panel ‘Global’

Justo a la derecha de la pestaña ‘Elementos’, que es donde se encuentran los widgets, encontrarás otra llamada ‘Global’. En ella aparecerán los llamados ‘Global Widgets’.

Los ‘Global Widgets’ son widgets que has utilizado en la maquetación de alguna página y que deseas reutilizar en otro lugar. 

Al guardar estos widgets como globales, aparecerán en esta pestaña y podrás reutilizarlos cuando quieras y, además, si actualizas un global widget, se actualizará al mismo tiempo en todos los lugares donde lo hayas utilizado.

¡A que mola!

¡¡¡Claroooooo!!!

Menú superior del panel de widgets

En la parte de arriba del panel de widgets se encuentra el menú principal de Elementor, en color rosa corporativo.

En el icono de hamburguesa de la izquierda encontrarás las siguientes opciones, que te permitirán configurar algunas cosillas, como las tipografías y los colores globales:

  • ‘Estilo’:
    • Colores por defecto: configurar 4 colores por defecto para toda la web:
      • Primario.
      • Secundario.
      • Texto del cuerpo.
      • Acento (botones, por ejemplo).
    • Fuentes predeterminadas: escoger las tipografías para los siguientes textos:
      • Encabezado primario.
      • Encabezado secundario.
      • Texto del cuerpo.
      • Acento.
    • Selector de color: desde aquí puedes seleccionar hasta 8 colores para que estén disponibles por defecto en tu paleta de diseño. También tienes la opción de seleccionar alguna de las paletas de color predeterminadas que pone a tu disposición Elementor (Joker, Ocean, Royal…).
  • ‘Ajustes’:
    • Ajustes globales: configurar algunas de las opciones que también encontrarás en el menú general de ‘Ajustes’ de Elementor:
    • Ajustes en el escritorio: te lleva al menú de configuración general de Elementor en WordPress.
    • Sobre Elementor: te redirige a la web corporativa de Elementor.
  • ‘Ir a’:
    • Buscador: te permite buscar cualquier opción de todas las que incluye el plugin Elementor dentro de tu WordPress.
    • Ver página: te permite ver el resultado de la página en el frontend.
  • ‘Salir al escritorio’: si haces clic en esta opción, saldrás de la pantalla de diseño de Elementor y volverás a la pantalla de edición estándar de WordPress.

Por otro lado, en el lado derecho de este menú, podrás acceder a otro icono con unos puntitos que te llevará de nuevo al panel de widgets.

Menú inferior del panel de widgets

En la parte inferior del panel de widgets, y sobre fondo gris oscuro, se encuentran otras cuantas opciones para trabajar con Elementor.

Te las cuento:

Ajustes

En este apartado podrás configurar los siguientes aspectos:

  • Título de la página: modificar desde aquí el título de la página.
  • Estado: determinar si tu página está en alguno de estos modos:
    • Borrador.
    • Pendiente de revisión.
    • Privada.
    • Publicada.
  • Imagen destacada: cambiar desde aquí la imagen destacada de la página.
  • Esconder título: si no deseas que se muestre el título por defecto de la página, desactívalo aquí.
  • Estructura de página: Elementor te permite diseñar tus páginas con diferentes estructuras, que podrás cambiar desde aquí:
    • Canvas: muy útil si deseas crear páginas partiendo totalmente desde un “folio en blanco”, sin menú, sidebar, footer u otros elementos del tema.
    • Ancho completo: diseño por defecto con todas las opciones que en la opción canvas no te aparecen: header, sidebars, footer, etc.

Además de estas opciones, al seleccionar la opción ‘Ajustes’, se activarán otras dos pestañas en la parte superior llamadas ‘Estilo’ y ‘Avanzado’:

  • Estilo: cambia desde aquí el color de fondo general de la web o añade una imagen. También puedes aplicar un margen de relleno general a la página.
  • Avanzado: añade en esta opción código CSS personalizado para toda la página.

Navigator

Navigator es una ventana flotante similar a la de Capas de Photoshop, a través de la cual vas a poder gestionar todo el contenido de la página en un formato en cascada desplegable. Podrás ver las secciones, columnas y widgets que tengas en tu composición, moverlas hacia arriba o hacia abajo, eliminarlas, etc.

Historial

Si necesitas deshacer algún cambio que has hecho en diseño, a través de la pestaña historial podrás ver todos los pasos que has llevado a cabo y seleccionar el estado donde desees continuar trabajando.

Al activar la opción ‘Historial’ podrás acceder a dos pestañas en la parte superior: ‘Acciones’ y ‘Revisiones’.

Modo adaptable

En Elementor Page Builder podrás diseñar las versiones escritorio, tablet y móvil de cada página. Desde esta opción podrás seleccionar cualquiera de las tres resoluciones para trabajar en ellas.

Previsualizar cambios

Si deseas ver cómo está quedando tu página desde una vista del frontend, con esta opción podrás acceder a una previsualización.

Publicar/Actualizar

En el botón verde de la derecha del menú inferior podrás guardar los cambios que vayas haciendo y publicar la página cuando la tengas lista.

En este botón verde hay también una flechita que despliega otras opciones:

  • Guardar borrador: mientras no quieras publicar la página, puedes guardarla aquí como borrador.
  • Guardar como plantilla: si quieres reutilizar esta página para otro diseño, puedes guardarla como plantilla de Elementor desde aquí.

Pestañas de edición de los widgets

Cuando tengamos un widget seleccionado dentro del área de trabajo, se activarán en el panel de herramientas 3 pestañas para poder editarlo.

Aunque los widgets comparten muchas opciones de configuración, debes tener en cuenta que cada widget tiene también opciones de configuración específicas.

Las tres pestañas son estas:

Pestaña ‘Contenido’

En esta pestaña, como el propio título dice, podrás añadir información sobre el contenido del widget, como el texto, enlaces, alineación, etc.

Si en vez de seleccionar un widget, seleccionas un elemento de maquetación, como son las secciones o columnas, esta pestaña se llamará ‘Disposición’ y en ella podrás modificar aspectos como el alto, el ancho, la disposición de los objetos insertados dentro, etc.

Pestaña ‘Estilo’

En la pestaña ‘Estilo’ encontrarás todo lo que tiene que ver con el estilo (valga la rebuznancia) del contenido: colores, tipografías (si es texto), bordes, animaciones del ratón, etc.

Si lo que quieres configurar son secciones o columnas, te aparecerán opciones para añadir imágenes de fondo, capas superpuestas, efectos de scroll y otras cosillas.

Pestaña ‘Avanzado’

Y por último, pero no por ello menos importante, está la pestaña ‘Avanzado’, en la que podrás configurar cosas como los espaciados (padding y margin), añadir efectos de movimiento (scroll, ratón o sticky), fondos y bordes de widgets (no de elementos de maquetación), personalizar la posición del objeto, mostrar/ocultar el objeto en versión escritorio, tablet o móvil y añadir atributos de HTML5 y CSS personalizados.

Secciones y columnas en Elementor

Más allá de si Elementor tiene más o menos widgets y la calidad de estos, para mí, su punto más destacable es la facilidad de uso en lo que se refiere a opciones de maquetación y estructuración del contenido.

El sistema de secciones y columnas de Elementor es súper sencillo e intuitivo y te permite crear composiciones de cualquier tipo sin apenas limitaciones.

Podrás crear secciones con hasta 10 columnas y dentro de cada una de ellas podrás además insertar el widget ‘Sección interior’, el cual te permitirá añadir otras 10 columnas anidadas, lo que en total te permitiría tener hasta 100 columnas en una misma sección.

Síiiiii, ¡¡¡ya sé lo que me vas a decirrrrrr!!!

Es cierto que nunca necesitarás tener 100 columnas y que tampoco podrías diseñar nada con ese volumen de fragmentación de la información, pero simplemente te lo comento para que veas el potencial que tiene Elementor a nivel estructuración de contenidos.

¡Con estas posibilidades podrás hacer casi cualquier cosa!

Los widgets de Elementor

Hasta ahora te he hablado del área de trabajo y de las columnas y secciones, que te ayudarán a componer la estructura de los contenidos, pero esos contenidos, ¿cómo se crean?

Pues con los widgets o addons para Elementor.

Los widgets son los elementos de diseño que Elementor pone a tu disposición para componer cualquier cosa que desees.

Entre los widgets incluidos en la versión gratuita (demasiado básicos), tienes encabezado, párrafo, vídeo, botón, icono, galería y otros que verás en la siguiente captura (van añadiendo más continuamente)… 

Captura pantalla Elementor Free Widgets

…y también tienes otros más avanzados, incluidos en la versión Premium, como formulario de contacto, listado de entradas, portfolio, encabezado animado, tablas de precios o flip box, entre otros.

Captura pantalla Elementor Pro Widgets

Cómo se utilizan los widgets de Elementor

Para utilizar los widgets, sólo tienes que arrastralos al área de trabajo, ya sea directamente, dentro de una sección o dentro de una columna.

Cuando tengas un widget seleccionado, te aparecerán sus opciones en el panel lateral izquierdo. Con ellas podrás cambiar los datos, el estilo y configurar opciones avanzadas.

Gestión de plantillas en Elementor

Aparte de las propias plantillas que trae Elementor, tú podrás crear tus propias plantillas para utilizar en la web, desde plantillas de página completa, secciones e incluso podrás crear plantillas para páginas de archivo, single posts, el header o el footer, entre otras (a continuación te hablaré del Theme Builder).

Cuando instales Elementor, este añadirá a tu menú de WordPress una nueva pestaña justo debajo de la llamada ‘Elementor’ que se llama ‘Plantillas’.

Tipos de plantillas

Existen diferentes tipos de plantillas que podrás crear con Elementor.

En la versión FREE podrás crear plantillas de tipo:

  • Página: para páginas enteras.
  • Sección. para reaprovechar secciones concretas de un diseño.

En la versión PRO, además, podrás crear plantillas de tipo:

  • Popup: sí, con la versión PRO podrás crear popups maravillosos.
  • Header: con Elementor puedes personalizar el header de tu web.
  • Footer: lo mismo para el footer.
  • Individual: muy útil si quieres crear una plantilla para las entradas del blog.
  • Archive: fantabuloso para crear archivos de categorías y taxonomías varias.
  • Y otras…

… y con la PRO también podrás crear algunas plantillas específicas para Woocommerce:

  • Producto único: para crear un diseño de plantilla para los productos.
  • Archivo de productos: con esta opción podrás personalizar tu página de productos.

Shortcodes de plantillas

Por si fuera poco, en la versión PRO, Elementor genera un shortcode en cada una de las plantillas, para que puedas colocarlas en cualquier lugar de tu web.

Imagina que quieres diseñar unos widgets personalizados para utilizar en el sidebar de tu web… pues diséñalos con Elementor y añádelos a través de un shortcode.

¡Mola, eh!

Maquetador de temas o Theme Builder de Elementor

La licencia Premium de Elementor trae un caramelito que te va a encantar: Theme Builder o maquetador de temas.

El Theme Builder te permitirá crear toda la estructura de tu página web con Elementor: cabecera, footer o sidebar son los elementos estructurales principales que podrás crear.

Además, también podrás crear diseños 100% personalizados para la página de Resultados de búsqueda, la página de error 404, páginas de archivos, posts individuales para el blog, páginas individuales… y hasta plantillas para WooCommerce.

La verdad es que Theme Builder es una auténtica pasada!!!!

Elementor theme builder

Cómo diseñar una página web con Elementor Page Builder

Y ahora, para finalizar este mega-tutorial de Elementor, te dejo aquí con el vídeo que te prometí al comienzo, en el que te enseño a maquetar la página de inicio de una web de principio a fin. ¡No te lo pierdas!

Pues nada, hasta aquí este pequeño y breve tutorial sobre Elementor Page Builder, el que para mí es el mejor maquetador visual para WordPress.

¡Espero no haberte aburrido, pero es que Elementor tiene muuuucha enjundia!

Conclusión y opinión personal

Seguramente ya conocías Elementor, y si no lo conocías, creo que desde ahora deberías estar enamorado hasta las trancas de este maquetador visual que ha revolucionado el diseño de páginas web.

Para mí es la herramienta definitiva y con la que diseño todas mis webs y las de mis clientes.

No concibo mi vida sin este plugin, la verdad.

Elementor tiene muchos puntos fuertes, pero también tiene alguna debilidad.

La más acuciante es que cuando lanzan alguna actualización del plugin, tienes que echarte a temblar, porque en muchas ocasiones el plugin peta y te puede romper las páginas diseñadas.

También en ocasiones se queda colgado a la hora de guardar una página y aparece el conocido error 403…

Más allá de esto, como nadie es perfecto… puedo decir sin miedo a cagarla que Elementor aporta más cosas positivas que negativas y que es el plugin de maquetación de páginas web definitivo.

 

Ahora, si te ha gustado este mega-post sobre Elementor, ¿te hace compartirlo en tus redes sociales? ¿y dejarme un comentario súper guay aquí abajo?

Venga, anímate, que si me dejas un comentario podremos revertir juntos el cambio climático… y si ya conseguimos cambiar a los políticos mundiales que pasan de todo, pues ya triunfamos 😉

¡Hasta otra!!!

¡Haz clic para puntuar esta entrada!
(Votos: 6 Promedio: 5)

34 comentarios en “Elementor: el mejor maquetador visual para WordPress”

  1. Felicidades por el pedazo artículo que te has currado. Lo seguiré leyendo poco a poco.

    Sobre Elementor, la verdad es que es una pasada, pero creo que ahora mismo la parte de WooCommerce quedó algo coja e insuficiente. Espero que metan nuevos widgets y opciones para ello.

    Saludos!

    1. Hola Anxo!!!

      Bienvenido de nuevo a mi pequeña y humilde casa 🙂

      Pienso igual que tú. Para WooCoommerce podrían ponerse un poco más las pilas y también actualizar algunos widgets a los que les están pasando por la derecha otros similares de otras empresas.

      Gracias por comentar, compañero!!!

      Un abrazo!!! 🙂

  2. Post genial y supercompleto…manejo Elementor habitualmente pero hoy he descubierto cosas nuevas que podré aplicar en mis próximos diseños. Gran trabajo Edu, sigue así.

  3. En pocas palabras…¡¡NO TIENE DESPERDICIO!! Es la biblia
    He usado y uso Elementor (conoc basicos) y con este post expones muy bien todo lo que hay que saber, Hay detalles que por mucho que mire y curiosee, las expones muy bien.
    Muchas gracias por tu aporte, sigue asi

    1. Jejeje, muchas gracias Laura!!!

      Me alegro de que te guste el contenido… la verdad es que me ha llegado a dar quebraderos de cabeza porque Elementor tiene taaaaanto que contar que creí que no lo terminaría nunca 🙂

      Un saludo!!!

  4. Tío Edu ¿Por qué no has empaquetado todo esto y lo has puesto a la venta como un curso? Hay cursos de pago bastante menos completos que este mega híper ultra tutorial.

    Felicidades. Brutal. Sin más.

    Un abrazo.

    1. Hombre, Arturo!!!! Qué alegría verte por aquí de nuevo!!! 😀

      Pues la verdad es que el contenido es mucho porque Elementor tiene mucha chicha (lo sabes bien), pero no sé si se podría hacer un curso con este contenido… Te escribiré un privado y hablamos, jeje!

      Muchas gracias por tus palabras!!!

      Un abrazo fuerte!!!

  5. Hola Edu… muy buen artículo. La verdad que no conocía de la existencia de este tipo de maquetadores para wordpress. Si alguna vez vuelvo a hacer webs lo tendré en cuenta.

    1. Hombre, Manolo!!! Qué grata sorpresa encontrarte por mi blog 🙂

      Pues sí, es lo que te comentaba el otro día… Gracias a maquetadores como Elementor es posible diseñar webs sin apenas tocar código. Siempre es bueno tener ciertos conocimientos y saber defenderse con HTML y CSS, pero es posible crear una buena web sin tocar nada de código.

      Cuando lo pruebes ya me contarás; te vas a enamorar seguro!!!

      Un abrazote fuerte, compañero!!!

  6. De esos días en los que te sientes motivado para crear una web y compartir contenido como el que expones de igual manera en forma gratuita, y te encuentras con posts como éste que tienen gran valor para los que buscamos expandir conocimientos.

    Sumamente agradecido con tu explicación de uso del Elementor, vengo de tener un concepto limitado de WordPress, ahora sí me queda mucho más claro el tema de los builders para elaborar Webs de mejor solidez.

    Un abrazo Edu. Desde BCN te felicito y saludo cordialmente.

  7. Tu exposición sobre Elementor es muy buena, didáctico, y ameno, con un lenguaje claro conciso y comprensible, Indudablemente los diseñadores modernos se sienten a gusto con las herramientas modernas para ser competitivos, felicito por su pasión en lo que hace y en particular por compartir su conocimiento con aquellos que queremos incursionar en crear nuestra propia web. En mi caso no conozco mucho es difícil escoger entre DIVI y ELEMENTOR, con cual me sale mejor la pagina, Divi me da la impresión, es mas moderno y impactante, agradecería su opinión a cual elegir. Gracias.

    1. Hola Ignacio,

      Yo nunca he utilizado Divi, pero es conocido por penalizar el rendimiento y velocidad de las webs. Yo utilizo desde siempre Elementor y estoy muy satisfecho con lo que se puede hacer; además existen un montón de desarrolladores que han creado plugins de addons para Elementor que lo hacen cada vez más potente.

      Un saludo.

  8. Hola Ignacio. Por si te sirve, en el pasado utilicé DiVI y mi experiencia es que no es tan personalizable como aparecen en los vídeos. En ocasiones, me encontré estar limitado con las opciones que da y tuve que recurrir a añadir código CSS o dejarlo y aceptar las limitaciones y que el aspecto visual fuera diferente al pretendido.
    Con Elementor llevo poco pero, ante una apariencia que parece más arcaica, parece que tiene más opciones de adaptación y configuración.
    Por un lado estoy viendo que cada nueva actualización te permite realizar cosas sin necesidad de más añadidos. Por otro lado, viendo tantas plantillas y addons que existen para Elementor también quiere decir que hay ciertos aspectos en Elementor que no son sencillos para los que estamos empezando o los que no podemos dedicar mucho tiempo a realizar las Webs.
    Confío haberte ayudado.

  9. Felicidades por el post, me ha resultado muy útil, gracias.
    Una pregunta, cuando haces una web con Elementor Pro para un cliente, una vez finalizada, ¿el cliente ha de seguir pagando la subscripción pro para poder ir editando, por ejemplo, una sección de trabajos? O puede actualizar normalmente como si fuera cualquier tema de WordPress.
    Muchas gracias.

    1. Hola Julio,

      Yo dispongo de la versión Pro Expert de Elementor y mis clientes no tienen que pagar nada nunca. Pueden utilizar Elementor para siempre y actualizarlo como si fuese una licencia propia.

      Muchas gracias por comentar!!!!

      Un saludo.

  10. Que genial todo lo que acabo de leer, me va ayudar mucho con mi página web a la hora de mejorarla, la verdad es que no entendía mucho de esto, pero ahora si estoy lista, gracias!

Deja un comentario

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

  • Responsable: Eduardo Rubianes.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a FastComet INC que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.
Scroll al inicio

Las 9 fases cruciales para diseñar una web atractiva y efectiva.

pasos para diseñar una página web

Guía GRATUITA por entregas con la que aprenderás a diseñar una web profesional y a conseguir resultados reales para vivir de ella.