No sé si conoces el Framework de Elegant Themes DIVI. Elegant Themes es una empresa que se dedica desde hace muchos años a crear plantillas Premium y plugins para WordPress con muy buenos resultados. Yo he usado muchas de ellas en proyectos como estos:

Una de las cosas que más me gustó fue la estupenda comunidad que empezaba a surgir en Internet y que aportaba sus trucos y consejos para customizar DIVI. Hoy voy a aprovecharme del conocimiento de uno de ellos para contaros, de forma muy sencilla, cómo darle un aire diferente al logo de vuestra web hecha con DIVI.

ATENCIÓN:

Antes de tocar nada, te aconsejo dos cosas.

Por un lado, crea un theme Child de tu DIVI, si es que no lo has hecho ya. Si no sabes cómo hacerlo, puedes ver un sencillo tutorial aquí.

Lo segundo, haz una copia de seguridad de todo. Vamos a tocar algunas cosas “sensibles”, nada grave, no te preocupes. Pero es mejor prevenir que curar, así que haz una copia de respaldo tanto de tu instalación como de tu base de datos. Lo ideal es que estos cambios no los hagas en la versión “real”, sino en una copia que puedes tener instalada en local, por ejemplo.

EMPEZAMOS:

Para hacer esta prueba, he hecho una instalación en blanco, sin contenido, he instalado DIVI, he creado un child y he modificado un poco el aspecto:

Modificar el logo con CSS en DIVI_1

Ahora vamos a subir el nuevo logo. En mi caso es este:

Modificar el logo con CSS en DIVI_0Bien, vamos a hacer un poquito más grande el logo, para que se vea mejor. Mi logo tiene unas dimensiones de 260×100 px.  La clase que llama al logo es #logo dentro de et_fixed_nav, así que este sería el fragmento CSS que vamos a necesitar:

.et_fixed_nav #logo {
max-height: 100px; }

Lo añadimos al style.css de nuestro child y guardamos. Ahora vemos que el logo queda más grande.

Modificar el logo con CSS en DIVI_2

Al cambiar el tamaño del logo, hemos perdido el efecto de redimensionamiento que tiene por defecto el logo de DIVI al hacer scroll con la página. Si queréis recuperar ese efecto, hay que hacer una modificación:

.et-fixed-header #logo {
max-height: 75px !important;
padding:0 !important;
}

Modificar el logo con CSS en DIVI_3

Vale, con esto hemos recuperado el efecto de redimensionamiento del logo. Si queréis variar la velocidad del mismo, podéis hacerlo con esto:

#logo {
transition: all 0.5s ease-in-out;
}

Cambiando 0.5 por el valor que queráis, podéis conseguir un efecto más o menos rápido. Cuanto menor sea el número más rápidamente se producirá la transición.

Vamos a arreglar un par de cosas más. Como hemos ampliado el tamaño del logo, ahora la zona destinada al menú se ve demasiado grande, con el texto descentrado. Podemos arreglar esto corrigiendo el menú o cambiando un poco más el logo. Lo que yo voy  a hacer es subir el logo y reducir el espacio del menú de forma que el logo sobresalga un poquito por debajo de esa zona. Quiero que la punta de la flecha de mi logo quede por debajo del área de menú.

Lo primero que voy a hacer es subir la posición de logo con respecto al menú. Para eso, voy a añadir el siguiente código:

#logo {
position: relative;
top:-25px;
}

Modificar el logo con CSS en DIVI_5

Si añadís esto directamente a vuestro código, veréis que el espacio superior del logo se ve reducido. Sin embargo, al desplazar la página ocurre que el logo se pega demasiado a la parte superior, esto lo he arreglado añadiendo lo siguiente al efecto que hemos hecho antes para redimensionar el logo en el desplazamiento:

.et-fixed-header #logo {
position: relative;
top:-15px;
}

Modificar el logo con CSS en DIVI_6

Puedes jugar con la posición del logo y los valores anteriores para lograr distintos efectos al desplazarlo.

Ahora nos queda la segunda parte. Vamos a hacer el tamaño del menú más pequeño para que el logo sobresalga por abajo. Sólo tenemos que cambiar el valor relative de la propiedad position del código anterior. Quedaría así:

#logo {
position: absolute;
top:-18px;
}

Modificar el logo con CSS en DIVI_7

¡Y ya está! Si queréis ver un ejemplo en funcionamiento podéis verlo aquí:

 

hermes, una web corporativa diferente

Este sitio usa cookies. Si continúa navegando da su consentimiento para el uso de dichas cookies y la aceptación de nuestra política de cookies. ACEPTAR

Aviso de cookies

Pin It on Pinterest

Share This