Dado que los módulos de WooCommerce se han convertido en parte de Divi, le hemos mostrado un par de diseños de páginas de productos que puede crear utilizando las opciones integradas de Divi. Hoy, agregamos un nuevo tutorial a esa lista mostrándole cómo crear una hermosa página de producto a pantalla completa. Estamos ajustando todo el contenido del producto en una sola sección mientras creamos un diseño impresionante. Aunque estamos limitando el desplazamiento vertical que se requiere en la página del producto, el diseño no parece abrumador de ninguna manera. También nos hemos asegurado de que el diseño siga siendo hermoso y receptivo en pantallas pequeñas. ¡También podrás descargar el archivo JSON gratis!
Hagámoslo.
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargar The Fullscreen Product Layout GRATIS
Para poner sus manos en el diseño de producto de pantalla completa gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se "volverá a suscribir" ni recibirá correos electrónicos adicionales.
¡Comencemos a recrearnos!
Abrir página de producto existente
Lo primero que deberá hacer es abrir una página de producto existente o crear una nueva. Para este diseño en particular, hemos agregado los siguientes elementos a nuestra página de productos:
- Titulo del producto
- Foto principal
- Breve descripción
- Descripción
- Precio
Habilitar Divi y modificar configuraciones de página
Continúe habilitando Divi y cambiando el diseño de la página en la configuración de la página.
Cambiar a Visual Builder
Una vez hecho esto, puede cambiar a Visual Builder.
Eliminar sección existente
Dentro del Visual Builder, verás una sección con los elementos predeterminados de la página del producto. Puede continuar y eliminar toda esta sección. En los próximos pasos de esta publicación, recrearemos nuestro propio diseño alternativo.
Agregar nueva sección
Espaciado
¡Hora de empezar a crear! Agregue una nueva sección, abra la configuración de la sección y modifique los valores de relleno superior e inferior.
- Relleno superior: 5vw
- Relleno inferior: 5vw
Desbordamientos
Ocultar los desbordamientos de la sección también.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar nueva fila
Estructura de columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y ajuste la configuración de tamaño de la siguiente manera:
- Usar ancho de canal personalizado: sí
- Ancho de canal: 1
- Ancho: 100%
- Ancho Máx .: 100%
Columna 1
Índice Z
También estamos aumentando el índice z de la primera columna en la configuración de visibilidad.
- Índice Z: 10
Columna 2
Fondo degradado
A continuación, abra la configuración de la columna 2 y agregue un fondo degradado en diferentes tamaños de pantalla:
- Color 1: # ffcb49
- Color 2: #ffffff
- Tipo de degradado: radial
- Dirección radial: centro
- Posición de inicio: 66% (escritorio), 50% (tableta y teléfono)
- Posición final: 66% (escritorio), 50% (tableta y teléfono)
Agregue el módulo de título Woo a la columna 1
Contenido dinámico
¡Es hora de comenzar a agregar módulos! En la columna 1, el único módulo que necesitamos es un Módulo de título Woo.
- Producto: Este producto
Configuración del texto del título
Pase a la pestaña de diseño del módulo y cambie la configuración del texto del título de la siguiente manera:
- Fuente del título: Montserrat
- Peso de la fuente del título: Ultraligero
- Alineación del texto del título: izquierda (escritorio), centro (tableta y teléfono)
- Tamaño del texto del título: 9vw
Dimensionamiento
Modifique el tamaño del módulo también.
- Ancho: 50vw (escritorio), 100% (tableta y teléfono)
Espaciado
Junto con la configuración de espaciado.
- Margen superior: 14vw (escritorio), 0vw (tableta y teléfono)
- Margen inferior: 5vw (tableta y teléfono)
- Margen izquierdo: -11vw (escritorio), 2vw (tableta y teléfono)
- Margen derecho: 2vw (tableta y teléfono)
Transformar Rotar
Por último, pero no menos importante, gire todo el módulo en la configuración de transformación.
- Izquierda: 270deg (escritorio), 0deg (tableta y teléfono)
Agregue el módulo Woo Images a la columna 2
Contenido dinámico
¡Al segundo módulo! Allí, el único módulo que necesitamos es el Módulo de Imagen Woo.
- Producto: Este producto
Configuraciones de imagen
Pase a la pestaña de diseño del módulo y cambie la configuración de la imagen de la siguiente manera:
- Esquinas redondeadas de la imagen: 1vw (todas las esquinas)
- Caja Shadow Blur Fuerza: 50px
- Color de sombra: rgba (0,0,0,0.3)
Dimensionamiento
Complete la configuración del módulo de imagen Woo cambiando el ancho y la alineación del módulo en la configuración de tamaño.
- Ancho: 35vw
- Alineación del módulo: centro
Agregue Woo Description Module # 1 a la Columna 3
Contenido dinámico
¡A la última columna! Allí, el primer módulo que necesitamos es el Módulo de Descripción Woo.
- Producto: Este producto
- Tipo de descripción: Descripción breve
Configuraciones de texto
Pase a la pestaña de diseño del módulo y cambie la configuración de texto de la siguiente manera:
- Fuente de texto: Montserrat
- Estilo de fuente de texto: mayúscula
- Tamaño del texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Espacio entre letras de texto: -0.07vw
- Altura de la línea de texto: 1.8em
Espaciado
Modifique la configuración de espaciado también.
- Margen superior: 9vw
- Acolchado izquierdo: 2vw (escritorio), 5vw (tableta y teléfono)
- Relleno derecho: 5vw
Agregue el módulo de precios Woo a la columna 3
Contenido dinámico
En el siguiente módulo, que es el módulo de precios Woo.
- Producto: Este producto
Configuración de texto de precio
Cambie la configuración de texto del precio del módulo de la siguiente manera:
- Fuente del precio: Montserrat
- Color del texto del precio: # 333333
- Tamaño del texto del precio: 3vw (escritorio), 7vw (tableta), 10vw (teléfono)
- Altura de la línea de precio: 1.8em
Espaciado
Modifique la configuración de espaciado también.
- Margen superior: 4vw
- Acolchado izquierdo: 2vw (escritorio), 5vw (tableta y teléfono)
- Relleno derecho: 2vw (escritorio), 5vw (tableta y teléfono)
Añadir Woo Añadir al módulo de carro a la columna 3
Contenido dinámico
El siguiente y último módulo que necesitamos para completar este diseño es el módulo Woo Add To Cart.
- Producto: Este producto
Configuraciones de campos
Cambie la configuración de los campos del módulo de la siguiente manera:
- Color de fondo de los campos: # 0a0900
- Color del texto de los campos: #ffffff
- Campos Fuente: Montserrat
- Tamaño del texto de los campos: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Esquinas redondeadas de los campos: 50vw (todas las esquinas)
Configuraciones de botones
Juega con la configuración de los botones también.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Color del texto del botón: #ffffff
- Color de fondo del botón: # ffcb49
- Ancho del borde del botón: 0px
- Fuente del botón: Montserrat
- Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Relleno inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Acolchado izquierdo: 4vw (escritorio), 8vw (tableta), 10vw (teléfono)
- Relleno derecho: 4vw (escritorio), 8vw (tableta), 10vw (teléfono)
Espaciado
Y complete la configuración del módulo agregando algunos valores de espaciado personalizados en diferentes tamaños de pantalla.
- Margen superior: 2vw
- Margen izquierdo: -3vw (escritorio), 5vw (tableta y teléfono)
- Margen derecho: 5vw (tableta y teléfono)
Convierta la página del producto en plantilla
Guardar diseño de página en Divi Library
Una vez que haya completado la página de producto a pantalla completa, puede usarla para cada uno de sus productos utilizando Divi’s Theme Builder. Para hacerlo, guarde el diseño que acaba de crear en su Divi Library.
Agregar nueva plantilla al generador de temas
Pase al generador de temas en su configuración de Divi y agregue una nueva plantilla.
Seleccione las páginas de productos en las que desea que se muestre este diseño.
Subir diseño al cuerpo de la plantilla
Luego, haga clic en "Agregar cuerpo global" y seleccione "Agregar de la biblioteca".
Elija su diseño en la pestaña "Sus diseños guardados".
¡Y guarda todos tus cambios!
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo recrear una hermosa página de producto a pantalla completa que puede usar para cualquier tipo de sitio web de comercio electrónico que esté configurando. Hemos adaptado la configuración de los distintos módulos de corte para crear un resultado sorprendente y limitar el desplazamiento vertical que se requiere. ¡Esperamos que este diseño lo inspire a crear sus propias páginas de productos a pantalla completa también! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.