El botón de alternar es una forma atractiva de mostrar contenido como menú, botón, búsqueda, etc. en la cabecera en la vista de escritorio. Está especialmente diseñado para pantallas de escritorio y funciona de forma similar al botón hamburguesa para móviles.
Cuando un usuario hace clic en el botón de alternancia, aparece una ventana fuera del lienzo en la pantalla con todo el contenido que has añadido dentro.
Como necesita un espacio pequeño en la cabecera, es una forma estupenda de mostrar contenido en la cabecera.
Este beneficioso elemento Header Builder es una característica premium de Astra y está disponible desde la versión 3.3 de Astra Pro. Antes de esta versión, era necesario utilizar personalizado código para traer un botón de alternar en el escritorio. Pero ya no.
Ahora puede mostrar fácilmente contenido fuera del lienzo en el escritorio y personalizarlo por completo con el nuevo elemento Botón de alternancia.
Aquí hay un vídeo que explica cómo utilizar este elemento:
Si prefiere una versión escrita, ¡déjenos sumergirnos!
Cómo añadir un botón de alternancia para escritorio
Como se trata de una función premium, asegúrese de tener el plugin Astra Pro actualizado y activado. Siga los pasos que se indican a continuación:
Paso 1: Abra Header Builder y haga clic en una sección en la que desee añadir un botón de alternancia. En la lista de elementos, seleccione Botón de alternancia.
Segundo paso: Ahora puede elegir el contenido, es decir, los elementos que se mostrarán dentro de una ventana que aparece cuando los usuarios hacen clic en el botón de alternancia.
Observará la sección fuera del lienzo en el constructor de cabecera en cuanto añada el botón de alternancia.
Haz clic en la sección fuera del lienzo y se abrirá una lista de elementos.
Elija los elementos necesarios de esta lista y se añadirán automáticamente a la sección fuera del lienzo. Puede añadir varios elementos como botones, búsqueda, widgets, HTML, iconos sociales, el menú fuera del lienzo, etc.
Para personalizar estos elementos basta con hacer clic sobre ellos y se abrirán todas las opciones de personalización en el personalizador.
Nota:
Para añadir un menú dentro de la sección fuera del lienzo, utilice el elemento Menú fuera del lienzo de la lista. Los menús primario y secundario no funcionarán dentro de la sección fuera del lienzo.
Por defecto, el menú off-canvas mostrará todas las páginas de su sitio web al igual que el menú por defecto de WordPress. Tendrás que crear un menú dedicado fuera del lienzo o asignar cualquier menú existente como menú fuera del lienzo.
Si no estás seguro de cómo crear y asignar un menú fuera del lienzo, aquí tienes los pasos -
- Haga clic en el menú fuera del lienzo
- En el personalizador, haga clic en "Configurar menú desde aquí".
- En el menú desplegable "Menú fuera del lienzo", seleccione el menú deseado. Si el menú deseado no está en la lista, puede incluso "Crear nuevo menú" y asignarlo como fuera del lienzo.
Paso 3: Una vez que añada todo el contenido necesario dentro de la sección fuera del lienzo, puede diseñar el botón de alternancia según su elección.
Para personalizar el botón de alternancia, haga clic en el botón en el constructor de cabecera y todas las opciones de diseño se abrirá de inmediato en el personalizador.
Una vez allí, puedes configurar lo siguiente:
- Iconos - Elija entre tres diseños diferentes
- Toggle Button Style - Elija entre tres estilos pre-construidos para el botón
- Etiqueta de menú - Aquí puede añadir una etiqueta para el botón de menú.
Haga clic en la pestaña Diseño para definir el tamaño, el color y el margen del botón de alternancia.
Paso 4: Puedes personalizar la ventana fuera del lienzo y establecer su diseño y colores. Para ello, haz clic en el icono de engranaje de Off-Canvas y se abrirán las opciones en el personalizador.
En la pestaña General puede establecer el tipo y la alineación de posición, mientras que en la pestaña Diseño puede establecer los colores y el espaciado.
Nota:
Si cambia a dispositivos tablet o móviles en el personalizador, observará una sección fuera del lienzo. Tenga en cuenta que la sección fuera del lienzo con el botón de alternancia en un ordenador de sobremesa, en una tableta o en un dispositivo móvil funciona por separado. Esto le permite diseñar diferentes menús de alternancia en diferentes dispositivos. La sección off-canvas del escritorio no se heredará automáticamente en una tableta o en dispositivos móviles y viceversa.
