¿Te gustaría crear un pie de página personalizado en DIVI?
Una de las partes más importantes del generador de temas de Divi es la capacidad de agregar dinámicamente pies de página globales a sus páginas web 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 utilizando el generador de temas de Divi.
En este tutorial, lo guiaremos paso a paso a través del proceso de creación y adición de un pie de página global a su Sitio web.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo al pie de página que vamos a diseñar.
oficina
Vaya a Divi Theme Builder y agregue un pie de página global
- Ve a Divi > Generador de temas y haz clic en " Agregar un pie de página global«
- Elegir " Crear un pie de página global«
Personalizar sección #1
Color de fondo
Abra la sección que puede encontrar en la página y cambie el color de fondo de la sección.
- Antecedentes: #000000
espaciamiento
Cambiar a pestaña Estilo y luego cambie la configuración de espaciado de sección.
- Margen (superior, izquierdo y derecho): 6vw
- Margen interno (izquierdo y derecho): 30px
Frontera
Luego agregue un borde superior a la izquierda y a la derecha.
- Rectángulo redondeado superior izquierdo: 20px
- Rectángulo redondeado superior derecho: 20px
Caja de sombra
También incluya una sombra de cuadro en la configuración de la sección.
- Fuerza de desenfoque de sombra de arco: 135px
- Color de fuente de subtítulos: rgba (0,0,0,0.18)
Agregar una nueva línea a la sección
Estructura de la columna
Continúe agregando una fila a su sección usando la siguiente estructura de columnas:
Agregar un módulo de texto a la columna
Añade un título de tamaño H2 (Título 2)
Insertar un módulo de texto con contenido de tamaño H2.
Configuración de texto H2
Cambiar a la pestaña de Estilo del módulo y modifique los parámetros del texto H2 en consecuencia:
- Fuente del encabezado: Poppins
- Encabezado de luz tenue: seminegrita
- Alineación de texto: centrado
- Color del texto del encabezado: #ffffff
- Tamaño del texto del encabezado: 31 px (escritorio), 24 px (tableta), 18 px (teléfono)
- Altura de la línea de cabecera: 1,6 em
apresto
También agregue un ancho máximo al módulo.
- Ancho máximo: 700 píxeles
Agregar módulo de botones a la columna
Agregar texto al botón
Inserte un módulo Botón justo debajo del módulo Texto en su columna e ingrese un texto de su elección.
alineación
Cambiar a la pestaña de Estilo del módulo y cambie la alineación del botón al centro.
- Alineación de botones: centrado
Configuraciones de botones
Continúe personalizando el botón.
- Usar estilos personalizados para Botón: Sí
- Tamaño del texto del botón: 12px
- Color del texto del botón: #000000
- Botón de fondo: #FFFFFF
- Botón de ancho de borde: 0 píxeles
Lea también: Cómo mostrar una página de blog como un carrusel en DIVI
- Radio del borde del botón: 100 px
- Espaciado entre letras del botón: 1 px
- Fuente del botón: Poppins
- Botón de luz suave: Semi negrita
- Botón de estilo de copia: TT
espaciamiento
También agregue valores de relleno personalizados.
- Margen interno (superior e inferior): 14px
- Margen interior: Izquierda (40px); Derecha (58px)
Sección 2
Agregue una segunda sección "normal" debajo de la anterior.
Color de fondo
Cambiar color de fondo
- Fondo: #ffffff
espaciamiento
Luego elimine todos los márgenes internos (Superior e Inferior).
- Margen interno (superior e inferior): 0px
frontera
También agregue un radio de borde a la sección.
- Rectángulo redondeado (arriba a la izquierda): 20px
- Rectángulo redondeado (arriba a la derecha): 20px
Caja de sombra
Y complete la configuración de la sección agregando una sutil sombra de cuadro.
- Fuerza de desenfoque de sombra de cuadro: 135px
- Color de fuente de los subtítulos: rgba(0,0,0,0.18)
Agregar una nueva línea a la sección
Estructura de la columna
Una vez que haya completado la configuración de la sección, agregue una nueva fila usando la siguiente estructura de columnas:
apresto
Sin agregar ningún módulo todavía, abra la configuración de la fila y cámbiela de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Espacio entre columnas: 1
- Armonizar alturas de columnas: Sí
- Ancho máximo: 100%
- Ancho máximo: 100%
espaciamiento
Luego elimine los márgenes internos predeterminados (Superior e Inferior) de la línea.
- Margen interno (superior e inferior): 0px
Espaciado de columnas
Continúe abriendo la configuración de la columna para agregar valores de relleno personalizados.
- Margen interno (superior e inferior): 100 px (escritorio), 50 px (tableta y teléfono)
- Margen interno (izquierdo y derecho): 100 px (escritorio), 50 px (tableta y teléfono)
Agregue el módulo Text #1 a la columna
Agregar contenido
Ahora podemos agregarle módulos. Agregue un módulo de texto a la columna e inserte el contenido De tu elección
Configuraciones de texto
Cambiar a la pestaña de Estilo del módulo y modifique los parámetros de texto en consecuencia:
- Fuente de texto: Poppins
- Peso de fuente de texto: Negrita
- Color del texto: #000000
- Tamaño del texto: 17px
- Alineación de texto: centrado
espaciamiento
Luego agregue márgenes personalizados (superior e inferior).
- Margen superior: 10 px
- Margen inferior: 30px
Agregar un módulo Separador a la columna
Justo debajo del módulo Texto, agregue un módulo Separador.
visibilidad
Asegúrese de que la opción " Mostrar separador Está habilitado
- Mostrar separador: Sí
línea
Cambia el color de la línea a negro.
- Color de la etiqueta: #000000
apresto
Cambie también la configuración del tamaño del divisor.
- Ancho máximo: 15%
- Alineación de texto: Centro
Agregue el módulo Text #2 a la columna
Agregar contenido
Continúe agregando otro módulo de texto a la columna, así como un contenido De tu elección
Ajouter un gravamen
Inserte un enlace a la página a la que desea que haga referencia este módulo.
Configuraciones de texto
Luego cambie a la pestaña Estilo y cambie la configuración de texto de la siguiente manera:
- Fuente del texto: Poppins
- Texto de luz suave: claro
- Color del texto Texto: #777777
- Texto Tamaño del texto: 15 px
- Alineación de texto: centrado
espaciamiento
También agregue un margen (Superior e Inferior).
- Margen (superior e inferior): 10 px
Clona el módulo de texto #2 según sea necesario
Una vez que haya completado el segundo módulo de texto, puede clonarlo tantas veces como necesite (según la cantidad de elementos de pie de página en los que se pueda hacer clic que desee incluir).
Editar contenido y enlaces
Asegúrese de editar el contenido del módulo y los enlaces para cada duplicado.
Clonar toda la columna dos veces
Una vez que haya completado la columna y sus módulos, puede clonarlo dos veces.
Color de fondo de la columna 2
Luego abra la configuración de la columna 2 y cambie el color de fondo.
- Fondo: #f9f9f9
Editar contenido y enlaces
Asegúrese de editar todo el contenido y los enlaces en cada columna duplicada.
Añadir una nueva columna
A continuación, agregue una cuarta columna a la fila.
Color de fondo
Cambia el color de fondo de la nueva columna.
- Fondo: #0fffc7
espaciamiento
Modifique los márgenes internos de la siguiente manera:
- Margen interno (superior e inferior): 70px
- Margen interno (izquierdo y derecho): 50px
Agregue el módulo 'Síganos en las redes sociales' a la columna 4
Agregar redes sociales
Continúe agregando un módulo " Suivez-nous sur les réseaux sociaux en la columna 4 e inserte las redes sociales de su elección.
Restablecer estilos de iconos de redes sociales
Haga clic en " Restablecer estilos de elementos de roles para cada una de las redes sociales.
alineación
Luego cambie a la pestaña Estilo y modificar la alineación del módulo.
- Alineación de texto: Centro
Configuración de iconos
También cambie el color de los íconos de las redes sociales.
- Color del icono: #000000
Agregue el módulo de opción de correo electrónico a la columna 4
Insertar un mod " Opción de correo electrónico "debajo del módulo" Suivez-nous sur les réseaux sociaux«
Borrar contenido y título del módulo
Cuenta de correo electrónico
A continuación, agregue una cuenta de correo electrónico. Si no agrega una cuenta de correo electrónico, el módulo no aparecerá después de salir del generador de temas.
Quitar el color de fondo
- Usar color de fondo: No
Configuraciones de campo
Cambiar a pestaña Estilo y cambie la configuración del campo de la siguiente manera:
- Campos de color de fondo: rgba(0,0,0,0)
- Campos de color de texto: #000000
- Fuente Champs: Poppins
- Campos de tamaño de texto: 13px
- Campos de ancho de borde: 1 px
Configuraciones de botones
También personaliza el botón de tu módulo.
- Usar estilos personalizados para Botón: Sí
- Tamaño del texto del botón: 12px
- Color del texto del botón: #000000
- Botón de fondo: #FFFFFF
- Ancho del borde: 0px
- Radio del borde del botón: 100 px
- Espaciado entre letras del botón: 1 px
- Fuente del botón: Poppins
- Botón de luz tenue: Semi negrita
- Botón de estilo de copia: TT
Ver también: Cómo crear un formulario de contacto adhesivo en DIVI
- Relleno de botones (superior e inferior): 15 px
Agregar módulo de texto dinámico a la columna 4
El siguiente y último módulo que necesitamos para completar este diseño es un módulo de texto.
Activar la opción " Usa contenido dinámico".
Luego seleccione la opción " fecha actual".
Y cambie la configuración de contenido dinámico de la siguiente manera:
- Frente: Copyright ©
- Después: | todos los derechos reservados
- Formato de fecha: Aduana
- Formato de fecha personalizado: 20 años
Configuraciones de texto
A continuación, cambie a la pestaña de estilo y cambie la configuración del texto:
- Fuente del texto: Poppins
- Color del texto Texto: #000000
- Texto Tamaño del texto: 16 px
espaciamiento
Complete los parámetros del módulo agregando margen y ¡listo!
- Margen superior: 50 px
Guarde las opciones de generador de temas y pie de página global
Una vez que haya terminado, asegúrese de guardar su trabajo antes de salir del generador. Tema divi.
Tan pronto como esté fuera del diseño de la plantilla, guarde todos los cambios del generador de temas y ¡listo!
vista
Ahora que hemos seguido todos los pasos, echemos un último vistazo al resultado.
¡¡¡Descarga DIVI ahora!!!
Conclusión
En este tutorial, le mostramos lo fácil que es crear un hermoso pie de página global personalizado con el generador de temas de Divi.
Esperamos que este tutorial lo inspire a crear hermosos pies de página globales para sus próximos proyectos Divi.
Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
