Cómo resaltar de forma interactiva los detalles de contacto en su pie de página global con Divi

Aunque aparece un pie de página 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 pie de página y lo esperan en cada sitio web que visitan. Con Theme Builder de Divi, puede crear cualquier diseño de pie de página que desee, pero si está buscando un enfoque único, le encantará este tutorial. Hoy, le mostraremos cómo resaltar de forma interactiva los detalles de contacto que aparecen en la primera parte de su pie de página. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de pie de página global GRATIS

Para tener en sus manos la plantilla de pie de página global gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Crear nueva plantilla de pie de página

Vaya a Divi Theme Builder y agregue un nuevo pie de página global o personalizado

Comience por ir al Divi Theme Builder en el backend de su sitio web de WordPress. Allí, agregue un nuevo pie de página global o personalizado.

Empiece a construir desde cero

Empiece a crear la plantilla de pie de página desde cero.

2. Crear diseño de pie de página

Configuración de la sección

Color de fondo

Una vez dentro del 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

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 90%
• Ancho máximo: 2580px

Espaciado

A continuación, agregue un poco de relleno en la parte inferior.

• Acolchado inferior: 1%

CSS del elemento principal de la columna

Luego, abra la configuración de la columna 1, navegue a la pestaña avanzada y aplique las siguientes líneas de respuesta de código CSS al elemento principal de la columna:

Escritorio:

display: flex;
flex-direction: row;

Tableta y teléfono:

display: block;

Agregue el módulo de texto n. ° 1 a la columna 1

Contenido receptivo

Es hora de agregar módulos, comenzando con un primer módulo de texto. Agregue contenido receptivo de su elección. Asegúrese de incluir el número de teléfono en la tableta y el móvil, donde las opciones de desplazamiento no son tan obvias.

Contenido flotante

A continuación, modifique el contenido de desplazamiento.

Color de fondo

Luego, aplique un color de fondo.

• Color de fondo: #ffffff

Colocar el cursor sobre el color de fondo

Modifica el color de fondo al pasar el mouse.

• Color de fondo flotante: # 00ff88

Configuración de texto H3

Vaya a la pestaña de diseño del módulo y cambie la configuración de texto H3 de la siguiente manera:

• Título 3 Fuente: Oswald
• Peso de fuente del encabezado 3: Negrita
• Estilo de fuente del título 3: mayúsculas y subrayado
• Alineación del texto del encabezado 3: centro
• Título 3 Color del texto: # 000000
• Tamaño del texto del encabezado 3:
  • Escritorio: 2.5vw
  • Tableta: 4.5vw
  • Teléfono: 5.5vw

Dimensionamiento

Asegúrese de que el ancho sea "100%" a continuación.

• Ancho: 100%

Espaciado

Luego, aplique los siguientes valores de espaciado de respuesta:

• Margen inferior:
  • Escritorio: /
  • Tableta y teléfono: 1%
• Margen derecho:
  • Escritorio: 1%
  • Tableta y teléfono: 0%
• Acolchado superior: 10vh
• Acolchado inferior: 10vh

CSS del elemento principal

Aplique también las siguientes líneas de código CSS al módulo:

flex: 1;
position: relative !important;
transition: flex 800ms !important;

Desplazar el elemento principal CSS

Y cambie la propiedad flex de CSS del elemento principal de desplazamiento.

flex: 3;

Clonar el módulo de texto dos veces

Una vez que haya completado el primer módulo, puede clonarlo dos veces para reutilizarlo. Notará que los módulos duplicados aparecerán automáticamente uno al lado del otro.

Modificar el módulo de texto n. ° 2

Cambiar contenido y desplazar el contenido

Abra el primer módulo de texto duplicado y modifique el contenido receptivo y flotante.

Cambiar espaciado

Quite también el margen derecho de este módulo.

Modificar el módulo de texto n. ° 3

Cambiar contenido y desplazar el contenido

A continuación, abra la configuración del tercer módulo de texto y cambie la copia.

Cambiar espaciado

Elimine el margen derecho en la configuración de espaciado y agregue un margen izquierdo en su lugar.

• Margen izquierdo:
  • Escritorio: 1%
  • Tableta y teléfono: 0%

Agregar fila n. ° 2

Estructura de la columna

Agregue otra fila a la sección usando la siguiente estructura de columnas:

Color de fondo

Abra la configuración de la fila y aplique el siguiente color de fondo:

• Color de fondo: # 141414

Dimensionamiento

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

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 90%
• Ancho máximo: 2580px

Espaciado

Modifique también la configuración de espaciado de la fila.

• Acolchado superior:
  • Escritorio: 100px
  • Tableta y teléfono: 50px
• Acolchado inferior:
  • Escritorio: 100px
  • Tableta y teléfono: 50px
• Acolchado izquierdo:
  • Escritorio: 8%
  • Tableta y teléfono: 10%
• Acolchado derecho:
  • Escritorio: 8%
  • Tableta y teléfono: 10%

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido H4

Luego, agregue un primer módulo de texto a la columna 1 con algo de contenido H4 de su elección.

Configuración de texto H4

Vaya a la pestaña de diseño del módulo y cambie la configuración de texto H4 de la siguiente manera:

• Fuente del encabezado 4: Oswald
• Estilo de fuente del título 4: mayúsculas
• Color del texto del título 4: #ffffff
• Tamaño del texto del encabezado 4:
  • Escritorio: 26px
  • Tableta: 22px
  • Teléfono: 18px
• Altura de línea de rumbo 4: 1.3em

Espaciado

Aplique un margen inferior también.

• Margen inferior: 20px

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido

Agregue otro módulo de texto debajo del anterior e incluya algunos elementos de pie de página con enlaces de su elección.

Configuración del texto del enlace

Cambie la configuración del texto del enlace del módulo en consecuencia:

• Fuente de enlace: Lato
• Color del texto del enlace: # 00ff88
• Tamaño del texto del enlace: 17px

Espaciado

A continuación, aplique un margen inferior sensible.

• Margen inferior:
  • Escritorio: 0px
  • Tableta y teléfono: 50px

Reutilizar la columna 1

Eliminar las columnas 2, 3 y 4

Una vez que haya completado ambos módulos de texto en la columna 1, puede eliminar las tres columnas restantes de la fila.

Clonar la columna 1 tres veces

Y reutilice la primera columna clonándola tres veces.

Cambiar todo el contenido duplicado

Asegúrese de cambiar todo el contenido duplicado en cada nueva columna.

Eliminar el margen inferior del módulo de texto n. ° 2 en la columna 4

Y elimine el margen inferior del último módulo de texto en la columna 4.

Agregar fila n. ° 3

Estructura de la columna

A la siguiente y última fila. Utilice la siguiente estructura de columnas:

Dimensionamiento

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

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2
• Ancho: 90%
• Ancho máximo: 2580px

Agregar módulo de texto a la columna 1

Agregar contenido

Luego, agregue un módulo de texto a la columna 1 con algún contenido de su elección.

Configuración de texto

Cambie la configuración de texto del módulo en consecuencia:

• Fuente de texto: Lato
• Tamaño del texto: 17px

Clonar el módulo de texto y colocar el duplicado en la columna 2

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

Cambiar contenido

Cambie el contenido del módulo duplicado.

Cambiar la alineación del texto

Y use una alineación de texto receptiva diferente.

• Alineación del texto:
  • Escritorio: Derecha
  • Tableta y teléfono: Izquierda

4. Guardar todos los cambios en el generador de plantillas y temas

Una vez que haya completado los pasos difíciles, asegúrese de guardar su plantilla y los cambios en el generador de temas antes de ver el resultado en su sitio web.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con el pie de página de su sitio web. Más específicamente, le mostramos cómo resaltar de forma interactiva los detalles de contacto utilizando Divi Theme Builder. ¡También pudo 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 aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.