Este footer se encuentra al final de todas las páginas del sitio web y generalmente contiene información importante y enlaces relevantes para los usuarios. Su diseño y contenido pueden variar según el sitio web específico, pero típicamente cumple varias funciones:
1. Navegación adicional: El área de widgets dentro del pie de página (footer) puede contener enlaces de navegación adicionales que no están incluidos en el menú principal del sitio. Esto permite a los usuarios acceder fácilmente a diferentes secciones del sitio web.
2. Marca y logo: La columna del medio suele contener la marca del sitio web y su logo. Esto ayuda a reforzar la identidad visual del sitio y proporciona a los usuarios una forma rápida de identificar la marca.
3. Enlaces sociales: La sección de redes sociales permite a los usuarios conectarse con el sitio web a través de plataformas sociales como Facebook, Twitter, Instagram, etc. Esto puede incluir iconos enlazados a los perfiles sociales del sitio.
4. Información legal y de contacto: El footer a menudo incluye enlaces a páginas importantes como la política de privacidad, términos de servicio, contacto y otros avisos legales relevantes para el sitio web.
5. Separador visual: El div con la clase “border-bottom-footer” actúa como un separador visual entre el contenido principal de la página y el pie de página, ayudando a delimitar claramente las secciones del sitio web.}
El footer es una parte esencial del diseño web que proporciona información adicional, navegación y enlaces importantes para los usuarios, además de reforzar la identidad de la marca y ofrecer una experiencia de usuario completa en el sitio web.
En conjunto, este pie de página proporciona navegación adicional, promoción de marca y conectividad social, todo mientras cumple con las expectativas de diseño y funcionalidad de un sitio web moderno.
Archivos Usados
1.
footer.php
PHP
/includes/footer.php
Layout
1.
footer.php
PHP
/includes/footer.php
Layout
<footer class="footer-content">
<div class="container-fluid">
<div class="row g-0 footer-content__items">
<div class="col-md-3 footer-content__widget-menu">
<?php dynamic_sidebar('footer-widget-menu') ?>
</div>
<div class="col-md-6 footer-content__logo">
<?php dynamic_sidebar('footer-widget-columns') ?>
</div>
<div class="col-md-3 footer-content__widget-social">
<div class="social-item">
<?php dynamic_sidebar('footer-widget-social') ?>
</div>
<div class="footer-content__widget-social-networks">
<?php dynamic_sidebar('footer-widget-redes') ?>
</div>
</div>
<?php dynamic_sidebar('footer-widget-copyright') ?>
</div>
</div>
</footer>
<div class="border-bottom-footer"></div>
<?php wp_footer(); ?>
</body>
</html>
2.
_footer.scss
SCSS
/frontend/scss/theme/layout/_footer.scss
Styles
2.
_footer.scss
SCSS
/frontend/scss/theme/layout/_footer.scss
Styles
.footer-content {
display: flex;
justify-content: center;
align-items: center;
padding: space(0.25);
background-color: $blue-dk;
li {
color: $white;
white-space: nowrap;
margin: rem(10px);
text-align: center;
font-size: rem(15px);
@include from(m) {
text-align: right;
}
}
p,
a {
color: $white;
}
&__logo {
order: 1;
display: flex;
justify-content: center;
align-items: center;
padding: space(0.25);
@include from(m) {
padding: space(1);
order: 2;
}
img {
@include from(m) {
width: 18vw;
}
}
}
&__widget-menu {
padding: space(0.25);
order: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@include from(m) {
align-items: flex-start;
}
li {
@include from(m) {
text-align: left;
}
}
}
&__widget-social {
padding: space(0.25);
order: 3;
display: flex;
flex-direction: column;
justify-content: center;
@include from(m) {
align-items: flex-end;
}
}
&__widget-copyright {
order: 4;
p {
text-align: center;
font-size: rem(13px);
@include from(s) {
font-size: rem(15px);
}
}
}
&__widget-social-networks {
display: flex;
justify-content: center;
align-items: center;
@include from(m) {
right: 2.5vw;
}
ul {
display: flex;
}
li {
margin: rem(8px);
}
}
a {
$size: rem(40px);
&[title="twitter"],
&[title="Twitter"],
&[title="TWITTER"] {
@include imageBg("../img/icons/icono-twitter.png", $size, $size);
}
&[title="facebook"],
&[title="Facebook"],
&[title="FACEBOOK"] {
@include imageBg("../img/icons/icono-facebook.png", $size, $size);
}
&[title="instagram"],
&[title="Instagram"],
&[title="INSTAGRAM"] {
@include imageBg("../img/icons/icono-instagram.png", $size, $size);
}
}
}
.border-bottom-footer {
background: $degraded;
height: rem(10px);
}
Artículos relacionados
¿Cómo cambiar las imágenes de un producto Hesense?
Para cambiar las imágenes de productos en...