Cómo hacer que su pie de página Divi sea pegajoso

En este tutorial, le mostraremos exactamente cómo hacer que el pie de página de su sitio web Divi sea pegajoso. El uso de un pie de página adhesivo puede ser una de las solicitudes que recibe cuando está diseñando un sitio web para un cliente o una necesidad que tiene cuando está creando su propio sitio web. Le mostraremos dos posibilidades que harán que su pie de página sea pegajoso. La primera forma es a través del código CSS y la segunda a través del código jQuery. Ambas formas funcionan, pero todo depende de cuál prefiera usar para crear ese efecto pegajoso para su sitio web.

Agregar un pie de página adhesivo a su sitio web actualmente no es algo que pueda hacer automáticamente dentro del creador de Divi. Es por eso que le mostraremos cómo alcanzar el resultado exacto que desea sin tener que esforzarse mucho. Lo único que tienes que hacer es seguir este post paso a paso, copiar y pegar algunas líneas de código y colocarlas en el lugar correcto.

¿Por qué utilizar un pie de página fijo?

Un pie de página pegajoso se usa generalmente por una razón principal; si tiene una página o varias páginas en su sitio web que no tienen suficiente contenido disponible para llenar una pantalla completa. Por supuesto, puede asegurarse de tener suficiente contenido en una página, pero si no aporta valor agregado a la página; no hay necesidad de hacerlo.

Ahora, en caso de que no haya suficiente contenido para llenar toda la pantalla, la página tendrá un pie de página flotante justo después de que finalice el contenido. Por lo general, no se ve bien y no es el resultado que desea obtener. Afortunadamente, puede utilizar un pie de página adhesivo para deshacerse del pie de página flotante. El pie de página adhesivo asegura que el pie de página permanezca en la parte inferior de la página sin crear espacio innecesario. La longitud de la página seguirá siendo la misma y cada vez que ajuste el tamaño de su ventana, el pie de página se modificará a la pantalla.

Aquí tienes una imagen de una página corta que no tiene un pie de página fijo:

Y aquí está la misma imagen de esa página después de que se haya agregado un pie de página adhesivo:

Diferencia entre pie de página fijo y fijo

No todo el mundo decide utilizar un pie de página en su sitio web, pero cuando lo hace; hay muchas formas de darle estilo. Todo depende de cómo sea la estructura de su sitio web y si desea incluir un pie de página 'manual' y con un estilo diferente que se haya creado con el constructor Divi.

Pero si está utilizando un pie de página estándar, puede elegir cómo le gusta darle estilo y cómo desea que se ubique en su sitio web. Las tres posiciones principales que puede tener un pie de página en un sitio web son flotante, fija y fija.

Al comparar el pie de página fijo y el pegajoso entre sí; pueden parecer iguales a primera vista, pero no lo son. El pie de página fijo siempre está visible cuando se desplaza por una página en su sitio web, mientras que el pie de página fijo maneja específicamente las páginas donde el contenido no es lo suficientemente largo como para llegar a la parte inferior de la pantalla. En ese caso específico donde el contenido no es lo suficientemente extenso; se comportará como un pie de página fijo y permanecerá pegado al final de la página; creando ese 'efecto de pie de página fijo'.

Sin embargo, si el contenido es lo suficientemente largo, el pie de página adhesivo se comportará como de costumbre y la página empujará el pie de página hacia la parte inferior de la página para asegurarse de que no aparezca continuamente en la pantalla. En la mayoría de los casos, se prefiere este método a tener un pie de página fijo en todo el sitio web porque da más espacio en la ventana para que aparezca el contenido.

Cree un pie de página fijo en su sitio web Divi a través de CSS

Sin más, comencemos a crear un pie de página adhesivo para su sitio web. El código que usaremos es realmente simple pero hace el trabajo. Pasará rápidamente de un pie de página flotante en su página a una página donde el pie de página se empuja hacia abajo si el contenido no es lo suficientemente largo.

Agregar código CSS a través de la configuración de la página (para una página en particular)

En ciertos casos, se desea hacer el pegajosa pie de página en una sola página en particular. En esta parte de la publicación, le mostraremos cómo hacerlo exactamente agregando el código CSS al campo CSS personalizado de una página. Al hacer eso, se asegura de que el código CSS solo se aplique a esa página de su sitio web. Lo que también significa que el código CSS solo se cargará cuando alguien abra esa página en particular. Este método generalmente se usa en los casos en que solo hay unas pocas páginas más cortas en el sitio web a las que desea dar el pie de página adhesivo.

Comience abriendo la página en la que desea que esté activo el pie de página adhesivo o creando una nueva página donde desee que se aplique. A continuación, abra la configuración de la página haciendo clic en el siguiente icono en su generador de Divi:

Continuando, agregue el siguiente código al campo CSS personalizado en la ventana que acaba de abrir:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Desde el momento en que obtiene una vista previa de su página, el código CSS debe aplicarse y hacer que el pie de página sea pegajoso.

Agregar código CSS a través del personalizador de temas (vista en tiempo real)

Otra forma de agregar el código es a través del Personalizador de temas. Si agrega el código CSS de esta manera, se aplicará automáticamente a todo el sitio web. Cada página tendrá este código CSS aplicado. Al agregar el código a través del Personalizador de temas, también puede ver directamente los cambios que ocurren en su sitio web.

Para agregar el código CSS al Personalizador de temas, haga clic en 'Personalizador de temas' en la parte posterior de su sitio web de WordPress. A continuación, desplácese hacia abajo en la página y abra la opción CSS adicional. Verá aparecer todo el código CSS personalizado que ha utilizado hasta ahora. Continúe y agregue el siguiente código:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Agregar código CSS a través de las opciones del tema Divi

Por último, pero no menos importante, también puede agregar el código a través de las Opciones del tema Divi. Esta es la forma más utilizada de agregar código a un sitio web donde desea que todo el sitio web se beneficie del código.

Vaya a Divi> Opciones de tema> Desplácese hacia abajo en la página> Agregue el siguiente código CSS al cuadro CSS personalizado:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Cree un pie de página fijo en su sitio web Divi a través de JQuery

Agregue código jQuery a través del módulo de código (para una página en particular)

Puede agregar el código jQuery utilizando el Módulo de código dentro del constructor Divi. Esto, nuevamente, se usa principalmente cuando no hay muchas páginas con contenido corto y si no desea cargar el código jQuery para todo el sitio web.

Agregue una sección con una fila de ancho completo a la página en la que está trabajando.

Continúe agregando un módulo de código a esa fila de ancho completo y pegue el siguiente código en ella:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Agregar código jQuery a través de las opciones del tema Divi

Otra posibilidad de agregar el código jQuery es a través de las Opciones del tema Divi. Al agregar código jQuery para todo el sitio web, hay un lugar específico en las Opciones del tema Divi donde podemos hacerlo; en el <head & gt; campo de la pestaña Integración. Ahí es exactamente donde vamos a agregar el código ahora mismo.

Abra su sitio web de WordPress> Vaya a Divi> Abra las Opciones de tema> Vaya a la pestaña Integración y agregue el siguiente código jQuery al <head> de su sitio web:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Pensamientos finales

Por lo general, es necesario agregar un pie de página adhesivo en los casos en que tiene una página con poco contenido. Desea deshacerse del pie de página flotante para que la estructura de la página se sienta más natural. Si tiene algún comentario o sugerencia para futuras publicaciones en nuestra sección de blog; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación para que podamos ponernos en contacto!

¡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 Vintagio / shutterstock.com