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

Publicado: 2018-09-10

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

Ya sea que desee cambiar la forma en que las personas navegan en su página o si desea resaltar los servicios que ofrece su empresa, la creación de un panel lo ayudará a lograr exactamente lo que tenía en mente. Estamos usando solo las opciones integradas de Divi y, además, también le hemos proporcionado 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:

tablero divi

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 poder usarlos una vez que haya completado el tutorial. Cuando use un color específico para 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 (propaganda del color del texto del cuerpo)
Color n. ° 6: # e5e5e5 (fondo de columna 2)
Color # 7: #ffffff (color de fondo de la propaganda)

Oscuro

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

Colores mutuos

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

Empecemos 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 n. ° 1 (buscar en la paleta de colores)

tablero divi

Espaciado

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

Relleno superior: 100 px
Acolchado inferior: 100px

tablero divi

Agregar fila n. ° 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 columnas para su primera fila:

tablero divi

Color de fondo de la columna 1

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

Color de fondo de la columna 1: Color n. ° 2 (Buscar en la paleta de colores)

tablero divi

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 de la canaleta: 2
Ecualizar alturas de columna: Sí

tablero divi

Espaciado

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

Acolchado inferior: 100px
Relleno superior de la columna 1: 100 px
Relleno inferior de la columna 1: 100 px
Columna 1 Relleno a la izquierda: 50px
Columna 1 Relleno derecho: 50px

tablero divi

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 título Módulo de texto. 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 encabezado: izquierda
Color del texto del encabezado: 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)

tablero divi

Agregar 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 n. ° 4 (Buscar en la paleta de colores)

tablero divi

Dimensionamiento

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

Ancho: 27%

tablero divi

Espaciado

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

Margen superior: 50px

tablero divi

Agregar módulo de texto descriptivo 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. Una vez que haya agregado su contenido, cambie la orientación del texto en la configuración del texto:

Orientación del texto: justificar

tablero divi

Dimensionamiento

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

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

tablero divi

Espaciado

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

Margen superior: 50px

tablero divi

Agregar módulo Blurb a la columna 2

Icono

Ahora podemos pasar a la segunda columna. Empezaremos 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 Blurb y cambiar el contenido, seleccione un icono de su elección.

tablero divi