WoodMart Tema Configuración Sticky Header & Transparent Menu Tutoriales

Utilizar el tema WoodMartConstruir un sitio webde las veces, mucha gente quiere mantener el menú en la parte superior al desplazarse y mostrar un efecto visual transparente en la parte superior de la página. Este diseño tendrá un aspecto más avanzado y también mejorará la jerarquía visual general. Este artículo le llevará paso a paso a través del proceso de hacer un encabezado pegajoso con unMenú transparenteLa configuración es fácil de manejar para un principiante sin necesidad de escribir código.

I. ¿Qué son las cabeceras adhesivas y los menús transparentes?

• chabacaneríapie de página(Cabecera adhesiva)Cuando el usuario se desplaza por la página, la barra de navegación superior siempre estará fija en la parte superior de la pantalla para una navegación rápida.
• Menú transparenteLa barra de menú en sí no tiene color de fondo, el fondo se muestra directamente en la imagen superior de la página o de otro contenido, por lo general se utiliza para la escena de imagen grande de la página de inicio, el efecto visual es más moderno.

II. Trabajos preparatorios

Asegúrese de que utiliza la última versión Temas WoodMartSe ha activado el constructor de cabeceras integrado. Esta función admite diseños de cabecera personalizados, incluidos efectos adhesivos y transparentes.

Introduzca la ruta del backend:

WordPress Backend > WoodMart > Constructor de Encabezados

III. Activación de las cabeceras adhesivas

• Abrir el constructor de cabeceras editor (software).
• En la vista Estructura, seleccione el diseño de cabecera que esté utilizando.
• Localice el área de configuración correspondiente al área superior (Top / Main) y haga clic para abrir el panel de configuración.

• En la opción "Sticky" seleccione "Stick on scroll" o "Slide after scrolled down" (dependiendo del Elija si se pega siempre o sólo aparece después de desplazarse hacia abajo).
• Haga clic en Guardar y actualice la página para obtener una vista previa.

En cuarto lugar, establece el efecto de menú transparente

El menú transparente normalmente se aplica a la página de inicio con una imagen grande en la parte superior de la escena, si la barra de menú no es transparente, cubrirá la imagen de fondo, afectando a la belleza. El método de ajuste es el siguiente:

• En el Creador de cabeceras, seleccione el área de navegación principal actual.

• Abra los ajustes de fondo y seleccione "Transparente" o ponga a 0 la transparencia del color de fondo.

• A continuación, en el editor de páginas (por ejemplo, utilizando el botón Elementor tal vez WPBakery), asegúrese de añadir una imagen de fondo de ancho completo a la primera pantalla de la página de inicio y colóquela debajo de la capa de contenido.

• Si necesita un menú transparente para la página de inicio, puede utilizar "Visualización condicional" en Header Builder para activar el menú transparente sólo para la página de inicio y mantener el estilo predeterminado para las demás páginas.
• Una vez que el diseño esté listo, haga clic en PubliqueAparece el ajuste Condiciones de visualización. Aparece el ajuste Condiciones de visualización:

V. Optimizar el texto de navegación y los colores del logotipo

Porque el fondo es transparente.navegadorEl texto del menú y el logotipo pueden no ser visibles sobre fondo claro si son de color oscuro. La solución es la siguiente:

• Añada una clase CSS adicional a la página de inicio, como por ejemplo .transparent-header.;
• Defina el color (por ejemplo, blanco) del texto de navegación y del logotipo bajo esta clase;
• Puede cambiar la imagen del logotipo con el estado "Sticky", de modo que se unifique el estilo antes y después del desplazamiento.

Ejemplo CSS:

.transparent-header .site-logo img {
  content: url('ruta/logo-blanco.png');
}

.transparent-header .main-nav > li > a {
  color: #fff; }
}

VI. Solución de problemas comunes

• ¿Pegajosidad ineficaz de la navegación? Comprueba si la función sticky está desactivada en móviles o entra en conflicto con determinados plugins.
• ¿No funciona el efecto de transparencia? Compruebe que el fondo de la zona donde se encuentra la barra de navegación no es transparente o está cubierto por otro estilo de capa.

VII. Resumen

WoodMart ofrece un potenteEncabezado personalizadoFuncionalidad, el efecto visual de la navegación pegajosa y transparente se puede lograr fácilmente sin plug-ins de terceros. Diseño razonable, junto con el diseño detallado de la página de inicio de imagen grande y el interruptor de desplazamiento, puede crear una experiencia de sitio web profesional y avanzada.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres