Érase una vez, cuando publiqué la entrada dedicada al lanzamiento del tema Extra, de Elegant Themes, había mencionado que quizá compartiría algunos tutoriales “en un futuro cercano”. Bueno, aunque no haya sido cercano, el futuro ya llegó 😉
Hoy vamos a aprender a darle una apariencia renovada al aburrido pie de página de Extra.
Extra – Pie de página predeterminado
Ya es sabido que con una de las actualizaciones de la versión 3, y luego de los infinitos reclamos por parte de los usuarios, los créditos del pie de página de Divi son por fin editables desde el Personalizador de WordPress (una opción algo limitada, pero necesaria).
En lo que a Extra concierne, los muchachos de Elegant Themes estuvieron un poco más haraganes, y no reprodujeron este cambio en el tema hermano destinado al rubro magazine.
Con un poco de ingenio y algunas líneas de CSS, vamos a personalizar la barra del pie de página en dos variantes sencillas, pero bastante diferentes de la apariencia predeterminada. Este tutorial les vendrá bien a aquellos usuarios que no se animan a usar temas hijos y prefieren aprovechar la herramienta CSS personalizado de las opciones del tema.
Pie de página variante 1
Extra – Pie de página personalizado, variante 1
Aquí vamos a usar una imagen de logo para reemplazar los créditos predeterminados, y los iconos de las redes sociales con fondos circulares de color.
Para empezar, ocultamos el texto de los créditos:
#footer-info {
text-indent: -99999px;
}Luego, tendremos que subir una imagen a la biblioteca de medios, que usaremos como logo. Las recomendaciones para crear esta imagen son las siguientes:
- Crearla con un ancho no mayor de 280 píxeles para su óptima visualización en todos los dispositivos.
- Guardarla en PNG transparente.
Una vez subida, copiaremos en algún lugar accesible la ruta completa de la imagen, que será algo así:
http://urldelsitio.com/wp-content/uploads/2017/02/logo-extra.png
La imagen que creamos para este tutorial es de 119x32px.
Ahora, vamos a agregar a #footer-info el siguiente código en CSS personalizado:
text-align: center;
background: url('https://urldelsitio.com/wp-content/uploads/2017/02/logo-extra.png'); /* ruta completa a la imagen */
background-size: contain;
height: 32px; /* altura de la imagen png */
width: 119px; /* ancho de la imagen png */
margin: auto;
Con lo cual el código completo será:
#footer-info {
text-indent: -99999px;
text-align: center;
background: url('https://urldelsitio.com/wp-content/uploads/2017/02/logo-extra.png');
background-size: contain;
height: 32px;
width: 119px;
margin: auto;
}
Como vemos que la parte del menú y los iconos queda un tanto desalineada, lo corregiremos con el siguiente código:
#footer-nav {
margin-top: 3px;
}Recordemos que el valor en píxeles dependerá de la altura de la imagen (cuanto más alta la imagen, mayor el valor del margen).
Ahora vamos a darles estilo a los enlaces de las redes sociales. Usaremos el siguiente código CSS para controlar el tamaño y alineación de los iconos:
#footer-nav ul.et-extra-social-icons a.et-extra-icon {
width: 30px;
height: 30px;
line-height: 30px;
}
Y por último, les daremos los colores correspondientes y el fondo circular. En el ejemplo usamos Facebook, Twitter, Google+ e Instagram. Los códigos serán los siguientes:
#footer-bottom li.facebook {
background: #3B5998;
border-radius: 999px;
}
#footer-bottom li.twitter {
background: #00aced;
border-radius: 999px;
}
#footer-bottom li.googleplus {
background: #dd4b39;
border-radius: 999px;
}
#footer-bottom li.instagram {
background: #c13584;
border-radius: 999px;
}
Con esto tenemos el pie de página como lo vemos aquí:
Para el resto de las redes sociales y RSS, los códigos son los siguientes:
#footer-bottom li.pinterest {
background: #cb2027;
border-radius: 999px;
}
#footer-bottom li.tumblr {
background: #32506d;
border-radius: 999px;
}
#footer-bottom li.dribbble {
background: #ea4c89;
border-radius: 999px;
}
#footer-bottom li.stumbleupon {
background: #EB4924;
border-radius: 999px;
}
#footer-bottom li.youtube {
background: #cd201f;
border-radius: 999px;
}
#footer-bottom li.rss {
background: #ff6600;
border-radius: 999px;
}
En caso de querer un color de fondo uniforme para todas las redes sociales, usar el siguiente código:
#footer-bottom li.facebook,
#footer-bottom li.twitter,
#footer-bottom li.googleplus,
#footer-bottom li.instagram,
#footer-bottom li.pinterest,
#footer-bottom li.tumblr,
#footer-bottom li.dribbble,
#footer-bottom li.stumbleupon,
#footer-bottom li.youtube,
#footer-bottom li.rss {
background: #409D75; /* color para todos los iconos */
border-radius: 999px;
}
Por último, para darle un toque final a los iconos al pasar el puntero, pegaremos el siguiente código:
#footer-nav li {
transition: .3s ease;
}
#footer-nav li.facebook:hover,
#footer-nav li.twitter:hover,
#footer-bottom li.googleplus:hover,
#footer-bottom li.instagram:hover,
#footer-nav li.youtube:hover,
#footer-bottom li.pinterest:hover,
#footer-nav li.tumblr:hover,
#footer-nav li.dribbble:hover,
#footer-nav li.stumbleupon:hover,
#footer-bottom li.rss:hover {
background: #999; /* puede ser cualquier color */
}
El color puede ser cualquiera; el menú puede no estar presente, y el resto (color de fondo, tipografía del menú, etc.) se podrá manejar desde el Personalizador, como siempre:
Extra – Color de fondo personalizado al pasar el puntero
Pie de página variante 2
Extra – Pie de página personalizado, variante 2
Esta apariencia con los elementos centrados es muy fácil de lograr y solo requiere algunas líneas más de CSS.
La parte del logo es prácticamente la misma, nada más adaptaremos los tamaños a los de la imagen más grande (la del ejemplo: 280x75px):
#footer-info {
text-indent: -99999px;
text-align: center;
background: url('https://urldelsitio.com/wp-content/uploads/2017/02/logo-extra.png');
background-size: contain;
height: 75px; /* altura de la imagen del logo */
width: 280px; /* ancho de la imagen del logo */
margin: auto;
}
También usaremos el mismo código para los iconos en color:
#footer-bottom li.facebook {
background: #3B5998;
border-radius: 999px;
}
#footer-bottom li.twitter {
background: #00aced;
border-radius: 999px;
}
#footer-bottom li.googleplus {
background: #dd4b39;
border-radius: 999px;
}
#footer-bottom li.instagram {
background: #c13584;
border-radius: 999px;
}
#footer-bottom li.pinterest {
background: #cb2027;
border-radius: 999px;
}
#footer-bottom li.tumblr {
background: #32506d;
border-radius: 999px;
}
#footer-bottom li.dribbble {
background: #ea4c89;
border-radius: 999px;
}
#footer-bottom li.stumbleupon {
background: #EB4924;
border-radius: 999px;
}
#footer-bottom li.youtube {
background: #cd201f;
border-radius: 999px;
}
#footer-bottom li.rss {
background: #ff6600;
border-radius: 999px;
}
#footer-nav li {
transition: .3s ease;
}
#footer-nav li.facebook:hover,
#footer-nav li.twitter:hover,
#footer-nav li.youtube:hover,
#footer-bottom li.googleplus:hover,
#footer-bottom li.pinterest:hover,
#footer-nav li.tumblr:hover,
#footer-nav li.dribbble:hover,
#footer-nav li.stumbleupon:hover,
#footer-bottom li.rss:hover,
#footer-bottom li.instagram:hover {
background: #999; /* puede ser cualquier color */
}
Como vamos a usar unos iconos algo más grandes, este es el código que necesitaremos (los valores en píxeles aplican para la imagen del ejemplo, pero pueden ajustarse al tamaño que se requiera):
#footer-nav ul.et-extra-social-icons a.et-extra-icon {
width: 45px;
height: 45px;
line-height: 45px;
font-size: 18px;
}
Y por último, los códigos para centrar los iconos y el menú:
#footer-nav ul, #footer-info {
display: block;
}
#footer-nav ul.et-extra-social-icons {
margin: 0;
}
#footer-info, .et-extra-social-icons, #footer-nav {
float: none;
text-align: center;
}
#footer-nav ul {
margin-bottom: 20px;
}
#footer-bottom {
padding: 30px 0;
}
Para terminar, si tenemos más de cuatro iconos, en los dispositivos móviles tendremos que evitar que queden pegados al tomar más de una línea. Así que este será el código necesario:
@media (max-width: 360px) {
#footer-nav li:last-child {
margin: 10px initial !important;
}
#footer-nav li {
margin: 10px 11px 0 0 !important;
}
}
Recomendación: usar solo los códigos CSS para las redes sociales que estén visibles.
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Excelente tutorial, en mi caso use background-image: para que funcionara correctamente, pero sin el tutorial no hubiera sabido como hacerlo. Muchas Gracias