Si quieres personalizar aún más tu tienda agregando enlaces a tu sitio web, un logo en el pie de página o links a otros recursos, este tutorial es para ti.
Te enseñaremos cómo añadir un Footer en el que podrás agregar una imágen y agregar links como este:
1. Copia el siguiente código:
<!-- FOOTER custom -->
<footer class="footer-top">
<div class="container">
<nav class="row">
<div class="col-12 col-md">
<ul class="logos">
<!-- La siguiente etiqueta corresponde a la imagen(logo)-->
<li> <a href="#" target="_blank"> <img class="logo-footer" src="#"><a/>
</ul>
</div>
<div class="col-8 col-md">
<p style="color: white">NOSOTROS</p>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#" target="_blank"> Quiénes somos</a></li>
<li><a class="text-muted" href="#" target="_blank">Contacto</a></li>
<li><a class="text-muted" href="#" target="_blank">Sitio WEB</a></li>
</ul>
</div>
<div class="col-8 col-md">
<p style="color: white">AYUDA</p>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#" target="_blank">Centro de ayuda</a></li>
<li><a class="text-muted" href="#" target="_blank">Preguntas frecuentes</a></li>
</ul>
</div>
</nav>
</div>
</footer>
<!-- FOOTER custom End -->
NOTA: Los campos en negrita podrás modificarlos agregando los textos y en los campos href="#" debes agregar los links.
2. Una vez hayas agregado tu logo, textos y links ve a Panel de Control > Ajustes > Avanzados, y pega el código en Custom before </body> code
Guarda los cambios.
3. Ahora vamos a darle los estilos. Para que quede tal como en la imágen que te mostramos al inicio de este instructivo, el código utilizado es:
/*--- FOOTER --*/
.footer-top {
background: #000000;
padding: 30px 0 20px;
width: 100%;
margin-bottom: -72px;
}
.footer-nav ul.pages { list-style:none; padding:0px; }
.footer-top .footer-nav ul.pages li { padding:5px 0px;}
.footer-top .footer-nav ul.pages a:hover { color:red; text-decoration:none; font-weight: bold;}
.logos li{
list-style: none;
}
.logos img{
height: 110px;
width: 110px;
}
/*--- end FOOTER --*/
NOTA: Podrás modificar los colores y apariencia editando los valores de cada etiqueta. Para esto es necesario que tengas conocimiento en CSS o que cuentes con algún especialista que pueda ayudarte.
De acuerdo al plan que tengas contratado deberás ingresar el código CSS en diferentes lugares, pero no te preocupes que funciona en ambos de la misma manera.
Ambos se configuran desde Panel de control > Ajustes > Avanzados
En el caso que cuentes con el recuadro de CSS Personalizado deberás colocar el código CSS tal como te lo compartimos arriba:
Si no tienes el recuadro de CSS Personalizado, deberás agregar la etiqueta adicional <style> código </style> y colocar el código CSS en Custom before </head> code:
📌 Solo en este caso el código sería:
<style>
.footer-top {
background: #000000;
padding: 30px 0 20px;
width: 100%;
margin-bottom: -72px;
}
.footer-nav ul.pages { list-style:none; padding:0px; }
.footer-top .footer-nav ul.pages li { padding:5px 0px;}
.footer-top .footer-nav ul.pages a:hover { color:red; text-decoration:none; font-weight: bold;}
.logos li{
list-style: none;
}
.logos img{
height: 110px;
width: 110px;
}
</style>
Guarda los cambios.
¡Listo! Ya creaste tu Footer personalizado.
Puede que alguna etiqueta tenga algún error y es por eso que el código no funciona. Para solucionarlo revisa que el código esté correctamente y tal cual como te lo compartimos en este tutorial.
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].