El Encabezado contiene el primer conjunto de elementos visibles cuando se carga su sitio web. Puede organizar elementos como el logotipo, el menú de navegación y los íconos sociales de la manera que desee que aparezcan en el encabezado.
En este artículo hablaremos de:
- Encabezado para escritorio
- Encabezado – Borde
- Encabezado – Píldora
- Encabezado para dispositivos móviles
- Tipos de encabezado
- Elementos de encabezado
Puede administrar el estilo del encabezado (tanto para escritorio como para dispositivos móviles) desde la Diseño (1) sección.
Una vez que estés dentro de la sección Diseño, haz clic en Encabezado (2) pestaña.
Alternativamente, también puedes utilizar la opción de búsqueda del estudio.
- entrar: Encabezado (1) en la barra de búsqueda.
- De los resultados relacionados, haga clic en el Diseño: encabezado del sitio web opcion 2).
Encabezado para escritorio
- Diseño de encabezado – Verifique el diseño de encabezado aplicado actualmente para el computadora de escritorio versión. Haga clic en el Cambia el diseño para elegir entre las opciones de diseño de encabezado disponibles y aplicar a su sitio web.
Ofrecemos dos tipos de diseños de encabezado: diseños de encabezado superior, y diseños de encabezado de dos columnas. Los diseños de encabezado de dos columnas existen en temas como Burst e Isle. - ANCHO – Especifique el ancho del encabezado como Ancho Completo or Ancho del sitio.
"Ancho completo' mostrará el encabezado mientras cubre todo el ancho sin dejar ningún margen.
"Ancho del sitio' se puede especificar en el Diseño sección. Puede especificar un ancho fijo aquí.
Mostrará el encabezado adhiriéndose al ancho fijo especificado. Saber más. - Acolchado Vertical – Agregue espacio (arriba y abajo) al encabezado de su sitio web (especificado en vh). Más información.
- Comportamiento – La posición del encabezado de su escritorio se puede establecer en Fijo (aquí el encabezado se fijará en la parte superior, es decir, incluso si la página se desplaza, el encabezado sería visible) o Desplazarse con el sitio (aquí el encabezado se desplazará junto con la página).
- Navegación pegajosa – Habilitar o deshabilitar la navegación adhesiva en caso de que Sdesplazarse con el sitio posición del encabezado.
- Sticky Menú – Establece la posición del menú fijo cuando la página se desplaza hacia la izquierda o el centro de la pantalla.
Para navegación fija, el encabezado se mostrará después de que la sección inicial se desplace hasta la mitad de la pantalla.
Vea el relleno del encabezado en acción:
Echar un vistazo a una Encabezado en un sitio activo.
Ver diferentes diseños de encabezado de escritorio
Ver diferentes diseños de encabezado de escritorio de 2 columnas
Diseños de encabezado basados en búsquedas que se centran en la búsqueda de sitios web
Encabezado – Borde
- Borde: Habilite o deshabilite el borde del encabezado.
- Espesor: Especifique el ancho de las líneas del borde del encabezado.
- Posición: Establezca la posición del borde del encabezado. Tiene cuatro opciones: Todos los lados, Superior e inferior, Sólo superior y Sólo inferior.
Encabezado – Píldora
El Encabezado en forma de píldora En Pixpa, agrega un aspecto elegante y moderno al encabezado de su sitio web con esquinas redondeadas Y flexibilidad de espaciado. Este diseño es ideal para creativos y profesionales que desean que su encabezado sea visualmente distintivo y elegante.
Puedes aplicar este estilo a cualquier diseño de encabezado, lo que le brinda total libertad de diseño en diferentes tipos de encabezado.
- Encabezado – Píldora: Active el interruptor Encabezado – Píldora para activar el estilo de píldora para su encabezado.
- Radio de esquina: Ajuste la redondez de las esquinas del encabezado con el control deslizante o el campo "Radio de Esquina". Los valores más altos harán que las esquinas sean más redondeadas.
- Acolchado superior: Especifique el espacio sobre el contenido en el encabezado de la píldora para controlar el espaciado vertical.
- Acolchado inferior: Define el espacio debajo del contenido para garantizar una apariencia equilibrada.
- Ancho compacto: Esto le permite elegir qué tan ancho aparecerá el encabezado de su píldora:
- Ancho completo: Extiende el encabezado por todo el ancho de la pantalla.
- Ancho del sitio: Alinea el encabezado con el ancho general del contenido del sitio.
- Compacto: Reduce el encabezado a un bloque más ajustado y centrado: ideal para diseños minimalistas.
Encabezado para dispositivos móviles
Estos ajustes te permiten controlar cómo se ve el encabezado de tu sitio en dispositivos móviles. Esto garantiza un diseño limpio y optimizado para pantallas pequeñas.
- Diseño – Verifique el diseño de encabezado aplicado actualmente para el móvil versión. Haga clic en el Cambia el diseño para elegir entre las opciones de diseño de encabezado disponibles y aplicar a su sitio web.
- Relleno vertical – Agregar Espacio vertical (arriba y abajo) al encabezado de su sitio web en dispositivos móviles (especificado en vh).
- Encabezado móvil – Especifique si desea que el encabezado móvil aparezca solo en dispositivos móviles (hasta 768 px) o extenderlo también a dispositivos de tableta (hasta 1199 px).
Asegúrese de hacer clic en Publicar Botón después de realizar cambios para garantizar que estén activos en su sitio web.
Ver diferentes diseños de encabezados móviles
- El símbolo de punto en el encabezado del dispositivo móvil se refiere a las Cuentas de Cliente.
- Sólo aparecerá que la opción Cuenta de Cliente está habilitada en la tienda. Más información.
Tipos de encabezado
Puedes elegir entre cuatro tipos diferentes de encabezados:
Encabezado normal
El diseño del encabezado normal presenta un diseño limpio y sencillo con un logotipo, enlaces de navegación, íconos sociales y un botón de menú que se muestra horizontalmente. Es ideal para brindar una experiencia de navegación clásica y fácil de usar.
Encabezado de dos columnas
El diseño del encabezado de dos columnas divide el encabezado en dos secciones distintas, lo que permite un logotipo e íconos sociales a la izquierda o al centro y el menú de navegación y otros elementos del encabezado a la derecha como una barra lateral en la que se puede hacer clic.
Este diseño es perfecto para sitios web que necesitan enfatizar tanto su marca como sus acciones importantes simultáneamente.
Encabezado basado en búsqueda
El diseño del encabezado basado en búsqueda incluye de manera destacada una barra de búsqueda, lo que facilita a los usuarios encontrar contenido específico rápidamente. Este diseño es especialmente útil para sitios web con mucho contenido donde la funcionalidad de búsqueda es el enfoque principal.
Elementos de encabezado
- Logotipo/título del sitio – El primer elemento del encabezado del sitio es el logotipo/título del sitio. Establecer el título del sitio/cargar el logotipo del sitio Para su sitio.
Nota: Si no ha cargado el logotipo del sitio, el título del sitio aparecerá en el encabezado de su sitio. Además, si ha proporcionado ambos, el logotipo del sitio será visible en el encabezado de su sitio. - Menú – Otro elemento del encabezado del sitio es el menú (enlaces de menú). Usted puede secuenciar los enlaces de navegación del sitio, or eliminar/ocultar cualquier elemento del menú de tu sitio.
- iconos sociales – Puedes agregar el iconos sociales que están conectados a sus perfiles de redes sociales al encabezado de su sitio. Puedes subir un imagen para compartir en redes sociales que se utilizará como miniatura cuando el sitio web o cualquiera de las páginas del sitio web se compartan en las redes sociales. Además, elige dónde iconos de redes sociales aparecería en su sitio web. Las posiciones disponibles son encabezado, pie de página, ambos o ninguno.
- Caja de búsqeda Agrega un cuadro de búsqueda que permite a los visitantes de su sitio buscar cualquier contenido en Productos (si tiene una Tienda habilitada en su sitio web), Imágenes, Publicaciones de blog y Páginas (Galerías, Carpetas y otras páginas) en el encabezado de su sitio.
- Icono de carro – Añadir un flotante icono de carrito eso es fácil de alcanzar y siempre visible sin interferir con su sitio web en el encabezado de su sitio.
- Botón de menú Agrega un botón de menú al encabezado de su sitio, es decir, un botón de llamada a la acción que redirige a una URL específica. Puede especificar el Etiqueta y conectar URL para el botón de menú. Además, elige la Tamaño del botón sea Pequeño, mediano o grande.