existe WordPress En el tema.Blocksy Flexible, ligero y altamente personalizable. En el dise?o móvil, Mobile Header de Blocksy tiene un rendimiento excelente, con una interfaz claramente estructurada, soporte para menús deslizantes Off Canvas, gestión diversificada de elementos y una gran variedad de capacidades de control visual. Este artículo presenta cómo configurar Mobile Header, cómo aplicar el área Off Canvas y los detalles de las funciones avanzadas.
![Imagen[1]-Blocksy Mobile Header Tutorial Completo: Menú Off Canvas y Análisis del Dise?o del Menú](http://gqxi.cn/wp-content/uploads/2025/05/20250513092053226-image.png)
I. Introducir la configuración de la cabecera móvil
Para empezar a configurar la cabecera móvil:
- entrar en WordPress Backend, abra Apariencia > Personalizar;
- Vaya al área Cabecera;
- Cambie a la vista de tableta / móvil en la parte inferior;
- La pantalla por defecto es una vista plana, más fácil de manejar en una interfaz relativamente amplia.
![Imagen [2]-Blocksy Mobile Header Complete Tutorial: Off Canvas Menu y Menu Layout Analysis](http://gqxi.cn/wp-content/uploads/2025/05/20250513092217664-image.png)
La estructura general es coherente con la del escritorio y sigue utilizando un dise?o de tres líneas.
En segundo lugar, los elementos móviles disponibles y la lógica de dise?o
Las páginas para móviles se optimizan en cuanto a la configuración de los elementos. Por ejemplo, se ocultan o sustituyen algunos componentes que suelen utilizarse en ordenadores de sobremesa pero que no tienen sentido en pantallas peque?as. Se introduce uno de los cambios más cruciales:
- Disparador(Trigger): expande el área Off Canvas cuando se hace clic sobre él y es el punto de entrada a la navegación.
![Imagen [3]-Blocksy Mobile Header Complete Tutorial: Off Canvas Menu y Menu Layout Analysis](http://gqxi.cn/wp-content/uploads/2025/05/20250513092515286-image.png)
Para los usuarios de Blocksy Premium, los menús también pueden insertarse directamente en la cabecera, saltándose la estructura de activación y mejorando la eficacia operativa.
III. Funciones del área Off Canvas en detalle
Off Canvas es el área que se desliza hacia fuera desde el borde de la pantalla cuando se pulsa el botón de menú para mostrar el menú con contenido personalizado.
Los componentes compatibles son:
- HTML bloques
- Iconos sociales
- Botones personalizados
- Menú móvil
La configuración incluye:
- Modo de visualización: admite máscara de pantalla completa o visualización lateral;
- Alineación del contenido: opcional arriba, centro o abajo;
- Ajustes de estilo: Puede ajustar parámetros como el color, el degradado o el patrón de fondo.
![Imagen [4]-Blocksy Mobile Header Complete Tutorial: Off Canvas Menu y Menu Layout Analysis](http://gqxi.cn/wp-content/uploads/2025/05/20250513092617175-image.png)
El contenido está dispuesto verticalmente para adaptarse al estilo de navegación móvil.
IV. Configuración del menú móvil (Mobile Menu)
El menú puede colocarse en la zona Off Canvas o insertarse directamente en la cabecera.
Proporcionar estilo:
- Estilo normal;
![Imagen [5]-Blocksy Mobile Header Complete Tutorial: Off Canvas Menu y Menu Layout Analysis](http://gqxi.cn/wp-content/uploads/2025/05/20250513092808485-image.png)
- Estilos de separación (con bordes y espacios en blanco);
![Imagen [6]-Blocksy Mobile Header Complete Tutorial: Off Canvas Menu and Menu Layout Analysis](http://gqxi.cn/wp-content/uploads/2025/05/20250513092909694-image.png)
Soporta la función de submenú colapsado, inicialmente el submenú está oculto, cuando se hace clic en el elemento padre, se expandirá. También se puede configurar para que esté siempre expandido.
![Imagen [7]-Blocksy Mobile Header Complete Tutorial: Off Canvas Menu y Menu Layout Analysis](http://gqxi.cn/wp-content/uploads/2025/05/20250513093118581-image.png)
![Imagen [8]-Blocksy Mobile Header Complete Tutorial: Off Canvas Menu and Menu Layout Analysis](http://gqxi.cn/wp-content/uploads/2025/05/20250513093152388-image.png)
Blocksy Premium ofrece un menú compacto que se puede insertar en la fila de cabecera, adecuado para mostrar un número reducido de entradas de la página principal.
![Imagen [9]-Blocksy Mobile Header Complete Tutorial: Off Canvas Menu and Menu Layout Analysis](http://gqxi.cn/wp-content/uploads/2025/05/20250513093419924-image.png)
V. Configuración del disparador (botón de disparo)
Los activadores son interruptores que controlan la visualización de la zona fuera de lienzo y deben a?adirse al móvilpie de páginaUna cierta línea.
Entre sus características se incluyen:
- Tres opciones de iconos;
- Personaliza el estilo de los botones;
- Si se muestra o no el texto de la etiqueta;
- Ajuste del estilo de fuente y color;
![Imagen [10]-Blocksy Mobile Header Complete Tutorial: Off Canvas Menu y Menu Layout Analysis](http://gqxi.cn/wp-content/uploads/2025/05/20250513093709593-image.png)
es uno de los principales componentes de interacción en las páginas para móviles.
VI. Función Desktop Off Canvas (Premium)
La versión avanzada también permite llamar a las áreas Off Canvas en el escritorio. La lógica de dise?o es la misma que para móviles, pero adaptada a pantallas más grandes.
![Imagen [11]-Blocksy Mobile Header Complete Tutorial: Off Canvas Menu and Menu Layout Analysis](http://gqxi.cn/wp-content/uploads/2025/05/20250513093833751-image.png)
Puede colocar auxiliaresmenú, enlaces sociales o módulos de información para dise?ar páginas ordenadas.
VII. Configuración de cabecera transparente y adhesiva
Las cabeceras móviles tienen controles separados de transparencia y adherencia:
- cabecera adhesiva: Se fija en la parte superior cuando la página se desplaza;
- Cabecera transparente: Adecuado para situaciones en las que la parte superior de la página tiene un fondo de imagen o vídeo;
![Imagen [12]-Blocksy Mobile Header Complete Tutorial: Off Canvas Menu y Menu Layout Analysis](http://gqxi.cn/wp-content/uploads/2025/05/20250513094038463-image.png)
Estas dos funciones no están asociadas al escritorio y pueden activarse independientemente.
resúmenes
Blocksy El dise?o de la cabecera móvil está claramente estructurado, es flexible y fácil de ajustar, lo que permite adaptarlo a las necesidades de visualización móvil en diversos escenarios. Ya sea para crear una barra de navegación sencilla o un menú deslizante avanzado, Blocksy proporciona suficientes módulos y opciones de configuración para sentar unas bases sólidas para el dise?o de sitios móviles.
Si estás construyendo un sitio de navegación móvil, prueba el módulo de cabecera móvil de Blocksy para conseguir un front-end limpio, funcional y bonito.
Actualizaciones recientes
Contacte con nosotros | |
---|---|
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas |
![]() Servicio de atención al cliente WeChat
|
① Tel: 020-2206-9892 | |
② QQ咨詢:1025174874 | |
(iii) Correo electrónico: info@361sale.com | |
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres |
Enlace a este artículo:http://gqxi.cn/es/53632El artículo está protegido por derechos de autor y debe ser reproducido con atribución.
Sin comentarios