Crear una cabecera de WordPress sin plugin
Una cabecera es la única parte de un sitio web que ven todos los visitantes, y la parte que los temas suelen esconder tras una pantalla de ajustes con nueve opciones. En Canvas, una cabecera es un registro que se construye con bloques en el editor, así que esta guía es una práctica de construcción, no un recorrido por casillas de verificación.
Paso 1: Qué es una cabecera en Canvas
Una cabecera es un registro que aparece en el administrador de WordPress como una página y se edita en el mismo editor de bloques. Esa única decisión es la que elimina el plugin de cabeceras de su conjunto de herramientas.
Otros temas construyen el encabezado en otro lugar. Blocksy y Astra mantienen sus constructores de cabeceras en el Personalizador, un panel de ajustes junto al sitio, separado del editor donde escribe sus páginas. Nuestra comparación con Blocksy compara los dos enfoques lado a lado.
El anidamiento
Un registro de cabecera contiene un Header Root. El Header Root contiene un Header Container, que decide si la cabecera tiene ancho limitado, ancho completo, o una disposición en un punto de quiebre y otra en el resto. El Header Container contiene Header Zones, y una zona es una celda de la fila de cabecera. El logotipo va en una, la navegación en la siguiente, y un icono de búsqueda y un carrito en la última.
Hay 22 bloques en la familia de cabecera en total, y usted usará cuatro o cinco de ellos en un sitio típico. Todo lo demás está ahí para el día en que necesite una búsqueda de tienda, un enlace de idioma o un bloque con el horario de apertura en la esquina.
Nada de esto es un editor aparte. Si edita páginas en WordPress, puede editar un encabezado, y se aplican los mismos deshacer, ajustes de bloque y atajos de teclado.
Paso 2: Cree el registro de la cabecera
Abra la lista Headers en el menú de Canvas y añada un registro nuevo. Tiene dos puntos de partida honestos.
Empiece con un patrón
Inserte un patrón de cabecera y obtendrá bloques normales, ya organizados para usted, listos para reorganizar, renombrar o eliminar. Las cabeceras son la categoría de patrones más amplia del producto, de un total de 183 patrones, así que normalmente hay algo parecido a la forma que busca. Es la vía más rápida y la que conviene seguir en una primera construcción.
Empiece con un demo
Si importó uno de los 88 sitios demo, su cabecera ya es un registro en su sitio. Ábralo y modifíquelo, o duplíquelo y experimente con la copia. Editar una cabecera que ya funciona le enseña la estructura más rápido que un lienzo vacío.
Dé al registro un nombre que indique para qué sirve, como «Cabecera principal» o «Cabecera de página de aterrizaje». Tendrá tres de ellas en un mes, y los nombres serán lo único que le servirá para distinguirlas.
Paso 3: Distribuya las zonas
Las zonas se encargan de la maquetación, así que casi nunca tendrá que lidiar con las clases de alineación.
- Empuje una zona hacia el borde. Una zona izquierda para el logotipo, una zona central para el menú y una zona derecha para las acciones es la disposición en la que terminan la mayoría de los sitios.
- Agrupe los elementos que van juntos. Un icono de búsqueda, un carrito y un botón en una misma zona forman un conjunto y se espacian como un solo grupo.
- Reordene por punto de quiebre. La zona que ocupa el tercer lugar en un escritorio puede ir primera en un teléfono, sin necesidad de un segundo registro de cabecera.
- Limite una zona a un nivel de dispositivo. Indique a una zona que omita los dispositivos sin espacio para ella, y no será necesario ocultarla después con CSS.
- Añada sus propias clases a una zona cuando quiera acceder a ella desde su propia hoja de estilos.
Diseñe primero la disposición de escritorio y no la modifique hasta que estén colocadas todas las piezas. Las decisiones de diseño son mucho más fáciles cuando el contenido real ya está en la fila.
Paso 4: Agregue las partes
Ahora complete las zonas. Cada una es un bloque y tiene un panel de ajustes con las opciones que ese bloque admite.
- Header Logo. Su logotipo, con archivos separados para el estado fijo y el estado oscuro, de modo que una cabecera transparente sobre una fotografía oscura no necesita soluciones alternativas.
- Header Navigation. El menú principal, con desplegables y paneles de megamenú. Muestra un menú de WordPress, así que el menú en sí se sigue administrando donde espera.
- Header Search. Un ícono que abre un campo, o un campo que siempre está abierto, según lo que mejor se adapte al diseño.
- Header Button. El llamado a la acción, con las opciones habituales de tamaño, estilo y enlace. Uno resulta persuasivo, tres solo estorban.
- Header Cart. El carrito de WooCommerce con su número de artículos y un resumen desplegable, para tiendas.
- Header Icon Link, Header Social y Header Info. Un número de teléfono, una fila de perfiles sociales, un pequeño bloque de datos de contacto, una dirección o el horario de atención.
Megamenús, cuando una lista no es suficiente
Un megamenú es un registro propio, diseñado con bloques y mostrado por el bloque Megamenú, de modo que un elemento del menú abre un panel de ancho completo con columnas, imágenes y botones. Mega Menu Column mantiene el panel en una cuadrícula. Úselo cuando una categoría realmente tenga estructura, y no para que un sitio pequeño se vea recargado.
Paso 5: Fijo, transparente y preajustes de diseño
El comportamiento proviene de ajustes predefinidos, que son paquetes de opciones de diseño que aplica con un clic y después ajusta. Elija el comportamiento que quiera y cambie lo que desee después.
- Transparente. Sin fondo, de modo que lo que haya detrás de la cabecera se vea a través. Combínelo con la variante de logotipo oscura o clara para que el logotipo siga siendo legible.
- Semitransparente. Un fondo translúcido que deja ver la imagen de detrás y mantiene el texto legible. Suele ser la opción más segura frente a una fotografía con mucho detalle.
- Flotante, y flotante semitransparente o flotante pequeño, donde la cabecera queda dentro de la página con espacio alrededor, separada de los bordes de la ventana.
- Fijo a todo el ancho. Ocupa todo el ancho de la ventana y permanece anclado mientras se desplaza la página.
- Fijo al desplazarse hacia arriba. Se retira de la parte superior al bajar la página y vuelve al subir, lo que devuelve su espacio a las páginas largas.
Los ajustes de todo el sitio que hay detrás
Las opciones de cabecera son la sección más grande de las Opciones del tema, con 94 de los 533 campos, y contienen lo que ningún registro individual debería controlar: la cabecera predeterminada, el comportamiento fijo al desplazarse, la altura, el espaciado y el punto de quiebre para móviles. Una importación de demo las completa todas, y usted cambia solo las que le interesan.
Paso 6: El encabezado para móviles
La mayor parte del tráfico llega desde un teléfono, así que revise esto antes que cualquier otra cosa. La buena noticia es que se trata del mismo registro.
- Reordene en lugar de reconstruir. Mueva el logotipo al centro, coloque el botón de menú a la izquierda y un botón de llamada a la derecha, todo mediante el orden de zonas.
- Elimine lo que no quepa. Restrinja los datos de contacto o la fila de redes sociales a pantallas más grandes. Meterlos en pantallas pequeñas no ayuda a nadie.
- Mantenga grandes las zonas táctiles. Un botón del menú y un icono de teléfono son las dos cosas a las que la gente apunta mientras camina.
- Defina con cuidado el punto de quiebre. El ancho en el que el menú se contrae es una configuración, así que un menú largo puede contraerse antes que uno corto.
- Considere un panel lateral para el menú móvil. Un panel lateral es un registro que se desliza desde el borde, con espacio para un menú completo, un campo de búsqueda y un botón.
Compruébelo en el editor antes de publicar. Canvas muestra la cabecera en el área de edición con el mismo código que la muestra a un visitante, así que el diseño para teléfono es algo que puede revisar mientras construye.
Paso 7: Asígnelo a todo el sitio o por página
Un registro no hace nada hasta que algo apunte a él. Hay dos niveles, y funcionan igual para cada elemento de la cabecera.
El valor predeterminado para todo el sitio
Configure la cabecera predeterminada en Opciones del tema y todas las páginas la usarán. Haga lo mismo con la barra superior, el diseño del título de página y el pie de página. Este es el ajuste que hace que una página nueva se vea bien en cuanto la publica.
La anulación por página
Cualquier página puede sobrescribir cualquiera de estos ajustes desde su propia configuración. Una página de campaña usa una cabecera transparente y sin barra superior; la página de contacto conserva la estándar. No se duplica nada para lograrlo y no hay nada que recordar después, porque la sobrescritura se guarda en la página que afecta.
Barras superiores
Una barra superior es un registro propio con sus propios bloques: un número de teléfono, horario de atención, un selector de idioma y un anuncio. El bloque Header Topbar la coloca encima de la fila de la cabecera. Como es independiente, un aviso de días festivos cambia en todo el sitio sin necesidad de abrir la cabecera en ningún momento.
Fuentes
Cuando esta guía describe algo ajeno a Canvas en sí, estas son las páginas oficiales que lo documentan.
- Pantalla de Menús de Aparienciawordpress.org · Donde se crean y se asignan los menús de WordPress a las ubicaciones que ofrece un tema
- Comprensión del criterio de éxito 2.5.8: Tamaño del objetivo (mínimo)w3.org · Por qué las áreas táctiles necesitan un tamaño mínimo de 24 por 24 píxeles CSS
Próximos pasos
Dos guías sobre por qué la cabecera determina la cuestión más amplia, y sobre el propio constructor.
Preguntas frecuentes
Las preguntas frecuentes completas responden el resto, y la documentación cubre cada ajuste en detalle.
¿Necesito una segunda cabecera para móviles?
Normalmente no, porque un único registro de cabecera de Canvas se adapta por sí solo a un teléfono. Las zonas cambian de orden según el punto de quiebre y cada una puede limitarse a un nivel de dispositivo, de modo que un solo registro puede centrar el logotipo en un teléfono, ocultar los datos de contacto y colocar el menú detrás de un botón de alternancia. Cree un segundo registro solo cuando realmente quiera un diseño distinto, no para corregir una disposición.
¿Puede una página tener una cabecera diferente?
Sí, cualquier página Canvas puede tener su propia cabecera. Las cabeceras, las barras superiores, los títulos de página y los pies de página tienen un valor predeterminado para todo el sitio y una anulación por página, así que una página de campaña puede mostrar una cabecera transparente sobre una fotografía mientras todas las demás conservan la estándar.
¿Es esto un área de widgets o un menú?
Una cabecera de Canvas no es ni una cosa ni la otra: es un registro que se edita en el editor de bloques, exactamente igual que una página, y el logotipo, la navegación, la búsqueda, el carrito y los botones que contiene son bloques con sus propios paneles de ajustes. Sus menús de WordPress siguen siendo menús de WordPress; el bloque Header Navigation muestra uno.
¿Qué ocurre con mi cabecera cuando vence mi licencia?
Su sitio sigue mostrándose exactamente como hoy. Lo que se pausa es el servicio: las actualizaciones, las importaciones de Demos, la IA y la edición de bloques premium se detienen hasta que renueve, y hay un periodo de gracia de 14 días si una verificación de la licencia no puede conectarse con nuestros servidores.
Cree su próximo sitio web con Canvas
Sea principiante, freelancer o agencia, obtendrá los mismos bloques y los mismos demos. Empiece con un sitio y cree todos los que necesite con la misma licencia.