Combina perfectamente los bloques de encabezado y de héroe de página con GeneratePress Premium para obtener un diseño de página de inicio profesional.

hacer uso de GenerarPrensa Cuando se construye un sitio web con GenerateBlocks, muchas personas quieren que elpie de páginaEsta es una gran manera de conectar a la perfección el encabezado con el primer bloque en la parte superior de la página, creando un efecto visual unificado y de ahorro de espacio. Este artículo describe cómo utilizar la función "Fusionar" de GeneratePress Premium para fusionar el encabezado con el primer bloque de la parte superior de la página.Sección HéroeCombine y resuelva problemas de espaciado y combinación de colores para conseguir un diseño de página de inicio bonito y funcional.

¿Qué es la fusión de la cabecera con el bloque héroe de la página?

Por defecto, hay un espacio considerable entre el encabezado y el primer bloque de contenido de la página, lo que provoca una división visual en la parte superior. La función de fusión permite superponer el encabezado sobre el bloque principal de la página para que el contenido esté bien conectado y el flujo visual sea más fluido.

Paso 1: Compruebe los márgenes interiores del bloque principal de la página

En el Editor de páginas, haga clic en el contenedor Page Hero.
Abra la configuración de Espaciado para ver los márgenes interiores superior e inferior, por ejemplo 150px por defecto.

Registre los valores para ajustes posteriores.

Paso 2: Crear un nuevo elemento de cabecera y activar la fusión

entrar enWordPressMenú Apariencia > Elementos.
Haga clic en "Añadir nuevo" y seleccione "Elemento de cabecera".

Nombre el elemento, por ejemplo "Cabecera de fusión".
Active la opción Fusionar.

Establezca reglas de visualización, como Publicar > Publicar todo.

Guarde el comunicado.

El encabezado y el bloque principal de la página se han fusionado y el contenido se ha desplazado hacia arriba.

Paso 3: Ajustar el espaciado fijo del margen interior superior del bloque principal de la página

Tras la fusión, los márgenes interiores superiores de la página son desiguales y el margen interior superior del héroe de página queda cubierto por la cabecera.

Solución:

Calcular la altura de la cabecera, por ejemplo 60px.
En el margen superior interno del contenedor del héroe de página, añada el valor original (por ejemplo, 150px) a la altura del encabezado para obtener 210px.

Guardar para actualizar la página.

Asegúrese de que los márgenes interiores superior e inferior del héroe de la página estén equilibrados y sean visualmente cómodos.

Paso 4: Definir los colores de navegación para realzar el efecto de fusión

Ajustar los colores de navegación ayuda a fusionar a la perfección los elementos visuales.

Establece que el fondo de navegación sea transparente.
Cambiar el color del título del sitio ynavegadorEl color del texto es blanco para garantizar la claridad.

Ajuste el color del texto de navegación y el color de la página actual, en blanco o en un color de alto contraste.

Guardar para actualizar la vista.

Paso 5: Personalizador de Herencia de Color de la Barra de Navegación Adherida

Navegación pegajosaLas columnas se muestran fijas al desplazarse y los colores heredan la configuración del personalizador de temas.

Vaya al Personalizador.
Ajuste los colores del título y del texto en los ajustes de color de la navegación o de la cabecera.
Previsualice el efecto de color de la barra de navegación adhesiva para garantizar la coordinación.

Paso 6: Cargue logotipos de diferentes colores para adaptar los estados merge y sticky.

Subir dos logotipo Colores que se adaptan a los distintos estados:

Personalizador para cargar una versión oscura del Logotipo para estados de navegación no fusionados o pegajosos.

Cargue una versión en blanco del logotipo para utilizarla al fusionar cabeceras.

clotureTítulo del sitioPantalla, sólo logotipo.

La configuración de un logotipo de alternancia en el elemento de cabecera garantiza que los distintos estados muestren la versión correspondiente.

Actualice la página para ver el logotipo blanco en la cabecera de fusión y el logotipo oscuro en la navegación adhesiva.

resúmenes

Los pasos anteriores permiten fusionar el encabezado y el bloque principal de la página en el tema GeneratePress, eliminando el espacio extra en la parte superior y mejorando la sensación profesional y la unidad visual del diseño general de la página. Ajuste los márgenes interiores, colores y logotipo Detalles para crear una página más perfecta.

Actualizaciones recientes

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