blog webempresa

Cambiar a dos columnas de productos en Divi en móvil

por Argenis | Ago 16, 2022 | Tutoriales Divi

En ocasiones necesitamos insertar dos columnas directamente en los productos para las vistas de teléfonos celulares, sin embargo, DIVI no muestra por defecto los productos en dos columnas, este lo muestra en una sola columna:

Para modificar esta opción por defecto debemos agregar un código css para que los estilos del sitio se adapten de forma dinámica con dos columnas en móviles.

@media screen and (max-width: 479px) {
.et_gallery_item:nth-child(n), .et_pb_column .et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(n), .et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n) {
width: 45.25%!important;
margin: 0 9.5% 9.5% 0!important;
}
.et_gallery_item:nth-child(2n), .et_pb_column .et_pb_grid_item:nth-child(2n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(2n), .et_pb_column .woocommerce ul.products li.product:nth-child(2n), .woocommerce-page ul.products li.product:nth-child(2n) {
margin-right: 0!important;
}
}

Este código debe agregarse en el apartado interno de WordPress:

Apariencias > Personalizar > Css adicional

Con este código los productos se visualizarán de la siguiente forma:

Con esto ya tendríamos lo que necesitamos y personalizar de esta forma la visualización de nuestro sitio web en diferentes dispositivos como móviles.

¿Te ha resultado útil este artículo?

Ayúdanos a mejorar nuestros contenidos compartiendo tu opinión

Argenis

Equipo de soporte WordPress y WooCommerce en Webempresa.

Video tutorial, paso a paso y demo del editor de contenidos

La verdad es que este creador de webs con IA me tiene algo enamorado, y aquí te envío un vídeo de cómo es “por dentro”, para terminar de convencerte y animarte a que lo utilices.

Durante el vídeo voy a:

Configurar la web desde cero, con el asistente (que hemos visto en el apartado anterior).
Añadir información sobre mi web (una web para un restaurante vegano en madrid, especializado en verduras de la huerta).
Ver el resultado y explorar las características principales de WeBuilder en cuanto a configuración y posibilidades generales.

Ten en cuenta que este vídeo no es un curso completo sobre la herramienta, es un recorrido por encima para que te hagas una idea de las posibilidades que tiene.

Conclusión

Crear una web con IA y WeBuilder te permite centrarte en tu negocio o tu pasión, dejando la parte técnica en manos de algoritmos inteligentes. Ahorro de tiempo, costes reducidos y resultados profesionales son solo el comienzo.

Define tu proyecto y palabras clave.
Deja que la IA genere la estructura y contenido.
Personaliza el diseño y las funcionalidades.
Publica y mantén tu sitio siempre optimizado.
Delega la parte técnica y las dudas al equipo de soporte de Webempresa.

Prueba WeBuilder hoy mismo y lleva tu proyecto a un nivel que no pensabas alcanzable hasta antes de leer este artículo, y todo gracias a la potencia de la inteligencia artificial en Webempresa.

¡Espero de todo corazón que este artículo te haya servido para darte un empujoncito a llevar a cabo esa puesta a punto de tu web o prueba de concepto de tu proyecto, y nos vemos en el siguiente artículo!

Plugin Gratuito WordPress