Cómo crear un anuncio de pie de página con Divi

En el tutorial de Divi de hoy, le mostraremos cómo lograr un cierto efecto que probablemente nunca pensó en integrar en su propio sitio web o en el de un cliente. Más precisamente; le mostraremos cómo crear un anuncio de pie de página. La revelación del pie de página básicamente espera hasta que esté al final de la página y revela el pie de página de acuerdo con la forma en que se desplaza. Una vez que se haya desplazado por toda la página, el pie de página se mostrará en su forma original.

Agregar una revelación de pie de página a su sitio web puede aportar ese toque extra que buscaba darle al pie de página de su sitio web. También es lo último que verán las personas cuando se desplacen por cualquier página de su sitio web. Para mostrarle qué queremos decir exactamente con una revelación de pie de página, echemos un vistazo al resultado final:

Puede ver que, además de hacer que se revele el pie de página, también agregamos una sombra sutil al contenido principal de nuestro sitio web. Al hacer eso, hemos creado una especie de perspectiva entre el contenido principal y el pie de página.

Cómo crear un anuncio de pie de página con Divi

Suscríbete a nuestro canal de Youtube

Agregue el código CSS necesario

Para lograr el resultado de la revelación del pie de página, en primer lugar, necesitaremos algunas líneas de código CSS. Dado que hay diferentes formas de agregar el código CSS a su sitio web Divi, le mostraremos las tres. En primer lugar, le mostraremos cómo agregar el código a las Opciones de tema. En segundo lugar, agregaremos el código a través del Personalizador de temas. Al agregar código a través de uno de los dos métodos, la revelación de su pie de página se aplicará inmediatamente a todo el sitio web. Por otro lado, si desea que el código se aplique a una página en particular, también puede hacerlo. Al mostrarle cómo agregar el código a la página en la que está trabajando, puede crear ese efecto para una página exclusivamente.

Las dos cosas principales que necesitaremos en nuestro código son el índice z y un margen inferior para el contenido principal. Para asegurarnos de que el pie de página se ajuste perfectamente, necesitamos saber la altura del pie de página. De manera estándar, el pie de página que se usa tiene un valor de 53 px. Pero, podría ser que hayas cambiado la altura según tus necesidades. Después de mostrarle cómo agregar la revelación de pie de página de manera estándar, también le mostraremos cómo hacer que se ajuste a la altura de cualquier pie de página.

Agregue el código CSS necesario a través de las opciones del tema

La primera forma en que le mostraremos cómo agregar el código CSS es a través de las Opciones del tema Divi. Este es el método más utilizado para agregar cualquier código CSS adicional a su sitio web. Al agregar el código CSS en esta área, inmediatamente lo aplicará a todo el sitio web.

Para agregar el código, vaya a su Tablero de WordPress> Divi> Opciones de tema> Y copie y pegue las siguientes líneas de código CSS en el campo CSS personalizado en la parte inferior de la pestaña:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Una vez que haya agregado el código, vaya a su sitio web y observe cómo el pie de página hace su trabajo.

Agregue el código CSS necesario a través del personalizador de temas

Otra forma de agregar el código CSS a su sitio web Divi es a través del Personalizador de temas. Agregar el código a través del Personalizador de temas o las Opciones de tema es lo mismo. Una vez que elimine el código dentro de las Opciones de tema, también se eliminará en el Personalizador de temas y viceversa. Una de las ventajas de agregar código a través del Personalizador de temas es que puede ver que todo sucede en tiempo real. Por lo tanto, los ajustes adicionales que realice en el código le brindarán inmediatamente una imagen clara del resultado final que obtendrá.

Para agregar el código al Personalizador de temas, vaya a su Tablero de WordPress> Apariencia> Personalizar> Desplácese hacia abajo hasta 'CSS adicional'> Y agregue las siguientes líneas de código CSS:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Agregue el código CSS necesario a una sola página

La última forma de agregar el pie de página para revelar las líneas de código CSS es agregándolo a una página en particular. Esto puede resultar interesante si, por ejemplo, quieres dar algún valor añadido a las páginas que tienen menos contenido que interactúa. Al agregar una revelación de pie de página, de alguna manera hará que la página sea un poco más interactiva y se centrará en el contenido que se proporciona en el pie de página, como los íconos de las redes sociales.

Para agregar el código CSS a una página en particular, abra esa página específica. En la esquina superior derecha de Divi Builder en esa página, verá el siguiente icono.

Haga clic en el icono y pegue las siguientes líneas de código en el campo CSS personalizado:

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

Una vez que haya guardado la configuración, verá que el pie de página aparece en esa página en particular.

Cambiar la altura del pie de página

Ahora, el método que explicamos anteriormente solo cuenta para el pie de página estándar proporcionado. Una vez que esté tratando con otra altura, el código no hará su trabajo correctamente. Lo hemos tenido en cuenta y le mostraremos cómo hacer que el pie de página se revele también para otras alturas.

En cualquier momento, puede elegir la altura que desea asignar a su pie de página. Tenemos que establecer la altura para dos ID de CSS: el pie de página principal y la parte inferior del pie de página. Al ajustar la altura en estos dos lugares, el pie de página encajará en su lugar. Por supuesto, una vez que haya hecho eso, también tendrá que cambiar el margen inferior de su contenido principal. Si desea un pie de página que tenga una altura de 60 px, por ejemplo, necesitará las siguientes líneas de código:

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

Puede ver que hay tres lugares donde necesitábamos el valor '60px'. Si tiene otro valor de altura que le gustaría asignar a su pie de página, asegúrese de cambiarlo en los tres lugares; el contenido principal, el pie de página principal y la parte inferior del pie de página.

Agregar sombra de cuadro CSS

Otra cosa que puede hacer para agregar un poco de perspectiva e interacción a su sitio web es agregar algo de sombra de cuadro al contenido principal. El pie de página ya muestra que está ubicado "debajo" del contenido principal. Una vez que agregue la sombra del cuadro, lo enfatizará. Al tener una sombra, la distancia ilusoria en altura entre el contenido principal y el pie de página parecerá mayor.

Para agregar la sombra del cuadro a la revelación de su pie de página, use las siguientes líneas de código:

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

¡Eso es todo! La revelación de su pie de página ahora debería funcionar bien.

Pensamientos finales

En la publicación de hoy, le mostramos cómo puede crear un efecto de revelación de pie de página en su sitio web. Asegúrese de utilizar el código CSS personalizado proporcionado para crear el efecto y asegúrese de que se ajuste a la altura de su pie de página. Si desea darle esa perspectiva adicional, le recomendamos agregar la sombra del cuadro al contenido principal como se muestra en el paso anterior. Si tiene alguna pregunta o sugerencia; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de Demja / shutterstock.com