Cómo crear un footer en DIVI atractivo y funcional

por | 4 Comentarios

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.

Suscríbete:

 

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.

Personalizador 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.

[su_row]
[su_column size=»1/2″]
Diseño footer en divi
[/su_column]
[su_column size=»1/2″]
Formato de los widgets del footer en divi
[/su_column]
[/su_row]

 

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.

[su_row]
[su_column size=»1/2″]
Elementos del footer en Divi
[/su_column]
[su_column size=»1/2″]
Créditos del footer en Divi
[/su_column]
[/su_row]

 

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.

Menú inferiro del footer en divi

 

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«.

esquema footer en divi

 

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.

Widgets desde la administración de WordPress

Widgets desde la personalización de WordPress

 

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.

Imagen para el footer en divi

 

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

Código CSS para imagen en footer en divi

 

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:

Footer con el tema Divi

 

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:

Footer en el tema Divi

 

 

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.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

4 Comentarios

  1. Miguel

    Buenísimo post, me ha servido mucho.
    Muchas gracias por tu aporte

    Responder
  2. Tatia

    Muy bueno!

    Sabes como crear el efecto de footer encubierto que aparece solo al hacer scroll en un pie de pag. creado en una sección? (tipo paraje)

    Gracias!

    Responder
    • Juan

      Hola tatia,

      ¿Puedes indicarme alguna web donde pueda ver el efecto que indicas?

      Responder
  3. CubeNode

    ¡Genial! Este post me ha resulto unas cuantas dudas, había ciertas partes de todo este asunto que no me estaban quedando nada claras 🙂 Algunas cosas del mundo WordPress se me hacen cuesta arriba y no siempre es fácil dar con un post que vaya al grano y que aporte una solución que realmente funcione, ¿verdad? Pero ahora creo que ya lo he entendido todo, ¡te explicas de maravilla!
    Muchas gracias por tu ayuda 😀

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido