Con la función Kata Tema, puede diseñar encabezados optimizados para varios tamaños de pantalla, creando una experiencia de usuario adaptable. Para una experiencia móvil mejorada, utilice el Kata Elemento de menú hamburguesa para diseñar un menú responsivo más avanzado. Esta guía proporciona instrucciones paso a paso para crear un encabezado optimizado para móviles, construir una plantilla de Elementor y administrar la configuración de visibilidad.
Crea una sección de encabezado optimizada para móviles
Agregar una nueva sección de encabezado para dispositivos móviles
Debajo de la sección de encabezado existente, cree una sección adicional. Esta sección se personalizará exclusivamente para pantallas más pequeñas para garantizar un mejor ajuste.
Agregar elementos principales al encabezado móvil
En esta nueva sección, coloque elementos esenciales como el Kata Logotipo y Kata Menú de hamburguesasEsta configuración garantiza que los usuarios de dispositivos móviles puedan acceder a la navegación principal con un simple interruptor.
Crea una plantilla de menú desplegable
Crear una nueva plantilla de Elementor
Para configurar el contenido que se muestra al pulsar el botón, ve a Administración de WordPress > Plantillas > Añadir nueva . Elige el tipo de plantilla Sección y crea una nueva plantilla específica para tu menú móvil.
Ajuste la altura de la sección para que se adapte a la pantalla.
En el editor Elementor, configure la altura de la sección en “Ajustar a la pantalla” para asegurarse de que el menú ocupe toda la altura de la pantalla del dispositivo cuando se abra.
Agregar el formulario Kata Elemento de menú y diseño personalizado
Arrastre el Kata Menú elemento en esta sección, estableciendo su diseño a Vertical para una apariencia simplificada y apilada que funciona bien en dispositivos móviles.
Seleccione el menú correcto para mostrar
Seleccione el menú deseado de las opciones desplegables para que quede vinculado a esta plantilla de menú optimizada para móviles.
Ahora, es momento de dar estilo a este menú con el Editor de Estilos. Ve a la pestaña Estilo y abre el editor de estilos del contenedor haciendo clic en el icono correspondiente. En el editor de estilos, ve a la pestaña Texto y cambia la alineación del texto a Centro. De esta forma, los elementos del menú quedarán centrados.
Dale estilo al menú con la herramienta de estilo.
Alinear elementos del menú
En la pestaña Estilo de Elementor , abre el Estilizador del Contenedor haciendo clic en el icono que aparece junto a él. En la sección Texto , ajusta la alineación del texto a Centro para asegurar que los elementos del menú queden bien alineados.
Personalizar elementos individuales del menú
Haz clic en General dentro de Styler para acceder a los elementos del menú. Aquí podrás ajustar los colores, las fuentes, el espaciado y otras opciones de estilo para que coincidan con la estética de tu marca.
Guardar la plantilla
Una vez que haya terminado de personalizar el estilo, guarde la plantilla. Este menú móvil ya está listo para conectarse a la Kata Elemento del menú hamburguesa.
Vincula el menú hamburguesa a la plantilla
Seleccione su nueva plantilla en Kata Menú de hamburguesas
Vaya a la Kata Menú de hamburguesas En la configuración, elige la plantilla que guardaste en el paso anterior. Esto vincula el menú al botón de alternancia, de modo que al pulsarlo en un dispositivo móvil se mostrará el menú avanzado.
Gestionar la configuración de visibilidad para diferentes dispositivos
Configuración de pantalla para pantallas grandes
Configure la sección del encabezado principal en Visualización: Bloque para pantallas de mayor tamaño (ordenador de sobremesa, portátil y tableta en modo horizontal) y Visualización: Ninguna para dispositivos móviles, móviles pequeños y tabletas pequeñas.
Configuración de visualización para el encabezado móvil
Para la sección de encabezado optimizada para dispositivos móviles, invierta estas configuraciones: Visualización: Ninguna para escritorio, computadora portátil y tableta en modo horizontal, y Visualización: Bloquear para dispositivos móviles, dispositivos móviles pequeños y tabletas más pequeñas.
Conclusión
Con estos pasos, has implementado con éxito un encabezado adaptable y compatible con dispositivos móviles utilizando KataFunción avanzada de menú desplegable. Al crear un menú que se abre a pantalla completa, los usuarios pueden navegar fácilmente por su sitio en dispositivos móviles, disfrutando de una experiencia fluida en todos los tamaños de pantalla.
