Creación de un llamativo panel de navegación con el nuevo Div

¿Busca una forma nueva y única de estructurar su página de inicio? Crear un tablero de navegación podría ser el camino a seguir. En este tutorial, le mostraremos exactamente cómo puede obtener una increíble 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 desean resaltar los servicios ofrecidos por su empresa, crear un tablero lo ayudará a lograr exactamente lo que ha considerado. Solo utilizamos las opciones de división incorporadas y, además, también le ofrecemos una paleta de colores claros y oscuros que puede usar. Este tutorial está inspirado en uno de los dibujos de Edoardo Mercati.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo al resultado final en diferentes tamaños de pantalla:

Palets de color antes de comenzar, puede elegir si desea crear un tablero abierto o oscuro. Los colores que necesita 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 pase por el tutorial. Al usar un color de color específico de color, nos referiremos al número de color. Luz
Color # 1: # F6F6F6 (fondo de sección)
Color # 2: #FFFFFF (fondo de columna)
Color # 3: # 333333 (Color de texto del título)
Color # 4: # 000000 (color divisor)
Color # 5: # 6F6B68 (texto de texto en color de la propaganda)
Color # 6: # E5E5E5 (fondo de columna 2)
Color # 7: #FFFFFF (color de fondo de la propaganda)
Oscuridad
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
Comencemos a crear agregar un nuevo color de fondo estándar. Inicie 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 (encontrar en la paleta de colores)
Espacio para crear un espacio adicional en la parte superior e inferior, también aplicaremos algunos rellenos personalizados:

Revestimiento superior: 100 px
Finamiento inferior: 100 PX
Agregue la estructura de la fila # 1 de la columna ahora que hemos terminado de cambiar la configuración de la sección, podemos comenzar a agregar filas. Elija la siguiente estructura de columna para la primera fila:

Columna 1 Color de fondo sin agregar módulos, abra la configuración de la fila y agregue un color de fondo para la columna 1:

Columna 1 Color de fondo: Color # 2 (encontrar en la paleta de colores)
Acceso de dimensión La siguiente pestaña de diseño y cambia la configuración de tamaño de su fila:

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2
Igualar las alturas de la columna: sí
Finalmente espaciado, agregue algunos rellenos a una fila y primera columna:

Finamiento inferior: 100 PX
Columna 1 revestimiento superior: 100 px
Columna 1 revestimiento inferior: 100 px
Columna 1 Reinicio izquierdo: 50 PX
Columna 1 Revelaje derecho: 50 PX
Agregue el módulo de texto de título en la columna 1 El texto H1 ¡Es hora de comenzar a agregar módulos! Comenzaremos agregando un modo de texto. Una vez que haya agregado Copy H1, cambie la configuración del texto del encabezado del módulo:

Título de la fuente Peso: Bolinización del texto del encabezado: Izquierda
Color Text Heart: Color # 3 (encontrar en la paleta de colores)
Encabezado de texto de tamaño: 75 PX (escritorio), 55 PX (tableta), 36 PX (teléfono)
Agregue un módulo divisor en la columna 1 divisor de color justo debajo del modo de texto del título, continúe y agregue un módulo divisor con el siguiente color:
Color divisor: Color # 4 (encontrar en la paleta de colores)

Dimensión luego abra la configuración de tamaño y ajuste el ancho del separador:
Ancho: 27%

Espacio agregar un espacio y en la parte superior del separador:
Margen superior: 50 PX

Agregue el módulo de descripción de texto en la columna 1 Configuración de texto A continuación y el último módulo en esta fila es una descripción del modo de texto. Después de haber agregado el contenido, cambie la orientación del texto en la configuración del texto:
Orientación de texto: justificar

Dimensión modificar y configuración de dimensión de este módulo:
Ancho: 80% (escritorio), 100% (tableta y teléfono)

Espacio y agregue espacio a la parte superior de su módulo utilizando el margen personalizado:
Margen superior: 50 PX

Agregue la propaganda de módulos en el icono de la columna 2 Ahora podemos pasar a la segunda columna. Comenzaremos creando uno de los módulos de propaganda. Más tarde, podemos clonar este módulo y cambiarlo en consecuencia. Después de agregar módulos de propaganda y cambiar de contenido, seleccione un icono de su elección.
El color del sótano continúa agregando un color de fondo al módulo de la propaganda:

Color de fondo: Color # 7 (encontrar en la paleta de colores)

Patrón del sótano Guardar el siguiente modelo pequeño en su computadora:
Cárguelo como una imagen de fondo junto con la siguiente configuración:

El tamaño de la imagen de fondo: el tamaño real

Posición de la imagen de fondo: Centro
Repita la imagen de fondo: repita el icono Vaya a la pestaña Diseño, abra la configuración de la imagen y el icono y cambie la configuración en consecuencia:
Icono de color: color # 7 (encontrar en la paleta de colores)
Icono del círculo: si

Color círculo: #ffffff
Use el tamaño de fuente de iconos: 33 PX
Configuración de texto luego abra la configuración de texto y realice algunos cambios:
Orientación de texto: centro
Color de texto: Abierto

Configuración del texto del título El título de nuestro módulo de blurb necesita algunos cambios adicionales:
Fuente de peso del título: Ultra Bold
Estilo de fuente de título: mayúscula

Espacio no menos importante, agregue un forro personalizado para darle al módulo de propaganda el aspecto y la sensación deseados:
Revestimiento superior: 75 PX
Finamiento inferior: 75 PX

Revelaje izquierdo: 30 PX
Revestimiento derecho: 30 PX
Clone el módulo de la propaganda tres veces y coloque 2 en la columna que queda ahora que he terminado con los primeros módulos, continuar y clonar tres veces. Deje uno de los duplicados en la primera columna y coloque los otros dos en la columna restante de la fila.
Cambie los nuevos módulos de propaganda Cambie el icono para cada uno de los duplicados, deberá cambiar el icono utilizado.
Cambie el color de fondo también, deberá cambiar el color de fondo en un color o uno de los colores en la paleta de colores (color # 8, # 9 o # 10).

Cambie el color del icono Cambie el color del icono al mismo color que usa para el fondo.

Agregar fila # 2 La segunda columna que la estructura necesita la siguiente estructura de columna:

Dimensión Abra la configuración de la fila, acceda a la configuración del tamaño y aumente el ancho:

Haga que esta fila sea un ancho completo: Dale el ancho personalizado de la canaleta: Sí

El ancho de la canaleta: 2


Espacio luego abra la configuración del espacio y agregue un forro personalizado en la parte superior e inferior de la fila:
Revestimiento superior: 50 px
Revestimiento inferior: 50 PX
Agregue una configuración del módulo de texto H2 El primer módulo que necesita en la columna de fila es un título de título. Después de agregar contenido H2, cambie la configuración del texto H2:

Título 2 Fuente de peso: Bold
Título 2 Alineación del texto: Izquierda
Título 2 Color de texto: Color # 3 (Buscar en la paleta de colores)

Tamaño de texto de tamaño: 32 PX
Agregue un módulo de color divisor justo debajo del modo de texto del título, agregue un módulo divisor con el siguiente color:
Color: Color # 4 (encontrar en la paleta de colores)
Dimensión Cambiar el ancho del separador aún más:
Ancho: 9%

Finalmente, espaciado agregar espacio a la parte superior del separador:
Revestimiento superior: 20 px

Agregue la estructura de la columna de la fila # 3 Para compartir sus características resaltadas, seleccione la siguiente estructura de columnas para su nueva fila:
El color del fondo de la columna abre la configuración de la fila y agregue el siguiente color de fondo a cada una de sus columnas:

Color de fondo de la columna: Color # 6 (encontrar en la paleta de colores)
La dimensión aumenta el ancho de la siguiente fila:

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2

Igualar las alturas de la columna: sí
Espaciado y agregue un poco de llenado:
Revestimiento superior: 100 px
Finamiento inferior: 100 PX
Agregue los módulos de la propaganda al icono de la columna 1 Ahora podemos comenzar a agregar diferentes módulos. Comenzaremos con un módulo de propaganda en la primera columna. Después de agregar el contenido, seleccione un icono de su elección. Wallpaper le da a su módulo una propagla de fondo más:

Color de fondo: Color # 7 (encontrar en la paleta de colores)
Icono de configuración Vaya a la pestaña Diseño y cambie la configuración del icono:
Icono de color: #ffffff

Icono del círculo: si

Color círculo: color # 7 (encontrar en la paleta de colores)
Use el icono del tamaño de la fuente: sí

Icono de tamaño de fuente: 33 PX
Configuración de texto Cambio y orientación del texto del módulo de propaganda:
Orientación de texto: centro
Configuración de texto de título Acceda a la siguiente configuración para el texto del título y realice algunos cambios:
Fuente de peso del título: Ultra Bold
Estilo de fuente de título: mayúscula

Título Texto Color: Color # 3 (Find In Color Palette)
Configuración de texto del texto El módulo de la propaganda El texto necesita otro color:

Color de texto del cuerpo: Color # 5 (Encuentra en la paleta de colores)
Finalmente espaciado, agregue algunas configuraciones de espaciado personalizadas en el módulo de la propaganda:
Revestimiento superior: 50 px
Revestimiento inferior: 50 PX

Revelaje izquierdo: 30 PX
Revestimiento derecho: 30 PX

Agregue el módulo de botón al botón de alineación de la columna 1 justo debajo del módulo de la propaganda, continúe y agregue un módulo de botón. Abra la configuración y cambie la alineación del botón:
Alineación de botones: centro
Botón de configuración Cambiar aún más el botón Mira:
Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 15 PX

Botón de texto de color: Color # 3
El ancho del nudo del botón: 0 PX

El rasgo de botón de botón: 0 px
Peso de fuente: Ultra Bold
Estilo de fuente: Caluscopatía Agregue un margen y en la parte inferior del módulo de los botones:
Margen inferior: 30 px
Clon Blurb & Button Module tres veces y colóquelos en las columnas restantes, ambos módulos en la primera columna tres veces y colóquelos en las columnas restantes de la fila.
Cambie los nuevos módulos de propaganda Cambie el icono, cambie el icono de cada icono de propaganda duplicada a un nuevo icono de su elección.
Cambie el color del icono Cambio y el color del icono. Siéntase libre de usar # 8, # 9 y # 10 en la paleta de colores.
Clone Row ubicada y clonar la fila para mostrar todas las características, en lugar de las resaltadas, clonaremos el giro que contiene el título.


El lugar de la fila entonces lo colocaremos debajo de la última línea que creamos.
Clone Row ubicada y clon El giro hace lo mismo con la fila que contiene módulos de propaganda resaltados.

Coloque el giro y colóquelo debajo de su nuevo título.

Cambie la estructura de la columna para hacer que aparezcan más funciones en esta fila, cambiaremos la estructura de la columna en 5 columnas en lugar de 4:

Agregue la columna 5 Color de fondo Columna Agregue el color de fondo de la columna a la nueva columna:

Color de fondo de la columna: Color # 6 (encontrar en la paleta de colores)

Clon Brurb y Botones y colóquelo en la columna 5 Clon Uno de los módulos de la propaganda en.

Clone la fila con 5 columnas entre no menos, clone esta fila con 5 columnas para crear dos líneas con todas las características que desea ofrecer y que haya terminado!

Vista previa ahora que hemos recorrido todos los pasos, para echar un vistazo final al resultado final en diferentes tamaños de pantalla. La entrega de los paneles finales se ve excelente y le permite hacer que el usuario en su sitio web.En esta publicación, compartí un diseño increíble de dos paneles de color que puede crear desde cero utilizando solo las opciones de división construidas.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.