Cómo crear un footer en DIVI atractivo y funcional

Son pocos los que dedican tiempo a personalizar y crear un footer o pie de página en sus sitios web. Y sin embargo es una de las zonas claves que recoge parte de la información más importante de una página web. La mayoría de los temas de WordPress disponen de unas zonas preparadas para configurar un footer a modo de widgets, y Elegant Themes no iba a ser menos a la hora de poder crear un footer en Divi, o en muchas de sus plantillas premium, para personalizarlo a nuestro gusto.

Lo mejor para el final, la importancia del footer en una web

Cuando empezamos a crear un sitio, lo hacemos con la intención de tener una web lo más atractiva posible para el usuario que nos visita, estructuramos un menú por el que navegar, utilizamos imágenes impactantes, varias secciones en la barra lateral o contenido a pantalla completa. Pero cuando llegamos al footer nos quedamos sin ideas o lo ignoramos directamente.

Todo el mundo que esté interesado en nuestro contenido va a llegar al final de los artículos, y tanto el footer en Divi como en cualquier otro tema, es un sitio excelente para indicar al visitante que podemos mostrarle más, decirle "mira, no te vayas, tengo más que ofrecerte", o invitarle a realizar alguna acción como rellenar un formulario o descargarse algún contenido.

El footer debe ser un sitio estratégico en nuestra web, un lugar en el que ofrecer información que consideremos importante o interesante, que aparecerá en todas las páginas y artículos, ya que es un elemento constante en la estructura de una web.

Además, si lo utilizamos con cabeza, puede ayudarnos a mejorar el SEO y posicionarnos un poquito mejor. Entramos en un tema más técnico en el que habría que estudiar cada caso en particular, pero si utilizamos el footer para incluir enlaces estratégicos a productos más vendidos, en el caso de un e-commerce, o crear una red interna de enlaces para transferir niveles de page-rank, estaremos dando un sentido más funcional a esta parte de la web.

La ventaja del footer en Divi (también podemos decirlo del footer en Extra o cualquier tema que utilice el plugin Divi Builder), es que podemos elegir entre los widgets, para mostrar el contenido, o configurar una sección personalizada que podemos replicar en todas las páginas con el propio constructor.

Qué podemos incluir en un footer en Divi

Habría que analizar el tipo de web que tenemos entre manos, no es igual un blog personal que una página de empresa o una tienda online, pero hay elementos comunes que podemos utilizar para todas ellas.

• Información personal o de contacto: Si te dedicas a ofrecer servicios, el footer es el mejor sitio para añadir una dirección, un teléfono o un correo electrónico, aunque ya tengas una página de contacto específica para eso.
• Pequeña biografía: Puedes decir quién eres, a qué te dedicas o cuáles son tus puntos fuertes. Se podría considerar una firma de a quién pertenece el blog y hacerlo más humano y cercano.
• Créditos: Puede indicarnos ha quien pertenece la web, quien la ha diseñado, el año de creación o si se actualiza periódicamente con un copyrigth.
• Menú o enlaces de navegación: Es un buen lugar para indicar las secciones más importantes de tu web, los últimos artículos publicados, las categorías que trabajas... También puedes añadir enlaces más secundarios que los visitantes suelen obviar y así darles más presencia y fuerza.
• Acceso a textos legales: Muy descuidados por la gran mayoría pero necesarios por obligación, más aún desde la entrada en vigor de la ley de protección de daos.
• Formularios: Una suscripción a una Newsletter, un buscador o un sencillo formulario de contacto pueden ser una gran idea para colocar en el footer.
• Redes sociales: Existen plugins que facilitan la inserción de las últimas publicaciones de muchas redes sociales, pero también podemos poner un simple link que les dirija a nuestro facebook, twitter o instagram, por mencionar algunos.
• Mapa de situación: Menos habitual pero muy práctico dependiendo del tipo de web que tengamos.

Con esto creo que hay suficiente para llenar un footer en Divi, empecemos con la parte práctica.

Crear un footer en Divi con widgets del "Área del pie de página"

Este sistema nos limita a utilizar únicamente los widgets que hay disponibles en WordPress, dejando a un lado los módulos propios del constructor Divi. De esta forma tendremos que instalar un plugin adicional si queremos insertar un formulario en el footer.

Desde el personalizador podemos acceder a la pestaña del "Pie" para descubrir cómo podemos organizar el footer en Divi.

Esta sección no añade todo el contenido que necesitamos, sólo crea la estructura o el diseño que queremos aplicar, los colores a utilizar o algunos elementos a incorporar, como los iconos de las redes sociales o un menú adicional.

Diseño y Widgets

El footer en Divi está establecido para incorporar hasta cuatro columnas, que podemos combinar en cantidad y tamaños. Dependiendo del tipo de contenido que vayamos a incorporar, podremos elegir el tipo de columnas que necesitemos.

También podemos elegir el color de fondo a mostrar. Aunque más abajo os enseñaré como colocar una imagen para hacerlo más atractivo.

En el apartado de los widgets configuramos el formato del texto, el tamaño de las fuentes y los colores de las tipografías y enlaces que afectarán sólo al footer. No veremos los cambios mientras no añadamos algún widget que se muestre.

Barra inferior y Elementos del pie

Aunque es interesante crear un tema hijo para realizar cambios sustanciales en la web, y en muchos temas lo aconsejan para modificar los créditos de la barra inferior del footer, Divi nos facilita la tarea ofreciendo una casilla donde colocar el texto que queramos, y que sustituirá al que viene por defecto. Se puede utilizar código HTML para insertar links si los necesitamos.

Podemos ocultarlo, si queremos que no aparezca, o si vamos a utilizar otro sistema para añadir un footer, como utilizar una sección del constructor Divi.

Al igual que en los widgets, se pueden cambiar diversos aspectos de las tipografías y elegir un color de fondo diferente al color general del footer.

En la pestaña "Elementos del pie" podemos activar o desactivar a presencia de los iconos de las redes sociales. Estos aparecerán siempre que los hayamos configurado con nuestras cuentas en la configuración general del tema Divi.

Menú inferior

Este menú sólo aparece si lo hemos configurado en el apartado de los menús y se coloca en una barra adicional sobre la que ya existe de los créditos y redes sociales. En esta pestaña podemos modificar el aspecto que tendrán los enlaces, el tamaño y el color del fondo.

Añadir widgets a cada columna del footer

Vistas las opciones que tenemos, ya podemos hacernos un esquema de lo que queremos añadir. Teniendo muy presente que sólo podemos colocar widgets que tengamos activos en WordPress y que no podemos usar los módulos de Divi.

Si queremos insertar un formulario, hay que instalar un plugin adicional como Contact Form 7 o Ninja Forms, entre otros muchos que permiten la inserción de un formulario a través de "shortcodes".

Los widgets los podemos añadir desde la zona de administración o desde el personalizador. Accedemos a la pestaña de los widgets y vamos añadiendo los que necesitamos para componer el footer en Divi.

En el ejemplo anterior tengo que añadir un widget de menú (que tendría que crear para enlazar con las páginas de información, de textos legales, cookies y demás), un widget de categorías para la segunda columna y en la tercera uno de imagen y otro de texto, o sólo uno de texto en el que incluiría la imagen.

Los créditos los añadimos en el apartado de la "Barra inferior" que os mostré antes, y las redes sociales las configuramos dentro del apartado de opciones generales de Divi.

Añadir una imagen de fondo al footer en Divi

Al no haber una opción para colocar una imagen de fondo, que haría más interesante el footer, tenemos que añadirla a través de código CSS, pero no os preocupéis que es muy sencillo el proceso.

Debemos elegir una imagen de un tamaño proporcional al que tendrá el footer, para evitar una distorsión exagerada de la imagen. Recomiendo que sea de un motivo muy general, sin primeros planos importantes y que, dependiendo del contenido del footer, sea muy oscura para resaltar textos claros o clara para que se vean los textos oscuros.

Paso 1: Pegar el siguiente código en la pestaña de "CSS adicional" del personalizador de WordPress.

Paso 2: Subir la imagen a la pestaña medios, la seleccionamos para ver los detalles y copiamos la url del servidor.

Paso3: Sustituimos el contenido entre paréntesis del código CSS por la url de la imagen.

Debido a la gran variedad de resultados que podemos obtener y a la combinación de los diferentes widgets, no voy a centrarme en configurar un footer específico, pero el resultado que conseguiremos podría ser algo a parecido al siguiente:

Si añadimos un plugin como "Contact Form 7", podríamos añadir un formulario de contacto en el pie que estuviera siempre accesible en todo el sitio:

Crear un footer en Divi con una sección de "Divi Builder"

Utilizar este método puede tener sus pros y sus contras. Por un lado vamos a poder utilizar los módulos del constructor, incluido el formulario, pero tendremos que añadir esta sección en cada página o artículo que vayamos creando para que se pueda visualizar en toda la web.

La web debe estar diseñada en su totalidad con el constructor Divi, incluida la página donde se muestran todas las entradas que escribimos del blog o web.

En este artículo explico este proceso, el cual no resultaría difícil si manejamos con soltura el "Constructor Divi".

No dudéis en consultarme cualquier duda que tengáis en los comentarios.