| En vista de que hay una gran cantidad y creciente de usuarios de WordPress que usan Divi abrimos una sección de tutoriales para personalizar Divi en la que iremos viendo trucos, consejos y guías de cómo hacer un uso eficiente, y en ocasiones espectacular de este fantástico tema WordPress. Y hoy empezamos con un truco que seguro que te va a encantar, porque no hay cosa más sosa y fea que el pié de página de cualquier web, el conocido footer, así que vamos a darle algo de brillo y alegría, añadiendo algo de CSS y emoción. El objetivo es que el footer, en vez de estar fijo al final de tu web, se desvele en un bonito efecto parallax, o paralaje si lo prefieres llamar así, para de este modo, ya que tienes algo ahí abajo, atraiga algo de atención. Y es que siempre adornamos nuestras portadas web de estupendos efectos y diseños que digan lo buenos que somos, pero llega uno al fina de la página y está ahí ese horrendo y, aparentemente obligatorio, footer. Así que, ya que lo ponemos, al menos que diga algo ¿no? Añadiendo CSS a Divi Como casi todo en Divi, añadir código CSS no conlleva que pierdas los cambios cuando haya actualizaciones, siempre y cuando uses la caja de CSS Personalizado que tienes las opciones del tema Divi. En esta caja puedes añadir tus modificaciones CSS que se aplicarán a toda la web, y solo tienes que copiar y pegar ahí tus códigos, guardar los cambios y se realizará la magia. Así que para añadir el código CSS iremos a Divi -> Opciones del tema -> General, y abajo del todo tienes la caja de CSS Personalizado.    El código para desvelar el footer en Divi El código que tienes que introducir en la caja, a continuación de cualquier otro que ya tuvieses, es el siguiente: /*Footeer que aparece en Divi en vez de estar fijo */ #main-content { margin-bottom: 350px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/ } #main-footer { position: fixed; z-index: -1; height: 350px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/ width: 100%; bottom: 0; } #footer-bottom { position: fixed; width: 100%; bottom: 0; padding: 10px 0; } #footer-info, #footer-info a { padding: 0; } #main-footer .container { height: 100%; } #footer-widgets { position: absolute; bottom: 51px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/ } /*Edita esta sección para pantallas de tablet*/ @media only screen and ( max-width: 980px ) { #main-content { margin-bottom: 450px; } #main-footer { height: 450px; } #footer-widgets { bottom: 83px; } } /*Edita esta seccion para pantallas de moviles*/ @media only screen and ( max-width: 767px ) { #main-content { margin-bottom: 650px; } #main-footer { height: 650px; } #footer-widgets { bottom: 83px; padding: 5% 0; } #footer-widgets .footer-widget:nth-child(n), #footer-widgets .footer-widget .fwidget { margin-bottom: 4.5% !important; } } Si te has fijado bien en el código y los comentarios incluidos, hay algunas líneas que es posible que quieras cambiar, dependiendo de la altura de los contenidos de tu footer. Al final lo que obtienes es algo así: 
Bonito ¿eh? En cualquier caso mucho mejor que el footer estático y soso, y puede que hasta consigas unos cuantos clics en esa sección, porque para eso la tienes ¿no? Espero que te haya gustado, otro día vemos más trucos para personalizar Divi. | 
No hay comentarios:
Publicar un comentario