É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

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 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('http://urldelsitio.com/wp-content/uploads/2017/02/logo-extra.png'); /* ruta completa a la imagen */background-size: contain;
height: 32px; /* alto 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('http://urldelsitio.com/wp-content/uploads/2017/02/logo-extra.png');
    background-size: contain;
    height: 32px;
    width: 119px;
    margin: auto;
}

Extra - Pie Variante 1 (2)

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á del alto 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í:

Extra - Pie Variante 1

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;
}

Extra - Pie Variante 1 (3)

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 - Pie Variante 1 (4)

Extra – Color de fondo personalizado al pasar el puntero

Pie de página variante 2

Extra - Pie 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('http://urldelsitio.com/wp-content/uploads/2017/02/logo-extra.png');
    background-size: contain;
    height: 75px; /* alto 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;
}
}

Extra - Pie de página personalizado

Recomendación: usar solo los códigos CSS para las redes sociales que estén visibles.

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)