El footer, aunque está al final de cada página web, es un elemento esencial que cumple unas funcionalidades definidas según el tipo de página web.

En este post vamos a abordar todos los aspectos relacionados con el footer de una página web. Así, como profundizaremos en los aspectos relacionados con el diseño del footer en WordPress y también con la plantilla Divi.

Veremos qué es el footer, que elementos habitualmente lo conforman según el tipo de página web de que se trate: blog, web corporativa, tienda onlnie. También veremos, cómo gestionar los widgets de pié de página de WordPress y cuales son los más utilizados.

Veremos cómo eliminar o editar el texto del pie o créditos del footer, ya estemos utilizando una plantilla cualquiera y también en el caso de que utilicemos la plantilla divi.

También, veremos cómo personalizar el footer en caso de utilizar la plantilla Divi y WordPress. Así, como la manera de crear un footer a medida desde cero con un maquetador visual y un theme builder.

Todo esto y mucho más en el siguiente post…..

 

 

Ahora 20% de descuento Plantilla DIVI

SUPER DESCUENTO DIVI

 

->PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins.

Este es un plan de renovación anual. Es decir, para seguir disfrutando de las novedades de Elegant Themes debes renovar el plan de año en año. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 89$ + IVA, pero con el descuento del 20% se te quedará en 70 $ + IVA

NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $70 con el descuento ya aplicado.

DESCUENTO PLAN YEARLY ACCESS

 

->PLAN LIFE TIME ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra + 3 plugins.

Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de los recursos de Elegant Themes de por vida. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 249$ + IVA, pero con el descuento del 20% se te quedará en 199$ + IVA

NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $199 con el descuento ya aplicado.

DESCUENTO PLAN LIFETIME ACCESS

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

 

1.- ¿Qué es el footer de una página web?

 

El footer es la parte inferior de una página web. Es decir, la parte situada al final.

“Footer” es un anglicismo ampliamente asimilado en el español, aunque su traducción sería “pie de página”.

En el footer de una web habitualmente encontraremos: elementos de navegación, enlaces de interés, iconos de redes sociales, copyright, etc.

Habitualmente el footer se diferencia del contenido de la página estableciendo un color de fondo diferente que claramente divida la parte de la página dedicada al “contenido” del footer. Se suele usar para el footer un color de fondo que destaque y existen una serie de colores estandarizados para footer, que nos pueden servir para prácticamente cualquier tipo diseño web.

Una características del footer es que éste se repite en todas las páginas del sitio web. Es decir, mientras que cada página de la web tiene un contenido diferente, comparten el mismo footer. Aunque pueden existir excepciones como landing pages y otras.

En el footer se deben incluir elementos necesarios y no saturarlo con elementos inservibles.

En el footer podemos destacar elementos que hayan podido pasar desapercibidos en la página web como los datos de contacto y también elementos que debemos tener en la web pero que no queremos destacarlos demasiado como los enlaces de información legal.

También podemos incluir elementos de navegación, aunque yo no soy muy partidario de esto. Lo que no debemos poner son bloques de redes sociales que ralenticen la carga de todo el sitio web. Si podemos poner iconos de enlaces de nuestras redes sociales.

Tampoco debemos poner mapas de Google ya que ralentizan la carga de la página. El mapa debemos colocarlo exclusivamente en la página de contacto

 

 

2.- Partes del footer de una página web

 

El footer de una página web puede estar compuesto de un solo bloque o de varios bloques. De abajo hacia arriba podemos tener:

a.- Barra de créditos del footer o pie: suele ser una barra con poca altura, donde habitualmente se coloca el copyright y la autoría del diseño web. A veces, puedes aparecer también iconos de las redes sociales en las que la empresa está presente.

Si colocas aquí algún enlace, lo recomendable a nivel de SEO, es que sean de tipo nofollow.

 

b.- Barra de menú: opcionalmente, encima de los créditos del footer o pie de página puede mostrarse un menú de navegación.

 

c.- Zona superior del footer: esta zona suele tener una altura considerable. Puede incluso estar subdividido en 2 zonas.

En esta zona superior del pie de página se suelen ubicar enlaces de información legal, dirección y contacto, enlaces de interés e incluso imágenes para mejorar la confianza online. Esta zona está dividida en varios bloques o columnas

 

 

2.1.- Partes del footer de una página web con WordPress

 

Vamos a ver ahora una serie de consideraciones a tener en cuenta, para cada parte del footer, cuando estamos trabajando el footer de una web con WordPress.

 

partes del footer wordpress

Partes del footer en una web realizada con WordPress

 

a.- Barra de créditos o pie: la personalización del contenido y diseño del bloque de créditos del footer va a depender de la plantilla wordpress que tengamos instalada.

Muchas plantillas wordpress nos van a permitir fácilmente personalizar el contenido de texto que se muestra en los créditos del footer, así como su diseño: color de fondo, tipos de fuentes, tamaños de texto, color de texto, etc.

Por el contrario, en otras plantillas de wordpress tendremos que acceder a los archivos de la plantilla y a modificar el código de un determinado archivo para poder personalizar el contenido de los créditos del footer. En cuanto al diseño, más de los mismo, en algunas plantillas tendremos que añadir CSS personalizado para poder modificar el diseño.

En este punto yo te recomiendo que utilices una plantilla en condiciones, para que todo esto se pueda personalizar desde las opciones de la plantilla y no tener que complicarnos la vida. Por ejemplo, la plantilla Divi.

 

b.- Barra de menú: el poder añadir un bloque de menú al footer con wordpress depende de si la plantilla lo permite o no. En el caso de la plantilla Divi, ya te adelanto que si lo permite.

 

c.- Zona superior del footer (Zona de Widgets): esta zona del footer, en el caso de usar WordPress la vamos a llamar como zona de Widgets.

Esta zona puede estar compuesta una o dos áreas, dependiendo de la plantilla wordpress que estemos utilizando. Cada zona está dividida en varios bloque o columnas. La plantilla de WordPress que estemos utilizando es la que nos va a dar el número y distribución de columnas posibles.

La plantilla Divi nos permite de 1 a 6 columnas, en diferentes y variadas distribuciones.

Esta zona superior del footer en WordPress la denominamos zona de widgets, porque el contenido de esta zona estará generado a través de Widgets que podemos ir añadiendo a cada columna.

Los Widgets no son algo exclusivo de la plantilla, sino de WordPress. Los widgets son elementos que dispondremos sea cual sea la plantilla que estemos utilizando y cada uno tiene una apariencia y finalidad específica.

En WordPress existen: widget de búsqueda, widgets de categorías del blog, widgets de últimos comentarios, widget de imagen, widgets de menú, widgets de texto, etc.

SUPER DESCUENTO DIVI

 

 

3.- ¿Qué poner en el footer de una página web? / Contenido del footer

 

El contenido que se suele ver en el footer de una página web está muy influenciado por el tipo de web de que se trate. Por este motivo, vamos a ver qué contenidos se suelen poner en el footer clasificados por tipo de web.

 

 

3.1.- Contenido del footer de un blog

 

Uno de los habituales objetivos de un Blogger es conseguir que los visitantes se suscriban a su lista de email y que estén el máximo tiempo posible en la web. Como puedes ver, esos objetivos condicionan los elementos que el Blogger en muchas ocasiones va a colocar en el footer. En un blog se suelen ubicar los siguientes tipos de contenidos:

  • a.- Enlaces de información legal: enlaces a páginas de información legal como el aviso legal, política de privacidad y política de cookies.
  • b.- Enlaces a cursos, servicios e infoproductos y varios: en el footer de los blogs solemos ver también enlaces a cursos creados por el autor del blog, servicios ofrecidos e infoproductos destacados.
  • c.- Información de retención: es habitual también ver en blogs enlaces a los últimos posts o enlaces a categorías del blog o enlaces a posts destacados, posts más vistos, etc. En definitiva, enlaces para intentar retener al usuario en la web (bueno para el SEO) y mostrar autoridad sobre las temáticas cubre el blog.
  • d.- Formulario de suscripción: para un Blogger es fundamental disponer de una buena lista de suscriptores. Por este motivo, en muchas ocasiones, muchos blogs incluyen un formulario de suscripción en el footer del blog.

 

 

3.2.- Contenido del footer de una web corporativa

 

La principal finalidad de una empresa no es que los visitantes se suscriban a una lista de correo. Sino que contacten con la empresa para contratar algún servicio y esto va a influir también en los elementos habituales del footer en una web de empresa.

a.- Información de contacto: este es un elemento clave ya que aporta al visitante la información necesaria para poder contactar con la empresa (email, teléfono, dirección, etc.)

Puede ser interesante poner el teléfono con un enlace para que si se visualiza en un móvil y se hace clic sobre el número directamente se marque el número en el móvil. Para esto tendrías que usar un enlace del tipo:

<a
href="tel://654658654">654 658 654</a>

b.- Información legal: también se suele ubicar en el footer la información legal.

c.- Enlaces a servicios o productos: también se suele usar el footer para enlazar los servicios o productos más importantes que ofrece la empresa.

d.- Iconos de redes sociales: muchas veces en el footer también incluimos enlaces a las diferentes redes sociales en las que está presente la empresa.

e.- Imágenes: también es posible encontrar en el footer algún tipo de imagen corporativa, logos de certificados que utiliza la empresa, logos de asociaciones a las que pertenece la empresa, logos de empresas colaboradoras, etc.

 

 

3.3.- Contenido del footer de una tienda online

 

En el footer de una tienda online o ecommerce suele mostrarse información de la empresa, enlaces a zona privada del cliente e imágenes para mejorar la confianza en la compra online.

 

  • a.- Info legal: información legal de la web. En este caso, a parte de el aviso legal, política de privacidad y política de cookies suele haber un enlace a las condiciones de compra.
  • b.- Logos: en el footer o pie de páginas de las tiendas online se suelen poner logos que indican las formas de pago que ofrece la tienda como: PayPal, tarjeta de crédito, etc.También logos encaminados a aumentar la confianza en la tienda online como: logo certificado SSL, sellos de calidad como: confianza online o sello CECARM, etc.
  • c.- Zona privada clientes: en el footer de las tiendas online se suelen añadir enlaces para acceder a la zona privada de clientes de la tienda, donde los clientes pueden modificar sus datos, ver sus pedidos o descargar sus facturas.
  • d.- Información contacto ecommerce: también es habitual ver en el footer información de contacto con la empresa y dirección.

 

 

4.- ¿Cómo crear el pie y añadir widgets al footer de WordPress?

 

Los widgets en wordpress son los elementos que nos van a permitir dar contenido al footer con WordPress. WordPress ya incluye por defecto una serie de widgets. Aunque, es posible añadir más widgets a través de plugins o plantillas.

 

4.1.- ¿Cómo añadir un widget al footer en WordPress?

 

Para añadir un widget en WordPress, lo primero que tendremos que hacer es ir a la página de gestión de widgets: “Apariencia > Widgets”

Aquí veremos en la parte izquierda los widgets de wordpress disponibles y en la derecha las diferentes áreas donde podemos incluir widgets, que se corresponden con los bloques del footer. Según la plantilla que estemos utilizando puede haber más o menos áreas de widgets.

La plantilla Divi dispone de 6 diferentes áreas del footer. Pero, podremos utilizar los que queramos. Tal vez, lo más habitual es utilizar 4 áreas o columnas en el footer.

Para añadir un widget haremos clic con el botón izquierdo sobre el widget que queramos añadir y lo arrastraremos hasta el área donde queramos fijarlo. Una vez colocado el widget en su área podremos configurarlo.

 

 

4.2.- ¿cuáles son los widgets de WordPress más utilizados en el footer?

 

Cada widget tiene una apariencia y funcionalidad diferente. Los widgets más utilizados en el footer son:

  • i.- Widget Categorías: este widget sirve para mostrar de manera automática las categorías del blog.
  • ii.- Widget Entradas recientes: sirve para mostrar las últimas entradas publicadas en el blog.
  • iii.- Widget imagen: sirve para añadir una imagen
  • iv.- Widget menú de navegación: sirve para añadir un menú creado previamente desde “Apariencia > menús”
  • v.- Widget de texto: sirve para añadir texto formateado y enlaces.

SUPER DESCUENTO DIVI

 

 

5.- Opciones de personalización del diseño del footer con WordPress y Divi

 

La plantilla Divi para wordpress incluye un montón de opciones de personalización del footer. Incluso, como veremos más adelante en otro apartado específico permite incluso construir un footer a medida con el Theme builder.

Existen otras plantillas como veremos más adelante, sobre todo gratuitas, que no lo ponen nada fácil e incluso la simple acción de modificar el texto de la barra de créditos del footer te obligará a modificar el código de la plantilla

De manera general, si la plantilla wordpress que estás utilizando tiene opciones de personalización del footer, las encontrarás o en un apartado específico de la plantilla denominado opciones del tema, theme options o similar. También, en muchos casos las puedes encontrar en «Apariencia > personalizar».

Vamos a ver ahora las opciones de personalización del footer de que dispone la plantilla Divi para WordPress.

 

 

5.1.- Distribución de columnas o áreas de widgets del footer con WordPress y Divi

 

Aunque lo habitual es que la zona de widgets de la parte inferior de la web esté dividida horizontalmente en tres o 4 partes iguales, lo cierto es que dependiendo de la plantilla wordpress utilizada podemos tener muchas distribuciones diferentes.

Como digo, la posibilidad de elegir diferentes distribuciones de columnas en el footer es algo que va a depender de la plantilla wordpress que estemos utilizando.

Las opciones de estructura de columnas del footer con Divi las tenemos en: «Divi > personalizador de temas > pie > diseño»

En el caso de la plantilla Divi podemos elegir entre las siguientes distribuciones:

1/ 4 + 1/ 4 + 1/ 4 + 1/ 4

1/ 3 + 1/ 3

1/ 2 + 1/ 2

1/ 1

1/5 + 1/5 + 1/5 + 1/5 + 1/5

1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6

y luego un montón de combinaciones de las anteriores con distintas proporciones. Te pongo algunos ejemplos:

1/ 4 + 3/ 4

3/ 4 + 1/ 4

1/ 3 + 2/ 3

2/ 3 + 1/ 3

1/ 4 + 1/ 4 + 1/ 2

1/ 2 + 1/ 4 + 1/ 4

etc.etc.

 

columnas estructura de widgets con wordpress y divi

Opciones de distribución de columnas de widgets con wordpress y divi

 

En este apartado también podrás establecer el color de fondo de área principal del

SUPER DESCUENTO DIVI

 

 

5.2.- Opciones de diseño y personalización de los widgets del footer con WordPress y Divi

 

Las opciones de diseño y personalización de los widgets del footer los puedes encontrar en la plantilla Divi para WordPress en:

“Divi > Personalizador de temas > Pie > Widgets” y tenemos las opciones:

 

  • Tamaño texto cabecera: los widgets tienen un título o cabecera. Desde aquí podremos personalizar el tamaño en píxeles de dichas cabeceras.
  • Estilo fuente cabecera: desde aquí podremos decidir si queremos que el título del widget esté en negrita, cursiva, mayúsculas o subrayado.
  • Tamaño de texto de cuerpo o enlace: con esta opción elegiremos el tamaño del texto del cuerpo del widget (es decir la parte que no es título), ya sea texto plano o enlaces.
  • Altura de línea de cuerpo o enlace: Desde aquí personalizaremos la separación vertical entre líneas de texto del contenido del widget.
  • Estilo de fuente de cuerpo: Aquí seleccionaremos si queremos que el texto del cuerpo del widget esté en negrita, cursiva, mayúsculas o subrayado.
  • Color de texto de widget: Desde aquí seleccionaremos el color del texto del cuerpo del widget (que no sea enlace).
  • Color de enlace de widget: Aquí el color del texto que sea enlace (link)
  • Color de cabecera de widget: Desde aquí personalizaremos el color de los textos de cabecera de los widgets.
  • Color de punto de widget: Aquí podremos personalizar el color del punto que aparece cuando creamos listas en wordpress.

 

Diseño de la zona de widgets del pie de página web

Personalizar diseño de los widgets del fo