Descargue una hermosa página de producto en pantalla completa para Divi
Publicado: 2019-11-04Dado que los módulos 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, estamos agregando un nuevo tutorial a esa lista mostrándote 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 atractivo y con capacidad de respuesta en pantallas pequeñas. ¡También podrá descargar el archivo JSON de forma gratuita!
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
Descargue el diseño del producto en pantalla completa GRATIS
Para tener en sus manos 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 formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Suscríbete a nuestro canal de Youtube
¡Empecemos a recrear!
Abrir página de producto existente
Lo primero que debe 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 producto:
- Titulo del producto
- Foto principal
- Breve descripción
- Descripción
- Precio
Habilitar Divi y modificar la configuración de la 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 de Visual Builder, verá una sección con los elementos predeterminados de la página del producto. Puede continuar y eliminar toda esta sección. En los siguientes pasos de esta publicación, recrearemos nuestro propio diseño alternativo.
Agregar nueva sección
Espaciado
¡Es 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.
- Acolchado superior: 5vw
- Acolchado inferior: 5vw
Desbordes
Oculte también los desbordamientos de la sección.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de fila y ajuste la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho de la canaleta: 1
- Ancho: 100%
- Ancho máximo: 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
Abra la configuración de la columna 2 a continuación 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)
Agregar 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
Vaya 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 también el tamaño del módulo.
- 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 Girar
Por último, pero no menos importante, rote todo el módulo en la configuración de transformación.
- Izquierda: 270 grados (escritorio), 0 grados (tableta y teléfono)
Agregue el módulo de imágenes de Woo a la columna 2
Contenido dinámico
¡Vamos al segundo módulo! Allí, el único módulo que necesitamos es Woo Image Module.
- Producto: este producto
Configuraciones de imagen
Vaya 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)
- Fuerza de desenfoque de sombra de caja: 50px
- Color de sombra: rgba (0,0,0,0.3)
Dimensionamiento
Complete la configuración del módulo de imagen de 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 el módulo de descripción de Woo n. ° 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 de Woo.
- Producto: este producto
- Tipo de descripción: Descripción breve
Configuración de texto
Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:
- Fuente de texto: Montserrat
- Estilo de fuente de texto: mayúsculas
- Tamaño del texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Espaciado de letras de texto: -0.07vw
- Altura de la línea de texto: 1.8em
Espaciado
Modifique también la configuración de espaciado.
- Margen superior: 9vw
- Acolchado izquierdo: 2vw (escritorio), 5vw (tableta y teléfono)
- Acolchado derecho: 5vw
Agregue el módulo Woo Price a la columna 3
Contenido dinámico
Pasemos al siguiente módulo, que es el módulo Woo Price.
- Producto: este producto
Configuración de texto de precio
Cambie la configuración del texto del precio del módulo de la siguiente manera:
- Fuente de precio: Montserrat
- Precio Color del texto: # 333333
- Precio Tamaño del texto: 3vw (escritorio), 7vw (tableta), 10vw (teléfono)
- Altura de la línea de precios: 1.8em
Espaciado
Modifique también la configuración de espaciado.
- Margen superior: 4vw
- Acolchado izquierdo: 2vw (escritorio), 5vw (tableta y teléfono)
- Relleno derecho: 2vw (escritorio), 5vw (tableta y teléfono)
Agregue Woo Add To Cart Module 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
Configuración 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
- Fuente Fields: Montserrat
- Tamaño del texto de los campos: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Esquinas redondeadas de campos: 50vw (todas las esquinas)
Configuración de botones
Juega también con la configuración de los botones.
- 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
- Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Acolchado 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)
Convertir la página del producto en una plantilla
Guardar diseño de página en la biblioteca Divi
Una vez que haya completado la página del producto en pantalla completa, puede usarla para cada uno de sus productos usando el Creador de temas de Divi. Para hacer eso, guarde el diseño que acaba de crear en su Biblioteca Divi.
Agregar nueva plantilla al generador de temas
Continúe con Theme Builder en la configuración de Divi y agregue una nueva plantilla.
Seleccione las páginas de productos en las que desea que aparezca este diseño.
Subir diseño al cuerpo de la plantilla
Luego, haga clic en 'Agregar cuerpo global' y seleccione 'Agregar desde 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 en pantalla completa que puede usar para cualquier tipo de sitio web de comercio electrónico que esté configurando. Hemos hecho coincidir la configuración de los diversos módulos de woo 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.