Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
  • Recibe todos los domingos las últimas entradas del blog.
  • Recibe contenidos exclusivos.

Te puedes dar de baja en cualquier momento. Nada de Spam

 

En este post vamos a profundizar en el Footer de una página web. Es decir, la parte inferior o pie de página de un sitio web. Veremos qué partes conforman el footer de una web y que opciones de diseño son las más habituales.

Para el análisis del footer usaremos WordPress ya que es el CMS más utilizado para la creación de páginas web. También usaremos mi plantilla favorita, y la que para mí es las más flexible y potente, que es la plantilla Divi

 

DESCUENTOS PLANTILLA DIVI

 

 

1.- EL FOOTER DE UNA PÁGINA WEB

 

Podríamos traducir el “Footer” como el pie de una página web. El anglicismo “Footer” es ampliamente utilizado por todos los hispano hablantes.

Una de las características más importantes del footer de una web es que éste se mantiene en todas las páginas del sitio. Es decir, que el píe de la página web es exactamente igual en todas las páginas del sitio.

En el footer de un sitio web solemos colocar entre otras cosas, algunos enlaces que no nos interesa destacar pero que es necesario que estén en todas las páginas del sitio web. Como podría ser el “Aviso Legal” que es un enlace que no nos interesa poner en el menú superior del header pero que debe aparecer en todas las páginas de la web.

Habitualmente el footer presenta un color más oscuro que rompa un poco con el resto de la página para delimitar claramente su extensión.

 

 

2.- PARTES DEL FOOTER DE UNA WEB

 

En una página web realizada con WordPress podemos encontrar varias partes:

 

A.- ZONA DE WIDGETS: es la parte superior del footer, y como el nombre de la zona indica podemos colocar Widgets de diferentes tipos.

Aunque en cualquier sitio web se pueden colocar bloques en la parte inferior, es en WordPress en el que se ha adoptado el nombre de Widgets para definirlos.

En WordPress existen: widget de búsqueda, widgets de categorías del blog, widgets de últimos comentarios, widgets de menú, widgets de texto, etc. Cada tipo de widgets tiene una funcionalidad y configuración diferente.

Además a través de plugins podemos añadir nuevos tipos de widgets. Por ejemplo, el plugin Black Studio TinyMCE Widget incorpora un widget con un editor visual. “Editor visual” es precisamente el nombre que adquiere el widget. Gracias a este widget, no necesitaremos tener conocimientos de HTML o CSS para añadir imágenes y/o formatear el contenido (ya que el widget de texto no incluye dicho editor).

 

B.- MENÚ EN EL FOOTER – MENÚ INFERIOR: En algunas páginas web verás que debajo de los widget aparece un menú.

A mí es algo que de modo general no me agrada especialmente, pero es una opción como otra.

La posibilidad de disponer de un menú en el footer es algo que depende de la plantilla WordPress que estés utilizando. En el caso de la plantilla Divi, que como digo es mi plantilla favorita para cualquier tipo de proyecto dispone de la posibilidad de añadir un menú en el footer y situarlo justo debajo de la zona de widgets.

 

La plantilla Divi dispone de la posibilidad de poner un menú en el footer

Menú en el footer con la plantilla Divi

 

C.- PIÉ Y CRÉDITOS: En la parte más inferior del footer o píe de página aparece lo que se denomina como pie. En este lugar suelen aparecer los créditos de la web.

En los créditos se refleja el autor del diseño de la web y/o la marca de la empresa responsable del sitio web.

Si pones algún enlace en el pie de la página, mi recomendación es que sea de tipo “nofollow”, ya que a Google no le entusiasman este tipo de enlaces.

 

 

3.- DISTRIBUCIÓN 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.

En el caso de la plantilla Divi podemos elegir entre 3 distribuciones diferentes:

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

1/ 3 + 1/ 3

1/ 2 + 1/ 2

1/ 1

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

 

distribución de columnas en la zona de widgets del footer con divi

Posibles distribuciones de columnas en el footer de la web

 

Para acceder a la zona de gestión de las posibles distribuciones de columnas de widgets en el footer con la plantilla Divi debes ir a:

“Divi > Personalizador de temas > Pie > Diseño” y hacer clic en el selector “Diseño de columna”.

 

 

3.1.- OPCIONES DE DISEÑO Y PERSONALIZACIÓN WIDGETS FOOTER

 

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 footer

 

Para personalizar el color de fondo del bloque completo de widgets del footer tendremos que ir a:

“Divi > Personalizador de temas > Pie > Diseño” y hacer clic en el selector: “Color de fondo de pie de página”.

 

 

4.- CONTENIDO HABITUAL DEL FOOTER

 

Existe determinado tipo de contenido que se incluye habitualmente en el footer, dependiendo si se trata de una web corporativa o una tienda online con woocommerce.

 

4.1.- PLUGIN PARA TENER UN WIDGET CON EDITOR VISUAL

 

Antes de hablar de los tipos de contenido habituales en el footer de una web, te indicaré que estos contenidos son incluidos en el footer de una web WordPress a través de lo que se conoce como Widgets.

Existen Widgets de muchos tipos: Widget de categorías, Widget de menú personalizado, Widget de últimas entradas, Widget de búsqueda, etc…

Pero hay un widget fundamental y que sirve para la mayor parte de creaciones de contenidos del footer, y este es el “widget de texto”.

Pero este widget de texto tiene un pequeño problema. Con él es fácil escribir texto sin formatear, pero cuando llega la hora de poner negritas, añadir imágenes, poner enlaces,…. Se complica la cosa, ya que todo esto lo tienes que hacer usando código HTML.

Pero tranquilízate casi todos los problemas tienen una solución, y la solución de este problema se llama Black Studio TinyMCE Widget.

Black Studio TinyMCE Widget es un plugin gratuito fundamental que sirve para añadir a los widgets disponibles uno que se denomina “Editor Visual” y que es como el Widget de texto, pero con la gran diferencia de que añade un editor visual de texto con el cual podrás formatear el texto añadir negritas, añadir enlaces, cursiva, centrar, justificar, etc… y claro también añadir imágenes.

 

plugin que añade un widget con editor visual

Widget con editor visual

 

 

4.2.- CONTENIDO DEL FOOTER EN UNA WEB CORPORATIVA

 

En una página web corporativa solemos encontrar en los widgets del footer contenidos como:

A.- DIRECCIÓN: la dirección de localización de la empresa. Para ello basta con usar un widget tipo editor visual o incluso el widget de texto.

B.- DATOS DE CONTACTO: en los widgets del footer de una página web corporativa también se suelen añadir datos de contacto como el teléfono o el email.

Puedes hacer incluso que cuando estés visualizando el teléfono en un móvil al hacer clic se proceda a realizar la llamada sin tener que introducir el número de teléfono.

Para ello tendrás que poner un código del tipo:

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

C.- ENLACES A SERVICIO O PRODUCTOS: también se suele usar el footer para enlazar los servicios o productos más importantes que ofrece la empresa. Para ello solo es necesario utilizar un widget tipo editor visual o un widget de texto.

D.- INFORMACIÓN LEGAL: en los widgets del footer también se suele incluir enlaces a páginas de información legal como el Aviso Legal, Política de Privacidad o Política de Cookies. Mi recomendación es que pongas enlaces tipo nofollow cuando enlaces este tipo de páginas.

E.- ENLACES A REDES SOCIALES: muchas veces en el footer también incluimos enlaces a las diferentes redes sociales en las que está presente la empresa.

En el caso de la plantilla Divi, por defecto podemos añadir los iconos de redes sociales en la barra inferior del footer, la cual veremos más adelante.

F.- IMÁGENES: también podemos añadir al 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.

 

 

4.3.- CONTENIDO DEL FOOTER EN UNA TIENDA ONLINE WOOCOMMERCE

 

A parte de los tipos de contenidos del footer de una web para sitios web corporativos, para las tiendas online o ecommerce podemos añadir:

A.- INFO LEGAL: a los elementos antes comentados para las web corporativas podemos añadir las condiciones de compra o devolución.

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 y otros como: PayPal, tarjeta de crédito, si la tienda online cuenta con certificado de seguridad como let’s Encrypt para la utilización del protocolo seguro ssl, sellos de calidad como: confianza online o sello CECARM, etc.

C.- MI CUENTA: 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. En el caso de una tienda online WordPress con Woocommerce, puedes crear dichos enlaces con el widget de editor visual.

 

 

5.- MENÚ EN EL FOOTER CON WORDPRESS Y DIVI

 

Habrás visto que en muchas webs incorporan un menú en el footer. Es decir, en la parte inferior de la página web.

En algunas webs puedes llegar a ver el mismo menú que aparece en la parte superior o header que se repite tal cual en el footer.

Yo no soy muy partidario de este uso del menú del footer, ya que repetir el menú en el header y footer, además de no tener sentido, en mi opinión es contraproducente para el SEO y en algunos casos cuando hay muchos ítems de menú incluso en temas de ralentización de la carga de la web (ten en cuenta que estos menús se cargan en cualquier página del sitio web).

Si por el contrario usamos el menú del footer para añadir unos ítems de menú diferentes a los reflejados en el Header, que no hemos querido poner en la cabecera de la web por la razón que sea, sí que me parece interesante.

Como ya imaginarás, no todas las plantillas permiten añadir un menú en la parte inferior de la web. En el caso de Divi, mi plantilla WordPress favorita, si es posible.

Para mostrar un menú en el footer de la web con la plantilla Divi debemos ir a: “Apariencia > Menús”

Crear un nuevo menú, añadir los ítems de menú que queramos que aparezcan, y lo más importante: Seleccionar “Menú inferior” en las Opciones del Menú.

 

añadir un menú en el footer con divi

Cómo añadir un menú en el footer con WordPress y Divi

 

 

A continuación guarda el menú.

 

 

5.1.- OPCIONES DE DISEÑO MENÚ FOOTER

 

Para personalizar el diseño del menú del footer con WordPress y la plantilla Divi debe ir a: “Divi > Personalizador de temas > Pie > Menú Inferior”.

Las opciones que tienes son:

a.- Color de fondo de menú del pie: desde aquí seleccionaremos el color de fondo o color de background del bloque del menú del pie de la web.

b.- Color de texto de menú del pie: color de los ítems del menú del footer.

c.- Color de enlace activo de menú del pie: color del elemento de menú activo del footer. Es decir, el ítem de menú que marca la página cargada en el navegador.

d.- Espacio entre letras: espacio entre las diferentes letras del menú del footer. Esto es interesante para darle otra apariencia al menú inferior.

e.- Estilo de fuente: desde aquí podremos marcar los diferentes ítems de menú con negrita, cursiva, mayúscula o subrayado.

f.- Tamaño de fuente: desde aquí seleccionaremos el tamaño de la fuente de los elementos del menú del footer.

 

Diseño del menú del footer con wordpress y divi

Opciones de personalización del menú del footer de la web

 

 

6.- BARRA INFERIOR DEL FOOTER CON WORDPRESS Y DIVI

 

En la barra más inferior del footer, en el cual se suelen poner los créditos de la página web.

En el caso de la plantilla Divi para wordpress podremos poner iconos de redes sociales y los créditos de la página web.

En los créditos solemos poner un enlace a la web de la empresa encargada del diseño y creación de la web o directamente el nombre de nuestro sitio web.

 

 

6.1.- OPCIONES DE DISEÑO BARRA INFERIOR DEL FOOTER

 

Para ir a las opciones de personalización del diseño de la barra de créditos del footer de la web con la plantilla Divi iremos a: “Divi > Personalizador de temas > Pie > Barra inferior”.

Aquí encontraremos las siguientes opciones:

 

a.- Color de fondo: desde aquí seleccionaremos el color de fondo de la barra inferior del footer.

b.- Color de texto: personalizaremos el color del texto añadido a la barra de créditos del footer.

c.- Estilo de fuente: aquí podremos seleccionar negrita, mayúscula, cursiva o subrayado en el texto de créditos del footer.

d.- Tamaño de fuente: tamaño del texto de los créditos del footer.

e.- Tamaño de icono Social: tamaño de los iconos de redes sociales que aparecen en la barra inferior del footer.

f.- Color icono social: color de los iconos sociales del footer

g.- Disable footer credits: para que no aparezcan créditos en el footer y de esta manera eliminar el texto por defecto de la plantilla.

h.- Edit footer credits: desde aquí podremos escribir un texto personalizado para los créditos del footer. Para añadir un enlace tendrás que hacerlo vía html poniendo algo así:

<a href="http://www.saonavo.com">SAONAVO</a>

 

diseño creditos pagina web

Personalizar diseño barra inferior del footer

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto.
Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies