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

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 poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

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 yendo a Divi Theme Builder en el backend de su sitio web de WordPress. Allí, agregue un nuevo pie de página global o personalizado.

Comience a construir desde cero

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

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

Ajustes de sección

Color de fondo

Una vez dentro del editor de plantillas, notará que ya hay una sección allí. Abra la configuración de la sección y aplique un color de fondo.

• Color de fondo: #e8e8e8

Añadir Fila #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 del canalón: 1
• Ancho: 90%
• Ancho máximo: 2580px

Espaciado

Agregue un poco de relleno inferior a continuación.

• Acolchado inferior: 1%

Columna Elemento principal CSS

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:

Tableta y teléfono:

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

Modifique el contenido flotante a continuación.

Color de fondo

Luego, aplica un color de fondo.

• Color de fondo: #ffffff

Color de fondo flotante

Modifique el color de fondo al pasar el mouse.

• Color de fondo flotante: #00ff88

Configuración de texto H3

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

• Encabezado 3 Fuente: Oswald
• Encabezado 3 Peso de fuente: Negrita
• Título 3 Estilo de fuente: Mayúsculas y subrayado
• Encabezado 3 Alineación de texto: Centro
• Título 3 Color del texto: #000000
• Título 3 Tamaño del texto:
  
  • 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

Elemento principal CSS

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

Pase el cursor sobre el elemento principal CSS

Y cambie la propiedad flexible CSS del elemento principal flotante.

Clonar 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.

Modifique el Módulo de Texto #2

Cambiar contenido y contenido flotante

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

Cambiar espaciado

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

Modifique el Módulo de Texto #3

Cambiar contenido y contenido flotante

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 poco de margen izquierdo en su lugar.

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

Añadir Fila #2

Estructura de la columna

Agregue otra fila a la sección utilizando 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

Pase 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 del canalón: 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
• Relleno izquierdo:
  
  • Escritorio: 8%
  • Tableta y teléfono: 10%
• Relleno 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 algún contenido H4 de su elección.

Configuración de texto H4

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

• Encabezado 4 Fuente: Oswald
• Título 4 Estilo de fuente: Mayúsculas
• Título 4 Color del texto: #ffffff
• Título 4 Tamaño del texto:
  
  • Escritorio: 26px
  • Tableta: 22px
  • Teléfono: 18px
• Encabezado 4 Altura de línea: 1,3 em

Espaciado

Aplique un poco de margen inferior también.

• Margen inferior: 20px

Agregue el Módulo de Texto #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.

Ajustes de texto de enlace

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

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

Espaciado

Aplique un poco de margen inferior receptivo a continuación.

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

Reutilizar la columna 1

Eliminar columna 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 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.

Añadir Fila #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 del canalón: 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 del texto: Lato
• Tamaño del texto: 17px

Clonar módulo de texto y colocar 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: Derecho
  • Tableta y teléfono: Izquierda

4. Guardar todos los cambios de plantilla y generador de temas

Una vez que haya completado los pasos pegajosos, asegúrese de guardar los cambios en la plantilla y 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 de forma gratuita! 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 regalos de Divi, 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 los beneficios de este contenido gratuito.