Cómo resaltar sus datos de contacto en su sótano global con Div

Aunque aparece un sótano en la parte inferior del diseño de una página, es una parte muy importante de cualquier sitio web que cree. Las personas están acostumbradas al concepto de sótano y esperan cada sitio al que accedan. Con el creador de temas de Divin, puede crear cualquier diseño de sótano que desee, pero si está buscando un enfoque único, le gustará este tutorial. Hoy, le mostraremos cómo resaltar los datos de contacto que aparecen en la primera parte del sótano. ¡Podrá descargar el archivo JSON de forma gratuita! 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.
Escritorio

Móvil

Descargue la plantilla de sótano global gratuita para poner su mano en la plantilla de sótano global gratuita, primero deberá descargarla 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! 1. Cree una nueva plantilla de sótano Vaya al Builder Divic y agregue un nuevo sótano global o personalizado accediendo al Builder Divic desde su sitio de WordPress Backp. Allí, agregue un sótano nuevo o personalizado.
Comience a construir desde cero Comience a construir la plantilla del sótano desde cero.

2. Construya el diseño de la configuración del sótano del color de fondo Una vez que llegue al editor de plantillas, notará que una sección ya está allí. Abra la configuración de la sección y aplique un color de fondo.

Color de fondo: # E8E8E8
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila 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 de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 90%
Ancho máximo: 2580 PX
Espacio agregue algunos revestimientos inferiores.

Finamiento inferior: 1%
El elemento principal de la columna CSS luego abra la configuración de la columna 1, navegue por la pestaña avanzada y aplique las siguientes líneas de código CSS: Elemento de columna:

Desktop: pantalla: Flex;
Dirección flexible: fila; Tableta y teléfono: pantalla: bloque;
Agregue el módulo de texto no. 1 en la columna 1 El contenido receptivo es el momento de agregar módulos, comenzando con un primer módulo de texto. Agregue un contenido receptivo a su elección. Asegúrese de incluir el número de teléfono en la tableta y el móvil, donde los movimientos al mouse no son tan obvios.


Coloque el cursor en el contenido Cambie el contenido con el mouse más. El fondo luego aplique un color de fondo.

Color de fondo: #ffffff

Coloque el cursor en el color de fondo Cambiar el color de fondo al cursor.
Coloque el cursor en segundo plano: # 00FF88

Configuración de texto H3 Cambiar a la pestaña Diseño del módulo y cambie la configuración de texto H3 de la siguiente manera:
3 Fuentes de fuentes: Oswald

Título 3 Fuente de peso: Bold
Título 3 Estilo de fuente: mayúscula y subrayado
Título 3 Alineación de texto: Centro
Rúbrica 3 Color de texto: # 000000
Rúbrica 3 Dimensión de texto:
Escritorio: 2.5VW
Tableta: 4.5VW
Teléfono: 5.5VW
Dimensión Asegúrese de que el ancho esté “100%” a continuación.
Ancho: 100%

El espacio luego aplique los siguientes valores de espaciado receptivo:
Margen inferior:

Escritorio: /
Tableta y teléfono: 1%
Margen derecho:
Escritorio: 1%
Tableta y teléfono: 0%
Revestimiento superior: 10 VH
Revestimiento inferior: 10 VH
Artículo principal CSS Aplicar las siguientes líneas de código CSS y módulo: Flex: 1;
Posición: relativo! Importante;

Transición: Flex 800 ms! Importante;
Coloque el cursor en el elemento principal CSS y cambie el elemento principal de CSS Flex. Flexión: 3;
Clone el módulo de texto dos veces después de haber completado el primer módulo, puede clonar dos veces para reutilizar. Notará que los módulos duplicados aparecerán automáticamente uno al lado del otro.

Cambie el módulo de texto no. 2 Cambie el contenido y coloque el cursor Abra el primer módulo de texto duplicado y cambie el contenido receptivo y coloque el cursor.

Cambie el espacio para eliminar y el borde derecho de este módulo.

Cambie el módulo de texto no. 3 Cambie el contenido y coloque el cursor luego, abra la configuración del tercer módulo y cambie la copia. Cambie el espacio. Retire el borde derecho de la configuración de espaciado y agregue un borde izquierdo.



Borde izquierdo:

Escritorio: 1%


Tableta y teléfono: 0%
Agregue la estructura de la columna de la fila # 2 Agregar otra fila a la sección utilizando la siguiente estructura de columnas:
Color del sótano Abra la configuración de la fila y aplique el siguiente color de fondo:
Color de fondo: # 141414

Dimensión Vaya a la pestaña Diseño de fila y cambie la configuración de tamaño en consecuencia:

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

Ancho: 90%
Ancho máximo: 2580 PX
Extienda los cambios y la configuración de espaciado de la fila.
Revestimiento superior:
Desktop: 100 PX

Tableta y teléfono: 50 px
Levante inferior:
Desktop: 100 PX
Tableta y teléfono: 50 px
Forro izquierdo:
Escritorio: 8%
Tableta y teléfono: 10%
Junta derecha:
Escritorio: 8%
Tableta y teléfono: 10%
Agregue el módulo de texto no. 1 En la columna 1 Agregue el contenido H4 y luego, agregue un primer módulo de texto en la columna 1 con un contenido H4 de su elección.
Configuración de texto H4 Cambiar a la pestaña Diseño del módulo y cambie la configuración de texto H4 de la siguiente manera:
Fuente de lubricación 4: Oswald

Título 4 Estilo de fuente: mayúscula

Título 4 Color de texto: #ffffff
Título 4 Dimensión de texto:
Escritorio: 26 PX
Tableta: 22 PX
Teléfono: 18 PX
Título 4 Altura de la línea: 1.3em
Se aplica espaciado y un borde inferior.
Margen inferior: 20 PX
Agregue el módulo de texto no. 2 En la columna 1 Agregar contenido Agregue otro módulo de texto debajo del anterior e incluya algunos elementos del sótano con enlaces.

Fuente de enlace: Lato
Color de texto de enlace: # 00ff88

Tamaño del enlace de texto: 17 PX

Espacio aún aplica un margen inferior receptivo.
Margen inferior:
Escritorio: 0 PX
Tableta y teléfono: 50 px

Reutilización de la columna 1 Retire las columnas 2, 3 y 4 Después de haber completado ambos módulos de texto de la columna 1, puede eliminar las tres columnas restantes de la fila.
Clon Columna 1 tres veces y reutilice la primera columna clonándola tres veces.
Cambie todo el contenido duplicado Asegúrese de cambiar todo el contenido duplicado en cada nueva columna.
Elimine el borde inferior del módulo de texto no. 2 de la columna 4 y retire el borde inferior del último módulo de texto en la columna 4.

Agregue la estructura de la fila # 3 de la columna a la siguiente y última fila. Use la siguiente estructura de columna:

Dimensión 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: 2

Ancho: 90%

Ancho máximo: 2580 PX
Agregue un módulo de texto a la columna 1 Agregar contenido y luego, agregue un módulo de texto a la columna 1 con un contenido de su elección.
Configuración de texto Cambie la configuración de texto del módulo en consecuencia:
Texto de fuente: Lato
Tamaño del texto: 17 PX

Clone el módulo de texto y coloque el duplicado en la columna 2 Clon el módulo de texto en la columna 1 una vez y coloque el duplicado en la columna 2.

Cambie el contenido Cambie el contenido del módulo duplicado.
Cambie la alineación del texto y use otra alineación del texto receptivo. Alineación del texto:
Escritorio: correcto

Tableta y teléfono: izquierda

4. Guarde todos los cambios en la plantilla y el tema Después de haber recorrido pasos pegajosos, ¡asegúrese de guardar los cambios en la plantilla y el fabricante antes de ver el resultado en su sitio web!

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
Pensamientos finales En esta publicación, te mostré cómo ser creativo con el sótano de tu sitio. ¡Podrías descargar el archivo JSON gratis! 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.