¿Cómo añadir un botón como último elemento del menú?

Adding a button at the end of a menu is a common design choice as it makes the button stand out visually, signals actions, and helps users find important options easily.

This setup keeps the navigation clean and organized while ensuring users can quickly access key actions.

Here’s how you can do it using Astra’s customizer:

• Vaya a Apariencia > Personalice > Creador de cabeceras > Menú principal desde el panel de control de WordPress.

Here, you can see the Above header, Primary header, and Below header modules.

• Haga clic en el botón + icon on the right side of your primary header.

• Select the button option to add it to your menu.

Here’s how the button would look at the end of your website menu.

On clicking the button, you can see the customization options on the left side of the editor. Here, you can change the button text and add a button link.

También puede modificar el estilo del botón en la pestaña "Diseño". Esto le permite estilizar el botón de cabecera de forma diferente al botón por defecto del tema. Ofrecerá las siguientes opciones en la sección de diseño -

• Colores - Establezca el Color del texto, el Color de fondo y el color del borde.
• Border width and radius- Establezca aquí la anchura y el radio del borde.
• Caja Sombra – Set the box shadow value, position, and color.
• Acolchado - Establezca el relleno general del botón de cabecera.

For Your Mobile Devices

Vaya a Appearance > Customize > Header Builder from your WordPress Dashboard and follow these steps:

• Select the Mobile device options beside “Hide Controls”.

• You should see the off-canvas menu now. Click the + icon and add the button as the last item in the menu.

Once you make the changes, don’t forget to click the ‘Publish’ button.

Settings for the Astra Theme Below Version 3.0.0

En el panel de control de WordPress se puede encontrar un ajuste en Apariencia > Personalizar > Encabezado > Menú principal > Último elemento del menú.

Choosing the Button from the Last Item in menu desplegable ofrecerá las siguientes opciones -

1. Texto del botón - Añadir un texto
2. Botón Enlace - Dar un enlace para el botón
3. Estilo botón – With this option button can be displayed differently for different headers like primary header, transparent header, and sticky header (option with Astra Pro). Below is the detailed description –

Estilo botón

1. Botón temático: Set a button style the same as a theme button style. Choose a Theme Button option and click on the Personalizar el estilo de los botones enlace. El enlace le llevará a las opciones de estilo de botón por defecto.

If you wish to set a similar style for all buttons on the site and a different style just for the header button choose the Theme Button option and click on the Personalizar el estilo de los botones enlace.

En Personalizar el estilo de los botones will redirect you here:

2. Cabecera Botón: Esto le permite dar estilo al de forma diferente a un botón de tema por defecto. Ofrecerá las siguientes opciones en el campo Sección Botón de cabecera -

• Colores – Set the Text Color, Background Color, and Hover Color.
• Frontera - Establezca el Ancho del borde, el Color, el Color Hover y el Radio del borde.
• Acolchado - Establezca el relleno general del botón de cabecera.

Nota: Los estilos de los botones de cabecera no pueden establecerse a menos que la opción Botón de cabecera para el estilo del botón.

That’s it! We hope this guide was useful to you. Feel free to drop a message to our support team for further assistance.