Warning: Declaration of TCB_Menu_Walker::walk($elements, $max_depth) should be compatible with Walker::walk($elements, $max_depth, ...$args) in /home/wpavanza/public_html/wp-content/plugins/thrive-visual-editor/inc/classes/class-tcb-menu-walker.php on line 0
Elementor Archives - WP Avanzado

Elementor Page Builder: El análisis más completo y detallado (Octubre 2019)

Una de las frustraciones y obstáculos más grandes que me he enfrentado con WordPress desde que comencé a utilizar la plataforma es la falta de opciones para personalizar los sitios web como quería.

No podía crear layouts personalizados, cambiar los headers y footers como yo quería y pequeños cambios que se necesitaban hacer tenía que meterme al código o pedirle ayuda a un programador.

Es decir, estaba limitado por las opciones que me daba el template que estaba utilizando. (¿Te suena familiar?)

Poco a poco fueron surgiendo diferentes frameworks y page builders que hacían más fácil y accesible el proceso de creación de sitios y páginas, por ejemplo Visual Composer (o WP Bakery) o OptimizePress. Sin embargo, su uso seguía siendo muy tedioso y poco práctico.

Hasta hace unos años fue que surgieron los page builders visuales. Es decir, donde literal creas y editas todo el sitio Web en el front-end. Editores totalmente visuales.

Hoy en día existen algunas 4 opciones que destacan del resto:

  • Elementor
  • Divi
  • Beaver Builder
  • Thrive Architect

En este análisis vamos a revisar a fondo Elementor, la que a mi consideración es la mejor opción para crear páginas web de todo tipo con WordPress.

Un poco de historia

Elementor fue creado en 2016 y desde entonces ha sido instalado más de 3,000,000 de veces en diferentes sitios Web de freelancers, bloggers, emprendedores, vendedores, empresas, startups y todo tipo de proyectos y personas.

Presentación de Elementor

El plugin viene en 2 presentaciones:

  • Elementor gratis
  • Elementor versión PRO

“¡AJA! Sabía que costaría” puedes estar pensando. Pero a diferencia de varios plugins y page builders, la versión gratuita de Elementor es bastante completa e incluye lo suficiente para poder crear cualquier tipo de sitio Web.

Además hay que considerar que tenemos la opción de instalar plugins con widgets adicionales desarrollados por terceros.

Funcionamiento y beneficios principales

Como ya vimos, Elementor es un page builder que nos da una interfaz completamente independiente al template que estés utilizando en WordPress.

Algunos de las funciones y beneficios más destacados de Elementor son:

  • Permite crear páginas, entradas y custom post types con la interfaz y UI del plugin, la cual incluye diferentes widgets, opciones de diseño y de estructura.
  • Es un editor visual, es decir, editas en tiempo real en el front end y al mismo tiempo ves cómo va quedando la página.
  • Sin importar cual template estés utilizando, te permite crear cualquier tipo de estructura, layout que puedas imaginar. No hay límites.
  • Es compatible con el 99% de los templates de WordPress
  • No requiere que tengas conocimientos previos de programación ni desarrollo Web.
  • Los diseños que puedes crear con Elementor son realmente impactantes en cuestión visual.

El problema con los editores backend

Durante mucho tiempo estuve usando editores como Visual Composer, King Composer, FusionBuilder y OptimizePress, opciones muy buenas pero que son back-end y no representan una edición y experiencia “drag-and-drop”, la cual es mucho más intuitiva, divertida y eficiente.

Con Visual Composer y otros editores backend, cualquier cambio, incluso si era algún color, imagen o de tamaño de letra, requería de actualizar tanto el módulo del backend, actualizar la página en el editor normal de WordPress y finalmente hacer refresh a la página en modo “live” para poder ver los cambios.

Muy tedioso y desgastante.

Esto provoca que el usuario se canse mucho más rápido y que la experiencia sea poco atractiva y eficiente.

Ejemplo de edición de contenido en Visual Composer

Elementor - una experiencia visual, intuitiva y ¡hasta divertida!

La experiencia con Elementor es totalmente distinta.

Para hacer cambios a cualquier página o agregar widgets, todo se hace “en vivo” y en el front end.

Al seleccionar cualquier sección, se despliegan las opciones de diseño, estilo y avanzadas en donde se hace la edición en tiempo real.

Widgets de Elementor

Para agregar contenido a la página, tenemos el panel de widgets, en donde podemos encontrar diferentes módulos de contenido como encabezados, bloque de texto, sección interior, imágenes, videos, botones, etc.

La versión gratis viene con una gran cantidad de opciones, suficientes para crear un sitio web completo y funcional.

Si decides invertir en la versión PRO, tendrás acceso a otros widgets exclusivos como formularios y slides.

Para agregar un nuevo widget, lo único que se tiene que hacer es arrastrarlo a la sección donde quieras que se despliegue y listo.

Los widgets que incluye la versión gratis de Elementor son:

  • Sección interior
  • Encabezado
  • Imagen
  • Editor de texto
  • Video
  • Botón
  • Calificación en estrella
  • Divisor
  • Google Maps
  • Íconos
  • Caja de Imagen
  • Caja de Ícono
  • Galería
  • Carrusel de imágenes
  • Listado de íconos
  • Contador
  • Espaciador
  • Testimonio
  • Pestañas
  • Acordeón
  • Toggle
  • Iconos redes sociales
  • Barra de progreso
  • Soundcloud Shortcode
  • HTML Menu Anchor
  • Sidebar Alerta

La interfaz de Elementor

Para que tengas una mejor idea, vamos a revisar a continuación cómo se ve la pantalla de una página recién abierta con Elementor.

  • Área de contenido. En esta parte es donde creas todo el contenido de la página
  • Widgets y opciones de los widgets. Estos son todos los elementos que puedes agregar a la página. Elementor gratis y pro incluyen varios y también puedes agregar más con plugins de desarrolladores externos
  • Ajustes. Aquí es donde puedes hacer revisiones de los cambios hechos, vista previa del diseño, revisarlo en diferentes dispositivos y otras opciones más.

Cómo funciona la estructura y layout de una página en Elementor

El contenido en Elementor se divide en secciones, a que su vez se dividen en columnas.

Puedes haber también secciones interiores dentro de una sección principal.

Revisa el siguiente video para ver más a fondo cómo funcionan las secciones y columnas:

Editando Widgets y contenido en Elementor

Al agregar un widget a cualquier sección y columna, vas a notar que del lado izquierdo hay 3 columnas:

  1. Contenido. En donde puedes cambiar las opciones principales del widget. Por ejemplo, para el widget de editor de texto, en esta columna puedes redactar el texto o elegir las imágenes si es una galería o un slider. Digamos que esta columna corresponde a las opciones que hacen único a ese widget.
  2. Estilo. Todo lo relacionado con tipografías, colores, tamaños, bordes, sombras, espacios entre elementos y aspectos de diseño se editan en esta parte. 
  3. Avanzado. Para cambiar cosas como márgenes, paddings, efectos, compatibilidad con móviles, efectos y CSS personalizado. 

Una vez que tengas algunas horas usando el plugin, te vas  a dar cuenta lo fácil que es editar los widgets y vas a ubicar a la perfección las secciones. 

Edición de texto inline

A diferencia de otros page builders que usan un pop up con un editor WYSIWYG, editar texto con Elementor puede hacerse de forma directa en la zona de contenido, una experiencia mucho más intuitiva, eficiente y divertida.

Del lado izquierdo en las opciones del widget también puedes agregar y editar el texto cuando sea necesario.

 

Plantillas y bloques

Una de las mejores formas de aprender a usar Elementor es usando la librería de plantillas y bloques que viene incluida con el plugin, tanto en la versión gratis como en la PRO, que tiene opciones exclusivas.

Cuando vas a agregar contenido en el espacio de la derecha, tienes dos opciones:

  1. Agregar una sección con una estructura específico: dos columnas 50/50, dos columnas 75/25, tres columnas 33.3, cuatro columnas 25, etc.
  2. Importar un template o un bloque

Galería de plantillas y bloques

Cuando elegimos el botón de plantillas, tenemos tres opciones:

  • Bloques. Secciones específicas de una página. Por ejemplo: llamado a la acción, preguntas frecuentes, contacto, servicios, testimonios, equipo, etc.
  • Páginas. A diferencia de los bloques, son páginas completas enfocadas en diferentes nichos y también en categorías. Por ejemplo, puedes elegir Páginas de inicio (homepage), páginas de Acerca de, de Servicios, de Contacto, etc. También se pueden elegir de acuerdo al nicho: para agencias, diseño de interiores, restaurantes, productos, apps, wellness, etc.
  • Mis plantillas. Cualquier diseño que hagas lo puedes guardar como plantilla para usarse en ese mismo sitio o para exportarlo y usarlo en otro dominio con Elementor.
En el siguiente video revisamos cómo agregar plantillas y bloques en Elementor PRO:

Atajo para dominar Elementor más rápido

​Una de las técnicas que usé para aprender a usar Elementor en pocos días fue importar templates y revisar la estructura y como estaban creados y formados en cuestión de secciones, secciones interiores, columnas y elementos.

Digamos que estudio los templates a fondo y los descompongo en partes para ver cómo estaban formados.

Esto te va a ayudar mucho a poder crear estructuras y páginas desde ceros con mucha más rapidez y a tener mucho mejores prácticas y orden en tus layouts.

Edición móvil independiente con Elementor

El tráfico web en dispositivos móviles ha subido de forma exponencial en los últimos años y una de las prioridades más importantes al crear un sitio Web es que sea totalmente responsivo y se vea perfecto en teléfonos móviles y en tablets.

Cuando uses Elementor podrás darte cuenta que todas las plantillas y bloques incluidas son responsivas y se adaptan excelente a cualquier teléfono.

Cuando hagas estructuras y templates propios, podrás notar que quizá algunos elementos requieran de un retoque y mejora.

Para eso tenemos la opción de edición móvil, en donde el menú de la derecha cambia a vista móvil para mostrar cómo adapta el template a pantallas de teléfonos celulares y también a tablets.

Opciones exclusivas de Elementor para edición móvil

Cuando estás creando una página o layout en versión web o escritorio y cambias a modo móvil, varias cosas se pueden ver desordenadas, por ejemplo:

  • Orden equivocado de las columnas
  • Encabezados muy grandes
  • Márgenes y rellenos sin la proporción correcta
  • Imágenes y espacios incorrectos

Afortunadamente, con Elementor tenemos opciones exclusivas para móvil que nos ayudan a modificar y dejar nuestras páginas excelentes en cualquier iPhone, Android o iPad. 

En la mayoría de los templates, editar en la parte móvil requiere de CSS o de otras configuraciones avanzadas. 

Con Elementor es MUY FÁCIL dejar listo tu sitio web optimizado y perfectamente diseñado para móviles.  

Opciones generales de Elementor

Además de las 3 columnas con las que editamos widgets, cada página de Elementor cuenta con opciones generales que se pueden ver al hacer clic el el botón de menú de la esquina superior izquierda

Las opciones son:

Estilo

  • Colores por defecto
  • Fuentes predeterminadas
  • Selector de color

Ajustes

  • Ajustes globales. Para cambiar fuentes genéricas predeterminadas, ancho del contenido, espacio entre widgets, extender hasta ajustar sección, etc.
    Ajustes de escritorio. Las opciones que vienen por defecto en Elementor

Ir a

  • Buscador
  • Ver página

Elementor PRO a fondo

Viendo que la versión gratis de Elementor tiene tantas opciones y no se siente como un demo o algo incompleto, ¿vale la pena invertir en la versión PRO?

Vamos a revisar las beneficios exclusivos de la versión PRO de Elementor:

Widgets exclusivos

  • Posts (para blog o portfolio)
  • Portfolio
  • Slides
  • Formas de contacto y de suscripción
  • Login
  • Menú de navegación
  • Encabezados animados
  • Lista de precios
  • Tabla de precios
  • Flip box
  • Llamado a la acción
  • Carrusel de medios
  • Carrusel de testimonios
  • Countdown
  • Botones para compartir en redes sociales
  • Blockquote
  • Reseñas
  • Botón de Facebook
  • Facebook Embed
  • Página de Facebook
  • Plantilla (para importar)
  • Comentarios de Facebook

Plantillas para editar todas las secciones de tu sitio imaginables

Elementor PRO lleva la parte de plantillas al siguiente nivel, incluyendo la opción de crear headers, footers, entradas de blogs, páginas de archivos de categorías, productos y mucho más. 

Esto te da control total sobre cómo quieres que se vean las páginas de TODO tu sitio. 

Creador de headers y footers

¿Te has frustrado porque no puedes adaptar tu header o tu footer exactamente como quieres? O quizá deseas agregarle un botón, un texto extra o que tenga sombra, pero es muy complicado con tu template actual.

Con Elementor Pro puedes crear plantillas ilimitadas de headers y footers con el mismo editor visual. Esto quiere decir que puedes agregarle cualquier widget que quieras y las opciones son ilimitadas. 

También puedes usar alguna de las plantillas que vienen incluidas y comenzar a editarla a partir de su diseño.

Diseña tus propios layouts de entradas de blog

Si tienes un blog o quieres crear uno, tu contenido debe verse impecable, limpio y con un layout atractivo para tus lectores.

Con Elementor PRO puedes crear la plantilla de tus blog posts con el editor visual y campos dinámicos como Título, fecha, contenido, descripción, extracto, etc.

Diseña los archivos de tus páginas

Así como puedes crear plantillas de blog posts, también puedes crear las plantillas para las páginas de archivos de categoría, etiquetas, autores y mucho más.

Con las display conditions de Elementor puedes escoger y personalizar los elementos que se despliegan de forma dinámica.

Crea formas de contacto y opt-ins

Con Elementor PRO tienes acceso al widget de formas, el cual puede realizar diferentes funciones:

  • Formas de contacto tradicionales
  • Formas de suscripción (opt-in forms) que se sincronicen con autoresponders como Mailchimp, Drip, Convertkit, etc.
  • Crear encuestas con preguntas de opción múltiple

Pop-ups con reglas avanzadas

Todas las ventajas de usar el editor visual específicamente enfocadas para crear todo tipo de pop ups con reglas y condiciones avanzadas. 

También puedes hacer que se desplieguen al hacer clic en cualquier texto o botón y otras opciones avanzadas. 

Botones para compartir en redes

Si quieres más tráfico Web, es importante que los usuarios que consumen tu contenido tengan de forma accesible la forma de compartirlo en sus redes sociales.

Con estos botones puedes agregar cualquier red social a tu contenido y entradas de blog.

Widgets de Facebook

Facebook es la red social más grande del mundo y con estos widgets podemos facilitar a los usuarios poder comentar, compartir y hacer like a nuestro contenido.

Incluye widget de comentarios de Facebook que puedes poner en cualquier parte de tu blog o sitio Web, posts, videos, el feed de tu página y mucho más.

Tablas de precios

Si vas a vender tus productos o servicios, es muy posible que tengas diferentes opciones de precios con ciertas características únicas.

Con Elementor PRO tienes acceso a tablas atractivas y con un gran diseño que permiten desplegar tus opciones de precios e incrementar tus ventas.

Widgets globales

Una de las mejores funciones de Elementor Pro es la posibiblidad de diseñar bloques y secciones personalizadas y guardarlas como widgets. De esta forma se pueden agregar con un par de clics en cualquier sección de tu página web.

También puedes usar widgets globales de desarrolladores terceros.

Efectos de movimiento y parallax

Para darle más vida a tu sitio web y a los elementos de tu diseño, tenemos la opción de agregar efectos parallax verticales y horizontales. También puedes agregar efectos de transparencia, rotación, escala y difuminación y al hacer scroll-down

Herramientas exclusivas de Woocommerce

Si vas a crear una tienda virtual con WordPress y Woocommerce, Elementor Pro incluye widgets exclusivos y la opción de crear todas las páginas de eCommerce de forma personalizada con el editor visual del plugin.

Puedes crear la página individual de producto, la de catálogo, la de categoría, etc.

Todo con los widgets de Woocommerce, los cuales incluyen:

  • Título de producto (dinámico)
  • Galería
  • Imágenes
  • Precio (dinámico)
  • Calificación
  • Descripción corta (dinámico)
  • Descripción (dinámico)
  • Botones de agregar a carrito
  • Información adicional
  • ¡Mucho más!

¿Cuánto cuesta Elementor PRO?

Como podemos ver, aunque Elementor en su versión gratuita es muy completo y puede ser suficiente en muchos casos dependiendo del sitio web y proyecto que se vaya a crear, es muy claro que Elementor PRO incluye funciones, widgets exclusivos y características que hacen que valga 100% la pena invertir en la licencia.

Costo de Elementor PRO

El costo depende de la cantidad de sitios que vayas a crear con el page builder.

¿Estás listo para probar el poder de Elementor y tener opciones ilimitadas para tus proyectos y sitios Web?

Personal

Para 1 sitio web
$ 49 al año
  • 50+ Pro widgets
  • 300+ Templates Pro
  • Creador de templates
  • Woocommerce builder
  • Creador de Popups avanzado
  • Soporte por 1 año
  • Actualizaciones por 1 año

Plus

Para 3 sitios web
$ 99 al año
  • 50+ Pro widgets
  • 300+ Templates Pro
  • Creador de templates
  • Woocommerce builder
  • Creador de Popups avanzado
  • Soporte por 1 año
  • Actualizaciones por 1 año

Personal

Para 1000 sitio web
$ 199 al año
  • 50+ Pro widgets
  • 300+ Templates Pro
  • Creador de templates
  • Woocommerce builder
  • Creador de Popups avanzado
  • Soporte por 1 año
  • Actualizaciones por 1 año