Cómo resaltar categorías de productos en una impresionante sección de héroes del sitio web de Divi

Si está familiarizado con los sitios web de comercio electrónico, indudablemente también está familiarizado con las categorías de productos. Las categorías de productos pueden ser algunas de las páginas más poderosas de su sitio web. Por eso es importante que sean fáciles de encontrar y resaltarlos de una manera sencilla y elegante. Con las opciones integradas de Divi, puede llevar su diseño en muchas direcciones. En este tutorial, le mostraremos cómo resaltar categorías de productos en su sección de héroe. Crearemos el ejemplo de diseño desde cero y, con suerte, también lo inspirará a resaltar las categorías de productos a su manera creativa.

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

¡Empecemos a crear!

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

Fondo degradado

Comience agregando una nueva sección a su página. Abra la configuración de esta sección y agréguele un fondo degradado.

• Color 1: #ffffff
• Color 2: # 757f1e
• Tipo de degradado: lineal
• Dirección del gradiente: 90 grados
• Posición inicial: 50%
• Posición final: 50%

Espaciado

Luego, vaya a la pestaña de diseño y agregue algo de relleno superior e inferior personalizado a la sección.

• Acolchado superior: 130px
• Acolchado inferior: 130px

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Color de fondo de la columna 1

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo a la primera columna.

• Color de fondo de la columna 1: rgba (0,0,0,0.19)

Imagen de fondo de la columna 1

Agregue una imagen de fondo a la primera columna junto con un modo de fusión.

• Columna 1 Posición de la imagen de fondo: Centro inferior
• Repetición de la imagen de fondo de la columna 1: Sin repetición
• Columna 1 Mezcla de imagen de fondo: multiplicar

Color de fondo de la columna 2

La segunda columna solo necesitará un color de fondo blanco.

• Color de fondo de la columna 2: #ffffff

Dimensionamiento

Continúe yendo a la pestaña de diseño de la configuración de fila y cambie la configuración de tamaño.

• Usar ancho personalizado: Sí
• Unidad: PX
• Ancho personalizado: 2000px
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

Elimine también todo el relleno personalizado predeterminado de la fila.

• Relleno superior: 0px
• Acolchado inferior: 0px

Sombra de la caja

Y agregue una sombra de caja sutil.

• Fuerza de desenfoque de sombra de caja: 80px

Agregar módulo de texto a la columna 2

Agregar contenido

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitaremos en la segunda columna es un título Módulo de texto. Agregue algún contenido de su elección.

Configuración del texto del encabezado

A continuación, vaya a la configuración del texto del encabezado y realice algunos cambios.

• Peso de la fuente del encabezado: Ultra Bold
• Tamaño del texto del encabezado: 60 px (escritorio y tableta), 50 px (teléfono)
• Espaciado entre letras del encabezado: -4px
• Altura de la línea de rumbo: 0.8em

Espaciado

Agregue también algunos valores de margen y relleno personalizados.

• Margen superior: 17vw
• Acolchado izquierdo: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)

Agregar módulo divisor a la columna 2

Visibilidad

El segundo y último módulo necesario en la segunda columna es un módulo divisor. Asegúrese de que la opción Mostrar divisor esté habilitada.

• Mostrar divisor: Sí

Color

A continuación, cambie el color del divisor.

• Color: # 757f1e

Estilos

Modifique también el estilo del divisor en la configuración de estilos.

• Estilo del divisor: doble

Dimensionamiento

Y aumente el Peso del divisor en la configuración de tamaño del módulo.

• Peso del divisor: 6px

Espaciado

Por último, agregue un margen superior e inferior personalizado al módulo divisor.

• Margen superior: 2vw
• Margen inferior: 15vw

Agregar fila n. ° 2

Estructura de la columna

¡A la segunda fila! Elija la siguiente estructura de columnas para ello:

Color de fondo de la columna 1

Abra la configuración de la fila y agregue un color de fondo a la primera columna.

• Color de fondo de la columna 1: # 212121

Dimensionamiento

A continuación, vaya a la pestaña de diseño y juegue con el tamaño de la fila.

• Usar ancho personalizado: Sí
• Unidad: PX
• Ancho personalizado: 2000px
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Elimine también todo el relleno personalizado de la fila agregando '0px' al relleno superior e inferior.

• Relleno superior: 0px
• Acolchado inferior: 0px

Sombra de la caja

Por último, pero no menos importante, dale a la fila una sombra de caja sutil.

• Fuerza de desenfoque de sombra de caja: 80px

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido

El primer módulo que necesitaremos es un módulo de texto. Agregue uno a la primera columna con algún contenido de su elección.

Configuración de texto

Continúe yendo a la pestaña de diseño y cambiando la configuración del texto.

• Peso de la fuente del texto: Ligero
• Color del texto: #ffffff
• Tamaño del texto: 18px (escritorio), 15px (tableta), 12px (teléfono)
• Altura de la línea de texto: 1em
• Orientación del texto: izquierda
• Color del texto: claro

Configuración del texto del encabezado

Modifique también la configuración del texto del encabezado.

• Título 3 Color del texto: #ffffff
• Tamaño del texto del encabezado 3: 25 px (escritorio), 20 px (tableta), 18 px (teléfono)
• Espacio entre letras del encabezado 3: -1px

Espaciado

Agregue también algunos valores de relleno personalizados en la configuración de espaciado.

• Acolchado superior: 30px
• Acolchado inferior: 30px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Agregue el módulo de texto n. ° 2 a la columna 2

Agregar contenido

Continúe agregando otro módulo de texto a la segunda columna. Agregue algún contenido de su elección y vincule la página de categoría de producto en la configuración del enlace también.

Color de fondo predeterminado

Luego, vaya a la configuración de fondo y agregue un color de fondo.

• Color de fondo: #eaeaea

Colocar el cursor sobre el color de fondo

Cambie este color de fondo al pasar el mouse.

• Color de fondo: # ffbb00

Configuración de texto predeterminada

A continuación, cambie la configuración del texto en la pestaña de diseño.

• Peso de la fuente del texto: Ultra Bold
• Estilo de fuente de texto: mayúsculas
• Color del texto: # 333333
• Tamaño del texto: 16px
• Espaciado de letras de texto: -1px
• Orientación del texto: centro

Configuración de texto flotante

Y modifique esta configuración al pasar el mouse.

• Color del texto: #ffffff
• Tamaño del texto: 20px

Espaciado predeterminado

También estamos aplicando algunos valores de espaciado predeterminados.

• Acolchado superior: 45px
• Acolchado inferior: 45px
• Relleno izquierdo: 5px
• Relleno derecho: 5px

Espaciado de desplazamiento

Que cambiaremos al pasar el mouse.

• Margen superior: -50px
• Margen izquierdo: -20px
• Acolchado superior: 70px
• Acolchado inferior: 70px
• Relleno izquierdo: 5px
• Relleno derecho: 5px

Sombra de cuadro predeterminada

Continúe abriendo la configuración de la sombra del cuadro y agregue una sombra del cuadro completamente transparente.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (255,255,255,0)

Sombra de caja flotante

Cambie el color de la sombra del cuadro completamente transparente al pasar el mouse para que aparezca.

• Color de sombra: rgba (0,0,0,0.34)

Clonar el módulo de texto n. ° 2 dos veces y colocarlo en las columnas restantes

Una vez que haya terminado de modificar el Módulo de texto en la columna 2, puede continuar y clonar el módulo dos veces y colocar los duplicados en las dos columnas restantes de la fila.

Cambiar el primer duplicado

Cambiar contenido

Abra el primer duplicado en la tercera columna y cambie el contenido y el enlace de la categoría de producto.

Cambiar el color de fondo

Cambie también el color de fondo de este módulo.

• Color de fondo: #dddddd

Cambiar segundo duplicado

Cambiar contenido

Cambie también el contenido del segundo duplicado en la columna 4.

Cambiar el color de fondo

Junto con el color de fondo.

• Color de fondo: # c6c6c6

Agregue el módulo de imagen para tamaños de pantalla más pequeños a la columna 2 de la fila n. ° 1

Cargar imagen

Por último, pero no menos importante, también agregaremos un módulo de imagen a la segunda columna de la primera fila para optimizar todo para tamaños de pantalla más pequeños.

Visibilidad

Asegúrese de que este módulo solo aparezca en tamaños de pantalla más pequeños ocultándolo en el escritorio en la pestaña avanzada del módulo.

Avance

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

Pensamientos finales

En esta publicación, hemos recreado un impresionante ejemplo de diseño que pone las principales categorías de productos de su sitio web en el centro de atención. Esperamos que este tutorial también lo inspire a crear sus propios tipos de diseños. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!