Construir una plantilla de página de inicio con un encabezado de ancho completo (2022)

¡Guau, gracias, @calc20!

Una pregunta adicional: ¿Configura el bloque y la cubierta en la página o en una plantilla?

¡Gracias!

Puede configurar el bloque y cubrirlo en un página o en un plantilladependiendo de sus necesidades:

• En una página: Si desea un diseño único para una página específica (como la página de inicio), puede agregar y configurar directamente los bloques en esa página.
• En una plantilla: Si desea un diseño consistente en varias páginas (por ejemplo, todas las publicaciones de blog o secciones específicas de su sitio), configurarlo en una plantilla sería mejor. Esto le permite mantener un diseño uniforme en todo su sitio.

¡Elija la opción que mejor se ajuste a sus objetivos de diseño!

Hola @calc20,

Gracias por estas explicaciones y el código. Para mi sitio, trabajar en una plantilla tiene sentido, ya que planeo replicar el mismo diseño en varias páginas.

Hice estos cambios en la página (encabezado grande) y agregué su código a CSS adicional. Pero la portada y el navegador aún no tienen un ancho completo. También parece haber terminado con algunas piezas adicionales.

Aquí hay una vista previa de mi página de inicio, que se basa en la página (encabezado grande):

@Calc20, de alguna manera mi encabezado está roto. El icono del sitio y el NAV ahora aparecen a la izquierda de la imagen de portada.

Aquí está la forma en que se ve actualmente en el inspector:

/* 8-10-2024 @calc20 code from wp forum */
.wp-block-group.is-full-width, .wp-block-cover {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100vw !important;
max-width: 100% !important;
}
/* set footer height */
.site-footer { padding-top: 20px; padding-bottom: 20px; }
/* make row span full width, adjust and remove default padding*/
.wp-block-group.has-background { width: 100%; padding-left: 0; padding-right: 0; }
/* center footer nav */
.wp-block-group.has-background { display: flex; justify-content: space-between; align-items: center; } .wp-block-navigation { flex-grow: 1; display: flex; justify-content: center; }

/* Full width for header and cover */
.wp-block-group.is-full-width, .wp-block-cover {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100vw !important;
max-width: 100% !important;
}
/* Full width for site header */
.site-header {
display: flex;
justify-content: space-between; /* Align logo and navigation to the edges */
align-items: center; /* Vertically center the items */
width: 100%;
padding: 0 20px; /* Optional padding for some spacing */
margin-left: 0;
margin-right: 0;
}
/* Site logo should not shrink */
.site-logo {
flex-shrink: 0; /* Prevents logo from shrinking */
}
/* Full width navigation inside header */
.wp-block-navigation {
flex-grow: 1; /* Makes nav take available space */
display: flex;
justify-content: center; /* Centers the nav items */
}
/* Ensure the second cover is within the correct row */
.wp-block-cover {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100vw !important;
max-width: 100% !important;
}
/* Make sure the footer is properly styled */
.site-footer {
padding-top: 20px;
padding-bottom: 20px;
}
/* Adjust row for full-width background and spacing */
.wp-block-group.has-background {
width: 100%;
padding-left: 0;
padding-right: 0;
}
/* Center footer nav */
.wp-block-group.has-background {
display: flex;
justify-content: space-between;
align-items: center;
}
.wp-block-navigation {
flex-grow: 1;
display: flex;
justify-content: center;
}

Explicación del CSS:

1. Encabezado de ancho completo y bloque de cubierta:
   • El wp-block-group.is-full-width y wp-block-cover están establecidos en width: 100vw para obligarlos a abarcar todo el ancho de la ventana de la ventana gráfica.
   • El max-width: 100% Asegura que no estén restringidos por ningún contenedor principal.
2. Diseño del encabezado del sitio:
   • El .site-header está configurado en display: flex para alinear el logotipo y la navegación. El justify-content: space-between La propiedad empuja el logotipo y la navegación hacia los bordes izquierdo y derecho, mientras align-items: center Asegura que estén centrados verticalmente.
   • El logotipo se impide que se reduzca con flex-shrink: 0.
3. Diseño de navegación:
   • El .wp-block-navigation está configurado en flex-grow: 1que asegura que la navegación ocupa el espacio disponible restante en el encabezado y lo centra usando justify-content: center.
4. Ajuste de pie de página:
   • He incluido un estilo básico para el pie de página, asegurando que se aplique relleno para el espacio.

Pasos para la implementación:

1. Aplicar el CSS: Ir a Apariencia> Personalizar> CSS adicional En su administrador de WordPress y pegue el código CSS proporcionado anteriormente.
2. Verifique la estructura del bloque: En el editor de bloques, asegúrese de que el segundo bloque de cubierta se coloque dentro de la fila correcta que contiene el logotipo y la navegación de su sitio, según su diseño.

Después de implementar esto, su encabezado y imagen de portada deben abarcar el ancho completo, y el logotipo y la navegación del sitio web deben alinearse correctamente. ¡Avísame si necesitas más ajustes!

• Esta respuesta fue modificada hace 4 meses, 2 semanas por tikvid.

¡Guau, gracias, @tikvid! Es muy amable de su parte proporcionar todo ese código. Estoy aprendiendo mucho de eso.

De nada, @akubrin! ¡Me alegra que el código sea útil y que esté aprendiendo de él! 😊

Por cierto, ¿cómo está el Verifique la calculadora del IVA encabezado que viene? Si necesita alguna ayuda de estilo o configurarlo, ¡no dude en preguntar!