Con la llegada de la últma versión del tema Divi, la forma de realizar muchas configuraciones ha cambiado facilitando la manera de hacerlas. Las posibilidades son enormes en todos los aspectos, pero en este tutorial sólo me centraré en configurar un footer en Divi con módulos y alguna acción avanzada, como dejarlo oculto y mostrarlo sólo cunado queramos.
Si ya conoces Divi y estás indeciso a la hora de adquirirlo, voy a darte un pequeño regalo para ayudar a que te decidas. Aquí te dejo un par de enlaces que estarán activos por tiempo limitado, no garantizo que la oferta esté activa más adelante, y si no te gusta tienes 30 días de garantía de devolución sin compromiso:
20% de DESCUENTO - Para desarrolladores y diseñadores
Creación de un footer atractivo en Divi con módulos
El tema Divi tiene asignado un espacio en la plantilla específico para colocar unos widgets y componer un footer, con un poco de imaginación y código CSS podemos crear diseños muy atractivos. Pero muchas veces no es lo que buscamos por falta de funcionalidad.
Para configurar el footer de manera tradicional, sólo podemos usar los widgets de WordPress, los cuales son muy limitados. Podemos añadir más widgets con la instalación de plugins, para añadir un formulario o más redes sociales, pero ya estamos añadiendo código adicional a un tema que no lo necesita.
Hay otra posibilidad, crear un footer en Divi con módulos a nuestro gusto, utilizando cualquier configuración que se nos ocurra con el Divi Builder.
El método antiguo para hacer esto mismo obligaba a tocar código para poder insertar el footer en todo el sitio web, pero con la nueva función "Generador de temas", el proceso es muy sencillo.
No será necesario utilizar un tema hijo para este proceso si dispones de la última versión de Divi, de lo contrario, si tu versión es antigua y quieres utilizar un footer personalizado con módulos, tendrás que crear uno.
El método antiguo lo dejo explicado al final del artículo, pero recomiendo actualizar Divi y utilizar el "Generador de temas".
Acceder al "Generador de Temas" de Divi
Funciona igual tanto en el tema Extra como en el Divi, dentro de la pestaña del tema en WordPress, picamos en la llamada "Generador de temas" (Theme Builder).
El aspecto inicial del "Generador de Temas" aparece totalmente vacío, dando preferencia a configurar DIVI con las opciones por defecto de siempre, desde el personalizador de WordPress.
Cada sección (cabecera, cuerpo y pie de página) es independiente, pudiendo configurar el footer con módulos en Divi en esta sección y dejar el resto con las opciones generales que usa el tema.
Al picar sobre la opción del footer o pie de página, se desactiva automáticamente la configuración básica del personalizador, dando preferencia y mostrando sólo lo que diseñemos en esta pestaña.
Si hemos guardado un diseño de un pie ya creado en la biblioteca de Divi, podemos importarlo e insertarlo en esta sección para que aparezca en toda la web. Si no, podemos crear uno desde cero con los módulos que necesitemos de Divi.
Diseño del footer con los módulos de Divi
En este punto podemos hacer lo que queramos con los módulos, las filas y las secciones, teniendo plena libertad para incluir todo lo que nos interese tener en el pie de la web.
No voy a detenerme en explicar cada módulo que yo he utilizado para crear el siguiente diseño, ya que cada uno tendrá sus preferencias y utilizará módulos diferentes según los necesite. En el vídeo podéis ver todo el proceso completo de cómo lo he creado.
En líneas generales, he añadido dos secciónes con la siguiente configuración:
- Sección 1 - Con una imagen de fondo
- Fila 1 - De tres columnas con varios módulos de texto, para insertar varios "Enlaces principales", un texto informativo a modo de "Aviso importante" y un módulo de redes sociales.
- Fila 2 - Con un color negro de fondo y anchura al 100%, dentro hay módulo de texto para colocar los enlaces de "Textos legales" y el nombre de la web.
Antes de cerrar hay que guardar el trabajo realizado, primero en la página del constructor y luego en la página del "Generador de Temas".
A partir de ese momento podremos disfrutar en toda la web de un footer personalizado con módulos gracias al tema Divi.
Si en algún momento queremos modificar el pie de página o footer creado con módulos de Divi, sólo tenemos que editar el diseño en el "Generador de temas" y los cambios se replicarán automáticamente en toda la web.
Mostrar y ocultar el footer cuando queramos
No es lo más habitual, pero existen algunas webs con scroll infinito que carga nuevo contenido de forma constante al final de la página, impidiendo que podamos acceder al footer.
El footer debe existir siempre en cualquier página web, es un sitio de consulta para el usuario donde se puede encontrar datos de contacto, teléfonos o enlaces para consultar los textos legales o condiciones de venta.
No poder acceder a él supone un problema importante, y podría estresar al usuario al comprobar que nunca aparece.
La solución que voy a enseñaros podéis verla en esta dirección, una web de productos con scroll infinito que tiene un botón para mostrar el footer en cualquier posición que te encuentres de la página.
Crear un botón para activar el footer en Divi
Como se trata de un elemento general en toda la web, editamos el footer que hemos creado en el "Generador de temas".
Añadimos una sección de anchura completa con un módulo de código donde pegaremos el código HTML siguiente:
1 | <button class="botonlegal" id="botonfooter">ⓘ Textos legales y más</button> |
Nos aseguramos que el fondo de la sección sea transparente para que no tape ningún elemento de la web.
Añadimos el botón con código, en lugar de usar el módulo, para poder asignar una clase y un identificador directamente al botón.
Como es un elemento que tiene que estar siempre visible, y para que no moleste a la hora de navegar, lo fijamos en la parte inferior derecha inicialmente, ya que esto depende de los elementos que tenga cada web.
La configuracione del módulo donde hemos colocado el código es esta:
- Pestaña Avanzado:
- Puesto - Fixed
- Localización - Abajo a la derecha
- Desplazamiento vertical (Vertical offset) - 10px
- Desplazamiento horizontal (Horizontal offset) - 10px
- Índice Z - 201
Ajustes de los elementos del footer
El footer debe estar oculto al cargar la página, y sólo e mostrará cuando pulsemos el botón. Para realizar esta configuración editamos la sección y la pestaña "Avanzado".
- Pestaña Avanzado (Sección del footer):
- ID (Identificador CSS) - footermodulos
- CSS personalizado (Elemento principal) - display: none
- Puesto -
- Puesto - Fixed
- Localización - Abajo a la derecha
Cuando tengamos todo configurado se guardan todos los cambios y volvemos a la administración de WordPress.
Añadir la acción JQuery necesaria
Hata ahora sólo nos hemos centrado en el diseño y posición de los elementos, pero la acción de mostrar y ocultar el footer se realiza por medio de un script que hay que cargar en la cabecera del tema.
Divi nos facilita este trabajo al permitir añadir código en la cabecera (head) sin necesidad de instalar plugins adicionales o crear un tema hijo.
Abrimos la pestaña "integración", que se encuentra dentro de "Divi > Opciones del tema", y pegamos el siguiente código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script> jQuery(function($){ //Ocultar / Mostrar bloque $("#botonfooter").click(function() { $("#footermodulos").fadeToggle(0); },function(){ $("#footermodulos").fadeToggle(0); }); //Cambiar texto boton $('.botonlegal').click(function(){ var $this = $(this); $this.toggleClass('.botonlegal'); if($this.hasClass('.botonlegal')){ $this.text('ⓘ Cerrar'); } else { $this.text('ⓘ Textos legales y más'); } }); }); </script> |
Guardamos los cambios y ya tendremos y footer disponible en todo momento para el usuario que quiera consultarlo.
En el script deben coincidir los nombres de la clase e identificador que pusimos en el botón, o no funcionará.
Limando detalles en el botón del footer
Como tenemos un botón al que hemos puesto un nombre a la clase (class), podemos modificar el aspecto desde la pestaña de "CSS adicional" del personalizador de WordPress.
Algunas cosas que vamos a añadir son un puntero cuando el ratón pase por encima, unos márgenes interiores para agrandar el botón y un borde. También haremos que cambie el color del fondo al ponernos encima.
El código que aquí pongo puede modificarse a conveniencia:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .botonlegal { padding:10px !important; cursor:pointer; cursor: hand; background: #ffffff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 2px 2px 5px rgba(0,0,0,0.4); font-weight: normal; text-transform: uppercase; font-size: 12px; } .botonlegal:hover { background: #eeeeee; } |
Footer con módulos en DIVI (versiones antiguas)
El diseño del footer no tiene ningún misterio si sabemos configurar los módulos, el problema aparece cuando hay que colocarlo al pie de todas las páginas y artículos.
Si estamos empezando a diseñar nuestra web podemos ir insertando la sección del footer página a página, según avanzamos en nuestro proyecto, y sin la necesidad de crear un tema hijo.
De lo contrario, si nuestra web es antigua y dispone de mucho contenido, el tema hijo es indispensable para añadir una línea de código en el archivo "footer.php" que inserte el diseño en todas las páginas de la web, estén creadas con Divi Builder o no. Todo esto lo explico a continuación.
Ocultar el footer por defecto
Para tener un footer en Divi con módulos, es importante deshacernos del footer que viene por defecto, eliminar los widgets si los tenemos asignados a esa zona y desactivar los créditos y los iconos de las redes sociales.
Se quedará una franja del color que elijamos en la pestaña "Pie" del personalizador del tema, desde mi punto de vista no queda mal gráficamente, y además nos indica el final de la página.
Pero si quieres deshacerte de todo de golpe, puedes pegar este código en la pestaña "CSS adicional":
1 2 3 | #main-footer { display: none; } |
Configurar una nueva sección estándar
No voy a detenerme en explicar cada módulo que utilizo o cómo lo configuro, cada uno tendrá sus preferencias y necesitará cosas diferentes. Pero si es importante que a la hora de guardarlo, lo hagamos en la "Biblioteca de Divi" y que lo convirtamos en una opción global.
Podemos crear una nueva sección en una página que tengamos creada o hacerlo desde una página nueva, ya que los cambio no los guardaremos en dichas páginas.
Para el ejemplo utilizaré una sección estándar donde añadiré una fila de 3 columnas (2 columnas de 1/4 y 1 columna de 1/2). Dentro añadiré un logo, unos datos de contacto, un lista con los enlaces de información más importantes y un formulario.
Además añadiré otra fila dentro de la misma sección con dos columnas iguales donde colocaré los créditos y los enlaces de las redes sociales.
Podemos trabajar desde el editor de WordPress activando el Constructor Divi, o desde el Constructor visual donde podremos ver en tiempo real los cambios que realizamos.
Cuando lo tengamos configurado lo guardamos en la biblioteca, pero nos aseguramos que esté activa la casilla para convertirlo en "Global". Con esta opción podremos realizar modificaciones en el footer cuando lo necesitemos y se cambiará automáticamente en toda la web.
Si lo guardamos desde la administración también hay que marcar la casilla de "Guardar como global". Este proceso cambiará el color de la sección y los módulos que contenga a un color verde, para indicarnos que tiene la propiedad de "Global".
Los elementos globales se modifican en conjunto. Un elemento global que esté en diferentes páginas, cambiará en todos los sitios aunque sólo hagamos la modificación en una de ellas.
Colocar la nueva sección del footer en la web
Añadir el footer en divi con módulos manualmente
Si estamos empezando, basta con añadir la nueva sección desde la biblioteca en todas las páginas que vamos creando, como la de inicio, contacto, quien soy, o la del blog. Aunque son menos visitadas y deberías tenerlas ocultas a los robots, también puedes añadir la nueva sección del footer a las páginas de aviso legal, cookies o condiciones de venta, si tienes.
Para añadir el footer en Divi con los módulos que hemos creado, solo hay que ir a la última sección de la página en la que estamos y pinchar en "Añadir desde biblioteca".
Añadir el footer en divi con módulos de forma automática
Lo primero de todo es crear un tema hijo o child theme, donde podamos editar el archivo "footer.php" y añadir una línea que inserte la sección en todas las páginas que tengamos. Tener un tema hijo es una práctica muy habitual que recomienda WordPress en sus archivos de soporte.
Este proceso es muy útil si tenemos una web con bastante tiempo y mucho contenido.
La forma más fácil de editar el archivo "footer.php" es a través del editor de la administración de WordPress, pero en ocasiones no tenemos acceso a esa pestaña porque la hemos ocultado por seguridad. En ese caso debemos descargar el archivo con algún cliente FTP o editarlo desde el servidor.
Una vez que conseguimos editar el archivo "footer.php" del tema hijo, añadimos el siguiente código por encima de la línea que contiene la etiqueta "main-footer", ya que si lo hemos ocultado con CSS y lo insertamos dentro de esa etiqueta no lo podremos ver.
Si os da un error a la hora de guardarlo tenéis que comprobar que las comillas están bien escritas. WordPress a veces nos vacila y cambia la forma como están escritas al exortar los textos.
1 2 3 | <?php echo do_shortcode('[et_pb_section global_module="IDENTIFICACIÓN"][/et_pb_section]'); ?> |
En el espacio donde pone "IDENTIFICACIÓN", debemos sustituirlo por el identificador de la sección que hemos guardado en la Biblioteca de Divi. Para averiguar cuál es es número identificativo, editamos la sección y nos fijamos en la url del navegador.
Utilizar el footer con módulos de DIVI en varios idiomas
La modificación del archivo "footer.php" anterior es válida para cualquier web en un sólo idioma, independientemente del lenguaje que usemos.
Pero para poder utilizarlo en un sitio que ofrece varios idiomas, creados con plugins específicos como "PolyLang" o "WPML", necesitamos colocar el código del idioma concreto en cada caso.
El proceso es muy sencillo. Primero tendremos que crear los diferentes footers en cada idioma y guardarlos como globales en la biblioteca de DIVI, tal como hemos realizado en el caso de la web con un sólo idioma.
Cada footer creado y guardado tendrá un número de identificación diferente, que asociaremos con cada idioma en el código que vamos a añadir en el archivo "footer.php" (siempre en un tema hijo).
El siguiente código es un ejemplo para utilizar en una web con dos idiomas, español e inglés, pero podemos duplicar el código las veces que necesitemos según el número de idiomas que vamos a ofrecer al usuario:
1 2 3 4 5 6 7 8 9 10 | <?php if(ICL_LANGUAGE_CODE=='es') { echo do_shortcode('[et_pb_section global_module="IDENTIFICADOR"][/et_pb_section]'); } ?> <?php if(ICL_LANGUAGE_CODE=='en') { echo do_shortcode('[et_pb_section global_module="IDENTIFICADOR"][/et_pb_section]'); } ?> |
Los datos a modificar, según las necesidades, es el código del idioma y el IDENTIFICADOR, que tendrán que coincidir con los diseños de los diferentes footers que hemos creado.
Y ya está, no tendremos que preocuparnos por insertar el footer cada vez, ya que aparecerá automáticamente en todas las secciones de nuestra web.
Si has llegado hasta aquí es porque te interesa como funciona el tema DIVI, si aun no lo tienes o dispones de una versión antigüa, puedes renovar tu suscripción a unirte a Elegant Themes desde estos enlaces:
20% de DESCUENTO - Para desarrolladores y diseñadores
Descargo de responsabilidad : Existe una relación publicitaria con Elegant Themes por la que ganaremos una pequeña comisión si adquiere el producto por medio de los enlaces de esta página. Gracias a ello podemos ofrecerle ofertas como estas, a usted no le supone ninguna carga adicional económica ni compromiso alguno y a mí me sirve para tomarme un café.
Cómo crear un footer en DIVI atractivo y funcional- Modificar en el menú Divi "Seleccionar página" en móviles
- Añadir más botones en los módulos del tema Divi
- Crea tu página web con Divi, el mejor constructor para WordPress
- Cómo adjuntar archivos a formulario de contacto de Elegant Themes
- Cómo configurar una anchura personalizada de columnas en DIVI
Genial , los que no sabemos y queremos por lo menos aprender algo sobre DIVI, vuestros tutoriales nos lo hacen un poco menos difícil,,un abrazo y gracias
Hola Juan , he seguido los pasos para crear el footer con módulos y de repente ha desaparecido el footer y las opciones para configurar el mismo dentro del personalizador de temas. Será problema de código?
Hola Diego,
No es problema de código. En cualquier página web sólo puede haber un footer en lo que se refiere a sección dento del código HTML. Por eso cuando utilizas los módulos para diseñar un footer las opciones del perosnalizado desaparecen porque no puede haber dos footers.
Si quieres recuperar el footer del personalizador tienes que eliminar el footer del crreador de páginas.
Muy buenas Juan.
Me gusta mucho el tutorial, por lo que veo hablas en todo momento de páginas, siguiendo otra guía que explica lo mismo me cree una sección que convertí en global, pero cuando creo una entrada, esta queda por encima de los comentarios en lugar de quedar debajo como si del footer se tratara.
¿Que solución hay para esto?
Muchas gracias
Hola Jose Enrique,
En las páginas, al no haber comentarios, el footer creado con los módulos de divi builder queda en su sitio, que es la parte más inferior, pero en las entradas está la cuestion de los comentarios.
Para que los módulos carguen debajo de los comentarios tienes que insertar el footer a través del código de forma automática, como indico en el artículo o el vídeo, ya que de la forma manual, siempre se cargará dentro del contenedor del artículo, que se coloca por encima del resto de componentes de WordPress, como son los comentarios
Hola. He creado un footer igual para todas las páginas de mi web. Pero he observado que en una en concreto cambia, y aparece linkado a un enlace que no es correcto. Lo modifico y publico pero los cambios no se hacen...dónde puede estar el problema?
Hola, muy bien explicado el tutorial el problema con el footer, como hago para conmutar entre idiomas uso el plugin polylang ya tengo mi footer con un shortcode instadado con una funtion php, como puedo remplazar este footer, me puedes ayudar, gracias
Hola David,
Para poder utilizar este método para varios idiomas necesitas crear primero la sección traducida y guardarla en la biblioteca Divi, como ha hecho con el idioma principal.
al ser una sección diferente tendrá un identificador diferente que será el que usemos para insertarlo en todas las páginas en otro idioma.
Para insertarlo necesitas cambiar el código PHP que colocaste en footer.php por este otro:
Si te fijas puedes añadir los idiomas que quieras replicando los códigos y cambiando el código del país y el IDENTIFICADOR de cada traducción.
Al estar e código en un comentario puede que algún signo o símbolo se modifique y de algún error, por lo que te recomiendo que compruebes las comillas y los signos de puntuación.
Intentaré actualizar el artículo en estos días para añadir esta modificación.
Hola Juan! Esto mismo se podría aplicar a Extra? Estoy intentándolo pero no hay manera... Muchas gracias!
Hola Juan!
Muchas gracias por este fantástico tutorial. He seguido todos tus pasos, pero la sección que he creado no se por qué se muestra con un margen blanco alrededor. Aunque he marcado la opción de "mostrar anchura completa", el footer no llega hasta los bordes horizontales de la pantalla, ni queda pegado abajo 🙁
Lo cierto es que me ha pasado ya con otras secciones que he creado, que aunque las defina como "ancho completo" siempre queda un margen blanco a los lados.
Estoy trabajando con Extra, y podrás ver el footer en la homepage.
Muchas gracias por tu ayuda!
Hola María,
Comprueba que tienes desmarcada la casilla "Activar diseño con recuadro". Se encuentra en el Personalizador del tema, en la pestaña "Ajustes generales > Ajustes de Diseño".
Para el espacio inferior tienes que comprobar en la sección y en la fila de divi builder que la separación y los márgenes inferiores están a cero.
Hola Juan! No había visto que me habías respondido, disculpa ^^'
He conseguido que el footer que he creado sea de ancho completo. Gracias!
Lo he guardado como elemento global en la biblioteca, pero a la hora de colocar la línea de código en el tema hijo de Extra no hay opción (no aparece el archivo footer.php).
Lo he intentado hacer sobre el archivo footer.php de Extra (tema padre) directamente, pero no se si este mismo código funciona, ni tampoco en qué linea ponerlo.
Muchas gracias de nuevo!!
Hola Juan, gran tutorial.Se me presenta un inconveniente en la página de thankyou.Cada vez que alguien finaliza su compra y le envía a esta página de agradecimiento,mi footer sale con el fondo blanco y algunos elementos desordenados del footer.No se que hacer,me pregunto si hay alguna solución.Mi idea era poder esconder o borrar el footer personalizado únicamente en esa página.Hay alguna forma de hacer esto? O poder arreglar esos errores? Gracias
Hola Bto,
Supongo que usas woocommerce para vender los productos, hay más plugins para convertir wordpress en una e-commerce, pero woocommerce es el más usado.
Para poder solucionar el problema habría que revisar un poco en el código, seguramente haya alguna etiqueta en conflicto que no permite cargar correctamente los estilos.
La solución de ocultarlo me parece correcta, ya que la página de agradecimiento sólo es accesible si la gente termina de comprar, pero también se ocultaría en la de finalizar compra, yaque las gracias se cargan sobre esa misma url.
Para esto último debes asignar un nombre a la sección que has creado para del footer, en la casilla "Clase CSS:" dentro de la pestaña "Avanzado".
Luego en el personalizador del tema, en la pestaña CSS adicional añades la función de ocultar el footer sobre el identificador de la página + el identificador que has puesto en la sección, añadiendo un display: none
El código sería este:
.woocommerce-order-received .nombredelaseccion {
dispaly: none;
}