Skip to main content

BLOG

LAYOUT

Encabezado móvil

Personaliza la cabecera y la barra de navegación de tu sitio web para dispositivos móviles.

Si lo deseas, reemplaza la cabecera predeterminada por una versión móvil en dispositivos más pequeños. La cabecera incluye el logotipo del sitio, el botón para mostrar el menú de navegación y otros elementos típicos.

Puedes encontrar los siguientes ajustes en el panel Layout → Mobile de YOOtheme Pro.


Visibilidad

Define el tamaño del dispositivo a partir del cual se reemplaza el encabezado de escritorio por el encabezado móvil. El punto de ruptura depende del número y el tamaño de los elementos de la barra de navegación.

Utilice los botones de vista previa del dispositivo para ver cómo se ve el sitio en diferentes anchos de pantalla.

VISIBILIDADDESCRIPCION
None

No mostrar el encabezado móvil.

Pequeño

Muestra el encabezado móvil si el ancho del dispositivo es inferior a 640px.

Medium

Muestra el encabezado móvil si el ancho del dispositivo es inferior a 960px.

Large

Muestra el encabezado móvil si el ancho del dispositivo es inferior a 1200px.


Header Layout – Posiciones

Seleccione la disposición para el logotipo móvil, la barra de navegación y las posiciones del encabezado. (Logo, Navbar y Header)

POSICIONCOLORDESCRIPCION
Logo
Negro

Muestra el logotipo, así como el área del widget móvil del logotipo.

Navbar
Verde
Muestra la ubicación del menú de navegación móvil y el área de widgets
Header
Púrpura
Muestra la ubicación del menú móvil del encabezado y el área de widgets
Opcionalmente, elimine el relleno del logotipo para diseños en los que el logotipo esté ubicado a la izquierda, por ejemplo, para logotipos con fondos de color.

Horizontal Layouts

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

Barra de navegación (Navbar)

Hay tres opciones disponibles para controlar la posición y el comportamiento de la barra de navegación móvil.
OPCIÓNDESCRIPCION
Static
La barra de navegación se desplazará fuera del área visible al hacer scroll.
Sticky
La barra de navegación permanecerá fija en la parte superior de la ventana gráfica al desplazarse.
Sticky on scroll up
La barra de navegación se desplazará fuera del área visible al desplazarse hacia abajo y permanecerá fija al desplazarse hacia arriba.

Nota Si se configura un encabezado transparente en una sección, la barra de navegación fija aparecerá una vez que se haya desplazado por debajo de la sección principal y se ocultará cuando la sección principal entre en el área visible.

Haz que el encabezado sea transparente y se superponga al fondo del sitio en todas las páginas, incluso cuando esté fijo. El color del texto del encabezado cambiará automáticamente según el fondo. Opcionalmente, puedes colorear las partes de la barra de navegación por separado y combinar el color del texto de la barra de navegación con el contenido de la página.


Dialog Layout – Posiciones

Además del diseño de la cabecera, YOOtheme Pro puede mostrar menús y widgets publicados en el área de widgets del diálogo móvil en una barra desplegable, una barra lateral o una ventana modal. El diálogo se abre al hacer clic en un icono que aparece automáticamente en la cabecera móvil.

Seleccione la posición del botón del diálogo. Opcionalmente, muestre el texto “Menú” junto al icono.

Seleccione el diseño para la posición móvil del diálogo. Los elementos que se pueden pulsar se muestran como puntos suspensivos. Además, todos los diseños ofrecen la opción de centrar su contenido horizontalmente y de mostrar u ocultar el botón de cierre para los diseños fuera del lienzo y modales.

Dialog Push Items

Los diseños de diálogo ofrecen la opción de desplazar los widgets publicados en el área de diálogo móvil hacia la parte inferior del diseño. Simplemente configure el número de elementos a partir del cual los siguientes se desplazarán hacia abajo.

Dropbar Layouts

La barra desplegable se extiende a lo ancho y alto de la pantalla, pero no se superpone a la barra de navegación. Los elementos de la barra de navegación siguen siendo interactivos cuando la barra desplegable está abierta. Los elementos se muestran en la parte superior o en el centro de la barra desplegable.

Offcanvas Layouts

La barra lateral desplegable se superpone a la barra de navegación. Los elementos se muestran en la parte superior o en el centro de la barra lateral desplegable.

Modal Layouts

La ventana modal se superpone a la barra de navegación. Los elementos se muestran en la parte superior o en el centro de la ventana modal.

Offcanvas Options

Existen opciones adicionales para los diseños Offcanvas.
OPCIÓNDESCRIPCION
Slide
La barra fuera del lienzo se desliza sobre el contenido de la página.
Reveal
El contenido de la página se desplaza fuera del área visible, dejando al descubierto la barra fuera del lienzo que se encuentra debajo.
Push
La barra fuera del lienzo desplaza el contenido de la página fuera del área visible.
Además, defina si la barra lateral fuera del lienzo se abre a la izquierda o a la derecha.

Videos