An√°lisis de Elementor y Elementor Pro

Elementor es un maquetador que permite dise√Īar una web en WordPress controlando c√≥mo se presentan los contenidos. Todo ello sin tener que usar c√≥digos y de forma f√°cil y muy visual.

A este tipo de plugins se les conoce tambi√©n como page builders (en espa√Īol, contructores web) o editores visuales. Y resulta que Elementor se lleva el premio gordo: es el maquetador m√°s usado de WordPress.

Elementor no es un tema ni una plantilla. De hecho, consiste en dos plugins: uno gratuito (Elementor Page Builder) y otro de pago (Elementor Pro) que extiende las funcionalidades del primero.

En este an√°lisis de Elementor conocer√°s sus bondades y te explico los extras que aporta Elementor Pro, para que juzgues si te interesa pillarlo.

Adem√°s, como dise√Īadora web que lo ha utilizado en muchos proyectos, tambi√©n incluyo mi opini√≥n de Elementor.

Aviso: esto no es un tutorial. Con este post no aprender√°s a utilizar Elementor.

¬°Empecemos! ūüí™

elementor análisis opinión

Elementor y Elementor Pro a grandes rasgos

A continuación resumo en una tabla las características más importantes de Elementor y Elementor Pro.

Es una buena forma de entrar suavemente en materia, ¬Ņverdad?

Nombre completo:Elementor Page Builder
Fecha de lanzamiento:1 de junio de 2016
Para qu√© sirve Elementor:Permite dise√Īar una web en WordPress controlando c√≥mo se muestra el contenido.
Instalaciones activas:+ de 4 millones.
Calificación:4,9/5 a partir de +5.100 votos.
Precio Elementor:Gratis.
URL repositorio oficial:https://es.wordpress.org/plugins/elementor/
¬ŅQu√© es Elementor Pro?Es un plugin adicional, de pago, que a√Īade funcionalidades.
Top 4 extras de Elementor proFormulario | Theme Builder | Popup Builder | WooCommerce Builder
Recomendación SrMomoTotalmente. Razones y opinión de Elementor Pro más abajo.
Precio Elementor Pro:49$ / a√Īo (Personal – 1 web) | 99$ / a√Īo (Plus – 3 webs) | 199$ / a√Īo (Expert – 1.000 webs)
URL Elementor Prohttps://elementor.com/pro/

¬ŅQu√© es Elementor?

elementor logo

Elementor es un maquetador de WordPress cuyos creadores son Yoni Luksenberg y Ariel Klikstein. El equipo tras Elementor ha pasado de dos personas en 2016 a m√°s de treinta hoy en d√≠a.

No obstante, probablemente a ti te interese saber más bien qué puede hacer este editor visual por ti.

¬ŅPara qu√© sirve Elementor?

Imagino que est√°s aqu√≠ porque quieres dise√Īar la web de tu negocio y tienes en mente una cuesti√≥n delicada: no sabes nada de c√≥digo. Eso del HTML y del CSS te queda lejos.

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, que le dar√° a tu negocio un aire est√°ndar, del mont√≥n.

Pero t√ļ quieres dise√Īar tu web a tu gusto.

¬ŅVerdad?

Aquí es donde Elementor entra en juego.

creadores de Elementor

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.

¬ŅC√≥mo lo consigue?

Elementor es un editor visual, un constructor de p√°ginas web que funciona bajo el concepto WYSIWYG (en ingl√©s, What You See Is What You Get).

De esta forma, puedes dise√Īar tu web viendo lo mismo que ver√° la persona que la visite.

La imagen a continuación te muestra cómo se usa Elementor:

ejemplo de cómo utilizar Elementor

Como puedes apreciar, el funcionamiento es intuitivo y altamente visual.

¬ŅPor qu√© Elementor fue revolucionario?

Antes de existir soluciones visuales como Elementor para dise√Īar una web en WordPress, la maquetaci√≥n se hac√≠a b√°sicamente a trav√©s de shortcodes.

Lo cual era un rollo patatero. ūüėę

¬ŅQu√© diantres es un shortcode?

Es un código que ponemos en el editor de WordPress y que inserta algo en la parte visible de 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 shortcodes wordpress

Actualmente los shortcodes ya no se utilizan para maquetar una p√°gina. Estas son las dos principales razones:

  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 supuso una alternativa a los shortcodes.

Un editor visual es b√°sicamente es un drag-and-drop con el que pintas tu web como t√ļ quieras, sin necesidad de aprender c√≥digo.

Atento al vídeo a continuación. En él te muestro cómo usar Elementor para crear lo mismo que saldría con los shortcodes de ejemplo que te he puesto antes.

¬ŅMucho m√°s sencillo no? ūüėČ

¬ŅC√≥mo funciona Elementor Page Builder?

Para que puedas hacerte una mejor idea de cómo editar con Elementor, voy a describirte lo que aparece en la pantalla de ordenador siguiente:

cómo funciona Elementor

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

  1. En medio de la pantalla ves la p√°gina que est√°s maquetando.
  2. A la izquierda 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

widgets de 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, y dependiendo del widget, los textos a mostrar, la dirección URL a la que enlazar o los iconos de redes sociales que quieres que aparezcan. Digamos que en esta columna vas a indicar qué tiene que mostrar ese widget.

Pesta√Īa ¬ęEstilo¬Ľ

columna de estilo de Elementor

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.

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.

¬°En esta pesta√Īa es donde est√° la diversi√≥n, amigo!

Pesta√Īa ¬ęAvanzado¬Ľ

columna avanzado de elementor

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.

Los 5 widgets de Elementor más usados (versión gratuita)

En este apartado vas a ver los diferentes widgets que tienes disponibles si escoges la versión gratuita de Elementor. Más adelante ya analizaremos la versión de pago (Elementor Pro) y los elementos exclusivos que trae.

Puedes verlos todos en la siguiente imagen:

elementor page builder widgets

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

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

#1 Encabezado y editor de texto

widget de Elementor de editor de texto y encabezado

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.

#2 Imagen

widget de Elementor 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!

#3 Galerías y carousel de imágenes

widget de Elementor de galería de imágenes y carrusel de imágenes

La verdad es que las galer√≠as y los carruseles de im√°genes cada vez se usan menos. Sin embargo, cuando empiezas en esto el dise√Īo web, es algo recurrente.

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

#4 Vídeo

widget de elementor de vídeo

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.

#5 Iconos sociales

widget de elementor de 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.

Con Elementor también puedes dar estilo a tu plantilla

A principios de 2020 Elementor nos soprendió con una nueva feature muy interesante: Theme Style.

Se trata de personalizar el estilo de tu tema desde el propio Elementor.

Theme Style te permite usar todo el poder de Elementor para personalizar tus textos, encabezados, botones, formularios e im√°genes de forma global.

¬ŅQu√© te ahorras?

Por ejemplo, tener que dar estilo a cada texto, aunque el estilo que quieras aplicar a cada texto sea el mismo.

Personalmente me parece algo espectacular. Un game changer como suele decirse.

elementor theme style

Dicho de otra manera, estos elementos de dise√Īo que normalmente los define la plantilla, ahora podr√°s hacerlo desde el mismo Elementor, si quieres.

Con todo lo que ello implica: facilidad de realizar cambios, opciones infinitas de dise√Īo, efectos hover, y muchas m√°s posibilidades.

Y por si fuera poco, para más inri, esta feature está incluida en la versión gratuita de Elementor.

Debo repetirlo: esto supone un cambio brutal en el campo de juego. Hace que muchas plantillas de WordPress queden completamente obsoletas y sean innecesarias.

Y supongo que ahora te har√°s la gran pregunta:

¬ŅNecesitas una plantilla si usas Theme style de Elementor?

La respuesta es que sí. Más abajo, en la sección de preguntas frecuentes te lo explico.

Mi opinión de Elementor Page Builder

Como dise√Īadora web, llevo a√Īos realizando webs en WordPress. A lo largo de este tiempo, he visto cosas de todos los colores. He ¬ęmaquetado¬Ľ webs mediante shortcodes y he trabajado con varios editores visuales.

Y lo cierto es que Elementor me encanta. Te lo recomiendo totalmente.

Sin embargo, más allá de mi impresión particular, creo que hay tres razones principales por las cuales deberías animarte a probar Elementor (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 ahorra muchas horas. Mi consejo es que este tiempo lo emplees en llenar tu web con textos e im√°genes relevantes para tu cliente potencial.

Llegados a este punto, ya conoces bastante bien qué es Elementor y las posibilidades que te brinda.

Pero como he comentado anteriormente, 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.

Ahora s√≠: ¬Ņqu√© es Elementor Pro?

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, tal y como has podido ver más arriba.

Pero con Elementor Pro puedes hacer pr√°cticamente todo lo que imagines.

Los 5 mejores widgets exclusivos de Elementor Pro

La versi√≥n de pago de Elementor pone a tu disposici√≥n muchos widgets extras interesantes. En esta imagen puedes ver un listado con todos ellos:

widgets de elementor pro

Ahora paso a mostrarte los cinco widgets de Elementor Pro que creo son super √ļtiles:

#1 Formulario de contacto y de suscripción

widget de elementor pro de formulario

Un formulario es un elemento básico de cualquier una web. Existen muchos plugins específicos para esta funcionalidad. Así que no necesitarías Elementor Pro para crear un formulario.

Sin embargo, el widget Formulario de Elementor Pro te permite crear, de forma visual y f√°cil, dos tipos de formularios:

  1. Formulario de contacto: recibe solicitudes de más información acerca de tus servicios o directamente peticiones de presupuesto.
  2. Formulario de alta en newsletter: crea una lista de suscriptores a la que enviar tus proyectos, ofertas y entradas de blog.

Un punto super guay a favor del formulario de Elementor es que se conecta con los servicios de email marketing m√°s conocidos como MailChimp y MailerLite.

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? ūüėČ

#2 Listado y tabla de precios

widget de Elementor Pro de Tabla de precios y listado

En general, te recomiendo poner tus tarifas o precios en tu web. Al menos una cifra orientativa. Es una muestra de transparencia y también te permite evitar perder tiempo filtrando los contactos.

El hecho es que Elementor Pro te brinda una manera bastante elegante de presentar tus n√ļmeros, a trav√©s de dos widgets que puedes ver en la imagen. Por orden: listado de precios y tabla de precios.

#3 Carousel de testimonios

widget de elementor pro de testimonios

Es important√≠simo que pongas testimonios en tu web. Estos despiertan m√°s confianza en tus clientes potenciales que el texto comercial que t√ļ pongas, por muy bueno que sea.

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

#4 Countdown

widget de elementor pro de cuenta atr√°s

En un primer momento, puede que poner una cuenta atrás en tu web no sea algo que te llame la atención.

Pero el d√≠a que la necesites (por ejemplo, para poner una caducidad a un descuento o a una oferta), te dar√°s cuenta que hay un mont√≥n de plugins que dicen hacerlo pero que pocos lo hacen de forma sencilla y gratuita. Y ninguno te permite dise√Īar una cuenta atr√°s a tu gusto.

Con el widget Countdown de Elementor Pro, lo tienes f√°cil.

#5 Share Buttons

widget de elementor pro de compartir en redes sociales

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

A diferencia de la cuenta atrás, sí hay otras opciones válidas que te dan esta funcionalidad de compartir en redes sociales. Sin embargo, el widget de Elementor Pro te evita tener que instalar un plugin extra.

Lo cierto es que en 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.

Los dos extras revolucionarios de Elementor Pro

Theme Builder: crea tus plantillas con Elementor Pro

Qué es Theme Builder y por qué te va a gustar

Esta opci√≥n de Elementor Pro es una maravilla. 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):

elementor pro theme builder plantilla 404

La gran ventaja del Theme Builder de Elementor Pro es lo f√°cil que es editar cualquier cosa con este maquetador visual.

Solamente tienes que coger un widget y arrastrarlo donde quieras. 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 premium.

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

Los mejores widgets de Theme Builder

De todos los widgets del Theme Builder de Elementor Pro, destaco los siguientes:

Para la plantilla del header y el footer:

  • 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: coloca un icono en la cabecera en el que se ve el n√ļmero de productos en el carrito de compra. Al hacer clic en √©l se despliega el carrita por la derecha de una forma muy chula. Te dejo un ejemplo real de una web que yo misma dise√Ī√©. En la imagen se ve lo que sucede tras hacer clic sobre el widget:
elementor pro theme builder widget menu cart

Para la plantilla de entradas de blog y archivo del blog:

  • 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.
  • Post info: muestra las metadatas del blogpost que t√ļ elijas (fecha de publicaci√≥n, autor, categor√≠as, etiquetas, etc.).
widget post info del theme builder de elementor pro

Para la plantilla de una ficha de producto en WooCommerce:

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 con el mismo tema no se parezcan entre ellas.

Así que todo lo que tenga que ver con customizar la apariencia de WooCommerce me parece un unicornio con una crin de arco iris corriendo por un prado lleno de flores silvestres que huelen a suavizante de ropa.

Elementor Pro ha ido incorporando en su Theme Builder tantos widgets específicos para WooCommerce que a día de hoy ya lo separa. Este es el origen del WooCommerce Builder.

Popup Builder: crea modales con Elementor Pro

Los modales, también conocidos como popups, son aquellas ventanitas que aparecen mientras visitas una página web. Habitualmente sirven para captar suscriptores para una newsletter o para informarte de un descuento.

Si has intentado hacer modales con WordPress probablemente hayas visto e incluso probado alguno de los plugins específicos para ellos. Por ejemplo, OptinMonster, Sumo o Thrive Leads.

Hay dos cosas que yo siempre quise mejorar de cualquiera de ellos:

  • M√°s f√°cilidad de uso. Para aprender a usar alguno de ellos deb√≠as dedicarle mucho tiempo. Demasiado.
  • Mayor personalizaci√≥n. Los popups resultantes sol√≠an tener una apariencia distinta a la de la web.

Hasta que Elementor Pro sacó su Popup Builder.

Y no eche la mirada atr√°s.

Desde entonces uso Elementor tambi√©n para los popups de mis proyectos. Saco provecho de ya conocer este maquetador, de su poder de dise√Īo y de su facilidad de uso. Sin mencionar el ahorrarme tener que instalar otro plugin, lo cual siempre afecta a la velocidad de carga de la web, poco o mucho.

Ahora es tan solo cuestión de echarle imaginación pues las posibilidades son muchas:

Adem√°s de ayudarte a dise√Īar los modales de tus sie√Īos, Popup Builder cuenta con mogoll√≥n de opciones de configuraci√≥n.

Las más interesantes, para mí, permiten que el modal:

  • Aparezca tras X segundos desde la carga de la p√°gina.
  • Salga al pasar un % de scroll vertical en la p√°ginas.
  • Se lance cuando el usuario hace clic en un enlace o en un bot√≥n.
  • Aparezca cuando el usuario intenta irse de la web.
  • Solamente es visible en ciertas p√°ginas.

¬°Una pasada!

Elementor 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 4 diferencias más importantes entre Elementor y Elementor Pro:

  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 que te sirve para contacto o para alta en newsletter.
  2. El game changer que supone Theme Builder. Con la versi√≥n gratuita Elementor Page Builder no lo tienes incluido. Pero como te he mostrado anteriormente, Theme Builder es b√°sicamente la ca√Īa.
  3. Popup Builder. Es la característica exclusiva de Elementor Pro que te explico en el punto previo. Le sacarás partido, seguro.
  4. 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.
elementor pro plantillas

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.

¬ŅElementor Pro? Me encanta.

Creo que Elementor es un maquetador visual muy potente y que podr√°s hacer lo que quieras con el dise√Īo de tu p√°gina web. Adem√°s, tiene un soporte excelente y un ritmo de actualizaciones brutal.

Si a ello le a√Īadimos los extras que aporta Elementor Pro, para mi es la soluci√≥n para personalizar una web como quiera.

Preguntas m√°s frecuentes sobre Elementor y Elementor Pro

¬ŅCu√°nto cuesta Elementor Pro?

elementor pro precios

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 sola web.

El precio de Elementor Pro me parece muy razonable considerando todo lo que puedes hacer con él:

  1. Personalizar tu web tanto como quieras.
  2. Dar rienda suelta a tu creatividad sin preocuparte por saber de códigos. Utilizarlo es hasta divertido.
  3. ¬°El tiempo que te ahorras por no tener que instalar m√ļltiples plugins y configurarlos!

Si estás pensando en pillarte Elementor Pro por todo lo que te he comentado, te agradecería que lo hicieras a través de nuestro enlace de afiliación. De esta forma, nosotros nos llevaremos una comisión por haberte recomendado este maquetador 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 Elementor Pro y premiarte por tu artículo <<

¬ŅEs necesario un tema o plantilla si uso Elementor?

Si has leído el artículo, puede que te preguntes para qué quieres un theme si con Elementor ya puedes definir el header, el footer, las plantillas de los diferentes tipos de contenidos y hasta el estilo global de toda tu web.

Bien, para empezar, toda instalación de WordPress necesita un tema o plantilla. Elementor es un plugin y por lo tanto no sustituye a los temas.

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.

Pero mi preferido es GeneratePress (haz clic para más información).

¬ŅQu√© tal se llevan Elementor y el 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 el 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.

Comparativas de 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

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.

A continuación 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.
  • Con 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.

Te resumo el gran an√°lisis que hizo Pagely sobre este tema en 2019:

  • 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:

Desde el editor de backend:

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.

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 que 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! La misma p√°gina dise√Īada con ambos maquetadores. Veamos qu√© sucede al desactivar cada plugin y c√≥mo queda la p√°gina.

P√°gina dise√Īada con Elementor activado:

ejemplo de p√°gina con Elementor activado

Misma p√°gina con Elementor desactivado:

ejemplo de p√°gina con Elementor desactivado

P√°gina dise√Īada con Visual Composer activado:

ejemplo de p√°gina con Visual Composer activado

Misma p√°gina con Visual Composer desactivado: ūüėĪ

ejemplo de p√°gina con Visual Composer desactivado

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.

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

elementor vs avada

Avada es la plantilla m√°s vendida de Themeforest, el marketplace m√°s importante de WordPress. Y tiene su propio maquetador llamada Fusion Builder.

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 destacable: Avada también te deja código basura. Pero otro motivo importante: Avada tiene unos tiempos de carga demasiado largos para mi gusto.

Elementor vs Gutenberg

elementor vs gutenberg

Hace relativamente poco, WordPress sacó una actualización importante: un maquetador propio de WordPress llamado Gutemberg. Lo bueno es que es completamente gratuito.

Entonces te preguntar√°s: ¬Ņpara qu√© necesito otro editor?

Pues porque Gutenberg es demasiado simple.

No te deja realizar customizaciones ni poner todo ¬ęcomo a ti te de la gana¬Ľ. Si tu idea es tener una web con un aspecto profesional, Gutenberg 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. 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.

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 con Elementor Pro te hayan sido super √ļtiles. Si es as√≠, me doy por mega satisfecha ūüėä

Me encanta Elementor. Y con Elementor Pro soy capaz de dise√Īar mis p√°ginas y las de mis clientes tal y como quiero que sean.

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

¬ŅTe he ayudado a decidirte a utilizar Elementor? ¬ŅVes justificado comprar Elementor Pro?

Ap√ļntate a nuestra news

Serás el primero en conocer cada nueva entrada de blog que escribimos para que saques más partido a tu web. En ocasiones, también te hablaremos de nuestra formación.

Información básica sobre protección de datos: Responsable: Artilet Digital, 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: infoARROBAsrmomo.com. Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos en los enlaces en el pié de página.

2 comentarios en “An√°lisis de Elementor y Elementor Pro”

  1. Buen día!
    Excelente art√≠culo. Estoy pensando empezar a utilizar un maquetador como Elementor (u otro similar) para facilitar/agilizar el dise√Īo y desarrollo de webs. A√ļn tengo algunas dudas respecto a su funcionamiento.

    Poniendo como ejemplo a Elementor que despu√©s de todo lo que he le√≠do parece muy potente. El mismo tiene licencias que se pagan anualmente. Supongamos que adquiero la licencia intermedia (3 sitio, 99 US anual). Si en alg√ļn momento dejo de abonar esa licencia, las p√°ginas creadas pierden su aspecto por dejar de funcionar los shortcodes, cierto?

    Por otro lado, se que al momento de redactar el art√≠culo no hab√≠an probado el maquetador Divi. El mismo ofrece una licencia de pago √ļnico e ilimitados sitios webs por ilimitado tiempo. Que opinan de ello?

    Gracias por toda la info!
    Saludos.-

    Responder
    • Muchas gracias por tu comentario Franco!
      Respondiendo a tus preguntas:

      • Si no pagas la licencia anual pierdes el derecho a actualizar el plugin en las webs en las que lo tengas instalado y al soporte t√©cnico. Pero NO pierdes los dise√Īos que hayas hecho (mientras mantengas el plugin instalado y activo, claro).
      • Sigo sin probar Divi. Lo que no me gusta de este maquetador (motivo por el cual no tengo en mente usarlo) es que deja c√≥digo basura cuando lo desactivas, haciendo que el cambio de maquetador en un futuro sea una pesadilla. Tampoco me gusta que te obligue a usar su Theme.
      • Con Elementor tienes la opci√≥n de licencia de experto, que te permite instalarlo hasta en 1000 sitios. Si te pasas de los 1000 (ojal√°!) contactas con ellos y te hacen una oferta especial. As√≠ se evitan revendedores piratas, que es lo que suele pasar con las licencias ilimitadas y lifetime

      Espero haberte ayudado!
      Un saludo ūüôā

Deja un comentario

Informaci√≥n b√°sica sobre protecci√≥n de datos: REPONSABLE: Artilet Digital, S.L. (SrMomo). FINALIDAD: Gestionar la solicitud que realizas en este formulario de contacto. 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: infoARROBAsrmomo.com. INFORMACI√ďN ADICIONAL: Puedes consultar la informaci√≥n adicional y detallada sobre protecci√≥n de datos en los enlaces en el pi√© de p√°gina.

-50%

dto. por confinamiento

Curso de dise√Īo web en WordPress

√önete a SrMomo

y mejora tu WordPress

  • Recibe caliente cada nueva entrada de blog directamente en tu bandeja de entrada.
  • Descubre nuestro curso gratuito "Los 6 primeros pasos para que triunfes con tu web".
  • Aprovecha promociones, descuentos, novedades, etc.

Informaci√≥n b√°sica sobre protecci√≥n de datos: REPONSABLE: Artilet Digital, 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: infoARROBAsrmomo.com. INFORMACI√ďN ADICIONAL: Puedes consultar la informaci√≥n adicional y detallada sobre protecci√≥n de datos en los enlaces en el pi√© de p√°gina.

√önete a SrMomo

y mejora tu WordPress

  • Recibe caliente cada nueva entrada de blog directamente en tu bandeja de entrada.
  • Descubre nuestro curso gratuito "Los 6 primeros pasos para que triunfes con tu web".
  • Aprovecha promociones, descuentos, novedades, etc.

Informaci√≥n b√°sica sobre protecci√≥n de datos: REPONSABLE: Artilet Digital, 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: infoARROBAsrmomo.com. INFORMACI√ďN ADICIONAL: Puedes consultar la informaci√≥n adicional y detallada sobre protecci√≥n de datos en los enlaces en el pi√© de p√°gina.