Cómo crear un sótano personalizado con el constructor de temas de Div ‘

Div Div Temo Builder marca una nueva era y cambia la forma en que diseñamos sitios web. Una de las partes más importantes de esta función es la posibilidad de agregar dinámicamente las páginas del sótano global a sus páginas y publicaciones después de haber creado un sótano, puede agregarlo automáticamente a cualquier tipo de página o publicación que desee usar el constructor de temas. Ahora, en este tutorial, lo guiaremos paso a paso a través del proceso de crear y agregar un sótano global en su sitio web. ¡Podrá descargar la plantilla JSON gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápidamente al diseño del sótano global en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue el pie de página personalizado global de forma gratuita para poner su mano en el sótano personalizado gratuito, primero deberá descargarlo usando 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!
Suscríbase a nuestro canal de YouTube 1. Vaya al creador de temas de Divin Comience accediendo a temas Builder desde el Div
2. Agregue y cree un sótano global allí, puede agregar un sótano global de la biblioteca de la Divic o puede comenzar a construir uno desde cero. En este tutorial, crearemos un sótano personalizado desde cero, así que continúe y elija la primera opción.

Agregue la sección no. ¡1 Color de fondo es hora de comenzar a crear! Abra la sección que puede encontrar en la página y cambie el color de fondo de la sección.

Color de fondo: # 000000
Extienda y luego cambie la configuración de espaciado de la sección.

Margen superior: 6VW
Margen izquierdo: 6VW
Margen derecho: 6VW
Revelaje izquierdo: 30 PX
Revestimiento derecho: 30 PX
Border agregue algunos bordes hacia arriba, hacia la izquierda y hacia la derecha.

A la parte superior izquierda: 20 PX
A la esquina superior derecha: 20 px
La sombra de la caja también incluye un cuadro de cuadro en la configuración de la sección.

Poder de poco claro de la sombra de la caja: RGBA (0.0,0,18)
Shadow Color: RGBA (0.0,0,0.18)
Agregue una nueva fila a la estructura de la columna de la sección Continuar agregando una fila a su sección usando la siguiente estructura de columnas: Agregue un módulo de texto a la columna Agregar contenido H2 Agregar un módulo de texto con un contenido H2.

Configuración de texto H2 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H2 en consecuencia:

2 Sección de fuentes: Poppins

Título 2 Fuente de peso: semi audac
Título 2 Alineación de texto: Centro
Rúbrica 2 color de texto: #ffffff
Título 2 Dimensión de texto: 31 PX (escritorio), 24 PX (tableta), 18 PX (teléfono)
Título 2 Altura de la línea: 1.6em
La dimensión también agregue un ancho máximo al modo.
Ancho máximo: 700 PX

Agregue un módulo de botón a la columna Agregar una copia Agregue un botón justo debajo del módulo de texto en su columna e ingrese una copia de su elección.
Alineación Vaya a la pestaña Diseño del módulo y cambie la alineación del botón en el centro.

Alineación de botones: centro

Configuración Continúe extinguiendo el botón.
Use estilos personalizados para el botón: Sí

Botón de tamaño de texto: 12 PX
El color del texto del botón: # 000000
El color del fondo del botón: #ffffff
El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Distancia entre letras y botones: 1 PX

Botón de fuente: Poppins
Peso de fuente de fuente: semi audac.
El estilo de la fuente del botón: mayúscula
Sparto Agregue algunos valores de llenado personalizados.
Revestimiento superior: 14 px

Revestimiento inferior: 14 PX
Junta izquierda: 40 PX
Junta derecha: 58 PX
Agregue el color de fondo de la sección 2 ¡Vaya a la siguiente sección regular! Elija un color de fondo de la sección blanca.
Color de fondo: #ffffff

Espacio Retire todo el siguiente revestimiento superior e inferior.
SUS Lingo: 0 inferior PX: 0 PX

El borde agrega un cierto radio de borde a la sección.
A la parte superior izquierda: 20 PX
A la esquina superior derecha: 20 px

Sombra de cuadro y complete la configuración de la sección agregando una sombra de cuadro sutil.
Poder de poco claro de la sombra de la caja: 135 px
Shadow Color: RGBA (0.0,0,0.18)

Agregue una nueva fila a la sección de la estructura de la columna Después de haber completado la configuración de la sección, agregue una nueva línea utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
El espacio elimina el llenado predeterminado e inferior de la fila a continuación.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

El espacio de columna continúa abriendo la configuración de la columna y agregue algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revestimiento superior: 100 PX (escritorio), 50 px (tableta y teléfono)
Bajo forro: 100 PX (escritorio), 50 px (tableta y teléfono)

ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Agregue el módulo de texto no. 1 En la columna, agregar contenido es hora de comenzar a agregar módulos. Agregue un módulo de texto regular en la columna 1 e ingrese un contenido de su elección.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:
Texto de fuente: Poppins

El peso de la fuente de texto: en negrita


Color de texto: # 000000
Tamaño del texto: 17 PX
Alineación de texto: Centro
El espacio agregue algunos bordes superiores e inferiores personalizados.
Margen superior: 10 PX
Margen inferior: 30 px

Agregue el módulo Divisor a la visibilidad de la columna justo debajo del módulo de texto, agregue un módulo Divisor y asegúrese de que se active la opción “Visualización”.
Divisor del espectáculo: si
La línea cambia el color de la línea en negro.

Color de línea: # 000000
Dimensión Modifique la configuración del tamaño del divisor.

Ancho: 15%
Alineación del módulo: centro

Agregue el módulo de texto no. 2 En la columna, Agregar contenido continúe agregando otro módulo de texto a la columna.
Agregue un enlace Agregar un enlace a la página a la que desea consultar este módulo.
Configuración de texto Entonces, pase a la pestaña de diseño y cambie la configuración de texto de la siguiente manera:

Texto de fuente: Poppins

El peso de la fuente de texto: luz

Color de texto: # 777777
Tamaño del texto: 15 PX
Alineación de texto: Centro
Espacio agregue algunos bordes superior e inferior.
Margen superior: 10 PX
Margen inferior: 10 PX

Clon el módulo de texto no. 2 Tanto como sea necesario después de haber completado el segundo módulo de texto en la columna, puede clonarlo con la frecuencia que necesite (dependiendo de cuántos sótanos desee incluir).
Cambie el contenido y los enlaces Asegúrese de cambiar el contenido del módulo y los enlaces para cada duplicado.
Clone toda la columna dos veces después de haber completado la columna y los módulos, puede clonar toda la columna dos veces.

Columna 2 Color de fondo luego abra la configuración de la columna 2 y cambie el color de fondo.

Columna 2 Color de fondo: # F9F9F9

Cambie el contenido y los enlaces Asegúrese de cambiar todo el contenido y los enlaces en cada columna duplicada.

Agregue una nueva columna y luego, agregue una cuarta columna en una fila.
El color del papel tapiz cambia el color de fondo de la nueva columna. Fondo de pantalla: # 0FFFC7

Espacio junto con los valores de llenado de columna.

Revestimiento superior: 70 PX

Finamiento inferior: 70 PX
ENNIZACIÓN IZQUIERDA: 50 PX

Revestimiento derecho: 50 PX
Agregue el módulo de seguimiento de las redes sociales a la columna 4 Agregar redes sociales, continúe agregando un módulo de seguimiento social de seguimiento a la columna 4.
Restablezca los estilos de las redes sociales Restablecer los estilos de los artículos para cada red social que agregue.
Alinee entonces, pase a la pestaña de diseño y cambie la alineación del módulo.
Alineación del módulo: centro

Configuración de icono modificado y el color del icono.

Icono de color: # 000000

Agregue el módulo de correo electrónico a la columna 4 Eliminar el contenido Continúe agregando un módulo de correo electrónico en la columna 4 y elimine el título y el contenido del cuerpo.
Cuenta de correo electrónico Agregue una cuenta de correo electrónico más. Sin agregar la cuenta de correo electrónico, el módulo no aparecerá después de dejar el constructor.

Elimine el color de fondo continúe eliminando el color de fondo del módulo.
Use el color de fondo: no

Configuración de campo Vaya a la pestaña Diseño y cambie la configuración de campo de la siguiente manera:

Color de fondo de campo: RGBA (0.0,0,0)

Color de texto de campo: # 000000
Campos de fuentes: Poppins

Campos de tamaño de texto: 13 PX
El ancho del marco de campo: 1 PX
El color del marco de campo: # 000000
Configuración Dinar el botón y el botón Módulo.

Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 12 PX
El color del texto del botón: # 000000

El color del fondo del botón: #ffffff
El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Distancia entre letras y botones: 1 PXBUTON FUENT: POPPINS
Peso de fuente de fuente: semi audac.
El estilo de la fuente del botón: mayúscula

Revestimiento superior: 15 px
Revestimiento inferior: 15 PX
Agregue un módulo de texto dinámico en la columna 4 Contenido dinámico y el último módulo que necesitamos completar este diseño es un módulo de texto. Habilite la opción de contenido dinámico en el cuadro de contenido.
Luego, seleccione la opción “Fecha actual”.
Contenido dinámico: fecha actual

Y cambie la configuración de contenido dinámico de la siguiente manera:
ANTERIZACIÓN: Copyright & Copy;

Después: | Reservados todos los derechos

Formato de fecha: personalizado
Formato de fecha personalizado: 20 años

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: Poppins
Color de texto: # 000000
Tamaño de texto: 16 PX
Espacio Complete la configuración del módulo agregando un margen más alto y ¡ya está!

Margen superior: 50 PX
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil