Consejos para crear un footer efectivo en tu web [+ ejemplos]

Si hace unos días hablaba de cómo crear un header efectivo en una web, en este post me toca hablar del footer, una parte a veces olvidada en muchas páginas, pero que puede ser aprovechada al máximo y utilizada de forma muy efectiva.

Al igual que sucede con el header, el footer o pie de página es un espacio genérico que suele tener el mismo diseño en todas las páginas, entradas y productos si hablamos de un ecommerce.

De modo que, si estás en pleno proceso de diseño de tu web, te recomiendo pararte a planificar cada uno de los elementos que quieres incluir en el footer antes incluso de empezar con su diseño.

De esta forma, establecerás qué quieres mostrar en cada parte de tu web en función de tus objetivos y estrategia (sí, en el footer también puedes establecer objetivos).

¿Qué elementos incluir en la pie de página (o footer) de tu web?

Como te comentaba en la introducción, mi consejo es que, antes de crear el pie de página de tu web, hagas un listado con los elementos que quieres incluir o que necesitas en función del tipo de página o negocio que tengas.

Ya sabes que cada proyecto en un mundo y es difícil hablar de forma genérica, pero aquí te dejo una serie de elementos comunes susceptibles de ser colocados en el footer, algunos de ellos te diría que obligatorios.

#1 Textos legales

Los textos legales son uno de los elementos obligatorios en el footer de toda web y no hay lugar para otras interpretaciones (aunque tengas un simple blog en el que publicas tus viajes o tus recetas).

Como te digo, la privacidad de los usuarios que visitan tu web es un tema muy serio y además es obligatoria desde que entrara en vigor el nuevo RGPD (Reglamento General de Protección de Datos) hace más de un año.

Si quieres saber qué pasos debes seguir para tener una web legal y 100% RGPD, te recomiendo leer este post de Marina Brocca, experta en legalidad online.

Cómo conseguir una web legal y 100% RGPD sin morir en el intento

A modo de resumen, los textos legales obligatorios son dos: la política de privacidad y el aviso legal (además de las cookies, aunque de tema hablaré en el siguiente epífrafe).

También hay otros complementarios, como son el límite de responsabilidad, las condiciones de uso, la política de transparencia o de calidad.

Como ejemplo, te dejo la web de Eva Teruel -copywritter-, en cuyo footer incluimos los textos legales, además de otros elementos como su logotipo, los créditos y las redes sociales.

#2 Barra de cookies

Como te he comentado en el primer punto, la política de cookies es uno de los textos legales obligatorios en todo sitio web, pero he querido dedicarle un epígrafe propio, ya que tienes ciertas particularidades.

La política de cookies debe aparecer en forma de barra o mensaje, que aunque se puede mostrar en otras partes de la web e incluso como pop-up, siempre recomiendo colocar en el footer, para que el usuario las acepte o rechace (pues es un lugar discreto).

Siempre debe aparece un mensajes del tipo "este sitio utiliza cookies propias y de terceros para mejorar tu experiencia de navegación" acompañado de los botones aceptar, rechazar y un enlace donde leer la política de cookies completa.

Te dejo un par de ejemplos para que veas dónde colocar la barra de cookies.

#3 Redes sociales

Las redes sociales son otro de los elementos que recomiendo colocar en el footer (y no en el header), pues permiten una vía de contacto directa con la marca y permiten convertir a las visitas de tu web en seguidores.

En este sentido, tienes varias opciones, desde añadir los botones de cada plataforma, hasta embeberlas como widgets para mostrar tus últimas publicaciones.

Como ejemplo, puedes ver la web de Antonio Galealba, donde elegimos un mix entre ambas opciones: widget con sus últimos posts en Instagram (al ser fotógrafo, es la red más importante para él) y botones para el resto de redes (Facebook, Twitter y Pinterest).

#4 Copyright / créditos

Otro tipo de información que recomiendo colocar en el footer de tu web es la referente al copyright, los créditos del diseñador que ha realizado su diseño y de los autores del material gráfico (fotos, ilustraciones o vídeos) e incluso una mención las plataformas o administraciones públicas que colaboran con tu proyecto, si es el caso.

Por supuesto, esta información no es obligatoria, pero ayuda a visibilizar a los profesionales que han participado en el desarrollo de tu proyecto y que lo han hecho posible.

En mi caso, suelo añadir un enlace hacia mi página en las webs que diseño y a cambio incluyo ese trabajo en mi portfolio con un enlace de regalo para el cliente.

Aquí te dejo un ejemplo, la web de Sara Caro, en cuyo footer inscrustamos el logotipo de dos administraciones que colaboran en su trabajo.

#5 Información de contacto

Los datos de contacto son una información muy útil para tus visitas de cara a contactar contigo, especialmente si eres un negocio o empresa.

En este sentido, puedes incluir los datos que consideres necesarios, desde tu teléfono o email, hasta tu dirección si tienes un negocio físico, donde incluso puedes incrustar un mapa de Google Maps.

Te dejo un par de ejemplos de footer donde he incluido diferentes datos de contacto:

En la web de Charo Guijarro optamos por un footer sencillo, donde únicamente incluimos las redes sociales y el email.

En el caso de Tarrago, necesitábamos un footer en el que colocar mucha más información y optamos por una fila principal con tres columnas y una inferior con los datos de contacto (dirección, teléfono y correo).

#6 Enlaces de navegación

Otra opción interesante es incluir enlaces de navegación en el footer de tu web (de hecho, como ejemplo puedes verlo en esta web).

En mi caso, he optado por un doble footer, donde la fila principal (azul) está dividida en cuatro columnas y tres de ellas incluyen enlaces hacia otras partes de mi web.

De esta forma, antes de que el usuario abandone mi página, le redirijo a otras partes importantes de mi web, como son mis servicios o el cuestionario para solicitarme un presupuesto. Además, he incluido los textos legales y una serie de recursos con los que ayudo a mi público.

#7 Menú

Colocar un menú en el footer también suele ser habitual y está relacionado con el punto anterior: dirigir al usuario a otras partes de la web antes de que se marche.

Si optas por colocar un menú en el footer de tu web, tienes dos opciones:

1. Menú secundario o complementario, es decir, con pestañas diferentes al menú principal de la web.
2. El mismo menú que en el header (el principal), aunque suelo desaconsejarlo, a no ser que se trate de una web muy extensa (con mucho scroll).

Te dejo un ejemplo de ambas opciones.

En la web de Nairamkitty añadimos al footer un menú complementario.

En la página de Talking Spanish Online utilizamos tanto en el header como en el footer el mismo menú.

#8 CTA (llamada a la acción)

Incluir una CTA o llamada a la acción en el footer es otra forma interesante de llevar a tus visitas hacia una parte de tu web donde realizar una acción concreta: un formulario, una landing, un producto, una página de servicio.

Te dejo como ejemplo la web de Periodista Freelance, donde incluimos una CTA que redirige al usuario a un formulario en el que solicitar un presupuesto.

#9 Formulario de suscripción / newsletter

Si la estrategia de tu web está enfocada a la captación de suscriptores a través de email marketing, el footer es uno de los lugares idóneos para inscrustar tus formularios.

Así lo hicimos en la web de Tramando Viajes, donde incluimos una guía gratuita a modo lead magnet, cuyo objetivo es que el usuario se suscriba.

En relación a esto, puedes darle al formulario el diseño que necesites (ancho completo, una o varios columnas, etc).

#10 Categorías / etiquetas

Si tienes un blog o también un ecommerce, una forma de hacer más accesibles tus contenidos y productos es añadir un nube de categorías o etiquetas en el footer de tu web.

Aquí tienes un ejemplo en mi blog de fotografía:

#11 Entradas / productos

Muy relacionado con el punto anterior, también tienes la opción de añadir uno o varios widgets para mostrar tus entradas (blog) o productos (tienda).

En ese sentido, puedes mostrar diferentes contenidos:

1. Entradas o productos destacados.
2. Los más populares.
3. Las últimas novedades.

#12 Publicidad / banners

La publicidad es una forma de monetizar un sitio web que está muy extendida en la actualidad. Por ello, es habitual encontrar banners con anuncios en el footer de los sitios web.

#13 Sellos de confianza

En webs de sectores como el tecnológico, sanitario o industrial es habitual encontrar sellos de confianza que avalan la actividad y profesionalidad de dicha empresa.

También es muy habitual incluir alguna referencia al pago seguro cuando se trata de un ecommerce. Es muy importante mostrar confianza de cara al usuario cuando hay transacciones económicas en el sitio web.

Te dejo un par de ejemplos para que veas cómo incluir este tipo de sellos y logos en el footer si tu web lo necesita.

En la web de Farmacia Hospitalaria Digital, que como su propio nombre indica se dedica sector sanitario, incluimos una serie de sellos de organismos y asociaciones relacionadas con la salud.

En el caso de Mi Mocasín, tienda online de zapatos, incluimos los logotipos de los métodos de pago habituales para generar confianza en el cliente.

#14 Sitemap

Por último, otro elemento que es susceptible de aparecer en el footer de una web es el sitemap, que se trata de los archivos que proporcionan información a los buscadores (Google básicamente) sobre las URLs, contenidos y otros archivos de tu web.

De esta forma, los sitemaps informan al buscador sobre cuáles son los archivos de una web que son relevantes para su autor.

Algunas webs suelen incluirlo en sus pies de página por dos motivos:

1. SEO.
2. Usabilidad.

Como ejemplo, te dejo la web de Pedidas de mano, en cuyo footer incluimos el sitemap.

Cómo crear un footer personalizado en WordPress

Ahora que ya conoces cuáles son los elementos susceptible de ser incluidos en el footer de tu web, te cuento cómo crear tu pie de página personalizado, para lo que tienes varias opciones.

Pero antes te quiero dar un par de recomendaciones generales para diseñar el footer de tu sitio:

1. Utiliza un color diferente al fondo del resto de la web para que destaque. Y si se trata de un footer doble (como el de mi web), utiliza dos colores distintos, siempre siguiendo tu paleta.
2. Si quieres reforzar tu branding de marca, una buena idea añadir tu logotipo en la parte inferior de tu sitio.

Ahora sí, te cuento qué opciones tienes para crear el footer de tu web:

1. Opciones de tu plantilla: como existen infinidad de plantillas para WordPress y cada una es un mundo, mi consejo es que leas la documentación de tu tema, donde encontrarás todas las opciones que tiene disponibles para crear el header de tu web: redes sociales, botones, banners, etiquetas, menús, etc.
2. Widgets de WordPress: otra forma de diseñar un pie de página para tu web es usar los widgets que tienes disponibles en WordPress. Prácticamente todas las plantillas permiten añadirlos en el footer.
3. Si utilizas Divi como tema en tu web, puedes crear un pie de página completamente personalizado en tu web con el nuevo generador de temas que ha incluido Divi 4.0. En post post te cuento todas las opciones y funcionalidades de Divi 4.

Espero que todos estos consejos, sugerencias y ejemplos te sirvan de inspiración para crear el footer de tu web, estructurar sus elementos y cumplir los objetivos que te hayas marcado en tu sitio ?

Portada: freepik