El footer es la parte de tu web que menos cariño recibe y la que más se usa sin que nadie se dé cuenta: ahà van los enlaces legales, el contacto, la newsletter y, muchas veces, el clic que le falta al usuario para confiar en ti. Un footer bien pensado transmite profesionalidad; uno improvisado deja la sensación de que la web se acabó a medias.
Te he seleccionado 20 ejemplos reales de footer, de marcas grandes y pequeñas, agrupados por estilo: minimalistas, mega footers, centrados en captación, de e-commerce y con personalidad de marca. Al final tienes también una checklist de lo que no deberÃa faltar en el tuyo.
Footers minimalistas
Cuando la marca ya está clara en el resto de la web, el footer puede reducirse a lo esencial. Menos ruido visual, más foco en la acción que quieres que haga el usuario.
- Kylie Cosmetics (kyliecosmetics.com): elimina los bordes tradicionales entre secciones y mantiene la misma paleta de color de arriba abajo, asà el footer no rompe la experiencia de compra.
- Altrock (altrocksurfaces.com): ultra minimalista, solo copyright y dos enlaces. Funciona porque el resto de la web ya resuelve la navegación.
- Devon Stank (devonstank.com): email y teléfono clicables a la izquierda, logo centrado, redes sociales a la derecha. Tres columnas, cero relleno.
- Mighty (mighty.com): fondo negro, enlaces organizados en una sola lÃnea visual y acceso directo para usuarios ya registrados.
Mi consejo si vas a copiar este enfoque: el minimalismo solo funciona si tu menú principal ya cubre toda la navegación. Si el footer es la única forma de llegar a ciertas páginas (aviso legal, polÃtica de cookies), no puedes permitirte reducirlo tanto.
Mega footers con navegación completa
En el extremo opuesto están los footers que asumen el papel de mapa del sitio. Tiene sentido en webs grandes, con decenas de productos o secciones, donde el menú superior no puede (ni debe) mostrarlo todo.
- Stripe (stripe.com): organiza más de 50 enlaces en columnas claras —Productos, Desarrolladores, Recursos, Empresa— sin que el conjunto resulte agobiante. Es el ejemplo que enseño cuando alguien me pregunta cómo ordenar un catálogo grande.
- HubSpot (hubspot.com): tres secciones sobre fondo oscuro que separan producto, empresa y recursos, con suficiente contraste para no cansar la vista.
- Traackr (traackr.com): además de la navegación estándar, incluye un bloque «Latest from the blog» y selector de idioma, útil si tu web es multiidioma.
Footers pensados para captar suscriptores
El footer es el último punto de contacto antes de que el usuario se vaya. Estas webs lo aprovechan para pedir el email en vez de despedirse sin más.
- Eating Bird Food (eatingbirdfood.com): formulario de newsletter en primer plano, con la navegación y las redes sociales relegadas a un segundo nivel visual.
- Coddi (coddi.co): un bloque grande en blanco dedicado solo a la suscripción, con el resto del footer (copyright, legales) en una franja negra inferior mucho más discreta.
- Oatly (oatly.com): widget de newsletter simple integrado entre las columnas de navegación, sin necesitar una sección aparte.
- Shanley Cox (shanleycox.com): combina buscador, formulario de newsletter y galerÃa de Instagram en dos columnas —tres formas de retener al visitante en un solo bloque.
Tip: si vas a pedir el email en el footer, pide solo eso. Un formulario con cinco campos ahà abajo no lo rellena nadie.
Footers de tiendas online
En e-commerce el footer tiene un trabajo extra: generar confianza para pagar. Selectores de región, métodos de pago visibles y polÃticas de devolución accesibles marcan la diferencia.
- Gymshark (gymshark.com): tres columnas con lÃnea separadora, miniaturas de producto interactivas, logos de métodos de pago y selector de región/moneda a la vista.
- Blue Lagoon (bluelagoon.com): fondo multicolor por bloques, botón «Contact Us» destacado y selectores de idioma y moneda para su público internacional.
- P&Co (pand.co): el formulario de suscripción incluye un selector de género para segmentar la newsletter desde el primer contacto, junto a los enlaces de descarga de su app.
Footers con personalidad de marca
Estos son mis favoritos de la lista: demuestran que el footer también puede ser el sitio donde la marca se permite jugar.
- Mailchimp (mailchimp.com): mantiene la navegación completa sin perder la personalidad de marca —colores propios y su mascota ilustrada asoman hasta el último pÃxel de la página.
- Tattly (tattly.com): separador ondulado sobre fondo gris, un enlace tipo «Gift of the Week!» que invita a explorar y formulario de suscripción integrado con humor.
- Feastables (feastables.com): fondo negro, logo enorme y número de teléfono clicable —footer pensado para móvil antes que para escritorio.
- Oishii (oishii.com): fondo rojo con feed de Instagram completo integrado en cuatro columnas junto al formulario de suscripción.
Si quieres seguir mirando ejemplos más allá de esta selección, dos galerÃas que reviso a menudo son Footer.design, especializada solo en pies de página, y la categorÃa de footers de Awwwards.
Qué debe incluir un buen footer
Antes de ponerte a diseñar, repasa esta checklist. No todos los footers necesitan todo, pero casi ningún footer profesional deberÃa faltar en estos puntos:
- Enlaces legales: aviso legal, polÃtica de privacidad y cookies. En España son obligatorios, no opcionales.
- Datos de contacto: email, teléfono o formulario, aunque ya existan en otra página.
- Navegación secundaria: secciones que no caben en el menú principal pero que alguien puede necesitar.
- Redes sociales: iconos con enlace directo, no solo el nombre de usuario.
- Copyright y año: automatÃzalo para que no se quede desactualizado.
- Newsletter (opcional): solo si de verdad vas a enviarla con regularidad.
Cómo diseñar tu footer paso a paso
- Haz una lista de todo lo que debe ir en el footer por obligación legal o de negocio (paso anterior).
- Decide si necesitas captación (newsletter) o solo navegación. Mezclar ambas sin jerarquÃa visual confunde.
- Elige entre 2 y 4 columnas según la cantidad de enlaces; más de 4 empieza a sentirse como un mega footer aunque no lo sea.
- Aplica un color de fondo distinto al del resto de la web para marcar visualmente el final de la página.
- Prueba el footer en móvil primero: en pantallas pequeñas las columnas se apilan y el orden importa más de lo que parece.
Tip: si usas WordPress, la mayorÃa de temas modernos ya traen bloques de footer configurables desde el editor de sitio. Astra es una opción que uso a menudo para montar footers de varias columnas sin tocar código.
Más recursos relacionados
- Diseños de páginas web: ejemplos y galerÃas, si buscas inspiración para la web completa, no solo el footer.
- Menús para páginas web, el otro elemento fijo de tu web que merece la misma atención.
Preguntas frecuentes
¿Qué debe llevar el footer de una web?
Como mÃnimo, enlaces legales (aviso legal, privacidad, cookies), datos de contacto y copyright con el año actual. A partir de ahÃ, navegación secundaria, redes sociales y newsletter según lo que necesite tu negocio.
¿Cómo diseño un footer para ecommerce?
Prioriza lo que genera confianza para pagar: métodos de pago visibles, polÃtica de devoluciones a un clic y selector de región/moneda si vendes fuera de tu paÃs, como hacen Gymshark o Blue Lagoon.
¿Cuántas columnas debe tener un footer?
Entre 2 y 4 es lo habitual. Si necesitas más, probablemente estés ante un mega footer tipo Stripe o HubSpot, y conviene agrupar los enlaces por categorÃas claras para no saturar.
¿El footer afecta al SEO?
SÃ, de forma indirecta: es donde suele vivir buena parte del enlazado interno hacia páginas legales y secciones secundarias. Evita saturarlo de enlaces sin criterio; Google puede interpretarlo como spam de enlaces.
¿Puedo poner un formulario de newsletter en el footer?
SÃ, y funciona bien si pides solo el email. Ejemplos como Coddi u Oatly lo integran sin que estorbe al resto de la navegación.
Te he dejado 20 ejemplos reales para que copies lo que te sirva y descartes lo que no encaja con tu marca. Si te han gustado, compártelos con quien esté a punto de rediseñar su web.
