homefinance blog
Por defecto, tan pronto como agregue imágenes de la galería a sus productos WooCommerce, aparecerán horizontalmente debajo de la imagen presentada de su producto en el frente de diseño del producto. En algunos modelos específicos, el apilamiento vertical de estas imágenes de la galería Woo podría ser más conveniente, por ejemplo, en páginas de pantalla completa, por ejemplo. Si está buscando una forma rápida de apilar la galería Woo en la plantilla de producto que cree con el creador de temas de Divin, le gustará este tutorial. Te mostraremos paso a paso cómo llegar allí. ¡Acompañaremos este enfoque con una plantilla mínima de página de producto que podrá descargar gratis! Este tutorial funciona mejor en las páginas de productos que usan imágenes con una relación 1: 1.
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 la plantilla de producto de forma gratuita para poner su mano en la plantilla de página de producto gratuita, primero deberá descargarla con 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!
Construya la plantilla de página del producto dentro de la división del constructor de temas, vaya al creador de temas y agregue una nueva plantilla accediendo al creador de Divic y haga clic en “Agregar una nueva plantilla”.
Use la plantilla para todos los productos, utilizaremos esta plantilla para todos los productos, pero no dude en cambiar las condiciones como desee.
Ingrese el editor de plantillas del cuerpo después de crear la plantilla, haga clic en “Agregar cuerpo personalizado” y continúe seleccionando “construir cuerpo personalizado” para ser redirigidos al editor de plantillas.
Comience a construir el cuerpo de la plantilla de página para el fondo de pantalla de la Sección de cambio de categoría # 1 En el editor de plantillas, notará una sección. Abra esa sección y agregue un color de fondo blanco.
Color de fondo: #ffffff
Espacio ir a la pestaña de diseño y eliminar todos los valores predeterminados desde arriba e abajo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abrir la configuración de línea, pasar a la pestaña de diseño y cambiar la configuración de tamaño en consecuencia: use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 95%
Ancho máximo: 2560 PX
Alineación de filas: centro
Espacio usaremos un forro personalizado desde arriba y abajo y en tamaños de pantalla más pequeños.
Revestimiento superior: 100 PX (solo tableta y teléfono)
Finamiento inferior: 100 PX (solo tableta y teléfono)
El elemento CSS principal Para alinear el contenido de la columna vertebral en el escritorio, usaremos dos líneas de código CSS en el elemento principal de la fila. Traeremos la posesión de la pantalla en la tableta y el teléfono. Desktop: pantalla: Flex;
Alinine-Ritams: Centro; Tableta y teléfono: pantalla: bloque;
Antecedentes de gradiente de la columna 2 Una vez que se realiza la configuración de línea general, abra la configuración de la segunda columna y aplique un fondo de gradiente radial.
Color 1: # F7F2EF
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial
Dirección radial: centro
Posición inicial: 20%
Posición final: 20%
Columna 2 El espaciado vaya a la pestaña Diseño de columna y cambie los valores de llenado personalizados en diferentes tamaños de pantalla.
Revestimiento superior: 30% (escritorio), 10% (tableta y teléfono)
Finamiento inferior: 10%
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Agregue el módulo de imágenes WOO a la columna 1 ¡El contenido dinámico es hora de agregar módulos! El primer módulo que necesitamos en la columna 1 es un módulo de imágenes WOO. Este tutorial funciona mejor si usa una imagen presentada y imágenes de la galería con una relación 1: 1. De esta manera, podremos convertir las imágenes en círculos en los siguientes pasos. Después de haber agregado el módulo de imágenes WOO, asegúrese de que el contenido dinámico esté configurado en “este producto”. Producto: este producto
Agregue un módulo de código a la columna 1 Agregue el código CSS justo en el módulo de imágenes WOO, agregaremos un módulo de código. El código CSS que insertamos en este módulo de código nos ayudará a apilar verticalmente las imágenes de la galería Woo en el lado izquierdo de nuestra columna.
.Single-Product Div.Product .WOOCOMMERCE-PRODUCT-GRALEY .FLEX-VIEWPORT {
Ancho: 80%! Importante;
Flotar derecho;
Border-Radius: 100VW;
}
.WOOCOMMERCE-PRODUCT-GRALEY__Image.Flex-Active-Slide {
Ancho: 12.5%! Importante;
}
.Single-Product Div.Product .WOOCOMMERCE-PRODUCT-GRALEY .FLEX-VIEWPORT IMG {
Ancho: 100%;
}
.ET_PB_WC_IMAGES DIV.Images OL.Flex-Control-Thumbs.Flex-Control-Nav {
Ancho: 15%! Importante;
Flotador izquierdo;
}
.ET_PB_WC_IMAGES DIV.Images OL.Flex-Control-Thumbs.Flex-Control-Nav Li {
Ancho: 100%;
Flotante: ninguno;
}
.ET_PB_WC_IMAGES DIV.Images OL.Flex-Control-Thumbs.Flex-Control-Nav Li IMG {
Border-Radius: 100VW;
}
Agregue el módulo de título WOO al contenido dinámico de la columna 2 a la siguiente columna. Allí, el primer módulo que necesitamos es un módulo de título Woo.
Producto: este producto
Configuración de texto de título Cambiar a la pestaña Diseño del módulo y modificar la configuración del texto del encabezado de la siguiente manera:
Fuente del título: para sans
Peso de la fuente del título: Título del texto del neumático: # 000000
Título Tamaño del texto: 84 PX (escritorio), 60 PX (tableta), 45 PX (teléfono)
Agregue el módulo de descripción de WOO al contenido dinámico de la columna 2 al siguiente módulo, que es un módulo de descripción Woo.
Producto: este producto
Tipo de descripción: descripción corta
Configuración de texto Cambie la configuración de texto del módulo en consecuencia:
Texto de fuente: Karla
Tamaño de texto: 17 PX (escritorio y tableta), 15 PX (teléfono)
La altura de la línea de texto: 1.9em
Espacio Complete la configuración del módulo agregando algunos bordes superior e inferior.
Margen superior: 5%
Margen inferior: 5%
Agregue el módulo de precio WOO al contenido dinámico de la columna 2 Agregue un módulo de precio WOO justo en el módulo de descripción de WOO.
Producto: este producto
Configuración de texto de precio Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de precio de la siguiente manera:
Precio de fuente: para sans
El precio del peso de la fuente: en negrita
Color de texto de precio: # CE8654
Tamaño del texto del precio: 27 PX
Agregue Woo Agregar a los módulos de carrito en la columna 2 Contenido dinámico y el último módulo que necesitamos completar este tutorial es un módulo Woo Agregar al CART.
Producto: este producto
Configuración de campo Vaya a la pestaña Diseño y cambie la configuración de campo de la siguiente manera:
El color del fondo del campo: #ffffff
Color de texto de campo: # 000000
Campos de fuentes: Open Sans
Todas las esquinas: 0 PX
Campos el ancho del borde inferior: 1 PX
Campos Color Borde inferior: # CE8654
Establezca el botón y luego estilice el botón en la configuración del botón.
Use estilos personalizados para el botón: Sí
El color del texto del botón: #ffffff
El color de fondo del botón: # 0A0201
El ancho del nudo del botón: 0 PX
Botón Chenar Rase: 100 pxbuton Font: Pt Sans
Botón de peso de fuente de fuente: en negrita
Forro para botones: 20 px
Forro para botones: 20 px
Botón izquierdo de revestimiento: 50 PX
Botón de revestimiento derecho: 50 PX
Espacio y complete la configuración del módulo y este tutorial, agregando un margen superior al módulo de CART, agregue al CART. Después de haber terminado de cambiar la plantilla del producto, ¡asegúrese de guardar todos los cambios de creador de temas antes de ver el resultado en sus páginas de productos!
Margen superior: 5%
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 he mostrado cómo ser creativo con las páginas del producto que crea utilizando los módulos de Builder y WooCommerce de Divin. Específicamente, le mostré cómo apilar verticalmente las imágenes de la galería. Este enfoque coincide con un diseño completo de la página del producto, pero puede ser útil para cualquier tipo de plantilla de producto que cree. ¡Podrías descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, 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.
