WooCommerce + Elementor: construyamos cosas geniales

¿Quiere modificar y diseñar su sitio web de WordPress sin contratar a un desarrollador? Buenas noticias: es completamente posible con los complementos de creación de páginas de WordPress.

Un complemento de creación de páginas de WordPress viene con una interfaz intuitiva de arrastrar y soltar para crear hermosas páginas y sitios web personalizados. Por lo tanto, independientemente de su conjunto de habilidades o conocimientos técnicos, los complementos de creación de páginas hacen que diseñar su sitio web ideal sea muy fácil sin escribir una sola línea de código.

Ahora, si se está preguntando qué complemento de creación de páginas de WordPress debería considerar, está en el lugar correcto. En este artículo, revisaremos una de las opciones más populares: Elementor, que se considera el estándar de oro. Elementor es el segundo complemento de WordPress más instalado con 2 millones de instalaciones activas, utilizado por alrededor del 15,9% de los sitios web de WordPress.

Comenzaremos con una breve descripción general de Elementor y revisaremos más a fondo la interfaz, las características y los precios del complemento para ayudarlo a determinar si es la opción correcta para su sitio. ¡Vamos!

Complemento de Elementor: una breve descripción general

Elementor es un complemento visual de creación de páginas de WordPress de arrastrar y soltar que le permite crear páginas web y publicaciones únicas en comparación con las plantillas de página estándar que vienen con sus temas de WooCommerce o WordPress.

No requiere codificación y le permite configurar fácilmente los ajustes y organizar el contenido y los elementos de su página con herramientas de arrastrar y soltar.

Comencemos con la revisión del complemento observando cómo funciona la interfaz de Elementor.

Comprender la interfaz del complemento de Elementor

En comparación con muchos otros complementos de creación de páginas, Elementor tiene una de las interfaces más simples y perfectas. Cuando inicie el complemento por primera vez, aterrizará en una página como esta:

El área gris punteada es su área de contenido. Fuera de esta área, aparecerá su tema habitual, mientras que, dentro del área punteada, puede agregar widgets y crear su propio diseño.

En el lado izquierdo, verá widgets, que actúan como bloques de construcción que puede ensamblar para diseñar su página. Debajo de estos widgets, encontrará configuraciones generales para obtener una vista previa de sus diseños, deshacer cambios o activar el modo receptivo, como se muestra en la imagen.

Así de simple es arrastrar y soltar los elementos deseados en la página:

Cuando suelta un elemento en su página, Elementor divide los elementos en dos estructuras de diseño, dando dos elementos estructurales diferentes, como se muestra a continuación.

Estos elementos estructurales incluyen:

• Tramo: marcado con el color azul.
• Columna: se sienta dentro de la sección marcada en negro. Puede agregar tantas columnas como sea necesario dentro de la sección.

Una vez que suelta el elemento, puede personalizar fácilmente su diseño ajustando el ancho y cambiando el espacio y la altura de la columna.

Además, también puede elegir una estructura de sección adecuada según sus requisitos específicos y agregar otros elementos, como una imagen, un video o un ícono, dentro de las columnas.

Por ejemplo, agregué una imagen y elegí una de la biblioteca de imágenes predeterminada de Elementor, como se muestra a continuación en la imagen. Puede modificar el tamaño y la alineación de la imagen, agregar un título y vincular una URL adecuada.

Para un estilo adicional de los elementos, estructuras o columnas, puede usar las pestañas Estilo y Avanzado en la barra lateral. Simplemente haga clic en el contenido que desea diseñar y haga clic en las pestañas de la barra lateral para realizar los cambios.

También puede navegar desde las pestañas a la barra lateral de elementos simplemente haciendo clic en el icono cuadrado que se muestra en la esquina derecha de la barra lateral.

Por lo tanto, Elementor es bastante fácil de usar y con opciones simples de arrastrar y soltar y personalización sencillas: puede crear el sitio web de sus sueños en muy poco tiempo.

Ahora, sin tomar mucho tiempo, pasemos directamente a las características del generador de páginas de Elementor.

Principales características de Elementor que lo convierten en un excelente creador de páginas para WooCommerce

Aquí hay algunos beneficios excelentes de Elementor que lo convierten en uno de los creadores de páginas más populares entre los sitios web de WordPress y WooCommerce.

1. Amplia biblioteca de plantillas prefabricadas

Elementor proporciona una amplia gama de plantillas. Haga clic en el ícono Agregar plantillas a continuación para agregar una plantilla.

Elija entre más de 300 plantillas de la biblioteca de plantillas de Elementor y agréguelas a su página con un solo clic.

Desde el lanzamiento de Elementor 2.0, estas plantillas vienen en dos formatos:

• Bloques: proporcione diseños para secciones específicas en lugar de una página completa. Por ejemplo, puede agregar una sección Acerca de la empresa o una sección de contacto preconstruida a un diseño de página existente usando bloques.

• Páginas: ofrezca diseños de página completa, que puede importar con un solo clic y modificar según sea necesario.

También puede guardar algunos de sus diseños como bloques y plantillas para reutilizarlos más tarde en otras páginas o sitios web, lo que hace que sea muy conveniente mantener un diseño de plantilla común en todo su sitio web.

También elimina la molestia de crear un nuevo diseño de página desde cero cada vez.

2. Controles de diseño receptivo y vistas previas móviles

El uso de dispositivos móviles crece constantemente cada mes, y alrededor del 73,1% de los diseñadores web creen que un diseño de página que no responde es una de las principales razones detrás del abandono del sitio web.

Todos los diseños y páginas que crea en Elementor responden automáticamente y se ven geniales en dispositivos móviles. Además, puede obtener una vista previa rápida de cómo se verá su sitio web en otros dispositivos sin salir de la interfaz.

Haga clic en el botón Modo receptivo en la parte inferior de la barra lateral y obtenga una vista previa de las versiones de escritorio, móvil y tableta de su sitio web haciendo clic en los botones resaltados en las imágenes a continuación.

Le permite personalizar los diseños de su página según el tipo de dispositivo y le permite mostrar u ocultar ciertos widgets en ciertos dispositivos. Por ejemplo, si la versión de escritorio de su sitio web tiene una gran imagen de héroe, puede evitar mostrar esa imagen en la versión móvil de su sitio. Puede seleccionar esa imagen o cualquier sección que desee ocultar y ocultarla en dispositivos móviles utilizando los controles de diseño receptivo de Elementor con un solo clic.

Por lo tanto, garantiza que su sitio web responda al 100%, por lo que se ve muy bien en todos los dispositivos, incluidos los de escritorio, las tabletas y los dispositivos móviles.

3. Opciones de personalización ilimitadas

La personalización es ilimitada con Elementor, y no hay límites en cuanto a cómo puede diseñar su sitio web y sus elementos.

Los menús Estilo y Avanzado en el editor de Elementor ofrecen muchas opciones de personalización de estilo. Puede diseñar el contenido según varios atributos, incluido su color, ancho, tamaño, filtros CSS y borde.

Al mismo tiempo, el menú Avanzado le permite administrar el diseño, los efectos de movimiento, el fondo, el borde, los atributos y otros factores, como se muestra a continuación.

4. Controles de diseño detallados

Al profundizar en las opciones de personalización, Elementor le brinda un control detallado sobre el diseño de su diseño, por lo que no tiene que comprometer la flexibilidad de su diseño debido a la incapacidad de escribir código personalizado.

Elementor simplifica la colocación de sus secciones, widgets y columnas exactamente donde desea con muchas opciones de control intuitivas.

Usando los controles de diseño en el menú Avanzado, puede:

• Establezca el margen y el relleno para secciones, widgets y columnas manualmente.
• Elija el ancho de la sección: predeterminado, de ancho completo, en línea y personalizado.
• Ajuste la posición del widget dentro de la columna: predeterminada, fija y absoluta.
• Ajuste el espacio entre las columnas y cree un espacio en blanco para un diseño limpio.

Por lo tanto, sin conocimientos de codificación, puede ajustar fácilmente la ubicación de sus widgets y personalizar columnas y secciones según sea necesario.

5. Historial de revisión completo del progreso con cambios de deshacer/rehacer

Una de las mejores características de Elementor es que le permite obtener una vista previa del historial completo de todos los cambios que realizó, registrando así cada acción en el historial.

Además, puede deshacer fácilmente los cambios y volver a la versión anterior cuando sea necesario. Además, siempre que guarde un nuevo diseño, puede volver fácilmente a una revisión completamente nueva si es necesario.

6. Deja un código limpio

Si alguna vez desea desactivar Elementor en el futuro por alguna razón, no tiene que preocuparse de que deje toneladas de códigos cortos como Divi Builder.

Elementor deja un código limpio, lo que garantiza un rendimiento y una velocidad de página óptimos.

Más características de Elementor

Aquí hay algunas características más del complemento del generador de páginas de Elementor:

• Editor de encabezado y pie de página: puede editar fácilmente los encabezados y pies de página de su sitio con Elementor sin ninguna habilidad de codificación.
• Edición de texto en línea: esta función le permite editar texto en vivo en la pantalla, lo que facilita la edición de contenido de texto existente o la redacción de publicaciones de blog.
• Listo para RTL y traducción: Elementor viene en 23 idiomas traducidos, y puede traducirlo fácilmente a otros idiomas gracias a su compatibilidad completa con el idioma RTL.
• Widgets de WooCommerce: proporciona widgets de WooCommerce prediseñados, como listas de precios y tablas de precios, para facilitar la creación de sitios web de comercio electrónico.
• Integraciones de terceros: Elementor admite integraciones de terceros, incluidos ActiveCampaign y MailChimp.
• Colores globales y opciones de tipografía: Elementor le permite establecer una tipografía y colores globales para crear diseños integrales en todas las páginas. Además, también puede elegir entre más de 800 fuentes de Google para el diseño de su sitio web.
• Modo de mantenimiento: puede aprovechar las plantillas de modo de mantenimiento de Elementor para configurar su sitio web en el modo de mantenimiento.

Revisión de Elementor Pro

Si bien el generador de páginas principal de Elementor es de código abierto y gratuito, puede actualizar a la versión Elementor Pro, que proporciona funcionalidades útiles adicionales.

Aquí hay un breve vistazo a algunas características del nuevo complemento Elementor Pro:

• Te permite construir un tema completo de WordPress.
• Tiene widgets más emocionantes, incluidos controles deslizantes, botones para compartir en redes sociales, formularios, temporizadores de cuenta regresiva y formularios de inicio de sesión.
• Proporciona toneladas de plantillas Elementor Pro premium de alta calidad.

Por lo tanto, si desea más funciones, plantillas premium y widgets globales, puede optar por el complemento Elementor Pro, desde solo $ 49.

Revisión de precios de Elementor

Si desea crear sitios web simples y de estilo básico, la versión gratuita del complemento debería satisfacer sus necesidades, considerando que es el creador de páginas sin costo más rico en funciones.

Sin embargo, para crear sitios web más profesionales, Elementor ofrece cuatro planes premium con características premium, como soporte VIP y perfil de experto de Elementor.

El plan Essential, Expert, Studio y Agency del complemento Elementor cuesta $ 49, $ 199, $ 499 y $ 999 por año. Por lo tanto, Elementor es para todos, y ya sea que sea diseñador web, desarrollador o propietario de una agencia, Elementor ofrece funciones para cada necesidad y demanda.

Conclusión: veredicto final

Después de esta revisión exhaustiva, es seguro decir que Elementor proporciona todas las funciones esenciales necesarias para crear un sitio web de WordPress o WooCommerce.

Viene con una interfaz liviana, simple, fácil de entender y sin complicaciones, lo que permite a los diseñadores de sitios web sin experiencia en codificación crear sitios web hermosos. Y la mejor parte es que viene con planes de precios para las necesidades de todos. Además, los desarrolladores de Elementor continúan lanzando e implementando nuevas funciones y mejoras.

Después de revisar la facilidad de uso del complemento, las características generales, el rendimiento, el soporte, la interfaz y el precio, clasificamos a Elementor en la parte superior de los complementos de creación de páginas de WordPress. Así que revise y pruebe el complemento de Elementor por su cuenta y elija el plan adecuado para sus requisitos comerciales específicos.