Cómo configurar tu encabezado

El encabezado

El encabezado es la barra superior de tu app. Siempre está a la vista: muestra la identidad de tu app, le da a cada sección su título, ofrece atajos y ayuda a tus usuarios a orientarse.

Se configura en el menú «My App».

En la estructura de tu app, haz clic en Header.

Altura del encabezado

Primero, elige la altura del encabezado: Small, Medium o Large.

Elige Medium… y el encabezado se hace más alto, con el mismo título o logo.

Elige Large… y puedes agregar una descripción breve. Escríbela aquí… y haz clic en OK.

Aparece debajo de tu título, en el encabezado grande.

Medium y Large se aplican a las secciones de tu navegación principal; las demás páginas siempre usan Small. Esta app se queda con Small.

Título o logo

En el bloque Logo, el nombre de tu app aparece como texto o como imagen. Para cambiar el texto, escribe tu título… y haz clic en OK.

La vista previa se actualiza al instante.

Para cambiar su color, haz clic en él, escribe un código o elige uno, y luego haz clic en Choose.

El título cambia al nuevo color.

Elige una fuente de la lista… y la vista previa la muestra.

Ajusta su tamaño con el control deslizante.

El título se agranda.

Si prefieres mostrar tu logo, haz clic en Logo y elige una imagen de al menos 800 × 200 píxeles.

Tu logo ocupa el lugar del texto.

Colócalo a la izquierda o déjalo centrado.

Aquí, pasa a la izquierda.

Luego, elige qué muestra el encabezado mientras tus usuarios navegan: siempre tu logo, con «Logo only», como en esta página… o bien el nombre de cada sección, con «Section title».

Botones de navegación

A la izquierda del encabezado están los botones de navegación: el botón Back, aquí en la vista previa, y el botón Menu si tu navegación lo usa. Aquí defines su icono y su color.

Por ejemplo, un nuevo color para el botón Back… se ve al instante.

Fondo

Para el fondo, elige un color, y también el del borde inferior.

El fondo del encabezado cambia de color.

Con el encabezado pequeño, también puedes usar una imagen de fondo de 1242 × 192 píxeles.

Ahora la imagen ocupa todo el encabezado.

Para quitar la imagen, haz clic en el icono de la papelera… y confirma.

El encabezado recupera su color de fondo.

Efecto de desplazamiento

El efecto de desplazamiento define qué hace el encabezado al bajar por la página: se queda fijo o se oculta. Si es mediano o grande, también puede encogerse.

Con Hiding, el encabezado desaparece mientras la página se desplaza.

Acciones en el encabezado

A la derecha, las acciones son atajos a las páginas que elijas. Para agregar una, haz clic en «Add an action»… y luego elige su destino, aquí la sección Search.

El nuevo atajo aparece en el encabezado, con un icono predeterminado.

Para cambiarlo, haz clic en el icono… busca en la biblioteca de iconos y elige la lupa.

Ahora el atajo muestra una lupa. También puedes definir su color; en tablet y escritorio, puede mostrar un título y, en escritorio, aparecer como botón.

El encabezado muestra dos atajos; los demás pasan a un menú adicional.

Un encabezado por sección

Cada sección también puede tener su propio encabezado. Vuelve a la estructura… y haz clic en una sección.

Abre Header… y elige «Modify the header of this section».

Se configura igual que el encabezado general. Aquí, otro color de fondo… solo para esta sección.

Para volver al encabezado general, haz clic en el engranaje… luego en «Go back to default header» y confirma.

La sección vuelve a usar el encabezado general.

Publicar

Para que tus usuarios vean los cambios, publica la actualización de tu app desde el menú Publish.