Tutorial Divi: Hacer que el logo flote superpuesto sobre la cabecera y las secciones

El truco para Divi de hoy es muy sencillo. Haremos que el logo de nuestro sitio supere la zona de cabecera y flote sobre ella y las siguientes secciones, un efecto muy chulo y que se consigue en un par de minutos.

Lo primero es abrir el Personalizador de temas desde la portada de tu web e ir a la sección Cabecera y navegación -> Formato de cabecera para elegir el llamado Por defecto. También funciona en el formato Logotipo centrado en línea pero no queda tan bien.

A continuación ve a la sección Cabecera y Navegación -> Barra de menú principal y aumenta el tamaño del elemento Logo max altura a un valor de al menos 90.

Esto no es obligatorio en realidad pero quedará mejor, y no dará problemas el efecto en distintos tamaños de navegador, porque normalmente tenemos un valor muy pequeño al estar nuestro logo comprimido en la – escasa – altura de la cabecera, algo que vamos a solucionar hoy mismo.

A continuación ve a CSS adicional, o si lo prefieres al escritorio de WordPress Divi -> Opciones del tema y añádelo al fondo, en la sección de CSS personalizado, da lo mismo. Añade el siguiente código:

Por supuesto, guarda todos los cambios.

¡Y ya está! Ahora tu bonito logotipo dejará de estar constreñido en la cabecera para flotar superpuesto libremente sobre tu contenido, pasando de algo como esto …

A esto otro …

Como podrás comprobar, el efecto quedará más lustroso si tu logo tiene formas y fondo transparente. Puedes ver el efecto aquí.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (11 votos, promedio: 4,64 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Al dejar un comentario se solicitan datos como tu correo y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad | Responsable de los datos: Fernando Tellado García | Finalidad: Gestión y moderación de comentarios | Legitimación: Tu consentimiento expreso | Destinatario: Disqus (acogido a EU-US Privacy Shield) | Derechos: Tienes derecho al derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para almacenar tu nombre, correo, IP y demás datos que dejas en los formularios de comentarios, contacto, acceso y tus preferencias de privacidad.

AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, comment_author, comment_author_email, comment_author_url, rated, gdpr, gawdp

Cookies de terceros

Usamos cookies de terceros en las que se almacenan externamente para conocer tus usos de navegación, si ya estás suscrito al boletín y los elementos compartidos en redes sociales

cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform, _ga, _gid
cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform
_ga, _gid

¿Quieres cerrar tu cuenta?

Se cerrará tu cuenta y todos los datos se borrarán de manera permanente y no se podrán recuperar ¿Estás seguro?

Pin It on Pinterest