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
->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.
->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
ÍNDICE POST DISEÑO FOOTER
- 1.- ¿Qué es el footer de una página web?
- 2.- Partes del footer de una página web
- 3.- ¿Qué poner en el footer de una página web? / Contenido del footer
- 4.- ¿Cómo crear el pie y añadir widgets al footer de Wordpress?
-
5.- Opciones de personalización del diseño del footer con Wordpress y Divi
- 5.1.- Distribución de columnas o áreas de widgets del footer con Wordpress y Divi
- 5.2.- Opciones de diseño y personalización de los widgets del footer con Wordpress y Divi
- 5.3.- Cómo añadir y personalizar un menú en el footer con Wordpress y Divi
- 5.4.- Cómo editar y personalizar el diseño de la barra de créditos con Wordpress y Divi
- 6.- Editar y personalizar el footer en Wordpress con código
- 7.- Plugins de Wordpress para personalizar el footer o pié de la 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
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
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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”.
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ú.
Cómo añadir un menú en el footer con WordPress y Divi
A continuación guarda el menú.
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.
Opciones de personalización del menú del footer de la web
5.4.- Cómo editar y personalizar el diseño de la barra de créditos con WordPress y Divi
Vamos a ver cómo personalizar 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.
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>
Personalizar diseño barra inferior del footer
Seguramente habrás visto que en la barra de créditos del footer aparece algún texto referente a la empresa desarrolladora de la plantilla.
En muchas plantillas hay opciones para poder editar este texto. Habitualmente las encontrarás o en las opciones del tema (theme options) o en “Apariencia > Personalizar”. También encontrarás aquí opciones para personalizar el diseño general del footer.
Existen plantillas en wordpress muy personalizables como Divi que permiten editar fácilmente el texto de los créditos del footer y personalizar el diseño completo del footer. Pero, también existen plantillas con muy pocas opciones de personalización, donde es necesario editar el texto de los créditos modificando el código de la plantilla y personalizar el diseño del footer directamente con CSS. Esto sucede en mayor medida en las plantillas gratuitas.
Mi recomendación es que trabajes con una plantilla en condiciones como es el caso de Divi u otra que te permita realizar las tareas de personalización de una forma sencilla y visual, sin tener que modificar código y rollos por el estilo.
Pero, si trabajas con alguna plantillas gratuita que no te permita editar fácilmente el texto del pie. Tendrás que modificar el archivo de la plantilla de nombre: footer.php
Puedes acceder fácilmente a este archivo, desde el panel de administración que te proporciona tu empresa de hosting, editar el archivo y cambiar el texto que aparece por el texto que quieras. También podrías hacerlo vía FTP
El problema es que al actualizar la plantilla esta modificación se borrará y tendrás que volver a realizarla.
Por lo que es mejor la opción que te planteo en el siguiente apartado.
La mejor opción es crear un child theme o tema hijo de tu plantilla. A continuación, instalas y activas tu tema hijo en WordPress y le añades una copia del archivo footer.php de tu plantilla.
En este post tienes más info de cómo puedes crear un tema hijo o child theme en WordPress
A continuación, modificas el archivo footer.php del tema hijo y esta modificación permanecerá aunque se actualice la plantilla.
Por lo que a la larga esta es la mejor opción.
En caso de que tampoco puedes personalizar el diseño tendrás que añadir CSS también en el archivo style.css del tema hijo.
Si no quieres meterte en líos de modificación de código e implementación de temas hijo, etc. He encontrado una opción más sencilla que puede ser de tu interés.
Se trata de un plugin que te permite o eliminar el texto de los créditos del footer o modificar ese texto. Es un plugin gratuito que se llama “Remove Footer Credit” y es gratuito.
El plugin permite eliminar o editar el texto de los créditos del footer sin tener que realizar ninguna modificación de código en el archivo footer.php.
El plugin es muy fácil de utilizar. En una primera ventana debemos introducir el texto del footer que queremos eliminar y en otra ventana el texto que queremos añadir.
Plugin para editar el texto del pie de página / footer
Si trabajamos con la plantilla Divi para WordPress, como ya habéis visto en apartados anteriores, tendremos un montón de opciones de personalización del footer. Además, en el siguiente apartado veremos como crear de cero un footer con WordPress Divi y el Theme builder de Divi.
Pero, esto no es siempre tan bonito. Si utilizas una plantilla gratuita y limitada en cuanto a opciones de personalización del footer, pues prácticamente no podrás hacer nada, ni siquiera cambiar el texto de los créditos del footer.
En estos casos, en los cuales utilizamos una plantilla de WordPress muy limitada en cuanto a opciones de personalización del footer, podríamos añadir un plugin que implemente opciones para la creación y personalización de un footer para la web.
Antiguamente había varios plugins de este tipo, pero poco a poco se han ido extinguiendo.
Uno bastante conocido era Footer Putter. Pero, en este momento es un plugin que lleva más de 1 año sin actualizarse y que no ha sido testado en las últimas grandes actualizaciones del núcleo de WordPress. Por lo que no es un plugin recomendable.
Al final, si utilizas una plantilla muy limitada, pues tendrías que hacer uso de los widgets de wordpress, modificar el texto de los créditos del pie y añadir código CSS para poder personalizar un poco el diseño del footer.
Para añadir código CSS a tu web y modificar el footer, sin tener que modificar los archivos de la plantilla, puedes utilizar un plugin como: “Simple custom CSS and JS”. El plugin te implementa un editor de código y permite que añadas el código CSS que quieras, sin tener que modificar absolutamente ningún archivo de la plantilla que estés utilizando.
En definitiva, yo creo que todo esto no merece la pena, mi recomendación es que uses una plantilla como Divi, que te va a permitir personalizar el footer como quieras desde la administración de WordPress.
Y esto no esto no es todo, si miras el siguiente apartado, verás como las mejores plantillas y constructores han dado una vuelta de tuerca más y gracias a lo que se conoce como Theme builders, ahora permiten construir un footer a medida desde cero.
8.- Personalizar el footer a medida con el Theme builders de Divi
El paso definitivo, en lo que se refiere a la personalización del footer de una página web, es el paso que se ha dado con los denominados Theme Builders.
Los Theme builders para WordPress permiten la personalización “TOTAL” de diferentes áreas de una página web. Entre las que está el footer o pie de página. Los Theme builders permiten la creación de áreas para formar un template o plantilla que luego podremos asignar a contenidos como páginas, entradas, fichas de producto, etc.
Para disfrutar de un theme builder, tendrás que utilizar una plantilla wordpress que disponga de esta funcionalidad o de un page builder o maquetador que implemente esta funcionalidad y se combine adecuadamente con la plantilla que estés utilizando.
En este ejemplo vamos a usar la plantilla Divi, que implementa un genial Theme builder denominado el Divi Theme Builder, que permite crear un footer personalizado con el uso de cualquiera de los módulos y estructuras del Divi builder (page builder de Divi)
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joaquín, esta muy interesante tu artículo, pero tengo una pregunta, como puedo desactivar algunos de los iconos de las redes sociales en la plantilla de divi, especificamente en los creditos de redes sociales, ya que por al activar el chec, pues los activa todos.
me puedes escribir al correo.
Muchas gracias, un saludo.
Buenas Rigoberto.
Desde «Divi > opciones del tema» puedes establecer que redes sociales quieres que se muestren y cuales no. Si quieres más y mejor, ya sabes que tengo un super curso de DIVI. Te invito a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Gracias Joaquín, lo seguire mirando.
Un saludo.
Buenas.
como te decía, esa opción la tienes en «Divi > Opciones del tema». Ahí, puedes activar y desactivar los iconos de redes sociales.
un saludo
¡Excelente explicación!
Voy a trabajarlo. Espero no tener dudas, pero sí llegaran a surgir, te las haré saber.
Saludos.
Holaa, tengo un par de dudas…una es que quiero saber cómo me puedo poner el newsletter con el tic de la política de privacidad q no lo encuentro! He probado bloom pero no me acopla en el footer y no puedo modificarlo, y otra es poner foto principal más grande, que me sale súper pequeña y necesito sea grande para exponer el producto! Graciiiias
Hola Carla.
1.- En este post se habla de como añadir la casilla del checkbox con Bloom y Mailchimp
2.- En el post mencionado antes se usa un radio button. En mis cursos online, tengo un curso de bloom y mailchimp para hacerlo con un checkbox que sería lo ideal. Aquí, puedes ver todos los cursos: https://cursotiendaonline.com , ya sabes que puedes acceder a TODOS por solo 10 €/mes. Además, incluye soporte.
3.- El formulario de bloom se puede poner en el footer, ya que se pueden insertar con un shortcode
Hola Joaquín! Tengo una duda en cuanto a cómo poner en la parte inferior del menú footer los logos que indican las formas de pago ( en el caso de mi tienda, pago con tarjeta(redsys) y transferencia bancaria así como el certificado de seguridad ssl. ¿ Me podrías indicar cómo hacerlo?
Gracias de antemano!
Hola Gema.
Puedes incluir imágenes en el footer a través de los widgets del footer. Puedes usar el widget de imágen
Hola Joaquín,
Hay manera de hacer que la barra inferior de los créditos sea más fina?
Gracias
Hola Silvia.
No hay opción en los ajustes de la plantilla para personalizar la altura de la barra de créditos
hola joaquín recien encuentro tu blog, soy principiante del diseño en wordpress, me gusta mucho solo que no se mucho d ello y me sofoca un poco ya que quiero hacer muchas cosas en el blog q estoy trabajando y aún me falta mucho por saber y aprender, en estos momentos estoy en la parte de diseño del footer donde he aprendido mucho de ello aqui en tu blog. Gracias por ser tan profesional y explicito en tus notas.
Hola Lianet,
Me alegro que este post sobre el footer te haya sido de ayuda.
Aquí te dejo un enlace al curso gratis WordPress, por si te es de interés.
Un saludo
Hola Joaquín! Me gustaría poner un enlace al aviso legal, a la política de cookies y a la política de privacidad en el pie de página, tal y como tienes tú, pero no sé come crear el enlace. Muchas gracias!
Hola Iria,
En este post tienes como modificar los créditos en Divi y como añadir enlaces.
Échale un vistazo y me cuentas.
Hola Joaquin muy buen articulo tengo una pregunta en el pie de pagina (créditos) e querido que me coloque el año automáticamente y lo e intentado hacer con código html pero no me a salido no se si me puedes ayudar o explicar que código puedo usar
Buenas,
El problema es que con HTML yo creo que no se puede hacer. Ha de ser con PHP o Javascript, y eso complica la cosa.
Aquí te dejo dos enlaces que hablan del tema por si te puede ser de interés:
1.- How to update the current year in the footer of your website
2.- How To Add a Self Updating Footer Copyright Year in Divi + A Free Child Theme That Has it Built In!
Muy buen artículo claro que sí!! Es el códice para los que quieran crear un footer y usen o no Divi NO sepan como aclararse la cabeza para realizarlo.
Enhorabuena Joaquin 🙂
Muchas gracia por tus palabras Rubén,
se agradecen mucho estos ánimos
Hola mil disculpas por la pregunta de repente te parecerá absurda, pero la verdad que estoy nuevita en esto de las webs y no se si estoy metiendo las 4. Si yo coloco contenido en mi footer que se repite en todas mi paginas no se considera como contenido repetido. Des ya te agradezco por tu articulo y comentarios.
Hola Celia,
En el footer no deben haber en mi opinión contenido de texto encaminado al posicionamiento web. El texto que se debe poner en el footer debe ser muy general y sin palabras clave, ya que como tu dices ese texto aparece en todas las páginas de la web.
Es decir, si yo quiero trabajar en la home la keyword «clínica dental Murcia», esa keyword no la debo poner en el footer sino en el contenido de la home.
Muchas gracias por la respuesta.
Aparte de felicitarte quería hacerte una consultilla, y es que yo trabajo con la plantilla divi, pero es un rollo que en diferentes navegadores no se ve igual la pagina, los espacios entre secciones se agrandan, otras cosas se estrechan…en fin un poco feo, luego en el móvil también se ve un poco mal algunas cosas..
He leido y parece que esto es normal, que cada navegador interpreta el código de una manera. Y segun parece hay que tocar codigo y entender de este tema para poder dejar la cosa fina, yo por supuesto no me voy a embarcar en tema código que ya llevo bastante de momento en aprendizaje (premiere, youtube, wordpress, photoshop), que te digo que no sepas.
Bueno si puedes dame tu opinion de si tienes constancia sobre el tema y si realmente tengo que contratar algun dia a un profesional que me deje este tema fino, yo pensaba que divi no me iba a hacer estas cosas que el codigo estaba muy perfeccionado.
en tu página tienes dos menus arriba de la pagina, uno es el de cabecera que es facil de configurar pero el que está más arriba si quiero meter algunos enlaces como tienes tú, como se hace esto, no he encontrado documentación clara, hay ejemplos en youtube pero no concretamente de añadir enlaces.
Hola Sebastián,
gracias por las felicitaciones,
1.- Cada navegador web interpreta el código css de una manera. Aunque existe una normativa para regularizar esto, no todos la cumplen y el que menos es Internet Explorer que hace un poco lo que le da la gana.
También existen cambios de interpretación de CSS conforme se van realizando actualizaciones de los navegadores web. Por lo que es importante disponer siempre de los navegadores actualizados a la última versión para ver como se ve nuestra web realmente. Existen versiones antiguas de internet explorer en los que es posible que ni se véa una web wordpress con una determinada plantilla.
Controlar una web para que aparezca como tu quiere en todos los navegadores y en todas sus versiones es completamente IMPOSIBLE, da igual que plantilla utilices y el código que modifiques.
En definitiva, esto es algo que pasa y que en teoría cada vez los cambios entre los diferentes navegadores deben ser más pequeños, pero nunca vas a poder controlar si una persona usa un navegador con una versión antigua.
En definitiva, esto no es un problema de plantilla sino de navegadores. Claro, cuanto más efectos tenga una plantilla más diferencias puedes encontrar. Si usas una plantilla gratuita en la cual no se puede cambiar apenas nada, también habrá menos diferencias de un navegador a otro.
2.- En cuanto a lo del menú de arriba. Divi lo denomina menú superior. Para la construcción de ese menú tendrás que crearlo en Apariencia > Menús y marcar el checkbox para que se muestre en la zona de menú superior.
Para el diseño tendrás que ir a Divi > Personalizador de temas > Cabecera y navegación > Barra de menú secundario
Hola Joaquin, me ha encantado tu explicacion, pero no he visto claro como puedo poner un acceso al «politica privavidad» en el footer. Uso Divi
Gracias por adelantado
Hola Toni,
Puedes utilizar el widget de editor visual que proporciona el plugin Black Studio TinyMCE Widget que se menciona en el post para ponerlo en el footer.
Simplemente tienes que poner el texto «política privacidad» y ponerle un enlace a la página de política de privacidad
Hola Joaquín tengo una duda y creo que me podrías ayudar fácilmente con tu sabiduría, resulta que estoy actualizando el contenido de mi web y me encuentro que en algunas publicaciones me crea una separación entre el cuerpo y el pie de la web, por ejemplo: https://murciapie.es/2017/09/sl-mu-1-sendero-ricardo-codorniu-sierra-espuna.html
Espero me puedas echar una mano por que ando algo perdido, muchas gracias.
Hola Isidoro,
Echa un vistazo a esta info a ver si te sirve:
https://divi.help/threads/white-space-above-divi-footer.4151/
https://siteorigin.com/thread/remove-space-above-footer/
https://optimusdivi.com/css-snippet-remove-extra-space-divi-page-builder-blog-post/
Me gustaría también a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc.
Hola Joaquín! Mil gracias por todos tus posts, son de gran ayuda!! Verás, he creado un menú en el footer y quisiera saber si es posible que quede centrado, igual que el superior, ya que queda alineado a la izquierda. Muchas gracias!!
Hola Laia,
no existe ninguna opción en Divi para centrar el menú del footer. Tendrías que hacerlo a través de la modificación de código, busca en google «center menu footer divi» y te saldrán varias páginas que explican como hacerlo. Tendrás que ir probando.
Puedes probar con este que he encontrado por ahi:
/* Center Footer Menu */#footer-info,#footer-info a {float: none;text-align: center;}Un saludo