fbpx

Guía completa sobre Elementor Page Builder y Elementor Pro

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

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

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

elementor vs gutenberg

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 de WordPress online y completo 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 resultado √ļtil? Dale 5 estrellas. ¬°Gracias!

Guía completa sobre Elementor Page Builder y Elementor Pro
5 (100%) 2 voto[s]

¬°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 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í.

√ö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:
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: info@srmomo.com.
Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos aquí.

√ö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:
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: info@srmomo.com.
Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos aquí.