Cómo resaltar las categorías de productos en una sección sorprendente del héroe del sitio web div Div

Si está familiarizado con los sitios de comercio electrónico, sin duda está familiarizado con las categorías de productos. Las categorías de productos pueden ser algunas de las páginas más fuertes de su sitio web. Es por eso que es importante hacerlos fáciles de encontrar y resaltarlos de una manera simple y elegante. Con las opciones de división construidas, puede llevar su diseño en varias direcciones. En este tutorial, le mostraremos cómo resaltar las categorías de productos en la sección Hero. ¡Crearemos el ejemplo de diseño desde cero y esperamos que lo inspire a resaltar las categorías de productos y de su manera creativa!
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.

¡Empecemos a crear! Suscríbase a nuestro canal de YouTube Agregue un nuevo fondo de gradiente Inicie agregando una nueva sección a su página. Abra la configuración de esta sección y agregue un fondo degradado.
Color 1: #ffffff
Color 2: # 757F1E
Tipo de gradiente: lineal
Dirección de gradiente: 90 grados
Posición inicial: 50%
Posición final: 50%

Extienda luego, acceda a la pestaña de diseño y agregue algunas secciones de llenado personalizadas, arriba y abajo.
Revestimiento superior: 130 px
Finamiento inferior: 130 PX

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Columna 1 Color de fondo sin agregar módulos, abra la configuración de la fila y agregue un color de fondo a la primera columna.
Columna 1 Color de fondo: RGBA (0.0,0,0.19)

La imagen de fondo de la columna 1 agrega una imagen de fondo a la primera columna, junto con un modo de mezcla.
Columna 1 Posición de la imagen de fondo: Centro inferior 1 repetición de la imagen de fondo: sin repetición
Columna 1 Mezclar imagen de fondo: multiplicar
El color de fondo de la columna 2 de la segunda columna solo necesitará un color de fondo blanco.

Columna 2 Color de fondo: #ffffff
Dimensión Continúe accediendo a la pestaña de diseño de configuración de línea y modifique la configuración de tamaño.

Use ancho personalizado: sí
Unidad: PX
Ancho personalizado: 2000 PX
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
El espacio elimina y todos los revestimientos implícitos personalizados de la fila.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Box Sombra y agregue una sombra de caja sutil.

Poder de poco claro de la sombra de la caja: 80 px
Agregue un módulo de texto a la columna 2 Agregar contenido es hora de comenzar a agregar módulos. El primer módulo que necesitamos en la segunda columna es un modo de texto. Agregue un contenido a su elección.

Configuración Cabeza de texto Luego, acceda a la configuración del texto del encabezado y realice algunos cambios.

Título Fuente de peso: Ultra Bold
Encabezado de texto de tamaño: 60 PX (escritorio y tableta), 50 PX (teléfono)
Distancia entre las letras del encabezado: -4px
Altura de la línea de dirección: 0.8em
Sparting Agregue algunos valores de margen y llenado personalizados.

Margen superior: 17 VW
ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 4VW (tableta), 5VW (teléfono)
Agregue el módulo divisor a la columna 2 la segunda visibilidad y el último módulo requerido en la segunda columna es un módulo divisor. Asegúrese de que la opción Divisor del programa esté activada.

Divisor del espectáculo: si
Color luego cambie el color del separador.

Color: # 757F1E
Estilos modificados y el estilo divisor en la configuración de los estilos. Divisor de tiburones: doble

Dimensión y aumento el peso del divisor en la configuración del tamaño del módulo.
Peso del divisor: 6 PX

Finalmente espaciado, agregue algunos bordes personalizados desde arriba e abajo al módulo divisor.
Margen superior: 2VW

Margen inferior: 15 VW
¡Agregue la estructura de la fila # 2 de la columna por segundo! Elija la siguiente estructura de columna para esto:
Columna 1 Color de fondo Abra la configuración de la fila y agregue un color de fondo en la primera columna.

Columna 1 Color de fondo: # 212121

Dimensión luego acceda a la pestaña de diseño y juegue con el tamaño de la fila.
Use ancho personalizado: sí

Unidad: PX
Ancho personalizado: 2000 PX
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espacio eliminar y todo el revestimiento personalizado de la fila agregando “0px” al revestimiento superior e inferior.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Box Shadow por último, pero no menos importante, dale a la fila una sombra de una caja sutil.
Poder de poco claro de la sombra de la caja: 80 px


Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido El primer módulo que necesitamos es un módulo de texto. Agregue uno a la primera columna con un contenido particular de su elección.
Configuración de texto Continúe accediendo a la pestaña de diseño y cambiando la configuración de texto.

El peso de la fuente de texto: luz

Color de texto: #ffffff
Tamaño de texto: 18 PX (escritorio), 15 px (tableta), 12 px (teléfono)
La altura de la línea de texto: 1em
Orientación de texto: izquierda
Color de texto: Abierto
Configuración Muestra de texto y configuración para el texto del encabezado.
Frup 3 color de texto: #ffffff


Título 3 Dimensión de texto: 25 PX (escritorio), 20 px (tableta), 18 px (teléfono) rúbrica 3 letras espaciado: -1 px
Espaciado Agregue algunos valores de llenado personalizados en la configuración de espaciado.
Revestimiento superior: 30 px
Finamiento inferior: 30 px

ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Agregue el módulo de texto no. 2 En la columna 2 Agregar contenido Continúe agregando otro módulo de texto a la segunda columna. Agregue un contenido de contenido y conecte la página de categoría de producto a la configuración de conexión.
Color de fondo predeterminado luego, acceda a la configuración de fondo y agregue un color de fondo.
Color de fondo: #eaea

Coloque el cursor en el color de fondo, cambie este color de fondo al cursor.

Color de fondo: # FFBB00
Configuración de texto predeterminada Cambie alrededor de la configuración de texto en la siguiente pestaña de diseño.

El peso de la fuente de texto: Ultra Bold
Text -Text estilo: mayúscula

Color de texto: # 333333
Tamaño de texto: 16 PX
Texto de la carta de espacio: -1 PX
Orientación de texto: centro
Coloque el cursor en la configuración del texto y cambie esta configuración cuando salga.
Color de texto: #ffffff
Tamaño de texto: 20 PX


El espacio predeterminado también, aplicamos algunos valores de espacio predeterminados.
Revestimiento superior: 45 px
Finamiento inferior: 45 PX

ENNIZACIÓN IZQUIERDA: 5 PX
Revestimiento derecho: 5 PX
Distancia con el mouse lo que cambiaremos al salir.
Margen superior: -50 PX
Margen izquierdo: -20px

Revestimiento superior: 70 PX
Finamiento inferior: 70 PX
ENNIZACIÓN IZQUIERDA: 5 PX
Revestimiento derecho: 5 PX
La sombra de cuadro predeterminada continúa abriendo la configuración de la sombra del cuadro y agregue un cuadro completamente transparente.
Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (255,255,255.0) Caja de cajas Sombra Cambia el color completamente transparente de la caja en el flotador para aparecer.

Color de la sombra: RGBA (0.0,0,0.34)
Clon el módulo de texto no. 2 Dos veces y colóquelas en las columnas restantes después de haber terminado de cambiar el módulo de texto en la columna 2, puede seguir adelante y puede clonar el módulo dos veces y colocar los duplicados en las dos columnas restantes.
Cambie el primer duplicado Cambiar el contenido Abra el primer duplicado en la tercera columna y cambie el contenido y el enlace de la categoría de producto.

Cambie el cambio de color de fondo y el color de fondo de este módulo.
Color de fondo: #dddddd

Cambie el segundo duplicado Cambiar el contenido de cambio y el contenido del segundo duplicado en la columna 4.

Cambie el color de fondo junto con el color de fondo.

Color de fondo: # C6C6C6
Agregue un módulo de imagen para las dimensiones de pantalla más pequeñas a la columna 2 en la fila # 1 Cargue la imagen entre no menos, también agregaremos un módulo de imagen a la segunda columna de la primera fila para optimizar todo para dimensiones de pantalla más pequeñas.

Visibilidad Asegúrese de que este módulo aparezca solo en dimensiones de pantalla más pequeñas, escondiéndose en el escritorio en la pestaña avanzada del módulo.

Vista previa ahora, que hemos dado todos los pasos, para “echar un vistazo final al resultado en diferentes dimensiones de pantalla.