Cuéntame tu Proyecto: 881 914 641

Análisis de Elementor Page Builder [4 Vídeos]

Hoy me gustaría hablaros de Elementor Page Builder que es un editor visual que ha revolucionado la forma en que hacemos las webs los diseñadores de WordPress. Hasta hace poco  utilizaba Visual Composer, pero fue probar este nuevo editor y cambiarme sin dudarlo, mucho más ágil, robusto y ligero.

A partir de ese momento todas las webs de mis clientes las hago con Elementor PRO y mi web ya la estoy rediseñando para hacerla más ligera y amigable para mis usuarios, bueno y para Google 😉 Si quieres conocer este plugin con el cual podrás diseñar la web de tu negocio de forma fácil y sin saber programar sigue atento, haré un análisis del plugin y algunos vídeos de cómo funciona.

Elementor page builder

 

Qué es Elementor y cómo funciona (Vídeo)

Elementor Page Builder es un maquetador visual, que te permitirá diseñar las páginas de tu web de forma rápida y sencilla, sin saber programar. Es como Visual Composer o Thrive Leads pero mucho más avanzado.

A continuación os dejo un vídeo en el cual veréis como lo instalo y lo pongo a funcionar en minutos, también haré un repaso general de sus características:

Características Principales

Ligero y pensado para SEO

Los desarrolladores de Elementor tuvieron claro desde el principio que el plugin debería ser amigable para SEO y muy ligero, no como su competencia. No usaron estilos en línea y todo está programado de forma modular para que no consuma muchos recursos.

Además te permite modificar las etiquetas HTML de los elementos para ajustarlas al máximo y así potenciar el SEO on-page de la web. Por otra parte si desactivas el plugin no tiene efecto locking, es decir, no mantiene los shortcodes y te genera HTML para que todo el contenido de las páginas siga estando accesible.

y asegúrate conseguir resultados

En nuestro curso gratuito aprenderás entre otras cosas los objetivos y necesidades que necesita tu web para que funcione.

Es GRATIS

No es que solamente sea GRATIS sino que además es de código abierto, lo que significa que cualquier programador tiene acceso al código para modificarlo libremente, de hecho están saliendo muchas extensiones para potenciar sus funcionalidades, los llamados Add-ons.

En la versión gratuita tienes disponibles cantidad de Widgets para diseñar pero los más avanzados como son formularios, sliders, portfolio… son de la versión PRO de la cual hablamos más abajo.

Fácil de usar sin saber programar

Como podéis ver en el vídeo el plugin se basa en “Drag and Drop”, todo es arrastrar y soltar. Por si fuera poco vas viendo los cambios en tiempo real con lo que ahorrarás mucho tiempo ya que con otros editores tenías que guardar los cambios e ir a la página web para verlos.

En el vídeo final del post verás como copiaré una página web con Elementor de forma super rápida y sencilla.

Guarda diseños como plantillas

Esta característica para mi como diseñador web es de lo mejor! Te permite guardar secciones o páginas completas que hayas diseñado como plantillas para luego importarlas en un click en otra web o bien en otra página de la web. Esto es super útil para formularios que se usan varias veces, cajas de suscripción o para llamadas a la acción.

Diseño responsive muy potente

Las opciones que te da Elementor para personalizar los tamaños, márgenes y alineaciones en versión table y para móviles son brutales, en este aspecto no tiene ningún competidor que le pueda hacer sombra.

Con un simple click como podéis ver en la imagen superior podéis hacer que el tamaño de texto, la alineación o los márgenes sean diferentes en escritorio, tablet o móviles… Lo mismo con la altura de línea o el espaciado de letras para conseguir un diseño perfecto.

Widgets para diseñar con Elementor (Vídeo)

Ahora en el siguiente vídeo voy a repasar TODOS los widgets que trae Elementor en la versión gratuita para hacer diseños de páginas web. Tras el vídeo os dejaré un listado de cada uno en formato texto.

Tema recomendado para usar con Elementor

Esta es una decisión muy importante, yo hasta ahora usaba The7 con Visual Composer, de hecho mi web está desarrollada con esas tecnologías pero desde que descubrí Elementor me he cambiado a la plantilla OceanWP que es un tema gratuito y muy flexible para diseñar con Elementor. Lo analizo en el post del enlace.

Se está hablando mucho de GeneratePress pero la verdad es que la versión gratuita trae muchos menos elementos de personalización y no es tan flexible como el que os recomiendo. OceanWP igual que GeneratePress funciona con Addons pero eso lo dejo para otro post.

Yo para las webs de mis clientes uso OceanWP con el paquete de Addons y va genial, es super flexible con las cabeceras, footers y además es super ligero y personalizable para los programadores. web

Elementor PRO (Vídeo)

Como podéis ver en el vídeo la versión PRO de Elementor añade funcionalidades muy interesantes que comentaré a continuación, además de todos los widgets nuevos que nos amplian las opciones de diseño. Yo le recomiendo a todo el mundo comprar Elementor PRO ya que la licencia para un único sitio web tiene un precio de $49 por lo que me parece bastante justo teniendo en cuenta todo lo que incorpora.

Podéis ver los detalles y precios de Elementor Pro aquí.

 

Post y Portfolio
Añade unos widgets de uso muy común que es el de mostrar los post a modo cuadrícula, tipo mansory o incluso como Cards en cualquier página además de mostrar un portfolio de trabajos con opción de filtros incluida, todo lo podéis ver en el vídeo.

Como comento en el vídeo el widget de portfolio de Elementor es un poco flojo, os recomiendo usar el de OceanWP.

 

Widgets Globales
Esto es super útil ya que te permite crear un widget de formulario por ejemplo o de testimonios y guardarlo como global, luego insertas este widget en inicio, página individual de servicios y en la de contacto. Perfecto, pero luego si lo quieres editar solo tendrías que hacerlo en un sitio y se aplicaría los cambios a todos los sitios donde lo hayas metido, muy interesante.

 

CSS Personalizado
Esta opción me encanta! Ya que a los diseñadores webs nos permite personalizar cada detalle, Elementor de por si ya da muchas opciones de estilos pero si quieres cambiar algo muy concreto te permite introducir tu propio código CSS para dejarlo al detalle.

 

WooCommerce
Super importante para tiendas online, te permite gestionar de forma visual todos los temas relacionados con WooCommerce, cuadrículas de producto, categorías con imagen, botones de compra de producto… Hasta puedes crear las páginas de finalizar compra o de carrito personalizadas con Elementor PRO, también incluye esos shortcodes.

 

Plantillas
Esta es otra funcionalidad muy potente, merecería la pena pagar la licencia PRO solo por ella. Puedes guardar plantillas igual que en la versión gratuita pero con la PRO podrás insertar estas plantillas a través de un shortcode que te genera Elementor, por ejemplo un formulario de captación diseñado por elementor podremos insertarlo en el sidebar del blog.

Otra posibilidad es la de dentro de una pestaña insertar una plantilla de elementor, ya que por defecto solo te deja introducir texto plano.

 

Sliders
Es un plugin sencillo de slider que te permite poner imágenes de fondo con un título, una descripción y un botón, estos elementos si los dejas vacíos desaparecen y luego te permite variar las animaciones, la velocidad de transición, el tamaño del slider, poner flechas y puntos, variar tipografías y colores… Sencillo y ligero pero muy flexible.

 

Formularios de Contacto
Como pudisteis ver en el vídeo este widget es muy potente, ya solo por él merece la pena comprar la versión PRO ya que te permite insertar bastante tipos de elementos, fijar una respuesta automática, cambiar colores de fondo, bordes, disposición de cada campo… en resumen, es muy completo.

Además verás todos los cambios que vayas haciendo en tiempo real.

Replicar una web real con Elementor PRO (Vídeo)

Ahora en este vídeo verás como copio una página web con Elementor PRO de forma rápida y viendo todo en tiempo real, así te harás a una idea de como funciona realmente el plugin para diseñar páginas web.

La web a replicar será esta landing page.

y asegúrate conseguir resultados

En nuestro curso gratuito aprenderás entre otras cosas los objetivos y necesidades que necesita tu web para que funcione.

Análisis de Elementor Page Builder [4 Vídeos]
3 (60%) 2 votos

×
×

Carrito