Descargue un encabezado y sótano hechos por mínimo con Divi ' S. Temo Builder

Al diseñar un sótano y un encabezado global, es importante considerar el estilo de diseño general del sitio. Si construye un sitio web mínimo, con mucho espacio en blanco, por ejemplo, la mejor opción es ir con un encabezado y un sótano mínimo. ¡En el tutorial de hoy, compartiremos un diseño mínimo de cabeza y sótano que puede usar de forma gratuita en cualquier sitio web que cree y sin restricciones! También lo guiaremos, paso a paso, a través del proceso de recreación. 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.

Descargue el sitio predeterminado para el encabezado mínimo y el sótano de forma gratuita para poner su mano en la plantilla del sitio predeterminado y el sitio mínimo del sótano, primero debe descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
https://youtu.be/eutzkvn6pui
Suscríbase a nuestro canal de YouTube 1. Cree acceso de encabezado global El Builder Divide comience accediendo al creador de temas y haga clic en “Agregar un programa global”.
Comience a crear encabezado global, comience a construir el encabezado global.

Cambie el espacio de la sección # 1 Una vez que llegue al editor de plantillas, notará una sección. Abra la configuración de la sección y elimine todos los valores predeterminados desde arriba e inferior.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 80% (escritorio), 90% (tableta y teléfono)
El espacio elimina todo el revestimiento predeterminado e inferior.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Borde usa un borde inferior.

Ancho de borde inferior: 1 PX
El color del borde inferior: # 333333333333333333 Esto nos ayudará a mantener las columnas una al lado de la otra en dimensiones de pantalla más pequeñas.
Pantalla: Flex;

Todas las columnas entonces, agregaremos algunos rellenos personalizados a todas las columnas entre nosotros.
Revestimiento superior: 1%

Finamiento inferior: 1%

Border de la columna 1 y 2 agregaremos un borde recto a la primera y segunda columna.
El ancho del borde recto: 1 PX

Color de borde derecho: # 333333

Agregue el módulo de seguimiento de las redes sociales a la columna 1 Agregar redes sociales es hora de agregar módulos, comenzando con un módulo de seguimiento social de seguimiento en la columna 1. Agregue las redes sociales a su elección.
Eliminar el color de fondo individual de cada red social continúa eliminando el color de fondo de cada red social a nivel individual.

Alinee entonces, vuelva a la configuración general del módulo y cambie la alineación del módulo en la pestaña de diseño.

Alineación del módulo: centro

Icono de configuración luego cambie la configuración del icono.
Icono de color: # 000000

Use el tamaño del icono personalizado: Sí
Icono de tamaño de fuente: 16 PX (escritorio), 14 px (tableta y teléfono)
Espacio y complete la configuración del módulo agregando un margen más alto.
Margen superior: 2%

Agregue un módulo de texto a la columna 2 Agregar contenido a la segunda columna, agregaremos un módulo de texto con un contenido.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto del módulo de la siguiente manera:

Texto de fuente: Roboto mono

Color de texto: # 000000
Tamaño de texto: 17 PX (escritorio), 15 px (tableta), 13 px (teléfono) Alineación de texto: centro
Agregaremos algunos bordes superiores.
Margen superior: 3%
Agregue un módulo de botón a la columna 3 Agregue una copia a la última columna. Agregue un botón con una copia de su elección.

Button Leanding Pase a la pestaña Diseño del módulo y cambie la alineación en consecuencia:
Alineación de botones: centro

Botón de configuración Luego, acceda a la configuración de los botones y estilice los botones de la siguiente manera:

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 20 PX (escritorio), 16 px (tableta), 13 px (teléfono)

El color del texto del botón: # 670fff
El ancho del nudo del botón: 0 PX
Botón de fuente: Roboto mono
Botón de peso de fuente de fuente: en negrita
Icono de botón de colocación: izquierda

Muestre el icono solo en el cursor para el botón: no
Agregue el espacio de la Sección 2 Agregue otra sección habitual justo debajo de la anterior. Abra la configuración de la sección y elimine el relleno predeterminado.
SUS Lingo: 0 PX
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:
Ancho: 90%

Ancho máximo: 100%

Borde agregue un borde debajo.
Ancho de borde inferior: 1 PX
Color del borde inferior: # 333333

Agregue el módulo de menú al menú Seleccionar columna y luego, agregue un módulo de menú a la columna de fila y seleccione un menú de su elección.
Cargue el logotipo cargar un logotipo más.
Configuración del texto del menú Entonces, pase a la pestaña de diseño y modifique la configuración del texto del menú de acuerdo con:

Menú de fuentes: Roboto

Color de texto del menú: # 000000

Menú Tamaño del texto: 18 PX
Alineación del texto: Derecho
Configuración de texto en el menú desplegable y cambie el color del menú desplegable.
Menú de la línea de color Deny: # 670fff
Configuración del icono junto con el color del icono del menú de la hamburguesa en la configuración del icono.


Icono de menú de hamburguesas de color: # 670fff
Dimensión Complete la configuración del módulo modificando el ancho del logotipo máximo en la configuración de tamaño.

Ancho máximo del logotipo: 35%
Guarde la Sección # 1 en la Biblioteca de la Divica Después de haber completado el encabezado global y todos sus elementos, puede guardar la primera sección en la biblioteca de la Divic. Reutilizaremos esta sección más adelante en nuestro sótano global.

Guarde los cambios globales en el encabezado y el constructor de temas entonces, guarde el encabezado global con el Div Div Theme Builder.
2. ¡Cree un comienzo del sótano global para crear sótano global, vamos al sótano global! Comience a construir el sótano desde cero.

Agregue una nueva fila a la estructura de la columna de la sección # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columnas:

Dimensión Abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:


Igualar las alturas de la columna: sí

Ancho: 95%

Ancho máximo: 100%
Borde y complete la configuración de la fila agregando un borde superior.
El ancho del borde superior: 1 PX
Color de marco más alto: # 333333

Agregue el módulo de imagen a la columna 1 Cargue el logotipo es hora de agregar módulos, comenzando con un módulo de imagen en la columna 1. Cargue un logotipo.
Dimensión Vaya a la pestaña Diseño del módulo y cambie la configuración de tamaño en consecuencia:
Ancho: 52%

Alineación del módulo: Centre el módulo de correo electrónico en la columna 1 Elimine el siguiente modo que necesitamos en la columna 1 es un módulo de correo electrónico. Eliminar todas las copias.

Conecte su cuenta de correo electrónico Agregue una cuenta de correo electrónico a la siguiente opción.
Retire el color de fondo y luego elimine el color de fondo predeterminado.
Cambio de apariencia a la pestaña de diseño y asegúrese de que se aplique el siguiente aspecto:

Apariencia: cuerpo a la izquierda, forma a la derecha

Configuración de campos modificados y configuraciones de campo.

Revestimiento superior: 10 px

Finamiento inferior: 10 PX
Fuente de campos: Roboto mono

Campos de esquinas redondeadas: 0 PX (todas las esquinas)
El ancho del marco de campo: 1 PX
El color del borde de campo: # 333333
Botón de configuración y completar la configuración del módulo estilizando el botón de la siguiente manera:

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 18 PX
El color de fondo del botón: # 000000

Botón de fuente: Roboto mono
Agregue el módulo de texto no. 1 en la columna 2 agrega contenido a la segunda columna. Agregue un primer módulo de texto con un contenido de su elección.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto de la siguiente manera:
Texto de fuente: Roboto mono
El peso de la fuente de texto: en negrita

Color de texto: # 000000

Tamaño del texto: 21 PX
Alineación de texto: Centro
Espacio agregue un borde inferior.
Margen inferior: 10%
Agregue el módulo divisor a la visibilidad de la columna 2 justo debajo del módulo de texto, agregaremos un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

Configuración de línea luego cambie la configuración de línea del módulo.
Color de línea: # 000000

Estilo de línea: sólido
Posición de línea: arriba

Agregue el módulo de texto no. 2 En la columna 2 Agregar contenido Agregue otro módulo de texto a la segunda columna con un elemento sótano. Agregue un enlace Agregar un enlace adicional.
Configuración de texto Entonces, pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Roboto mono
Color de texto: # 000000

Tamaño de texto: 16 PX

Alineación de texto: Centro

Espacio agregue un borde inferior.
Margen inferior: 2%
Clon el módulo de texto no. 2 Tantos como sea necesario después de haber completado el segundo módulo de texto en la columna 2, puede clonarlo tantas veces como desee, dependiendo de cuántos pies de pie desee mostrar.
Cambie el contenido y los enlaces para cambiar el contenido y los enlaces de cada módulo de texto duplicado.
Clon Columna 2 dos veces Después de haber completado la segunda columna y todos los elementos del sótano, puede clonar toda la columna dos veces.

Cambie el contenido y los enlaces para cambiar el contenido y los enlaces en las columnas duplicadas.
Sección de importación no. 2 Después de haber completado la primera sección, es hora de importar la sección que utilicé en el encabezado global.

Cambie el borde de la fila Abra la configuración de la fila desde la segunda sección, retire el borde inferior y agregue un borde superior.

El ancho del borde superior: 1 PX


Color de marco más alto: # 333333


Ancho del borde inferior: 0 PX

Cambie el contenido en el módulo de texto modifique la copia y en el módulo de texto en la columna 2.

Guarde el sótano global después de haber completado el sótano global, asegúrese de guardar todos los cambios.
3. Guarde los cambios y el resultado de una vista previa del tema, salga del editor de plantillas, guarde todos los cambios el constructor de temas y vea la vista previa del resultado en su sitio web! Mira final a diferentes dimensiones de pantalla.
¡Pensamientos finales En esta publicación, compartí una hermosa combinación de encabezado y sótano mínimo que puede usar en cualquier sitio web que cree y sin restricciones! Este combo Antet y Subsol es un suplemento extraordinario para los sitios web mínimos que crea. Hay varios elementos incluidos, sin hacer que el diseño general parezca abrumador. También recreé el diseño de cero. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.