Pie de Página

Actualizado el 14/03/2024

El pie de página es una herramienta muy útil para facilitar la navegación del usuario hacia recursos clave del sitio web, no sólo para mostrar información de contacto, información legal o redes sociales.

En este sentido, una recomendación general es establecer enlaces a información recurrente o de especial relevancia para los usuarios del sitio web.

Siempre debe contar con una referencia visual a la marca de la ULPGC.

<> Código
× Ocultar Código
  • HTML
  • JS
<footer>
    <div class="ulpgcds-footer">       
        <div class="ulpgcds-footer__top wrapper">
            <div class="row">
            <div class="col-6">
                <div class="footer-logo">  </div>
                <div class="row">
                    <div class="col-6">
                    <h3>Datos contacto 1</h3>
                    <p>Esto es un ejemplo</p>
                    <p>Tlf: 111111111</p>
                    </div>
                    <div class="col-6">
                    <h3>Datos contacto 2</h3>
                    <p>Email: contacto@ulpgc.es</p>
                    </div>      
                </div>                 
                <div class="ulpgcds-footer__social">
                  <h3>Síguenos en</h3>
<ul>
<li class="twitter"><a href="https://twitter.com/ulpgc" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-twitter"></i><span>Twitter</span></a></li>
<li class="flickr"><a href="http://www.flickr.com/photos/ulpgc" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-flickr"></i><span>Flickr</span></a></li>
<li class="facebook"><a href="http://www.facebook.com/pages/Ulpgc-Para-Ti/160435343978326?sk=wall" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-facebook"></i><span>Facebook</span></a></li>
<li class="youtube"><a href="http://www.youtube.com/ulpgc" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-youtube"></i><span>YouTube</span></a></li>
<li class="linkedin"><a href="http://www.linkedin.com/groups?mostPopular=&amp;gid=148332" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-linkedin"></i><span>LinkedIn</span></a></li>
<li class="instagram"><a href="https://www.instagram.com/ulpgc_para_ti" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-instagram"></i><span>Instagram</span></a></li>
</ul>
                </div> 
            </div>
            <div class="col-6">
                <div class="row">
                    <div class="col-4">
                        <h3>Legal</h3>
                        <ul>
                             <li><a href="https://www.ulpgc.es/avisio-legal">Aviso legal</a></li>
                             <li><a href="https://www.ulpgc.es/">Política privacidad</a></li>
                             <li><a href="https://www.ulpgc.es/">Cookies</a></li>
                             <li><a href="https://www.ulpgc.es/">Accesibilidad </a></li>
                        </ul>
                    </div>
                    <div class="col-4">
                        <h3>Servicios</h3>
                        <ul>
                             <li><a href="https://www.ulpgc.es/">Servicio 1</a></li>
                             <li><a href="https://www.ulpgc.es/">Servicio 2</a></li>
                             <li><a href="https://www.ulpgc.es/">Servicio 3</a></li>
                             <li><a href="https://www.ulpgc.es/">Servicio 4</a></li>
                        </ul>    
                    </div>
                    <div class="col-4">
                        <h3>Otro bloque</h3>
                        <ul>
                             <li><a href="https://www.ulpgc.es/">Enlace 1</a></li>
                             <li><a href="https://www.ulpgc.es/">Enlace 2</a></li>
                             <li><a href="https://www.ulpgc.es/">Enlace 3</a></li>
                        </ul>   
                    </div>
                </div>
            </div>
            </div>     
        </div>

        <div class="ulpgcds-footer__bottom">
            <div class="wrapper">
                <p>© Universidad de Las Palmas de Gran Canaria · ULPGC</p>             
            </div>
        </div>
    </div>
</footer> 

Versión con otras marcas

Existe la posibilidad de añadir logos de patrocinadores o colaboradores en el pie de página. En este caso, los logos podrán disponerse entre la información principal de contacto y bloques de enlaces y el copyright de la ULPGC.

<> Código
× Ocultar Código
  • HTML
  • JS
<footer>
    <div class="ulpgcds-footer">       
        <div class="ulpgcds-footer__top wrapper">
            <div class="row">
            <div class="col-6">
                <div class="footer-logo">  </div>
                <div class="row">
                    <div class="col-6">
                    <h3>Datos contacto 1</h3>
                    <p>Esto es un ejemplo</p>
                    <p>Tlf: 111111111</p>
                    </div>
                    <div class="col-6">
                    <h3>Datos contacto 2</h3>
                    <p>Email: contacto@ulpgc.es</p>
                    </div>      
                </div>                 
                <div class="ulpgcds-footer__social">
                  <h3>Síguenos en</h3>
<ul>
<li class="twitter"><a href="https://twitter.com/ulpgc" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-twitter"></i><span>Twitter</span></a></li>
<li class="flickr"><a href="http://www.flickr.com/photos/ulpgc" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-flickr"></i><span>Flickr</span></a></li>
<li class="facebook"><a href="http://www.facebook.com/pages/Ulpgc-Para-Ti/160435343978326?sk=wall" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-facebook"></i><span>Facebook</span></a></li>
<li class="youtube"><a href="http://www.youtube.com/ulpgc" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-youtube"></i><span>YouTube</span></a></li>
<li class="linkedin"><a href="http://www.linkedin.com/groups?mostPopular=&amp;gid=148332" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-linkedin"></i><span>LinkedIn</span></a></li>
<li class="instagram"><a href="https://www.instagram.com/ulpgc_para_ti" class="ulpgcds-btn ulpgcds-btn--ghost ulpgcds-btn--icon" target="_blank"><i class="ulpgcds-btn__icon icon-instagram"></i><span>Instagram</span></a></li>
</ul>
                </div> 
            </div>
            <div class="col-6">
                <div class="row">
                    <div class="col-4">
                        <h3>Legal</h3>
                        <ul>
                             <li><a href="https://www.ulpgc.es/avisio-legal">Aviso legal</a></li>
                             <li><a href="https://www.ulpgc.es/">Política privacidad</a></li>
                             <li><a href="https://www.ulpgc.es/">Cookies</a></li>
                             <li><a href="https://www.ulpgc.es/">Accesibilidad </a></li>
                        </ul>
                    </div>
                    <div class="col-4">
                        <h3>Servicios</h3>
                        <ul>
                             <li><a href="https://www.ulpgc.es/">Servicio 1</a></li>
                             <li><a href="https://www.ulpgc.es/">Servicio 2</a></li>
                             <li><a href="https://www.ulpgc.es/">Servicio 3</a></li>
                             <li><a href="https://www.ulpgc.es/">Servicio 4</a></li>
                        </ul>    
                    </div>
                    <div class="col-4">
                        <h3>Otro bloque</h3>
                        <ul>
                             <li><a href="https://www.ulpgc.es/">Enlace 1</a></li>
                             <li><a href="https://www.ulpgc.es/">Enlace 2</a></li>
                             <li><a href="https://www.ulpgc.es/">Enlace 3</a></li>
                        </ul>   
                    </div>
                </div>
            </div>
            </div>     
        </div>

        <div class="ulpgcds-footer__medium">
            <div class="wrapper">
                    <ul><li class="parque_cientifico"><a href="http://pct.ulpgc.es" target="_blank"><span>Parque Científico Tecnológico Universidad de Las Palmas de Gran Canaria</span></a></li>
<li class="consejo_social"><a href="http://www.csocial.ulpgc.es" target="_blank"><span>Consejo Social Universidad de Las Palmas de Gran Canaria</span></a></li>
            </div>
        </div>

        <div class="ulpgcds-footer__bottom">
            <div class="wrapper">
                <p>© Universidad de Las Palmas de Gran Canaria · ULPGC</p>             
            </div>
        </div>
    </div>
</footer>