Cómo agregar diseños de fondo creativos a la barra de pie de página inferior de Divi

La barra de pie de página inferior de Divi es una parte pequeña pero significativa de su sitio web. Y con ciertos diseños de página, puede ser necesario agregar un toque final creativo a esa barra inferior.

En este tutorial, le mostraré cómo agregar diseños de fondo personalizados para la barra de pie de página inferior de Divi. Al eliminar el color de fondo predeterminado de la barra de pie de página inferior y agregar un margen personalizado a una sección, puede aprovechar la configuración de diseño de una sección para crear diseños de fondo geniales.

Empecemos.

Un pequeño vistazo

Aquí hay un adelanto de algunos diseños de ejemplo que puede crear con este tutorial.

Personalización de la barra inferior del pie de página en el personalizador de temas

Antes de que podamos agregar fondos personalizados detrás de nuestra barra de pie de página inferior, debemos deshacernos del color de fondo predeterminado que se está utilizando.

Vaya al personalizador de temas y vaya a Pie de página> Barra inferior. Luego cambie el color de fondo para que sea completamente transparente.

Es posible que no note muchos cambios en la vista previa porque todavía hay un color de fondo de pie de página detrás de la barra inferior. El color de fondo del pie de página se puede cambiar en Pie de página> Diseño, pero es una buena idea dejar ese color de fondo activo como respaldo. El fondo personalizado se agregará a la barra inferior usando una sección página por página. Por lo tanto, tener este fondo asegurará que el contenido de la barra inferior tenga un fondo en las páginas que no tienen el fondo personalizado en su lugar.

También puede cambiar el color del texto de la barra inferior y el color del icono social a blanco si planea tener un diseño de fondo más oscuro. Esto asegurará que el contenido sea más legible.

Creación del diseño de fondo de sección para la barra inferior

Ahora que la barra inferior del pie de página tiene un fondo transparente, estamos listos para diseñar el fondo de nuestra sección y colocarlo detrás de la barra.

Si aún no lo ha hecho, cree una nueva página y elija "Construir desde cero". Luego inserte un diseño de una columna para la fila de la sección.

No es necesario agregar un módulo a la fila, ya que solo necesitaremos la sección y la fila para los diseños de fondo.

A continuación, vaya a la configuración de la fila y agregue un poco de espacio de la siguiente manera:

Margen personalizado: 0px superior, 0px inferior
Relleno personalizado (escritorio): 80px superior, 80px inferior
Relleno personalizado (tableta): 100 píxeles en la parte superior, 100 píxeles en la parte inferior

Este espaciado es necesario para dar algo de altura a nuestra sección y al mismo tiempo preservar el espacio necesario para los divisores de sección que agregaremos para nuestro diseño de fondo.

Ahora, vaya a la configuración de la sección y actualice el espaciado de la siguiente manera:

Margen personalizado (escritorio): -55px inferior
Margen personalizado (tableta): -94px inferior
Relleno personalizado: 0px superior, 0px inferior

El margen inferior de -55px tira de la barra inferior hacia el área de la sección para que cualquier diseño que agreguemos a nuestra sección quede detrás de nuestra barra inferior. La barra inferior por defecto tiene 54 px de alto en el escritorio y aproximadamente 94 px de alto en la tableta, por eso necesita un margen negativo mayor para la tableta.

Deshacerse del relleno superior e inferior maximiza el espacio necesario para el divisor de sección que agregaremos más adelante.

Agregar el divisor inferior

A continuación, agregue un divisor inferior a la sección para enmarcar el contenido de su pie de página de la siguiente manera:

Estilo del divisor inferior: ver captura de pantalla
Color del divisor: # 121212
Altura del divisor: 120 px (escritorio), 150 px (tableta), 150 px (teléfono inteligente)
Repetición horizontal del divisor: 0.9x (escritorio), 0.5x (tableta), 0.5x (teléfono inteligente)
Flip divisor: vertical

En este momento, el contenido de la barra inferior (el texto y los íconos sociales) se oculta detrás del divisor, aunque la disposición del divisor está configurada debajo del contenido de la sección. Esto se debe a que el pie de página inferior no es técnicamente parte del contenido de la sección. Para solucionar este problema, debemos agregar un índice Z personalizado a nuestra sección para que quede detrás del pie de página inferior.

En la pestaña avanzada, agregue el siguiente fragmento de CSS personalizado al elemento principal:

z-index: 0;

Ahora el contenido de la barra de pie de página se ubicará encima de su sección y tendrá un bonito diseño de fondo que enmarca la barra de pie de página.

Y también se ajustará muy bien en dispositivos móviles.

Con esta estructura básica en su lugar, tiene un bonito diseño de sección sobre el que construir. Con eso en mente, continúe y guarde esta sección en su biblioteca para que pueda utilizar esta estructura como punto de partida para explorar los diseños actuales.

Ahora está listo para explorar nuevos diseños. Puede cambiar el divisor inferior a diferentes estilos y colores para crear innumerables diseños de marcos de fondo. Es posible que deba agregar ajustar la altura del divisor y los valores de repetición horizontal según el estilo de divisor que elija.

Aquí están algunos ejemplos.

Uso del divisor superior con un degradado de fondo personalizado

El uso de un solo divisor inferior como diseño de marco de fondo para el pie de página inferior es algo limitante. Pero si usa un divisor superior como diseño de su marco, puede usar un degradado de fondo personalizado para su sección. Esto abrirá nuevas puertas para explorar.

Vaya a la configuración de su sección y establezca su estilo de divisor inferior en ninguno. Luego agregue un degradado de fondo como fondo de su sección.

Ahora puede agregar un estilo de divisor superior a su sección para crear un aspecto completamente nuevo.

Aquí hay algunos diseños de ejemplo posibles simplemente cambiando el fondo degradado y el estilo del divisor.

Combinación de divisores con degradados de fondo para un diseño de marco de borde multicolor

Ahora es el momento de mejorar. Recuerde, existen muchas posibilidades para crear diseños de fondo únicos dentro de las secciones y filas. Entonces, para este último ejemplo, le mostraré cómo combinar estas características para crear un diseño completamente único.

Para impulsar este diseño, siga adelante y use la sección que guardó en su biblioteca haciendo clic para agregar una nueva sección en el constructor visual, seleccionando la pestaña Agregar desde la biblioteca y eligiendo el diseño de la sección.

Una vez que se ha agregado la sección a la página, estamos listos para personalizar.

Para empezar, vaya a la configuración de la sección y actualice lo siguiente:

Color de degradado de fondo a la izquierda: # 29c4a9
Color de degradado de fondo a la izquierda: # 2b87da

Dirección del gradiente: 90 grados
Posición inicial: 50%
Posición final: 0%

Ahora agregue un divisor superior de la siguiente manera:

Estilo de divisor superior: ver captura de pantalla
Color del divisor: #ffffff
Altura del divisor: 120 px (escritorio), 150 px (tableta), 150 px (teléfono inteligente)
Repetición horizontal del divisor: 0.9x (escritorio), 0.5x (tableta), 0.5x (teléfono inteligente)
Flip divisor: vertical

Esta configuración del divisor refleja completamente el divisor inferior de modo que crea un borde que rodea el divisor inferior. Dado que el divisor en sí es blanco, esto da la impresión de que el degradado de fondo es una extensión del divisor inferior.

Ahora vaya a la configuración de la fila y agregue un degradado de fondo de la siguiente manera:

Color de degradado de fondo a la izquierda: # df52ff
Color de degradado de fondo a la izquierda: # 2b87da

Dirección del gradiente: 90 grados
Posición inicial: 50%
Posición final: 0%

Para igualar el ancho de cada segmento de color para su fondo, asigne a la fila un ancho personalizado del 50%.

¡Aquí está el diseño final!

Pensamientos finales

Tener un diseño de fondo personalizado para la barra de pie de página inferior de Divi puede ser una adición refrescante a su página. Todo lo que se necesita son algunas personalizaciones en una sección que se encuentra en la parte inferior de la página. Desafortunadamente, el diseño está limitado a una sola página y no podría aplicarse en todo el sitio. Es por eso que el color de fondo del pie de página se usa como respaldo. Pero una vez que guarde la sección en su biblioteca, puede colocarla fácilmente en cualquier página que desee. Incluso puede agregar a cualquiera de nuestros diseños prefabricados para usar en su próximo proyecto. Todo lo que necesita hacer es asegurarse de agregar la sección al final de su página. ¡Con suerte, lo encontrará útil!

Además, es posible que le interese enmarcar su menú de navegación utilizando una técnica similar.

Espero tener noticias tuyas en los comentarios.

¡Salud!