En esta clase, vamos a centrarnos en la parte del footer o pie de página. Es un proceso muy similar al que seguimos con la cabecera, por lo que si ya has visto la clase anterior, entenderás fácilmente este contenido.
Configuración inicial
- Acceder al personalizador: Vamos a
Apariencia > Personalizar.
- Ubicar el pie de página: Navegamos al apartado de
Maquetador de pies de página.
Modificación del diseño del footer
Sección de Copyright
-
Hacemos clic en la sección de Copyright.
-
Personalizar texto:
- Introducimos el contenido deseado, por ejemplo: "© 2022 Mi Sitio Web".
- Publicamos y recargamos para visualizar los cambios.
-
Ajustes de diseño:
- Cambiamos el color de fondo a blanco.
- Configuramos el margen inferior a
48px (3rem) para mayor separación.
-
Colores y accesibilidad:
- Ajustamos el color del texto para mejorar la visibilidad.
- Recomendamos usar un color más oscuro para cumplir con las normas de accesibilidad.
Redes sociales
- Seleccionamos el widget de
Social.
- Agregamos las redes sociales con sus enlaces:
- Twitter: [Enlace correspondiente]
- YouTube: [Enlace correspondiente]
- GitHub: [Enlace correspondiente]
- Diseño de los íconos:
- Color de los íconos:
#XXX (reemplazar por el código de color deseado).
- Tamaño de los íconos:
24px.
- Espaciado entre íconos:
1.5rem.
Configuración de un menú en el footer
- En el maquetador, seleccionamos el bloque para el menú.
- Cambiamos el diseño a una sola columna.
- Creamos un nuevo menú en
Apariencia > Menús:
- Añadimos enlaces como "Inicio", "Acerca de", "Contacto".
- Asignamos este menú al pie de página.
- Volvemos al personalizador y configuramos el fondo del bloque a blanco y eliminamos bordes innecesarios.
Ajustes finales
- Inspeccionamos el diseño para identificar márgenes o rellenos automáticos.
- Eliminamos configuraciones no deseadas (por ejemplo, alturas o paddings predeterminados de Astra).
- Definimos márgenes y rellenos uniformes para que todas las secciones del footer mantengan coherencia.
Conclusión
Con estas configuraciones, el footer quedará completamente personalizado y se asemejará al diseño que buscamos. Recuerda que siempre puedes volver al personalizador para realizar ajustes adicionales o adaptar el diseño según tus necesidades.
