Descargue una hermosa pantalla con una pantalla completa para la división

Debido a que los módulos de WooCommerce se han convertido en parte de la división, le mostré algunos modelos de páginas de productos que puede crear utilizando el DIV integrado. Hoy, agregamos un nuevo tutorial a esa lista, que le muestra cómo crear una hermosa página de pantalla. Se ajustamos a todo el contenido del producto en una sola sección, mientras creamos un diseño increíble. Aunque limitamos el desarrollo vertical que es necesario en la página del producto, el diseño no parece abrumador. También nos aseguramos de que el diseño permanezca hermoso y receptivo en un tamaño pequeño de la pantalla. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el look del producto en la pantalla completa de forma gratuita para poner su mano en el producto gratuito en la pantalla completa, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Suscríbete a nuestro canal de YouTube para comenzar a recrear! Abra la página del producto existente, lo primero que debe hacer es abrir una página de producto existente o crear una nueva. Para este aspecto, hemos agregado los siguientes elementos a la página de nuestro producto:
Titulo del producto
Imagen presentada
Breve descripción
Descripción
Precio
Active Divi y cambie la configuración de la página continua activando la división y cambiando la apariencia de la página en la configuración de la página.
Cambie a Visual Builder Una vez que termine, puede pasar a Visual Builder.

Elimine la sección existente dentro de Visual Builder, notará una sección con los elementos predeterminados en la página del producto. Puede continuar y eliminar toda la sección. En los próximos pasos de esta publicación, recrearemos nuestro propio diseño alternativo.

¡Agregue una nueva sección de espacio es hora de comenzar a crear! Agregue una nueva sección, abra la configuración de la sección y cambie los valores de llenado hacia arriba e inferior.

Revestimiento superior: 5VW
Revestimiento inferior: 5VW
Ocultar desbordamientos y el abrumador de la sección.

Overflow Horizontal: Ocultación de desbordamiento sobre sobrevaltado: Oculto
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y ajuste la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Columna 1 El índice Z también aumenta el índice z de la primera columna en la configuración de visibilidad.
IND ÍNDICE: 10

El fondo de gradiente de la columna 2 luego 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 gradiente: radial
Dirección radial: centro
Posición inicial: 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, el contenido dinámico es el momento de comenzar a agregar módulos! En la columna 1, la única forma en que necesitamos es un módulo de título de WOO.
Producto: este producto

Configuración de texto de título Vaya a la pestaña Diseño del módulo y modifique la configuración del texto del título de la siguiente manera:
Título de la fuente: Montserrat

Fuente de peso del título: Ultra Light
Alineación de texto del título: izquierda (escritorio), centro (tableta y teléfono)
Título Tamaño del texto: 9VW
Cambio de dimensión y tamaño del módulo.
Ancho: 50VW (escritorio), 100% (tableta y teléfono)

Espacio junto con la configuración del espacio.
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: 2 VW (tableta y teléfono)
Transformación de rotación No es última fila, gire todo el módulo en la configuración de transformación. STânga: 270deg (escritorio), 0deg (tableta y teléfono)
¡Agregue el módulo de imágenes WOO al contenido dinámico de la columna 2 al segundo módulo! Allí, la única forma en que necesitamos es el módulo de imagen WOO.

Producto: este producto
Configuración de imagen Vaya a la pestaña Diseño del módulo y cambie la configuración de la imagen de la siguiente manera:


Imagen esquinas redondeadas: 1 VW (todas las esquinas)
Poder de poco claro de la sombra de la caja: 50 px

Color de la 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 del tamaño.

Ancho: 35VW
Alineación del módulo: centro

¡Agregue el módulo de descripción Woo # 1 en 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 corta

Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:
Texto de fuente: Montserrat
Text -Text estilo: mayúscula

Tamaño de texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Texto de la carta de espacio: -0.07VW
La altura de la línea de texto: 1.8em
La espartación modifica y se establece la espacios.
Margen superior: 9VW
ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 5VW (tableta y teléfono)

Junta derecha: 5VW
Agregue el módulo de precio WOO al contenido dinámico de la columna 3 al siguiente módulo, que es el módulo de precio WOO.
Producto: este producto
Configuración Precio de texto Cambiar la configuración de texto del módulo de la siguiente manera:

Precio de fuente: Montserrat
Color de texto de precio: # 333333

Tamaño de texto de precio: 3VW (escritorio), 7VW (tableta), 10VW (teléfono)
La altura de la línea de precio: 1.8em
La espartación modifica y se establece la espacios.
Margen superior: 4VW
ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 5VW (tableta y teléfono)

Revestimiento derecho: 2VW (escritorio), 5VW (tableta y teléfono)
Agregue el módulo Agregar a la canasta al contenido dinámico de la columna 3 y el último módulo que necesitamos completar este diseño es el módulo Woo Agregar al CART.
Producto: este producto
Configuración Configuración modificada de campos de módulos de la siguiente manera:

Color de fondo de campo: # 0a0900
Color de texto de campo: #ffffff

Fuente de campos: Montserrat
Campos de tamaño de texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Esquinas redondeadas: 50 VW (todas las esquinas)
El botón Configuración también reproduce con la configuración de los botones.

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)

El color del texto del botón: #ffffff
El color de fondo del botón: # FFCB49
El ancho del nudo del botón: 0 PX
Botón de fuente: Montserrat
Revelaje superior: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Bajo forro: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)

ENLIZACIÓN IZQUIERDA: 4VW (escritorio), 8VW (tableta), 10VW (teléfono)

Revestimiento derecho: 4VW (escritorio), 8VW (tableta), 10VW (teléfono)
Espacio y complete la configuración del módulo agregando 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 una plantilla Guardar la página. Para hacer esto, guarde la apariencia que acaba de crear en la Biblioteca de la Divica. Acuerde una nueva plantilla en el constructor de temas Mover to Theme Builder en la configuración de la Divica y agregar una nueva plantilla.
Seleccione las páginas de productos que desea aparecer.
Cargue el aspecto en el cuerpo del cuerpo y luego haga clic en “Agregar un cuerpo global” y seleccione “Agregar de la biblioteca”.

Elija la apariencia en la pestaña “sus aspectos guardados”.

¡Y guarde todos los cambios!

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Pensamientos finales En esta publicación, le mostré cómo recrear una hermosa página de pantalla que puede usar para cualquier tipo de comercio electrónico que configure. Hemos establecido la configuración de diferentes módulos WOO para crear un resultado sorprendente y limitar el desarrollo vertical que se requiere. ¡Esperamos que este diseño lo inspire a crear sus propias páginas en la pantalla completa! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de 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.