Divi Theme 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 poder agregar dinámicamente pies de página globales a sus páginas y publicaciones. Una vez que haya diseñado un pie de página, puede agregarlo automáticamente a cualquier tipo de página o publicación que desee con Divi’s Theme Builder. Ahora, en este tutorial, lo guiaremos paso a paso a través del proceso de crear y agregar un pie de página global a su sitio web. 

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al diseño de pie de página global en diferentes tamaños de pantalla.

Escritorio

pie de página global

Móvil

pie de página global

1. Ir al generador de temas de Divi

Comience yendo al Generador de temas en sus Opciones de tema Divi.

pie de página global

2. Agregar y construir pie de página global

Allí, puede agregar un pie de página global desde su biblioteca Divi o comenzar a construir uno desde cero. En este tutorial, crearemos un pie de página personalizado desde cero, así que continúe y elija la primera opción.

pie de página global

Agregar sección # 1

Color de fondo

¡Hora de empezar 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

pie de página global

Espaciado

Modifique la configuración de espaciado de la sección a continuación.

  • Margen superior: 6vw
  • Margen izquierdo: 6vw
  • Margen derecho: 6vw
  • Relleno izquierdo: 30px
  • Relleno derecho: 30px

pie de página global

Frontera

Agregue un borde superior izquierdo y derecho a continuación.

  • Arriba a la izquierda: 20 px
  • Arriba a la derecha: 20 px

pie de página global

Sombra de la caja

Incluya también una sombra de cuadro en la configuración de la sección.

  • Box Shadow Blur Strength: rgba (0,0,0,0.18)
  • Color de sombra: rgba (0,0,0,0.18)

pie de página global

Agregar nueva fila a la sección

Estructura de columna

Continúe agregando una fila a su sección utilizando la siguiente estructura de columnas:

pie de página global

Agregar módulo de texto a la columna

Añadir contenido H2

Agregue un módulo de texto con algún contenido H2.

pie de página global

Configuraciones de texto H2

Pase a la pestaña de diseño del módulo y cambie la configuración del texto H2 en consecuencia:

  • Título 2 Fuente: Poppins
  • Título 2 Peso de fuente: Semi negrita
  • Título 2 Alineación de texto: centro
  • Título 2 Color del texto: #ffffff
  • Encabezado 2 Tamaño del texto: 31 px (escritorio), 24 px (tableta), 18 px (teléfono)
  • Encabezado 2 Altura de línea: 1.6em

pie de página global

Dimensionamiento

Agregue también un ancho máximo al módulo.

  • Ancho Máx .: 700px

pie de página global

Agregar módulo de botón a columna

Agregar copia

Agregue un Módulo de botones justo debajo del Módulo de texto en su columna e ingrese alguna copia de su elección.

pie de página global

Alineación

Pase a la pestaña de diseño del módulo y cambie la alineación del botón al centro.

  • Alineación de botones: centro

pie de página global

Configuraciones de botones

Continúa peinando el botón.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 12 px
  • Color del texto del botón: # 000000
  • Color de fondo del botón: #FFFFFF
  • Ancho del borde del botón: 0px

pie de página global

  • Radio del borde del botón: 100 px
  • Espacio entre letras de botones: 1 px
  • Fuente del botón: Poppins
  • Peso de la fuente del botón: semi negrita
  • Estilo de fuente del botón: mayúscula

pie de página global

Espaciado

Agregue algunos valores de relleno personalizados también.

  • Relleno superior: 14px
  • Relleno inferior: 14px
  • Relleno izquierdo: 40px
  • Relleno derecho: 58px

pie de página global

Agregar Sección # 2

Color de fondo

¡A la próxima sección regular! Elija un color de fondo blanco de la sección.

  • Color de fondo: #ffffff

pie de página global

Espaciado

Retire todo el relleno superior e inferior a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

pie de página global

Frontera

Agregue también un radio de borde a la sección.

  • Arriba a la izquierda: 20 px
  • Arriba a la derecha: 20 px

pie de página global

Sombra de la caja

Y complete la configuración de la sección agregando una sombra de cuadro sutil.

  • Box Shadow Blur Fuerza: 135px
  • Color de sombra: rgba (0,0,0,0.18)

pie de página global

Agregar nueva fila a la sección

Estructura de columna

Una vez que haya completado la configuración de la sección, agregue una nueva fila utilizando la siguiente estructura de columnas:

pie de página global

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

pie de página global

Espaciado

Elimine el relleno superior e inferior predeterminado de la fila a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

pie de página global

Espaciado de columna

Continúe abriendo la configuración de la columna y agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla.

  • Relleno superior: 100 px (escritorio), 50 px (tableta y teléfono)
  • Acolchado inferior: 100 px (escritorio), 50 px (tableta y teléfono)
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px

pie de página global

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

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo de texto normal a la columna 1 e inserte algún contenido de su elección.

pie de página global

Configuraciones de texto

Pase a la pestaña de diseño del módulo y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Poppins
  • Peso de fuente de texto: negrita
  • Color del texto: # 000000
  • Tamaño de texto: 17px
  • Alineación de texto: centro

pie de página global

Espaciado

Agregue un poco de margen superior e inferior personalizados a continuación.

  • Margen superior: 10px
  • Margen inferior: 30 px

pie de página global

Agregar módulo divisor a la columna

Visibilidad

Justo debajo del Módulo de texto, agregue un Módulo divisor y asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.

  • Mostrar divisor: sí

pie de página global

Línea

Cambia el color de la línea a negro.

  • Color de línea: # 000000

pie de página global

Dimensionamiento

Modifique la configuración de tamaño del divisor también.

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

pie de página global

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

Agregar contenido

Continúe agregando otro módulo de texto a la columna.

pie de página global

Agregar enlace

Agregue un enlace a la página a la que desea que se refiera este módulo.

pie de página global

Configuraciones de texto

Luego, vaya a la pestaña de diseño y cambie la configuración de texto de la siguiente manera:

  • Fuente de texto: Poppins
  • Peso de fuente de texto: ligero
  • Color del texto: # 777777
  • Tamaño de texto: 15px
  • Alineación de texto: centro

pie de página global

Espaciado

Agregue un poco de margen superior e inferior también.

  • Margen superior: 10px
  • Margen inferior: 10px

pie de página global

Clone Text Module # 2 tanto como sea necesario

Una vez que haya completado el segundo Módulo de texto en la columna, puede clonarlo tantas veces como lo necesite (según la cantidad de elementos de pie de página en los que se puede hacer clic).

pie de página global

Cambiar contenido y enlaces

Asegúrese de cambiar el contenido del módulo y los enlaces para cada duplicado.

pie de página global

Clonar columna entera dos veces

Una vez que haya completado la columna y sus módulos, puede clonar la columna completa dos veces.

pie de página global

Color de fondo de la columna 2

Luego, abra la configuración de la columna 2 y cambie el color de fondo.

  • Color de fondo de la columna 2: # f9f9f9

pie de página global

Cambiar contenido y enlaces

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

pie de página global

Agregar nueva columna

Luego, agregue una cuarta columna a la fila.

pie de página global

Color de fondo

Cambiar el color de fondo de la nueva columna.

  • Color de fondo: # 0fffc7

pie de página global

Espaciado

Junto con los valores de relleno de la columna.

  • Relleno superior: 70px
  • Relleno inferior: 70px
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px

pie de página global

Agregar módulo de seguimiento de redes sociales a la columna 4

Agregar redes sociales

Continúe agregando un Módulo de seguimiento de redes sociales a la columna 4.

pie de página global

Restablecer estilos de redes sociales

Restablezca los estilos de elementos para cada red social que agregue.

pie de página global

Alineación

Luego, pase a la pestaña de diseño y cambie la alineación del módulo.

  • Alineación del módulo: centro

pie de página global

Configuraciones de iconos

Modifique el color del icono también.

  • Color del icono: # 000000

pie de página global

Agregue el módulo Optin de correo electrónico a la columna 4

Eliminar contenido

Continúe agregando un módulo Optin de correo electrónico a la columna 4 y elimine el título y el contenido del cuerpo.

pie de página global

Cuenta de correo electrónico

Agregue una cuenta de correo electrónico a continuación. Sin agregar la cuenta de correo electrónico, el módulo no aparecerá una vez que haya salido del generador.

pie de página global

Eliminar color de fondo

Continúe eliminando el color de fondo del módulo.

  • Usar color de fondo: no

pie de página global

Configuraciones de campos

Pase a la pestaña de diseño y cambie la configuración de los campos de la siguiente manera:

  • Color de fondo de los campos: rgba (0,0,0,0)
  • Color del texto de los campos: # 000000
  • Fuente de campos: Poppins

pie de página global

  • Tamaño del texto de los campos: 13 px
  • Ancho del borde de los campos: 1px
  • Color del borde de los campos: # 000000

pie de página global

Configuraciones de botones

Dale estilo al botón de tu módulo también.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 12 px
  • Color del texto del botón: # 000000
  • Color de fondo del botón: #FFFFFF
  • Ancho del borde del botón: 0px

pie de página global

  • Radio del borde del botón: 100 px
  • Espacio entre letras de botones: 1 px
  • Fuente del botón: Poppins
  • Peso de la fuente del botón: semi negrita
  • Estilo de fuente del botón: mayúscula

pie de página global

  • Relleno superior: 15px
  • Relleno inferior: 15px

pie de página global

Agregar módulo de texto dinámico a la columna 4

Contenido dinámico

El siguiente y último módulo que necesitamos para completar este diseño es un módulo de texto. Habilite la opción de contenido dinámico en el cuadro de contenido.

pie de página global

Luego, seleccione la opción ‘Fecha actual’.

  • Contenido dinámico: fecha actual

pie de página global

Y modifique la configuración del contenido dinámico de la siguiente manera:

  • Antes: Copyright y copia;
  • Después: | Todos los derechos reservados
  • Formato de fecha: personalizado
  • Formato de fecha personalizado: 20 años

pie de página global

Configuraciones de texto

Luego, vaya a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Poppins
  • Color del texto: # 000000
  • Tamaño de texto: 16px

pie de página global

Espaciado

Complete la configuración del módulo agregando un poco de margen superior y listo.

  • Margen superior: 50 px

pie de página global

 

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!