Creación de un panel de navegación llamativo con las nuevas estructuras de columnas de Divi

¿Busca una forma nueva y única de estructurar su página de inicio? Crear un panel de navegación podría ser el camino a seguir. En este tutorial, le mostraremos exactamente cómo puede lograr una impresionante página de tablero que puede usar para muchos propósitos.

Ya sea que desee cambiar la forma en que las personas navegan en su página o que desee resaltar los servicios que ofrece su empresa, la creación de un tablero lo ayudará a lograr exactamente lo que tenía en mente. Estamos usando Divi y sus opciones integradas únicamente y además de eso, también le proporcionamos una paleta de colores claros y oscuros que puede usar. Este tutorial está inspirado en uno de los diseños de Edoardo Mercati .

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final en diferentes tamaños de pantalla:

Paletas de colores

Antes de comenzar, puede elegir si desea crear un tablero claro u oscuro. Los colores que necesitaría para cada paleta de colores se enumeran a continuación. Asegúrese de mantener estos códigos de color cerca para que pueda usarlos una vez que complete el tutorial. Cuando utilice un color específico de la paleta de colores, nos referiremos al número de color.

Luz

Color #1: #f6f6f6 (fondo de la sección)
Color #2: #ffffff (fondo de columna)
Color #3: #333333 (color del texto del título)
Color #4: #000000 (color divisor)
Color n.º 5: n.º 6F6B68 (difusión del color del texto del cuerpo)
Color #6: #e5e5e5 (fondo de columna 2)
Color #7: #ffffff (color de fondo borroso)

Oscuro

Color n.° 1: n.° 141414
Color n.° 2: n.° 212121
Color #3: #ffffff
Color #4: #ffffff
Color #5: #dddddd
Color n.° 6: n.° 212121
Color n.° 7: n.° 333333

Colores mutuos

Color #7: #0457ff
Color #8: #cc0432
Color #9: #839e00
Color n.º 10: #c68e00

Comencemos a Crear

Agregar nueva sección estándar

Color de fondo

Comience agregando una nueva sección a su página. Luego, abra la configuración de la sección y agregue un color de fondo:

Color de fondo: Color #1 (Buscar en la paleta de colores)

Espaciado

Para crear espacio adicional en la parte superior e inferior, también aplicaremos un relleno personalizado:

Relleno superior: 100px
Relleno inferior: 100px

Añadir Fila #1

Estructura de la columna

Ahora que hemos terminado de modificar la configuración de la sección, podemos comenzar a agregar filas. Elija la siguiente estructura de columna para su primera fila:

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 de la columna 1:

Columna 1 Color de fondo: Color #2 (Buscar en la paleta de colores)

Dimensionamiento

Vaya a la pestaña Diseño a continuación y cambie la configuración de Tamaño de su fila:

Hacer esta fila de ancho completo: Sí
Usar ancho de canalón personalizado: Sí
Ancho del canalón: 2
Igualar alturas de columna: Sí

Espaciado

Por último, agregue algo de relleno a la fila y la primera columna:

Relleno inferior: 100px
Columna 1 Relleno superior: 100px
Relleno inferior de la columna 1: 100px
Columna 1 Relleno izquierdo: 50px
Columna 1 Relleno derecho: 50px

Agregar módulo de texto de título a la columna 1

Configuración de texto H1

¡Es hora de comenzar a agregar módulos! Comenzaremos agregando un módulo de texto de título. Una vez que haya agregado su copia H1, cambie la configuración del texto del encabezado de su módulo:

Peso de la fuente del encabezado: Negrita
Alineación del texto del título: Izquierda
Color del texto del título: Color n.° 3 (Buscar en la paleta de colores)
Tamaño del texto del encabezado: 75 px (escritorio), 55 px (tableta), 36 px (teléfono)

Agregue el módulo divisor a la columna 1

Color del divisor

Justo debajo del título Módulo de texto, continúe y agregue un Módulo divisor con el siguiente color:

Color del divisor: Color #4 (Buscar en la paleta de colores)

Dimensionamiento

Abra la configuración de Tamaño a continuación y ajuste el ancho de su divisor:

Ancho: 27%

Espaciado

Agregue un poco de espacio en la parte superior de su divisor también:

Margen superior: 50px

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

Configuración de texto

El siguiente y último módulo de esta fila es un módulo de texto de descripción. Después de agregar su contenido, cambie la orientación del texto en la configuración de texto:

Orientación del texto: Justificar

Dimensionamiento

Cambie también la configuración de tamaño de este módulo:

Ancho: 80 % (escritorio), 100 % (tableta y teléfono)

Espaciado

Y agregue algo de espacio en la parte superior de su módulo usando un margen personalizado:

Margen superior: 50px

Agregue el módulo Blurb a la columna 2

Icono

Ahora podemos pasar a la segunda columna. Comenzaremos creando uno de los módulos de Blurb. Luego, podemos clonar este módulo y cambiarlo en consecuencia. Después de agregar el módulo de Blurb y cambiar el contenido, seleccione un icono de su elección.