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 con libertad y pequeños cambios que se necesitaba 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 5 opciones que destacan del resto:
- Elementor
- Divi
- Beaver Builder
- Thrive Architect
- Oxygen builder
En este análisis vamos a revisar a fondo Elementor, la más popular de todas y la que a mi consideración es la mejor opción para crear una página web con WordPress.
Un poco de historia
Elementor fue creado en 2016 y desde entonces ha sido instalado más de 5,000,000 de veces en diferentes sitios Web de freelancers, bloggers, emprendedores, vendedores, empresas, startups y todo tipo de proyectos y personas.
De acuerdo a su página web, ¡se han creado más de 10 millones sitios con el plugin!
Presentación de Elementor
El plugin viene en 2 presentaciones:
- Elementor gratis
- Elementor 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.
Ejemplo de edición de contenido en Visual Composer
Elementor y Elementor Pro- 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:
- 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.
- 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.
- 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 de Elementor
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:
- 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.
- 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.
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
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)
- Breadcrumbs de producto
- 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
- Productos relacionados
- Upsells
- Grid de productos
- Categorías de productos
- Carrito en el menú
- Checkout
- Mi cuenta
- Avisos de Woocommerce
- ¡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?