¿Profesional de WordPress?  Suscríbete aquí para acceder a todos los proyectos por sólo 10€ / mes   ⚠️¡Corre antes de que suba el precio en 2020!

Publica tu proyecto y compara presupuestos de profesionales sin compromiso

Contacta hoy mismo con profesionales y especialistas en WordPress de tu zona listos para trabajar en tu proyecto.

  • + Totalmente gratis
  • + Sin comisiones ni recargos
  • + Sin necesidad de registrarte
  • + Sólo profesionales destacados
  • + Ahorra tiempo buscando
  • + Publicación en sólo 4 pasos

¿Profesional de WordPress? Suscríbete y gana dinero todos los días creando desde pequeños encargos a grandes proyectos.


Diseño de Footer (2020): Ejemplos de inspiración, consejos y mejores prácticas al crear el pie de página de tu página web

Última actualziación en abril 2020
  • 100% Gratis

    No cobramos ningún tipo de comisión por proyecto. Contrata sólo si quieres.
  • Ahorra tiempo

    No pierdas tiempo buscando en Google. Los profesionales te encontrarán a ti.
  • Ahorra dinero

    Compara varios presupuestos para la mejor relación calidad / precio.
  • Profesionales destacados

    Escoge entre decenas de profesionales el que mejor se adapte a tus necesidades.

  • Publicar proyecto
    (GRATIS)

    Sin compromiso de contratación ni recargos de ningún tipo
PresupuestoWPDiseñador web WordPressArquitectura webDiseño de Footer (2020): Ejemplos de inspiración, consejos y mejores prácticas al crear el pie de página de tu página web

A menudo se pasa por alto que el <strong>diseño del footer o pie de página</strong> de una página web es todavía una parte clave de cualquier proyecto online.

Es una sección importante para los visitantes del sitio web que quieren obtener más información sobre su empresa.

A la hora de diseñar el footer de su sitio web, se enfrenta al reto de definir los elementos que se incluirán en él, teniendo en cuenta que un pie de página perfectamente optimizado facilita la navegación a la vez que le ayuda a alcanzar sus objetivos comerciales.

Puede que la página de un pie de página no tenga el diseño más impresionante o contenga el contenido más emocionante, pero a menudo es el lugar donde sus usuarios van a encontrar la información que necesitan.

Por lo tanto, es un elemento que no debe pasar por alto al planificar su diseño web.

¿Quiere saber qué esperan los visitantes cuando se desplazan hasta el fondo de su sitio? Siga el artículo – hemos reunido las mejores prácticas de diseño de pies de página web y ejemplos de grandes pies de página web.

¿Por qué es importante el diseño del footer en una web?

1. Enfatizan su contenido

diseño de footer para página web con ejemplos de inspiración

Haciendo visible el footer atraerá a un mayor número de visitantes. Apenas se puede imaginar el tiempo que los lectores pueden desplazarse por su página – ¡cerca del infinito! Recuerde: su pie de página nunca está demasiado lejos, por lo que aparentemente encontrará su público.

2. Te ayudan a ganar pistas

diseño de footer para página web con ejemplos de inspiración

Haga saber a sus visitantes que el final de una página no es el final de un sitio web. Puede ser un momento para dejar su sitio web pero no su empresa. Elija lo que más le convenga: el formulario de contacto, el correo electrónico o la dirección en el footer ayudarán a sus usuarios a dar el siguiente paso.

3. Proporcionan a sus usuarios información útil

diseño de footer para página web con ejemplos de inspiración

¿Tiene más información de la que se puede poner adecuadamente en una sola página?

¡Colócalo en tu pie de página! Se trata de cualquier enlace a recursos externos, sus socios, patrocinadores.

Poner alguna información legal en su sitio web también puede ser razonable, pero los términos de servicio o el aviso legal siempre son mejores en algún lugar debajo.

4. Guían a sus lectores

diseño de footer para página web con ejemplos de inspiración

Si los visitantes de su sitio web se encuentran demasiado lejos del encabezado – es una señal inequívoca de que todavía están buscando algo que vinieron a buscar. Navegue por ellos a través de su footer a las principales secciones de su sitio web.

5. Llaman la atención de los visitantes

diseño de footer para página web con ejemplos de inspiración

Si la información básica de su sitio web supone una información escasa, puede llamar la atención de forma definitiva haciendo que el diseño del pie de página de su sitio web sea creativo o incluso entretenido.

¿Qué incluir en el pie de página o footer de tu página web?

Mire el pie de página o footer de su sitio como una oportunidad.

Por lo tanto, diseñe de manera que pueda ayudar a sus visitantes a navegar por sus páginas rápidamente.

También debe cumplir con los objetivos de su empresa.

Su papel debe ser similar a todas las partes de su sitio.

Con eso en mente, aquí están las cosas que pueden mejorar su pie para aumentar las conversiones y proporcionar una mejor UX.º

Derechos de autor

La información sobre los derechos de autor es lo que cualquier footer necesita, sin preguntas.

Es el elemento más fácil de incluir para proteger su sitio y su contenido del plagio.

Y con un poco de codificación, el año se actualizará automáticamente.

diseño de footer para página web con ejemplos de inspiración

Mapa del sitio

Contiene la lista de las páginas de su sitio.

El footer suele contener la versión HTML de su mapa del sitio.

Y aunque los usuarios rara vez lo utilizan, ayudará a los motores de búsqueda como Google a localizar e indexar sus páginas o URLs fácilmente como el mapa de sitio XML.

diseño de footer para página web con ejemplos de inspiración

Política de privacidad

La página de política de privacidad es otro componente común en casi todos los diseños de pie de página.

Típicamente, detalla la política de su sitio web acerca de la información como lo que se recopila, cómo se almacena y cómo puede ser utilizada.

Algunos sitios lo incluyen porque la ley requiere una página de política de privacidad.

Por otro lado, algunos diseñadores web lo consideran para las inscripciones de correo electrónico y los envíos de formularios, así como para el análisis de seguimiento y el remarketing.

diseño de footer para página web con ejemplos de inspiración

Condiciones de uso

Los Términos de Uso son un poco diferentes a la página de política de privacidad.

Es similar a un descargo de responsabilidad que explica lo que sus visitantes están aceptando cuando visitan su sitio web.

diseño de footer para página web con ejemplos de inspiración

Información de contacto

Los detalles de contacto en el footer normalmente incluyen una forma de que sus visitantes se pongan en contacto con usted, como una dirección de correo electrónico y números de teléfono.

Además, también puede contener la ubicación o dirección de su negocio y un mapa o un enlace a él.

Estos factores también tendrán un impacto masivo en su SEO local.

diseño de footer para página web con ejemplos de inspiración

Iconos de los medios sociales

En un mundo en el que los medios sociales se están apoderando de nuestras vidas, es una tontería no incluir enlaces a sus cuentas de medios sociales en el pie de página.

Esto es especialmente cierto si su negocio es muy activo en Facebook, Twitter e Instagram.

Además, al colocar sus iconos sociales en la parte inferior de su sitio, se asegurará de no distraer a sus visitantes del contenido de sus páginas.

diseño de footer para página web con ejemplos de inspiración

Inscripción a la newsletter o al correo electrónico

Según los estudios, alrededor del 24% de los sitios de marketing de alto rango ponen un boletín de noticias o un formulario de inscripción por correo electrónico en su pie de página.

Así que no lo pongas en el encabezado o como un popup.

Por lo general, cuantas más áreas pueda recordar a sus visitantes sobre cómo pueden seguir interactuando con su negocio, mejor.

Sin embargo, asegúrese de no exagerar.

diseño de footer para página web con ejemplos de inspiración

Una llamada a la acción o CTA

Los YCTA dirigen a los visitantes de su sitio web para que tomen una acción particular una vez que llegan a su página web.

Dependiendo de su nicho, es posible que desee incluirlo en todas las páginas.

Puede ser un enlace donde pueden suscribirse a un servicio o en forma de un botón.

diseño de footer para página web con ejemplos de inspiración

Búsqueda en el sitio

Estas herramientas no son tan comunes como los formularios de inscripción en el footer del sitio.

No obstante, algunos sitios optan por incluir el elemento en la parte inferior

diseño de footer para página web con ejemplos de inspiración

Enlaces de Navegación

Algunos usuarios no pasarán mucho tiempo en una página.

Si no encuentran lo que están buscando, se desplazarán al pie de página de su sitio.

Esta es una oportunidad en la que puede utilizar el footer para proporcionar a su público opciones adicionales como la navegación.

Algunos sitios web tienen un footer gordo, que es un pie de página lleno de contenido.

Algunos incluso implican un mega menú desplegable, que contiene casi todos los enlaces o piezas de contenido que vería en un menú desplegable de cabecera.

diseño de footer para página web con ejemplos de inspiración

10 increíbles ejemplos de diseño web de footers en 2020 como inspiración

El equipo de PresupuestoWP.com analizó las principales tendencias en el diseño de pies de página que ofrecemos a nuestros clientes y aquí están las ideas para hacer que el diseño de pies de página de su sitio web sea sobresaliente:

1. Minimalismo

diseño de footer para página web con ejemplos de inspiración

«La simplicidad es la última sofisticación», dijo Leonardo da Vinci.

Un footer demasiado relleno no siempre significa un pie de página informativo. Intenta concentrarte en uno o tres elementos y mantenerlo minimalista y fresco. Sugerimos esta combinación: copyright más logo más botones de medios sociales. Prevenga el plagio, llame la atención y lleve a sus lectores más lejos. Tan simple como eso.

2. Mapa del sitio

diseño de footer para página web con ejemplos de inspiración

Los mapas de sitio son a menudo subestimados, ya que sólo unos pocos lectores hacen clic en ellos. A diferencia de la tendencia minimalista, el footer gordo con un extenso directorio de sitios sirve para otros propósitos. Si los usuarios no encuentran lo que necesitan, los motores de búsqueda lo harán! Los grandes pies de página permiten a Google indexar mejor sus páginas, lo que probablemente sea un pequeño paso para que usted se clasifique más alto.

3. Formulario de contacto/boletín de noticias

diseño de footer para página web con ejemplos de inspiración

En cuanto a la colocación del formulario de contacto, PresupuestoWP se adhiere a las tres posiciones: arriba a la derecha, abajo a la derecha y abajo al centro.

Asegúrese de que el enlace se refiera a un formulario de contacto, no a una ventana emergente para enviar correo. En general, evite incluir enlaces a un correo electrónico porque son imanes de spam.

El otro truco para la participación de los visitantes es un módulo de registro de boletines de noticias en el pie de página de su sitio web.

Sugerimos especialmente el uso de esta característica como elemento de diseño del pie de página a las empresas de compras en línea. Indique qué recibirá el usuario con este boletín y con qué frecuencia, a la vez que especifica el número de personas que se han suscrito a este servicio web.

4. Navegación

diseño de footer para página web con ejemplos de inspiración

Aquí es donde su pie de página puede salvar a los visitantes perdidos. Si bajaron tanto en su página, probablemente no encontraron lo que buscaban.

Un conjunto de enlaces de referencia, inteligentemente organizados, guiará a sus visitantes a través de las secciones principales de su sitio web.

Puede organizar los enlaces de footer como pestañas, desplegables o un simple menú de tres o cuatro columnas. Asegúrese de identificar de antemano las páginas más visitadas de su sitio y optimizar su visibilidad en el footer.

5. Medios de comunicación social

diseño de footer para página web con ejemplos de inspiración

En general, las empresas aprecian que los visitantes procedentes de las redes sociales consulten sus sitios web. Por el contrario, algunos son reacios a integrar iconos que se refieran a las redes sociales por miedo a perder parte de su audiencia.

Dado que las redes sociales ocupan un lugar estratégico en su embudo de marketing, asegúrese de que el footer de su sitio web contenga iconos que guíen a los usuarios hacia ellas.

En el siguiente ejemplo, pusieron iconos de medios sociales en el centro. Además, agregaron un menú corto, detalles de contacto, términos de uso y derechos de autor en el pie de página.

6. Llamada a la acción

diseño de footer para página web con ejemplos de inspiración

¡Conectémonos! ¡Contrátanos!

Deje su número de teléfono y nos pondremos en contacto con usted en una hora! Un simple pero pegadizo llamamiento a sus lectores en el footer seguido de un boletín de noticias o un formulario de contacto puede ayudarle a aumentar la tasa de conversión.

Asegúrate de que tu llamada a la acción no deja nada que adivinar. Recuerde que su público no quiere pensar mucho en cómo realizar la acción.

7. Datos de contacto, teléfono, dirección

diseño de footer para página web con ejemplos de inspiración

Lo que los usuarios obviamente esperan descubrir en el pie de página es la información de contacto. Un número de teléfono con el código telefónico de su país es un indicador clave que permite a los motores de búsqueda entender dónde se encuentra usted. Haga clic en cada enlace para que sus usuarios puedan marcar un número o enviar un correo electrónico directamente desde sus teléfonos inteligentes.

Este diseño de footer no contiene nada más que información de contacto en la que se puede hacer clic, de modo que sus visitantes no distraigan su atención de cosas innecesarias.

8. Mapa

footer example

La conexión con un mapa añade credibilidad a la imagen de su negocio al indicar dónde se encuentran sus instalaciones. Además, es una gran manera de ayudar a los usuarios de Google Maps a encontrarte.

9. Pie de página personalizado

diseño de footer para página web con ejemplos de inspiración

Si desea personalizar su sitio, entonces las imágenes, la animación, las fotos de su equipo en el footer contribuirán a su personalización. Para llevar un mensaje más poderoso y pegadizo, no dude en incluir un vídeo en el pie de página.

10. Sin footer

diseño de footer para página web con ejemplos de inspiración

A veces, el hecho de hacer a un lado la plantilla de encabezamiento, barra lateral y pie puede hacer que se destaque entre la multitud.

Pruebe esto para su página de aterrizaje, mientras mantiene los pies de página estándar con información crucial en las otras páginas de su sitio web.

El ejemplo muestra el pie de página abandonado en la página de inicio para resaltar los puntos clave.

Lo que se debe y lo que no se debe hacer al diseñar un footer de una página web profesional

Ahora que ya tiene una idea de los elementos que debe incluir en el footer, aquí tiene algunos consejos adicionales para que el diseño del pie de página sea aún más potente:

Optimización móvil

Diseñe cada elemento de su sitio teniendo en cuenta la iniciativa de Google para móviles.

Los usuarios móviles suelen desplazarse hacia abajo hasta la parte inferior de su sitio.

A medida que el footer recibe más exposición de los usuarios móviles, es vital que su diseño y disposición se optimicen para el móvil.

Espacio

Asegúrese de que tiene suficiente espacio para que no parezca desordenado.

Columnas para enlaces relacionadosDiseñarcolumnas con enlaces relacionados.

Clasifíquelo dando un título a cada sección.

No sólo hará que su sitio sea fácil de navegar, sino que también mejorará la experiencia del usuario.

Contraste de colores

Haga el texto del pie de página lo más legible posible.

Además, asegúrese de que su color y el tema general de su sitio web vayan bien juntos.

Navegación apropiada

Incorpore su sitio con la cantidad justa de navegación.

UX siempre debe ser su principal prioridad y foco de atención.

Si el footer de su sitio tiene mucha información, considere la posibilidad de incluir subpie de página plegable.

La clave aquí es la adecuada jerarquía de información.

diseño de footer para página web con ejemplos de inspiración

Pasos para crear un buen diseño de footer para tu página web en 2020

Para evitar los obstáculos que se interponen en el camino de su implementación, debe elaborar un plan de lo que espera ver en la página de su sitio web.

1. Decida lo básico

  • Revise la estructura de su sitio web y decida dónde necesita su footer, seleccione en los ejemplos del menú de pie de página.
  • Tenga cuidado de hacer una versión de footer, mind mobile o de aplicación que responda a las necesidades.
  • Haga pies de página personalizados para las distintas páginas, si es necesario: por ejemplo, añada un mapa a la página «Contáctenos».

2. Diseño web del footer

  • Determine el tamaño y el número de secciones y columnas, y ordénelas en términos de prioridad o estándares. Ejemplo: la información de contacto se espera en el centro o en la esquina derecha del pie de página.
  • Déjelo en la parte inferior o coloque un footer pegajoso con HTML y CSS personalizados para «fijarlo» en la parte inferior de la pantalla de un navegador de escritorio.

3. Mejóralo con elementos personalizados

  • Insertar los medios de comunicación social: Widgets de Twitter que muestran una línea de tiempo o un botón de «seguimiento» de Facebook.
  • Añade un plugin de publicidad.
  • Incrustar Google Maps u otro mapa de su elección.
  • Mantenga el estilo: elija la plantilla de pie de página de bootstrap/WordPress o cree una personalizada desde cero, haciendo coincidir los colores y estilos con el sitio web.

Como hacer un footer responsive HTML5 – CSS3 para WordPress

Conclusión

A menudo pasamos por alto el pie de página en términos de diseño web.

A menudo pensamos que como está en la parte inferior de la página la gente no le presta demasiada atención.

Sin embargo, es tan importante como el resto de su sitio web.

Un footer web es una parte vital de su diseño.

También puede decir mucho sobre su sitio web en su conjunto.

Puede guiar a los visitantes del sitio sobre cómo ir por su página y lo que pueden hacer.

Además, puede decirles quién es usted o de qué se trata su empresa, así que no lo pase por alto.

Asegúrate de que tiene la combinación correcta de elementos de diseño, información y usabilidad para ayudar a la experiencia del usuario.

Esta fue nuestra visión de las mejores ideas y ejemplos de diseño de pies de página. Sin embargo, no se apresure a incluirlos todos en su sitio web.

Piense en sus visitantes y actúe respectivamente, el diseño de su pie de página y el proceso de su creación puede variar dependiendo de los requisitos de su negocio – póngase en contacto con PresupuestoWP, y le guiaremos en el camino de diseñar un footer sorprendente.

34SUAfy / 2Qj4Jgi

Tienes un proyecto y ...

¿Buscas profesionales?


Publicar proyecto
(GRATIS)


Sin compromiso ni registros • Profesionales destacados
Eres un profesional y ...

¿Buscas clientes?


Suscribirse
(10€ / MES)



Cuota fija al mes • Sin permanencia ni comisiones

¡Ayúdanos a mejorar!

Si tienes cualquier duda, propuesta, sugerencia o
simplemente quieres saludar, nos encantará leerte en:

hola@presupuestowp.com

presupuesto wordpress