Lo más destacado del complemento Divi: Divi BodyCommerce


Divi BodyCommerce es un complemento de terceros para Divi que le brinda control sobre el diseño de su tienda desde la página del producto hasta la página de pago y todo lo demás. Está diseñado teniendo en cuenta las conversiones y le brinda control total sobre el diseño de su tienda mediante Divi Builder.

Cuando un complemento ofrece tantos módulos y funciones como este, tienden a ser abrumadores de usar. Sin embargo, eso no fue un problema con este, ya que todo es fácil de seguir y hay más videos paso a paso que cualquier complemento que haya visto. En este artículo, echaremos un vistazo a Divi BodyCommerce y veremos lo que puede hacer y lo fácil que es de usar.

Instalación y configuración de Divi BodyCommerce

Sube y activa el complemento como de costumbre. Para activar la licencia, vaya a Motor Divi > Licencia BodyCommerce en el menú del tablero.

Haciendo clic BodyCommerce en el menú del tablero se abre la configuración. Este es el mismo tipo de configuración que esperaría ver para WooCommerce. Aquí puede seleccionar sus páginas. Una vez que haya creado los diseños para estas páginas, vaya a esta página de configuración y selecciónelas. También puede configurar las páginas en ancho completo y elegir tener una plantilla de producto diferente para cada categoría.

Módulos Divi BodyCommerce

Se agregan 53 nuevos módulos al Divi Builder. Estos son todos los elementos que necesita para diseñar todos los aspectos de su tienda WooCommerce, incluidas las páginas de productos, las páginas de la cuenta, las páginas de archivo, el carrito de compras, etc. Están codificados por colores para que no se los pierda. Los colores realmente muestran para qué son los módulos. Por ejemplo, los módulos rojos son para las páginas de productos. Algunos usan un degradado para mostrar que funcionan con dos tipos de páginas. Esta imagen muestra los primeros 24 módulos.

Aquí están los próximos 29 módulos. Los módulos agregan elementos de página como ventas ascendentes, ventas cruzadas, controles deslizantes, productos relacionados, carruseles, galerías, uso compartido, pestañas, rutas de navegación y mucho más. Los bucles crean listas de productos para crear las páginas de su tienda. Incluyen las pestañas y opciones de Contenido, Diseño y Avanzado esperadas.

Nota: si una página no se carga, asegúrese de que no está utilizando un módulo en esa página que no fue diseñado para funcionar en esa página. Algunos módulos son globales y funcionan con cualquier página, pero otros están diseñados para tipos específicos de páginas. Por ejemplo, no puede utilizar un módulo de página de producto en una página de bucle.

Crear y asignar una página

Veamos cómo crear la página y establecerla como predeterminada para esa categoría. Primero, cree el diseño en la Biblioteca Divi.

A continuación, vaya a Motor Divi > BodyCommerce en el menú del tablero. Seleccione la pestaña para el tipo de página que está creando y luego elija su diseño para esa página. Puede crear tantos diseños como desee y utilizarlos para diferentes tipos de páginas y para categorías individuales.

Ejemplos de Divi BodyCommerce

Aquí hay algunos ejemplos que creé. Esta es solo una pequeña muestra de lo que se puede hacer con este complemento.

Página de la tienda Divi BodyCommerce

Para la página de la tienda, acabo de agregar un módulo de páginas de archivo de bucle de producto.

Aquí está la página con la configuración predeterminada. Cada uno de los elementos se puede ajustar con Divi Builder.

Aquí está dentro del diseño de Tea Shop. Esta es la configuración predeterminada con la excepción del límite. Lo configuré para mostrar 6 productos.

Puede ajustar algunos de los elementos en vivo.

Agregué fondos verdes a la insignia y los botones de venta, configuré el diseño para que muestre 6 columnas, agregué una sombra de cuadro a los productos y agregué una superposición verde. Estoy impresionado con la cantidad de opciones para el diseño.

Este es el diseño de estilo del blog. Se vería genial si tuviera descripciones de productos más largas.

Página del producto Divi BodyCommerce

Creé un diseño de página de producto en la Biblioteca Divi y lo seleccioné como el diseño predeterminado en la configuración de BodyCommerce. Este es solo un diseño básico para tener una idea de lo que pueden hacer los módulos.

Es simple, pero es un buen lugar para comenzar. Muestra el título, la galería y el control deslizante del producto.

Agregué algunas páginas de productos más y módulos globales al azar.

Está empezando a mostrar el tipo de cosas que se pueden hacer con BodyCommerce. Hagamos algo de Divi en esta página.

Aquí hay algunos ajustes simples con Divi Builder. Todo lo que he hecho es agregar un fondo a la sección y la fila y ajustar los bordes para los botones y el campo de búsqueda.

En este, agregué una nueva fila para productos relacionados y moví el módulo de búsqueda a esa fila. También cambié el diseño del producto y cambié la imagen del producto a una galería. Lo tengo configurado para desplazamiento vertical. Si la demostración de WooCommerce tuviera más imágenes para este producto, se mostrarían en una columna vertical a la izquierda. Esto es solo una muestra del nivel de ajustes que se pueden hacer con las páginas de productos.

Carro de la compra Divi BodyCommerce

Estoy creando una página de carrito de compras usando la página de contacto en el diseño de panadería. Estoy usando los módulos Productos del carrito y Totales del carrito. No muestran su contenido cuando se visualiza en Visual Builder, pero aún puede compilar en Visual Builder. Los módulos proporcionan muchas otras características como la venta cruzada.

Aquí está el carrito de la compra con la configuración predeterminada. Tengo los dos módulos en un solo diseño de 2 columnas.

Aquí está la página del carrito de compras después de un par de cambios. Cambié a un diseño de una sola columna, agregué algo de espacio de derecha a izquierda, agregué un color de fondo del diseño, cambié los colores de los botones y los colores del texto para que coincidan con el diseño y agregué una sombra de cuadro.

Documentación de Divi BodyCommerce

La documentación se proporciona por escrito en el sitio web del desarrollador y con una serie de videos sobre Youtube. Me gusta que incluya a ambos. Los enlaces se proporcionan en el menú del panel de Divi Engine. También puede ver videos haciendo clic en cualquiera de las funciones en el sitio web del desarrollador. Esto crea una estructura interesante para encontrar los videos que necesita. Así es como encontré los videos que quería ver.

Precio de Divi BodyCommerce

BodyCommerce tiene tres licencias para elegir:

  • 1 sitio – £ 24
  • 5 sitios – £ 50
  • Sitios ilimitados – £ 96

Puede comprar BodyCommerce desde sitio web del desarrollador.

Pensamientos finales

Divi BodyCommerce proporciona un nivel impresionante de control sobre los diseños de páginas y productos de WooCommerce. Apenas mencioné lo que puede hacer. También puede personalizar la pantalla de inicio de sesión, las insignias, las páginas de la cuenta, las páginas de agradecimiento, los formularios, las páginas de búsqueda y mucho más. Incluso incluye plantillas de correo electrónico, iconos personalizados, muestras y AJAX para el carrito de compras. Me gusta poder crear un diseño diferente para cada categoría.

Los módulos y el diseño fueron fáciles de usar. Seguí los videos en la página del desarrollador para crear mis ejemplos. Los videos fueron detallados y fáciles de seguir. No tuve problemas para crear cualquier tipo de página que quisiera.

BodyCommerce proporciona más herramientas y personalizaciones que cualquier complemento de WooCommerce / Divi que haya visto hasta ahora. Si usa WooCommerce con Divi y desea personalizar sus páginas de WooCommerce, BodyCommerce es una opción fácil.

Queremos escuchar de ti. ¿Has probado BodyCommerce para Divi y WooCommerce? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de Letters-Shmetters / shutterstock.com