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

Logotipo Divi superpuesto

A continuación se mostrarán varias opciones para personalizar la barra de menú principal del tema Divi. Seleccione la opción para ocultar la imagen del logotipo. A continuación, pulse Publicar. El logo Divi será eliminado del menú primario.

Es importante tener en cuenta que el logotipo Divi reaparece cuando se desplaza por la página a menos que también realice la siguiente configuración. Vuelve a la sección Encabezado y navegación y selecciona Configuración de navegación fija.

Oh, señor, espera. Hay otro lugar donde desea ocultar el logotipo de Divi. Cuando redimensionas la pantalla a un tamaño más pequeño o miras tu sitio en un dispositivo móvil, entonces el logo Divi aparecerá por defecto. En el personalizador de temas, puede cambiar esta configuración en Estilos móviles.

Ahora ha completado los 3 pasos para ocultar el logotipo Divi Este es el proceso para no tener un logotipo en absoluto. Pero ¿qué pasa si sólo desea cambiar el logotipo de una imagen de su propia? ¿O por un texto propio, como tu nombre?

¿Cómo añado un encabezado global en Divi?

Abrir el Theme Builder

Dado que estamos construyendo un encabezado global en este ejemplo, vamos a navegar al constructor de temas, que se puede encontrar en el menú Divi en WordPress. Selecciona Add Global Header, y luego Build Global Header.

¿Cómo puedo ocultar el logotipo de Divi en mi cabecera?

En el personalizador de temas, vaya a Encabezado y navegación: En la sección Encabezado y navegación, selecciona Barra de menú principal: A continuación, se mostrarán varias opciones para personalizar la barra de menú principal del tema Divi. Selecciona la opción para ocultar la imagen del logo.

  WordPress para iOS 3-4 ¡llegan los avisos!

¿Cómo personalizo mi menú de cabecera Divi?

Personalizar el encabezado y la navegación de su tema

Para comenzar a personalizar el encabezado y la navegación de su sitio web, primero debe ingresar al personalizador de temas haciendo clic en el enlace Divi > Personalizador de temas dentro del panel de WordPress. Esto iniciará el personalizador. A continuación, busque el panel “Encabezado y navegación”.

Cabecera fija Divi

I’ve implemented a popup box that dynamically displays search options. I want the box to “float” above all of the site content. Currently, when the box is displayed it displaces all of the content below it and looks bad.

The results container div has position: relative meaning it is still in the document flow and will change the layout of elements around it. You need to use position: absolute to achieve a ‘floating’ effect.

You should also check the markup you’re using, you have phantom <li>s with no container <ul>, you could probably replace both the div#suggestions and div#autoSuggestionsList with a single <ul> and get the desired result.

Imágenes flotantes Divi

Si desea que su logotipo sea más alto que su menú, usted puede hacer esto muy fácilmente en Divi. Hay bastantes tutoriales por ahí acerca de cómo hacer esto con el viejo encabezado por defecto, y cada uno es diferente y ninguno de ellos se aplica al nuevo módulo de menú que usted necesita para utilizar cuando se utiliza el Divi Theme Builder. Así que hoy en este tutorial Divi le mostrará cómo hacer que el logotipo se superponen el módulo Menú Divi. ¡Esto hace casi 30 tutoriales en nuestra serie de módulos de menú Divi! Y sólo para una buena medida, te voy a dar un fragmento de hacer esto mismo para el menú por defecto también.

  Mejorando AMP: páginas menús etiquetas categorías y diseño

Este tutorial es muy fácil porque sólo se necesita un poco de código CSS y podemos añadir directamente en el módulo de menú. Así que vete a la cabecera de tu Theme Builder o donde tengas el módulo Menú, y abre la configuración. Ve a la pestaña Avanzadas, abre el interruptor CSS personalizado y busca el cuadro Logo CSS del menú. Aquí es donde puedes escribir o pegar el CSS para hacer que la imagen del logo se superponga al menú. Puede utilizar cualquier valor que desee, pero en nuestro video estoy usando -30px margen superior e inferior. Pero, por supuesto, esto está destinado a ser personalizado para la altura de su logotipo, la altura del menú, o cualquiera que sea su situación pasa a ser.

Cabecera Divi superpuesta al contenido

Como se puede ver que uso el encabezado secundario, así que mi logo tiene que colgar tanto por encima de la cabecera secundaria y por debajo en la sección principal. Pero esto es en realidad a mi favor porque el uso de la cabecera secundaria en realidad me da más espacio para el logotipo.

Si estás trabajando con un tema hijo puedes ir a Apariencia>Editor y abrir tu hoja de estilos. Si no, ve a Apariencia>Opciones del Tema Divi>ePanel>Custom CSS (que se encuentra en la parte inferior del ePanel) 1. Añade este CSS.

  10 años de wordpress wp10

Al cambiar el z-index en el encabezado superior, el logotipo ahora flota sobre el encabezado superior, así como en el área principal. También es probable que tenga que ajustar el “max-height” y “margin-top” hasta que lo tenga justo donde lo quiere. Cada logotipo es diferente, así que planea jugar con los números.

En el personalizador puedes hacer que el encabezado superior y el encabezado principal sean de ancho completo. También puedes eliminar el ajuste de cabecera fija para que la cabecera se desplace hacia arriba con la página en lugar de encogerse y permanecer fija en la parte superior de la pantalla.