Elementor Page Builder: Review y comparativa con Elementor Pro

Publicado el · ·

Quieres diseñar tu web. Pero tienes en mente una cuestión delicada: no sabes nada de código. Eso del HTML y del CSS te queda lejos. Sin embargo, no quieres renunciar a diseñar tu web a tu gusto. Aquí es donde Elementor Page Builder te interesa, y quizás también su versión premium Elementor Pro.

La vía fácil en cambio es pillarte un tema rígido, limitarte a rellenar los huecos predeterminados con textos e imágenes. ¿El resultado? Una web plantillosa sin alma, sin carácter. Una web no personalizada que le dará a tu negocio un aire estándar, del montón.

Y esto es algo que no te puedes permitir. Como emprendedor, probablemente tu negocio se diferencie en parte por cómo eres tú. Puede que seas una persona hipermotivada, experta en su campo, un trekkie o la que mejor atiende a sus clientes. Seas como seas, tu web debe respirar a ti. Nadie quiere trabajar con una persona gris: ¡no tengas una web gris!

En esta entrada de blog descubrirás una herramienta que te resultará muy útil. Para mi es la solución para personalizar una web como quiera. Y no es un tema: es un plugin (o dos).

Elementor es, como su nombre indica, un constructor web. Este maquetador visual o editor visual te permite controlar cómo se presentan los contenidos. Conocerás sus bondades y te explicaré los extras que Elementor Pro -la versión de pago- te aporta, para que juzgues si te interesa pillártelo.

No obstante, no pretendo que tras leer esta review sepas cómo utilizar Elementor. Esto no es un tutorial. Mi objetivo es que conozcas a este editor visual de WordPress. Y aunque esto no es una recopilación de opiniones de Elementor, sí te daré la mía como diseñadora web que lo ha utilizado en muchos proyectos.

¡Empecemos! 😉

¿Qué es Elementor Page Builder?

logotipo de elementor

Elementor es un plugin de WordPress que vió la luz hace relativamente poco: el 1 de junio de 2016. Sus creadores, Yoni Luksenberg y Ariel Klikstein, están hoy al frente de un equipo de más de 30 profesionales.

Pero a ti lo que te interesa es: ¿qué puede hacer Elementor por mi?

Como page builder para WordPress, Elementor te permite mostrar como tú quieras todos los contenidos de tu página web. Ya sean contenidos gráficos o escritos. Estén en páginas o entradas de blog. Y lo más importante: no hace falta que tengas ningún tipo de conocimiento técnico.

Digamos que es la forma más sencilla de tener las páginas de tu web como tú quieras si no tienes ni idea de código HTML ó CSS.

creadores de Elementor Page Builder

¿Cómo lo consigue? Elementor es un editor visual, un constructor de páginas web que funciona bajo el concepto WYSIWYG. Significa en inglés What You See Is What You Get. Esto te permite ver mientras diseñas lo mismo que habrá como resultado final. Dicho de otra forma, este maquetador visual te permite diseñar tu web viendo lo mismo que verá la persona que la visite.

ejemplo de cómo utilizar Elementor

Otro dato que es importante que conozcas es que Elementor tiene dos versiones: una gratuita y otra de pago. A lo largo de este escrito te presentaré las dos y verás la diferencia entre ambas. Comencemos con la gratuita, pues es la más conocida por defecto como “Elementor WordPress” y la que te interesa si buscas page builder plugin WordPress free 😀

Los números de la versión gratuita de Elementor

Como Pablo aconseja siempre, para ver si un plugin gratuito es suficientemente bueno como para ser utilizado, lo mejor es visitar su página en el repositorio oficial de WordPress.

¿En qué datos debemos fijarnos?  Básicamente en tres:

  • Ttiene más de un millón de instalaciones activas. Esto es como ver un restaurante lleno de gente: ¿debe comerse bien, verdad?
  • Tiene una nota excelente de 4,8/5 a partir de más de 1.500 valoraciones. No sólo es muy usado sino que quien lo hace valora la experiencia de forma altamente satisfactoria.
  • Actualiza a menudo el plugin. Esto muestra que los que están detrás trabajan para mejorarlo y que sea estable y seguro.

numeros de elementor page builder

¿Cómo se ve Elementor?

Ahora que ya sabes que conoces de dónde viene Elementor y has visto su buena tarjeta de presentación, seguramente te interesa ver más cómo se usa.

Y éste es sin duda un punto muy importante.

Pero antes déjame explicarte algo. Verás, tras haber diseñado con WordPress con diferentes plugins y templates, creo que existen en general dos formas de maquetar una página:

  • Editar mediante shortcodes.
  • Diseñar mediante soluciones como Elementor.

Antes de existir las soluciones como Elementor, la maquetación en WordPress se hacía básicamente a través de shortcodes. Lo cual era un rollo patatero 😫.

Pero Carolina, ¿qué diantres es un shortcode?

Es un código que ponemos en el editor de WordPress e inserta algo en la parte visible nuestra web. Por ejemplo, un shortcode puede permitirnos poner una galería de imágenes. O puede ser una columna con texto dentro. O un botón.

Quizás prefieras verlo con una imagen, así que te dejo un ejemplo de shortcodes para crear dos columnas con una galería de tres imágenes en la primera y un botón en la segunda.

ejemplo de editar con shortcode

Los shortcodes, si bien aún siguen siendo útiles para muchas cosas, ya no se suele utilizar para maquetar.

¿Por qué?

Estas son las dos principales razones por las que los shortcodes van a menos:

  1. Utilizar shortcodes significa tener que aprender códigos. Esto te desvía de dedicarle más tiempo a llenar tu web con imágenes y textos de calidad.
  2. Cada plugin y cada plantilla tiene sus propios shortcodes. Así que al final es un auténtico lío saber qué pertenece a qué entre tanto código.

Elementor: la alternativa a los shortcodes

Con el page builder Elementor puedes en cambio escoger diferentes tipos de contenidos (imagen, texto, botones) y ponerlos donde quieras en tu web. Básicamente es un drag-and-drop en el que pintas tu web como tú quieras, sin necesidad de aprender código.

¿Te acuerdas del ejemplo de shortcodes de antes? Pues en el vídeo a continuación te muestro cómo usaría este editor visual para crear una página similar a la que saldría de usar esos shortcodes.

¿Mucho más sencillo no? 😀

Usar Elementor es más intuitivo. Y querrás utilizarlo sobretodo cuando tengas que maquetar páginas largas. O si te gusta controlar todos los aspectos del diseño de tu web.

¿Cómo editar con Elementor Page Builder?

Para que puedas hacerte una mejor idea de lo que es utilizar este maquetador visual, voy a describirte lo que aparece en la pantalla de ordenador siguiente.

En primer lugar, hay dos grandes áreas fáciles de identificar:

  1. En medio de la pantalla (1) ves la página que estás maquetando.
  2. A la izquierda (2) tienes la columna donde se genera toda la magia y que aparece cuando editas cualquiera de los elementos. Esta columna se compone por tres pestañas.

Antes de mostrarte las tres pestañas, permíteme presentarte tu nuevo amigo: el widget.

El widget: la pieza básica de Elementor

ejemplos de widgets elementor

La forma más sencilla de explicar qué es un widget es la siguiente: tienes un widget para cada tipo de contenido. Por ejemplo, tienes widgets para añadir una imagen, un texto, un mapa de Google, un listado o un contador.

Como has podido ver en el vídeo anterior, lo que haces es arrastrar un widget al centro de la pantalla y luego lo editas. Editar un widget es la forma de personalizar tu web.

Ahora sí, una vez claro el concepto de widget, puedes aprender cómo usarlo a través de sus tres pestañas de edición.

Las tres pestañas de un widget de Elementor

Pestaña “Contenido”

En la primera pestaña de un widget puedes editar todo lo que tiene que ver con el contenido y la funcionalidad.

Por ejemplo, los textos a mostrar, la dirección URL a la que enlazar o los iconos de redes sociales que quieres que aparezcan, dependiendo del widget. Digamos que en esta columna vas a indicar qué tiene que mostrar ese widget.

Pestaña “Estilo”

En esta segunda pestaña puedes indicar cómo se tiene que mostrar el contenido del widget.

Para mí, en esta columna reside gran parte del poder de Elementor. Puedes hacer que los widgets se vean como tú quieras. Sin escribir código, sin depender de la plantilla.

Puedes hacer que un mismo widget se vea completamente diferente en dos webs. Las opciones de personalización son tan potentes que difícilmente puedes adivinar que dos webs han sido maquetadas con Elementor, sin ver el código fuente de cada una.

¡Aquí es donde está la diversión, amigo! 😁

Pestaña “Avanzado”

En esta última pestaña puedes establecer cosas tan importantes como:

  • Márgenes y relleno para el widget, sección o columna.
  • Fondo en el caso de que quieras colocar una imagen.
  • Bordes.
  • Adaptabilidad: determina si ese widget se esconde en escritorio, móviles o tablet. Imagina que tienes un vídeo muy chulo pero que pesa lo suyo. Puedes establecer que se muestre sólo en escritorio (donde se presume una buena conexión a Internet) y en cambio no aparecer en móviles.

Ahora que has visto cómo se usa Elementor, veamos cuáles son los widgets que tienes a tu disposición.

Widgets incluidos en Elementor free

En este apartado vas a ver los diferentes widgets que tienes disponibles si escoges la versión gratuita de Elementor. Como todo plugin gratuito, puedes encontrarlo en el repositorio oficial de WordPress.

Más adelante ya analizaremos la versión de pago y los elementos exclusivos que trae.

Puedes verlos todos en la siguiente imagen:

Widgets de Elementor free

Como ves, hay un montón de widgets con los que puedes añadir muchos tipos de contenido distintos.

Pero déjame que te explique los ocho widgets con los que querrás empezar a jugar:

Encabezado y editor de texto

widget encabezado y editor de texto

Estos widgets sirven para poner respectivamente títulos y textos en la página. La gracia es que se puede dar mucho estilo, sobretodo a los encabezados, para que destaquen y llamen la atención.

Imagen

widget de imagen

A veces colocar una imagen puede ser un dolor de cabeza. Con este widget de Elementor podrás colocarla a tu gusto, recortarla, ponerle sombra… ¡lo que se te ocurra!

Galerías y carousel de imágenes

widget galeria de imágenes

La verdad es que las galerías y los carruseles de imágenes cada vez de usan menos. Sin embargo, cuando empiezas en esto el diseño web, es algo recurrente.

En la imagen puedes ver encima una galería de imágenes y debajo un carrusel. El segundo widget es el que está en modo de edición en la columna izquierda.

Icono

widget icono

Elementor free incluye la librería de iconos de FontAwesome. Las ventajas de utilizar iconos en vez de imágenes son tres:

  1. Ya tienes un repertorio de iconos, con lo que te ahorras el trabajo de subir imágenes.
  2. Al no pesar, los iconos no hacen que tu página web tarde más en cargar.
  3. Puedes modificar su tamaño sin que pierdan calidad.

Video

widget video

Este widget te permite insertar de una forma sencillísima vídeos de Youtube, Vimeo o autoalojados. Además, por si no quieres mostrar todo el vídeo, puedes especificar un momento de inicio y otro de finalización.

Iconos sociales

widget iconos sociales

Este widget es básico para poner tus redes sociales. Incluso puedes colorear cada red social con su color oficial o con el que tú quieras.

Shortcode

widget shortcode

Permite insertar un shortcode donde quieras. Muy útil si usas plugins que funcionan mediante shortcodes.

Ancla de menú

widget ancla de menú

¿Te gustaría poner en la parte superior de una página un botón que llevase a una sección situada más abajo? Pues necesitas el widget de ancla de menú.

En la imagen de encima puedes ver un texto de tarifas y encima una cajita gris. A esa cajita la he llamado tarifas (columna izquierda) así que para que el usuario baje hasta allí, basta con poner como dirección “#tarifas” en el enlace. Por ejemplo, en la parte superior de la página podría poner un botón “Ver mis tarifas”.

Cómo instalar Elementor Page Builder

La forma de instalar Elementor en WordPress es la misma que cualquier otro plugin. Te dejo un enlace a una entrada de blog de Pablo en la que te explica cómo instalar un plugin en WordPress. ¡Tienes tres formas de hacerlo!

Mi opinión de Elementor Page Builder

Como diseñadora web profesional, llevo años realizando webs con WordPress. A lo largo de este tiempo, he visto cosas de todos los colores. He trabajado con dos editores visuales y he “maquetado” webs mediante shortcodes.

Y lo cierto es que Elementor me encanta, sobretodo después de la versión 2.1 pues parece de otro planeta.

Sin embargo, más allá de mi impresión particular, creo que hay cuatro razones principales por las cuales deberías animarte a probarlo (recuerda que tiene una versión gratis):

  1. Da rienda suelta a tu creatividad. En comparación con otras soluciones, no tienes límites a la hora de maquetar. Puedes hacer (casi) todo lo que quieras para diseñarte una web que respire a ti y a tu negocio.
  2. Es un editor muy potente. Me refiero al hecho de que no importa qué tipo de web quieras hacerte. Seguramente tengas tus necesidades cubiertas.
  3. Permite diseñar una web rápidamente. El hecho de que Elementor sea un solución WYSIWYG y que funcione bajo el drag and drop, te ahorran muchas horas. Mi consejo es que este tiempo ahorrado lo emplees en llenar tu web con textos e imágenes relevantes para tu cliente potencial.
  4. Tiene un soporte excelente, lo cual es muy útil para solucionar las dudas que te van surgiendo.

Llegados a este punto, ya conoces bastante bien qué es Elementor y las posibilidades que te brinda. Pero como he comentado en algún momento, existe también una versión premium llamada Elementor Pro. A continuación, vas a ver en qué consiste y si vale la pena que la compres.

Elementor Pro: ¿qué es?

logo Elementor Pro

Como tantos otros plugins para WordPress, Elementor tiene una versión gratuita y una versión premium. Con la versión gratuita puedes hacer muchas cosas, pero con la versión premium puedes hacer prácticamente todo lo que imagines. De hecho, a continuación te voy a mostrar todo lo que Elementor Pro, que salió en diciembre 2016 (tan sólo medio año después que Elementor free) puede hacer.

Cómo instalar Elementor Pro en WordPress

Cuando tienes Elementor Pro tienes de hecho 2 plugins instalados: uno correspondiente a la versión gratuita y otro a la versión de pago. Así que la forma de instalar Elementor Pro es la misma que la de cualquier plugin. Antes te he dejado el enlace al blogpost en que Pablo te explica cómo.

Y si te estás preguntando cómo activar Elementor Pro a nivel de licencia, lo encontrarás en Elementor > License. Una vez la licencia activada, podrás actualizar Elementor Pro desde el panel de control de tu WordPress.

Widgets exclusivos de Elementor Pro

La versión de pago de Elementor pone a tu disposición muchos widgets extras interesantes.  Cómo utilizar Elementor Pro en WordPress se responde fácilmente: de la misma forma que la versión gratuita.

Estos son todos los widgets únicos de Elementor Pro:

widgets elementor premium

Ahora paso a mostrarte los seis widgets de Elementor Pro que creo son super útiles:

Posts

widget posts

Te permite tener una sección de blog que se alimenta automáticamente de los contenidos que vayas generando. Pero lo bueno es que puedes personalizar mucho el look del listado de entradas de blog.

En la imagen anterior, tan sólo he especificado que en dos columnas se muestren las 4 últimas entradas de blog. ¡Pero el abanico de posibilidades es mucho más amplio! 🌈

Formulario de contacto y de suscripción

widget formulario

Un formulario es un elemento básico de una web pues es indispensable para obtener algo de la misma:

  • Con un formulario de contacto de Elementor puedes recibir solicitudes de más información acerca de tus servicios.
  • Un formulario de suscripción te permite ir creando una lista a la que enviar tus proyectos, información interesante o alguna oferta.

Un punto super guay del formulario de Elementor es que se conecta con los servicios de email marketing más conocidos como MailChimp y Convertkit. De esta forma, alguien que rellene el formulario de suscripción en tu web será dado de alta automáticamente en el servicio que utilices. Mola, ¿verdad? 😬

Price list / Price table

elementor price table price list

En general, te recomiendo poner tus tarifas/precios en tu web. Al menos una cifra orientativa. Es una muestra de transparencia y además te permite evitar perder tiempo filtrando los contactos. El hecho es que Elementor te brinda una manera bastante elegante de presentarlas.

Tienes dos widgets para hacerte una tabla de tarifas. En la imagen superior puedes ver ambas, en el orden que te he comentado.

Carousel de testimonios

elementor testimonial carousel

Tal y como recomendamos en nuestro curso gratuito de WordPress, es importantísimo que pongas testimonios en tu web. Despiertan más confianza en tus clientes potenciales que el texto comercial que tú pongas.

Aunque existe un widget llamado Recomendación, a mi me gusta más el llamado Testimominal Carousel. El motivo es que puedes poner muchos testimonios sin que ocupen demasiado en la página.

Countdown

widget countdown de Elementor Pro

Ya sea para anunciar la próxima inauguración de tu web o la caducidad de una oferta, lo normal es que en algún momento te interese una cuenta atrás. Con el widget Countdown de Elementor Pro, lo tienes fácil.

Antes de poder utilizarlo, lo cierto es que el panorama era desolador si querías algo que te hiciera una cuenta atrás y fuera gratis. Sólo habían plugins complicados o que requerían mucha configuración. ¡Menudo alivio!

Share Buttons

share buttons

Este widget no tiene muchas opciones. Pero sirve perfectamente para que tus lectores compartan tus entradas de blog en las redes sociales.

Lo cierto es que Elementor Pro tienes aún más widgets interesantísimos. Puedes utilizarlos para crear plantillas y contenidos para WooCommerce, como te explico a continuación.

Theme Builder: crea tus plantillas con Elementor

Esta opción de Elementor Premium es una MA-RA-VI-LLA. Es aquello con lo que los que llevamos años trabajando con WordPress estábamos esperando que alguien hiciera.

Se trata de usar todo el poder de Elementor para crear plantillas para:

  • Cabecera y pie de página.
  • Entrada de blog.
  • Páginas de archivo del blog, como una categoría.
  • Producto de WooCommerce.
  • Páginas de archivo de WooCommerce.
  • Página 404.

Esto significa que Elementor toma el poder por encima de tu plantilla y define cuál es el diseño para cada uno de los puntos anteriores.  Por ejemplo, ésta es la plantilla que tenemos en SrMomo para cuando aparece un error 404 (página no encontrada):

plantilla 404 con Elementor Theme Builder

La gran ventaja del Theme Builder de Elementor es lo fácil que es editar cualquier cosa con este maquetador visual. Solamente tienes que coger un widget y arrastrarlo donde quieras: ¡en cualquier parte!. Sin necesidad de códigos PHP, sin modificar CSS.

Bueno, no sé si transmito bien el alcance de esto pero te lo resumo: brutal 🤩. Honestamente, creo que solamente esto ya vale mucho más de lo que cuesta el plugin.

Estos son todos los widgets que tienes a tu disposición para crear plantillas personalizadas:

 

De estos widgets, destaco los siguientes:

Para la header y el footer:

  • Debes tener en cuenta que la información de tu web se establece desde el apartado Personalizar. Luego Elementor “llamará” a los datos que hayas puesto ahí.
  • Site logo: permite colocar tu logotipo en la cabecera.
  • Search form: aparece una lupa en la que el usuario puede buscar en tu web. Aparecerá una página de resultados con entradas y páginas relacionadas.
  • Menu cart: aparece un icono en el que se ve la cantidad o el número de items en el carrito de WooCommerce. Al hacer clic aparece el carrito en modo Ajax supermolón. Te dejo un ejemplo real de una web que yo misma diseñé. En la imagen se ve lo que sucede tras hacer clic sobre la opción:

menu cart de Elementor Pro

Para las entradas de blog y archivo del blog:

  • Debes tener en cuenta que realizarás la plantilla con Elementor. Sin embargo, luego usarás el editor normal de WordPress para escribir tus entradas.
  • Author Box: muestra una cajita con la información del autor del blogpost. Es muy customizable y coge los datos de tu perfil de usuario. Puedes ver un ejemplo al final de esta entrada.
  • Post info: muestra la metadata del blogpost que tú elijas: fecha de publicación, autor, categorías, etiquetas, etc. Puedes escoger varias metadatas a la vez.

Para WooCommerce (el plugin para ecommerce de WordPress):

  • Debes tener en cuenta que la información de los productos la seguirás poniendo desde el editor de WordPress y no desde Elementor. Elementor solamente dirá cómo tiene que mostrarse esa información.
  • De estos widgets no sabría cual destacar. Todos me parecen fantásticos. Si has trabajado con WooCommerce ya sabes que es muy difícil hacer que dos tiendas online no se parezcan entre ellas usando la misma plantilla. Así que me parece que todo lo que tiene que ver con customizar WooCommerce es un unicornio con una crin de arco iris corriendo por un prado lleno de flores silvestres que huelen a suavizante de ropa. Dicho de otra forma, es para quedarse así:

Un tema: ¿es necesario si uso el theme builder de Elementor?

Si has leído el punto anterior puede que te preguntes para qué quieres un template si con Elementor ya puedes definir el header, el footer y las plantillas de los diferentes tipos de contenidos. Bien, para empezar, todas las instalaciones de WordPress necesitan un tema o plantilla. Elementor es un plugin y por lo tanto no sustituye a los templates.

En resumen, la respuesta es que sí: aunque utilices Elementor, necesitas un tema.

Eso sí, al tener Elementor definiendo casi todo lo que tiene que ver con el aspecto de tu web, puedes escoger un tema muy sencillo, incluso uno gratuito. Mi preferido es GeneratePress, el cual tiene una versión gratuita y otra de pago. En esta otra entrada de blog encontrarás un tutorial super completo sobre GeneratePress.

Elementor Page Builder vs Elementor Pro: las diferencias

Como has podido ver a lo largo de este blogpost, existen muchas diferencias entre la versiones gratuita y premium de Elementor. Si las comparamos, para mi éstas son las 3 diferencias más importantes:

  1. Más widgets disponibles. Con Elementor Pro no sólo tienes disponibles un mayor número de widgets que con la versión gratuita. Además, éstos son indispensables, como el widget de formulario. Dicho formulario te permite además integrar tu web con otros servicios como MailChimp, en los que dar de alta suscriptores automáticamente.
  2. El game changer que supone Theme Builder. Con la versión gratuita no lo tienes incluido. Te lo he explicado en el punto anterior. Pero básicamente es la caña.
  3. Un sinfín de plantillas bien hechas. A mi particularmente me gusta hacer diseños más personalizados. Pero he de admitir que algunas plantillas de Elementor Pro están muy bien diseñadas. Eso las convierte en ideales para hacer rápidamente una web o si no tienes idea de diseño. Debajo te dejo una imagen con unas pocas plantillas para que veas de qué hablo.

Review Elementor Pro Librería

Mi opinión sobre Elementor Pro

Después de todo esto que te he explicado, ya puedes hacerte a la idea de lo que opino: me encanta. Durante todos los años que llevo realizando webs con WordPress, he visto de todo y he maquetado tanto con shortcodes como con editores visuales.

Creo que Elementor es un maquetador visual muy potente, y que la gran mayoría de webs tienen unas necesidades fácilmente cubiertas con él. Además, tiene un soporte excelente y un foro de usuarios muy amplio en el que nos ayudamos entre nosotros.

¿Cuánto cuesta Elementor Pro?

Es muy probable que las virtudes de Elementor Pro te resulten ya muy interesantes. Pero claro, el precio es importante. Ahora mismo, el coste es de 49$ en el plan personal que te permite utilizar esta maravilla en un único sitio web. Creo que esta licencia es suficiente para la gran mayoría de proyectos que se reducen a diseñar una web.

El precio a mí me parece muy razonable para todo lo que puedes hacer con Elementor Pro:

  1. Personalizar tu web tanto como quieras.
  2. Utilizarlo es hasta divertido pues puedes dar rienda suelta a tu creatividad sin preocuparte por saber de códigos.
  3. ¡El tiempo que te ahorras por no tener que instalar varios plugins y configurarlos!

Si dudas, siempre puedes empezar con la versión gratuita y si te convence, pasar a la versión de pago.

Y si estás pensando en pillarte Elementor Pro por todo lo que te he comentado en esta entrada de blog, te agradecería que lo hicieras a través de un enlace nuestro de afiliación. De esta forma, nosotros nos llevaremos una comisión por haberte recomendado este maquetador. ¡Y sin que a ti te cueste nada!

Como siempre, nosotros recomendamos las herramientas que utilizamos en nuestro a día a día. Lo hacemos de forma honesta y en base a nuestra experiencia. Si además nos llevamos una pequeña comisión, pues estupendo. Pero para nada esto influye en lo que opinamos y utilizamos.

¿Lo tienes claro? Haz clic aquí ⬇️

>> Sí, quiero comprar la versión Pro de este editor visual <<

Si compras Elementor Pro a través de un enlace nuestro: ¡muchas gracias! 😘

Addons para Elementor

A veces no es suficiente con todo lo que traen Elementor y Elementor Pro y necesitamos añadir algun “extra”. Dependiendo de lo que quieras hacer necesites una extensión (o addon) para Elementor. Pero en general, el 90% de las webs que yo misma he hecho no han necesitado ninguna extensión para verse de-la-leche 🐮.

Estos addons para Elementor pueden ser widgets nuevos o más opciones para los widgets existentes. Los más conocidos son:

De estos 3 que te he mencionado, solamente he usado Elementor Extras by Namogo y he de decir que le dan un toque muy chulo a las páginas. Un extra de picante, para que nos entendamos.

Los contras de usar este tipo de Addons es que cuando hay una actualización fuerte de Elementor, pueden causar problemas en tu web. Deberás esperar a que actualicen el Addon para realizar las dos actualizaciones a la vez. Pero bueno, sabiéndolo, es cuestión de programarse la actualización de la web y tener paciencia 🙂

Yo te recomiendo sacarle todo el jugo a Elementor (que tiene mucho) y si crees que necesitas más, entonces mirar algún addon. Pero probablemente no lo necesites.

Preguntas más frecuentes sobre Elementor

En esta sección del blogpost voy a responder a las dudas más recurrentes. ¡Quizás alguna te sea útil y así tengas más claro el utilizarlo!

¿Son compatibles Elementor y WPML?

Si te estás haciendo esta pregunta es porque te interesa tener una web en varios idiomas. Y para ello, el plugin más utilizado (también por nosotros) es WPML.

La respuesta es que sí, puedes traducir sin problemas tus páginas maquetas con Elementor utilizando WPML. Si te interesa saber más, aquí tienes más información.

¿Qué tal se llevan Elementor y Yoast SEO?

Seguramente una de las cosas que más cuesta lograr es que una web se posicione arriba. Así que con esto en mente, te voy a comentar la relación entre Elementor y SEO. Lo cierto es que trabajar con Elementor o con otro maquetador visual no determina tu posición en los resultados de Google. Pero como todo, influye.

¿Cómo Elementor favorece tu posicionamiento SEO? Pues básicamente estando bien hecho. Con esto quiero decir que el código que conforma Elementor es limpio y está pensado para que tu web vaya rápida. Y justamente es esto, la velocidad de tu web, lo que representa una de las muchas variables del SEO. Una web rápida gusta a los usuarios y por lo tanto a Google.

¿Puedo poner en Elementor ancho completo?

Sí puedes. El ancho completo es algo muy utilizado para jugar con las formas y tener así una web visualmente interesante. Se trata de que haya algunas cosas que ocupen toda el ancho de la pantalla mientras que otras estén encajonadas.

Por ejemplo, en la imagen a continuación puedes ver cómo el color del fondo de la sección está a ancho completo mientras que el texto está encajonado:

ejemplo ancho completo elementor

¿Se puedo hacer en Elementor parallax?

El parallax es una tendencia de diseño web muy llamativa. Consiste en que diferentes elementos se muevan a una velocidad diferente mientras haces scroll hacia abajo. Seguro que has visto muchos de ellos navegando por Internet. Lo más habitual es que una imagen de fondo se quede quieta en la pantalla mientras los textos sí se mueven al hacer scroll vertical.

Dicho de otra forma, el parallax es una de las maneras de conseguir fondos con efectos. Y respondiendo a la FAQ, sí, te basta con Elementor para crear efectos parallax.

¿Qué es Elementor canvas?

En ocasiones quieres diseñar una página de arriba a abajo, sin que aparezcan la cabecera ni el pie de página. Esto es lo que permite Elementor canvas, lo cual es ideal para hacer una landing page. ¡Un problema menos!

Comparativas del plugin Elementor con otros maquetadores visuales

Como sé que hay otros editores visuales de los que has podido escuchar algo. Me parece lógico el compararlos con Elementor. Así puedes ver cuál te conviene más.

Elementor vs. Visual Composer

Visual Composer, hoy en día llamado WP Bakery Page Builder, ha sido durante años el editor más popular. En este apartado lo vas a conocer un poco pero mi objetivo es compararlo con Elementor.

He usado ambos editores visuales en varios proyectos, por lo que te puedo dar una opinión sincera de cual creo que es, en general, mejor. Voy a analizar varios aspectos que para mí son importantes.

Widgets

Si vemos el número absoluto de diferentes widgets que tiene cada uno, más o menos tienen los mismos (unos 50). Pero a mi me parece que los de Elementor son mucho más versátiles.

Por ejemplo, en relación a los formularios de contacto:

  • Visual Composer tiene varios widgets que conectan el maquetador con plugins de terceros. De esta forma, tienes un widget para contact Form 7, otro para Ninja Forms, etc.
  • Elementor tienes un widget de formulario de contacto que funciona de forma independiente. ¡No necesitas usar otro plugin para ello! Por si fuera poco, te recuerdo que el widget de formulario de Elementor se integra con herramientas de email marketing como MailChimp.

En cuanto a la personalización de los widgets, ambos tienen muchas opciones. Pero Elementor es más intuitivo, puesto que la columna de estilo te permite modificar cosas que Visual Composer no te permite. Eso sí, ambos permiten aplicar CSS customizado a cada widget, pero hay que saber código.

Velocidad

Por velocidad podemos entender dos cosas: velocidad de la carga de la página o velocidad en el desarrollo de la página. Por suerte, Pagely ha hecho un gran análisis sobre este tema, el cual te resumo:

  • En velocidad de carga, Visual Composer gana la partida. Pero considero que la diferencia (un 18% más veloz) no es la suficiente como para declinarte por él. ¿Porqué? los tiempos de desarrollo y la curva de aprendizaje son más largos en Visual Composer. Dicho de otra forma, aprenderás antes a dominar Elementor y con él diseñarás webs más rápidamente.
  • En velocidad de desarrollo, el ganador es claramente Elementor. En el análisis, la misma página se desarrolla un 33% más rápido en Elementor que en Visual Composer. Si tienes que diseñar muchas páginas, vas a agradecer esas horas de más 😉.

Interfaz de usuario

Vamos a comparar ahora la pinta que tienen ambos editores cuando los usamos para diseñar una página. Vamos a ver un ejemplo de cada uno, tal y como los propios autores nos lo presentan.

Visual composer tiene dos formas de editar una página:

  1. Desde el editor de backend:

  1. Desde el editor de frontend

En cambio Elementor solamente tiene una forma de editar una página:

Para mí, la interfaz de Elementor es mucho mejor que la de Visual Composer si te gusta ver los cambios en vivo (lo cual creo que es lo más habitual). Si en cambio prefieres editar usando el Backend (sin ver el resultado de lo que estás haciendo), entonces Visual Composer es para ti.

Qué ocurre cuando desactivas ambos plugins

He aquí el quid de la cuestión. Éste es el punto por el cual acabé descartando Visual Composer de todos mis proyectos.

El hecho es que todos los editores visuales generan código para mostrar el diseño, pero Elementor es el único que elimina estos shortcodes una vez desactivas el plugin. ¡Veamos un ejemplo!

  • Página diseñada con Elementor (plugin activado):

página con elementor activado

  • Página anterior con el plugin de Elementor desactivado:

  • Misma página pero esta vez diseñada con Visual Composer (plugin activado):

ejemplo de página editada con Visual Composer

  • Mira cómo  se ve la página al desactivar el plugin de Visual Composer 😱:

Quiero que te fijes en el resultado de ambas páginas una vez desactivas el plugin:

  • Con Elementor la página aparece el texto y las imágenes sin formato.
  • En cambio, con Visual Composer se genera cantidad de código basura que tendrás que borrar manualmente.

Por este motivo dejé de realizar webs con Visual Composer. Nunca se sabe porqué vas a tener que desactivar el page builder. Imagina que simplemente quieres dejar de trabajar con él y pasarte a otro.

Cambiar de maquetador visual cuando has usado Visual Composer (o cualquier otro) es un martirio, porque tienes que borrar un mónton de código basura. En cambio con Elementor no supone ningún tipo de trabajo extra.

Elementor vs. Avada

¿Quieres saber qué opino sobre Elementor vs. Avada? Ante todo debes saber que estuve usando Avada varios años. Esto significa que me gané la vida diseñando páginas con Avada. Pero, ¿sabes qué? Al final me decanté por Elementor por los mismos motivos explicados en el punto anterior.

La razón más importante: Avada también te deja código basura. Sin embargo, hay otro motivo importante: Avada con editor visual es una plantilla que tiene unos tiempos de carga demasiado lentos para mi gusto.

Elementor vs Gutemberg

Hace relativamente poco, WordPress sacó una actualización importante. Supone que toda nueva instalación de WordPress trabajará por defecto con un maquetador propio de WordPress, llamado Gutemberg. Lo bueno es que es completamente gratuito.

Entonces te preguntarás: ¿para qué necesito yo otro editor? Pues porque Gutenberg es demasiado sencillo. No te deja realizar customizaciones ni poner todo “como a ti te de la gana”. Es algo gratuito, un paso adelante seguramente para muchos usuarios de WordPress.org. Pero si tu idea es tener una web con un aspecto profesional, se queda muy corto.

Otras comparativas

Podría seguir comparando Elementor con otros page builders que realizan la misma función de maquetación visual. Ya sea con plugins como Divi, Thrive Architect (el antiguo Thrive Builder) o Beaver Builder (muy utilizado con el template llamado Astra) o con webs tipo Wix. Seguramente querrías saber qué opino sobre todos ellos.

No obstante, la verdad es que nunca los he usado. Todos ellos son populares y seguro tendrán sus puntos fuertes. Sobretodo el antiguo Thrive Builder pues parece tener muchas similitudes. Pero en SrMomo estamos para recomendarte exclusivamente en base a nuestra experiencia profesional. Al no haberlos utilizado, no me siento legitimada a opinar sobre ellos.

¿Qué editor visual es el mejor?

Lo cierto es que no hay uno que de forma objetiva y en base a un análisis científica sea el mejor. Es como querer saber cuál es la mejor serie del momento: va por gustos. También puedes probar las diferentes versiones gratuitas y evaluar con cuál te sientes más cómodo.

Eso sí, Elementor es para mi el mejor page builder para WordPress. O puedo decirlo en inglés, que mola más: the best page builder for WordPress. Es muy fácil de usar y me da mucha más confianza realizar proyectos con él.

¿Por qué? Sé que Elementor no me va a dar problemas el día de mañana si tuviera que prescindir de él y utilizar otro editor.

En conclusión

Como todo en la vida, esto se acaba. Tan sólo espero que este tutorial análisis a fondo o review sobre Elementor y la comparativa entre la versiones gratuitas y de pago te hayan sido super útiles. Si es así, me doy por mega satisfecha 😊

Me encanta Elementor y sobretodo combinarlo con GeneratePress. Creo que es el resultado es la bomba y super responsive. Si te interesa, tenemos un curso completo de diseño con WordPress con el que, entre otras cosas, aprenderás a dominar este combo explosivo.

En cualquier caso, yo por mi parte, lo dejo aquí. Muchas gracias por leer!

¿Qué te ha parecido esta review con opinión? ¿Te ha ayudado a decidirte a utilizar Elementor?

¿Te ha gustado esta entrada de blog? Dale 5 estrellas. ¡Gracias!

Elementor Page Builder: Review y comparativa con Elementor Pro
5 (100%) 1 voto

¡Hola! Soy quien ha escrito este post con cariño

Carolina López

Carolina López

Me encanta asociar la publicidad y el diseño web: creo webs que atraen a los usuarios y que son capaces de vender una estufa en el desierto. Todo ello sin olvidar una estética cuidada, cálida y bastante personal.

Déjame un comentario si te apetece y lo responderé personalmente :)

Deja un comentario

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

Información básica sobre protección de datos:
Responsable: Estudio Momo Comunicación, S.L. (SrMomo).
Finalidad: Moderar y responder comentarios de usuarios.
Legitimación: Consentimiento del interesado.
Destinatarios: No se cederán a terceros salvo obligación legal.
Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: info@srmomo.com.
Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos aquí.

El curso "Los 6 primeros pasos para que triunfes con tu web" consta de:

  • 6 super lecciones enviadas directamente a tu bandeja de entrada.
  • 4 ebooks descargables con los aspectos esenciales de todo proyecto de éxito en Internet.
  • 1 hoja de trabajo que te ayudará a organizarte y a plantearte todos los aspectos clave para tu éxito.

Información básica sobre protección de datos:
Responsable: Estudio Momo Comunicación, S.L. (SrMomo).
Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico.
Legitimación: Consentimiento del interesado.
Destinatarios: No se cederán a terceros salvo obligación legal.
Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: info@srmomo.com.
Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos aquí.

No enviamos spam y puedes darte de baja cuando quieras.

Únete a la comunidad de SrMomo

Y recibirás nuestro curso gratuito de WordPress

Compartir1
Twittear
Compartir