Lun-Vie 08:30 a 16:30
0961306646
0982786421

Encabezado y barra de navegación

Personalice el encabezado y la barra de navegación de su sitio web.

El encabezado y sus elementos son visibles en todas las páginas. Esta configuración de encabezado y barra de navegación se aplica a computadoras de escritorio y dispositivos más grandes. Todas las configuraciones para la versión móvil se pueden encontrar en el tutorial de Encabezado móvil.

Los siguientes ajustes se pueden encontrar en el Esquema Del Diseño → Encabezamiento de YOOtheme Pro.


Diseño de Encabezado

Posiciones

Los diseños de encabezado preparados definen la posición del logotipo, la navegación y la búsqueda. Los diseños de encabezado constan de tres posiciones visuales: logotipo, barra de navegación y encabezado.

POSICIÓNCOLORDESCRIPCIÓN
Logotipo
Negro
Esta posición muestra el logotipo.
Barra de navegación
Verde

Esta posición muestra la barra de navegación en sí, así como el área del widget de la barra de navegación.

Encabezado
Azul
Esta posición muestra el área del widget de encabezado.

Nota Puede seleccionar si los iconos sociales y la búsqueda aparecen en la barra de navegación y en la posición del encabezado.

Diseños Horizontales

El logotipo, así como la barra de navegación y las posiciones del encabezado se muestran uno al lado del otro, de izquierda a derecha con diferentes alineaciones.

Horizontal Left

Horizontal Center

Horizontal Right

Horizontal Center Logo

Diseños de Centro Apilados

El logotipo, la barra de navegación y las posiciones del encabezado se muestran uno encima del otro y están centrados horizontalmente. En el diseño Stacked Center C, la posición del encabezado se divide y se alinea a la izquierda y a la derecha mientras que el logotipo se coloca en el medio. En el diseño Stacked Center Split, la barra de navegación está dividida y el logotipo se coloca en el medio.

Stacked Center A

Stacked Center B

Stacked Center C

Stacked Center Split

Diseños Apilados a la Izquierda

El logotipo, la barra de navegación y las posiciones del encabezado se muestran uno encima del otro y están alineados en el lado izquierdo. En el diseño Stacked Left B, la barra de navegación está alineada a la izquierda, mientras que la posición de la barra de navegación está alineada a la derecha.

Stacked Left A

Stacked Left B

Diseños de Offcanvas

El logotipo está alineado a la izquierda y el menú de alternancia está alineado a la derecha. El área del encabezado está a la izquierda del menú de alternancia mientras que el área de la barra de navegación se muestra en el menú fuera de la pantalla. Se abre al hacer clic en el menú de alternancia.

Offcanvas Top A

Offcanvas Top B

Offcanvas Center A

Offcanvas Center B

Diseños Modales

El logotipo está alineado a la izquierda y el menú de alternancia está alineado a la derecha. El área del encabezado está a la izquierda del menú de alternancia mientras que el área de la barra de navegación se muestra en el menú fuera de la pantalla. Se abre al hacer clic en el menú de alternancia.

Modal Top A

Modal Top B

Modal Center A

Modal Center B

Logotipo del centro

Los diseños offcanvas y modales también ofrecen una opción para centrar el logotipo para que no quede alineado a la izquierda.

Anchura Máxima

Hay tres opciones disponibles para controlar la posición de la barra de navegación y su comportamiento.

Barra de Navegación

Establezca el ancho máximo del contenido para el encabezado y la barra de navegación con la configuración Ancho máximo. Las opciones Default, Small, Large y Expand agregan un relleno horizontal que se ajusta al ancho de la ventana gráfica. Además, el relleno del logotipo se puede quitar para diseños en los que el logotipo se coloca a la izquierda.
AJUSTEDESCRIPCIÓN
Static
La barra de navegación se moverá fuera de la ventana gráfica al desplazarse.
Sticky
La barra de navegación se quedará en la parte superior de la ventana gráfica al desplazarse.
Sticky on scroll up
La barra de navegación se moverá fuera de la ventana gráfica al desplazarse hacia abajo y se volverá pegajosa al desplazarse hacia arriba.

Nota Si tiene una barra de navegación transparente, la barra de navegación Sticky se mostrará una vez que se haya desplazado por debajo de la sección de héroe, y se ocultará cuando la sección de hero entre en la ventana gráfica.

Para obtener más información sobre las opciones generales del menú que se muestra en la barra de navegación, consulte la página de documentación de los menús

Imagen de Elemento de Menú

Agregue un icono o una imagen a su elemento de menú en el panel Elementos de la barra de navegación. Para agregar un icono de la biblioteca de iconos de UIkit a su elemento de la barra de navegación en el campo de URL de la imagen en lugar de seleccionar una imagen. Además, puede ocultar el título del menú.

Subtítulos

Agregue un Subtítulo al elemento de la barra de navegación en el panel Elementos de la barra de navegación. El subtítulo se mostrará debajo del título del elemento.


Diseño Desplegable

Alineación y Comportamiento

El menú desplegable se mostrará para diseños horizontales y apilados. Hay algunas opciones disponibles para alinear el menú desplegable y habilitar el modo de clic para elementos de texto.

Si la alineación del menú desplegable no encaja en la ventana gráfica, se invertirá automáticamente.

OPCIÓNDESCRIPCIÓN
Alineación
Alinee el menú desplegable a la izquierda, a la derecha o al centro con respecto al elemento de la barra de navegación.
Alinear a la barra de navegación
Alinee el menú desplegable con el contenedor de la barra de navegación en lugar del elemento de la barra de navegación.
Modo clic
Los elementos de la barra de navegación que contienen solo texto (sin un enlace) pueden mostrar el menú desplegable al hacer clic en lugar de desplazarse.

Aprenda a crear un elemento de menú en WordPress.

Columnas y Anchura

Dado que los elementos de la barra de navegación pueden tener un número diferente de elementos de submenú, las opciones para dividir el menú desplegable en columnas y establecer un ancho están disponibles para cada elemento de la barra de navegación en el panel Elementos de la barra de navegación.

OPCIÓNDESCRIPCIÓN
Columnas
El menú desplegable se dividirá en el número definido de columnas.
Anchura
Expanda el ancho del menú desplegable hasta el límite de la barra de navegación.

Barra Desplegable

La barra desplegable convierte el menú desplegable clásico en una sección de ancho completo que puede deslizarse (Slide) hacia abajo en la parte superior de su contenido o empujar (Push) el contenido hacia abajo.

Nota La opción Push se comporta de la misma manera que Slide si se habilita un encabezado de superposición transparente.


Diseño Offcanvas

Hay algunas opciones disponibles para diseñar y alinear el menú fuera de lienzo.
OPCIÓNDESCRIPCIÓN
Menú de Conmutación
Muestra el texto del menú junto al icono de la hamburguesa.
Estilo del menú

Elija entre el menú Default y el menú Primary con un tamaño de fuente más grande.

Alineación
Centre el menú y el contenido de la barra de fuera de lienzo horizontalmente.

Modo Offcanvas

Elija entre los modos Slide, Reveal y Push offcanvas. Además, puede superponer el sitio con el color de fondo para evitar desplazarse y navegar por la página cuando la barra de fuera de lienzo está abierta.

OPCIÓNDESCRIPCIÓN
Slide

El menú desplegable se dividirá en el número definido de columnas.

Reveal
El contenido de la página se mueve fuera de la ventana gráfica y muestra la barra de fuera de lienzo debajo.
Push
La barra de fuera de lienzo empuja el contenido de la página fuera de la ventana gráfica.

Diseño Modal

Hay algunas opciones disponibles para diseñar y alinear el menú modal.
OPCIÓNDESCRIPCIÓN
Menú de Conmutación
Muestra el texto del menú junto al icono de la hamburguesa.
Estilo del menú

Elija entre el menú Default y el menú Primary con un tamaño de fuente más grande.

Alineación
Centre el menú y el contenido de la barra de fuera de lienzo horizontalmente.

Búsqueda

Posición de Búsqueda

Como se describe en la sección Diseño del Encabezado anterior, puede elegir mostrar la búsqueda en Navbar o en Header.

Nota Este es un atajo que publica la búsqueda en estas posiciones. También puede publicar un widget de búsqueda en cualquier puesto de tema disponible.

Estilo de Búsqueda

Elija entre el estilo de búsqueda Default y Modal. El estilo modal solo muestra un icono, y la búsqueda real aparecerá en un modo de pantalla completa al hacer clic. Como resultado, este estilo no está disponible para los diseños de encabezado modal y offcanvas.


Iconos Sociales

Como se describe en la sección Diseño del Encabezado anterior, puede elegir mostrar la búsqueda en Navbar, en Header, en Toolbar Left o en Toolbar Right.

Agregue hasta cinco enlaces de perfil social a través de Editar Enlaces para que se puedan mostrar los iconos. El icono correspondiente se mostrará automáticamente si está disponible. También hay iconos automáticos para la dirección de correo electrónico, el número de teléfono y Google Maps.

TIPO DE ENLACEDESCRIPCIÓN
Brands
Ingrese el enlace a su perfil de redes sociales.
Email

Ingrese el enlace a su dirección de correo electrónico usando mailto:

Teléfono

Ingrese el enlace a su número de teléfono usando tel:

Mapa
Ingrese el enlace a Google Maps.
Defina si los enlaces deben abrirse en una nueva ventana y si deben mostrar iconos como botones.
Hay dos opciones adicionales disponibles para diseñar los íconos sociales.
AJUSTEDESCRIPCIÓN
Social Icons Size
Introduzca una proporción de tamaño si desea que el icono aparezca más grande que el tamaño de fuente predeterminado, por ejemplo 1,5 o 2 para duplicar el tamaño.
Social Icons Gap
Establezca el tamaño del espacio entre los íconos sociales.

© 2020 Joomlapar
0961306646 | 0982786421