Descargue una hermosa página de producto a pantalla completa para Divi


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

página de producto a pantalla completa

Móvil

página de producto a pantalla completa

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.

página de producto a pantalla completa

Cambiar a Visual Builder

Una vez hecho esto, puede cambiar a Visual Builder.

página de producto a pantalla completa

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.

página de producto a pantalla completa

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

página de producto a pantalla completa

Desbordamientos

Ocultar los desbordamientos de la sección también.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

página de producto a pantalla completa

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

página de producto a pantalla completa

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%

página de producto a pantalla completa

Columna 1

Índice Z

También estamos aumentando el índice z de la primera columna en la configuración de visibilidad.

  • Índice Z: 10

página de producto a pantalla completa

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)

página de producto a pantalla completa

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

página de producto a pantalla completa

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

página de producto a pantalla completa

Dimensionamiento

Modifique el tamaño del módulo también.

  • Ancho: 50vw (escritorio), 100% (tableta y teléfono)

página de producto a pantalla completa

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)

página de producto a pantalla completa

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)

página de producto a pantalla completa

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

página de producto a pantalla completa

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)

página de producto a pantalla completa

  • Caja Shadow Blur Fuerza: 50px
  • Color de sombra: rgba (0,0,0,0.3)

página de producto a pantalla completa

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

página de producto a pantalla completa

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

página de producto a pantalla completa

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

página de producto a pantalla completa

Espaciado

Modifique la configuración de espaciado también.

  • Margen superior: 9vw
  • Acolchado izquierdo: 2vw (escritorio), 5vw (tableta y teléfono)
  • Relleno derecho: 5vw

página de producto a pantalla completa

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

página de producto a pantalla completa

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

página de producto a pantalla completa

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)

página de producto a pantalla completa

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

página de producto a pantalla completa

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

página de producto a pantalla completa

  • Tamaño del texto de los campos: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Esquinas redondeadas de los campos: 50vw (todas las esquinas)

página de producto a pantalla completa

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

página de producto a pantalla completa

  • Fuente del botón: Montserrat

página de producto a pantalla completa

  • 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)

página de producto a pantalla completa

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)

página de producto a pantalla completa

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.

página de producto a pantalla completa

Agregar nueva plantilla al generador de temas

Pase al generador de temas en su configuración de Divi y agregue una nueva plantilla.

página de producto a pantalla completa

Seleccione las páginas de productos en las que desea que se muestre este diseño.

página de producto a pantalla completa

Subir diseño al cuerpo de la plantilla

Luego, haga clic en "Agregar cuerpo global" y seleccione "Agregar de la biblioteca".

página de producto a pantalla completa

Elija su diseño en la pestaña "Sus diseños guardados".

página de producto a pantalla completa

¡Y guarda todos tus cambios!

página de producto a pantalla completa

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

página de producto a pantalla completa

Móvil

página de producto a pantalla completa

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.