Barra inferior del pie de página de Divi
Contenidos
Tengo un simple diseño de 2 columnas con un pie de página que borra tanto la derecha y la izquierda div en mi marcado. Mi problema es que no puedo conseguir el pie de página para permanecer en la parte inferior de la página en todos los navegadores. Funciona si el contenido empuja el pie de página hacia abajo, pero no siempre es así.
3) Hace tiempo webkit tenía un problema con las unidades de vista dentro de una regla calc. Esto se ha solucionado (ver aquí) así que no hay problema. Sin embargo, si usted está buscando para evitar el uso de calc por alguna razón usted puede conseguir alrededor de que el uso de márgenes negativos y el relleno con box-sizing –
Se basa en la visualización flex, aprovechando la propiedad flex-grow, que permite que un elemento crezca en altura o anchura (cuando la dirección de flujo se establece en columna o fila respectivamente), para ocupar el espacio extra en el contenedor.
Podrías usar position: absolute following para poner el pie de página en la parte inferior de la página, pero entonces asegúrate de que tus 2 columnas tienen el margin-bottom apropiado para que nunca queden ocluidas por el pie de página.
Divi pie de página permanecer en la parte inferior de la página
¿Tiene una página web que tiene sólo un poco de contenido y su pie de página luego termina en el medio de la página? Eso no sólo arruina el flujo de su sitio web, pero también me parece agravante, por decir lo menos. Con el Theme Builder de Divi, hay una solución simple y también te da la posibilidad de personalizar el diseño de tu pie de página, lo cual me encanta.
Para que el pie de página fijo funcione y coincida con la altura de la sección principal y el espacio en la parte inferior de la página contenga correctamente la fila, tendrás que añadir el siguiente CSS al elemento principal de la fila en la pestaña Avanzado:
Diseño de pie de página Divi
Mantener el encabezado en la parte superior y el pie de página en la parte inferior es una práctica común para casi todos los sitios web. A veces, si el contenido es pequeño y la pantalla es grande entonces el pie de página llega hasta la mitad de la página. Esa no es realmente una buena manera de manejar el pie de página.
Este es el método más fácil que conozco hasta ahora y actualmente lo uso en mis proyectos. Sólo tenemos que añadir 3 líneas de estilo al layout element y una línea de estilo al layout’s child content o wrapper element.
Para entender mejor el código CSS anterior, estamos aplicando fr (unidad fraccionaria) para el elemento envoltorio para ser flexible. Tuvimos Header, Wrapper, y Footer, por lo tanto grid-template-rows: auto 1fr auto. Si son sólo 2 elementos como Wrapper y Footer entonces el valor de grid-template-rows será 1fr auto.
Pie de página en la parte inferior de la página pero no pegajoso
He estado inyectando secciones de la biblioteca Divi en las páginas de un par de años y una de esas secciones es una barra de pie de página fija para dispositivos móviles. Esto es genial si quieres tener una clara llamada a la acción para los espectadores móviles. También le da a tu sitio web la apariencia de una aplicación real.
7. 7. Ve a tu biblioteca Divi y abre el diseño que acabas de crear. Una vez que tenga el diseño abierto, echa un vistazo a la URL y verá una secuencia de caracteres y números. Usted va a querer agarrar los números como vamos a necesitar para los próximos pasos. Por ejemplo, en mi caso, la secuencia de números que quiero agarrar es 27253. Esta es la URL en mi ejemplo: https://montereydev.com/demos/divi/mobile-footer-bar/wp-admin/post.php?post=27253&action=edit
Como estás trabajando con un tema hijo puedes ir a Apariencia>Editor y abrir tu hoja de estilos. De lo contrario, vaya a Apariencia>Divi Theme Options>Custom CSS (que se encuentra en la parte inferior de la primera pestaña en Opciones de tema)
Al igual que con todos mis tutoriales, mi objetivo no es enseñarle cómo utilizar la configuración de Divi tanto como lo es para enseñarle cómo personalizar su sitio web aprendiendo un poco de CSS en el camino. Así que con eso se dice, aquí hay algunos consejos CSS para ayudarle a aprender un poco más sobre CSS.