Cómo agregar un botón al encabezado en WordPress

Si desea agregar una llamada a la acción a su sitio de WordPress y colocarla en un lugar que se note fácilmente, el área del encabezado de su sitio web es el lugar perfecto para hacerlo. Ubicado en la parte superior de cada página del sitio web, el encabezado suele ser una de las primeras cosas que las personas ven al abrir una página. Esto lo convierte en un lugar natural para agregar algunos elementos importantes, como el título y el título de su sitio, la navegación principal del sitio web, el logotipo de su marca y, por supuesto, los botones de llamada a la acción.

El propósito completo de agregar un botón en primer lugar es lograr que sus visitantes realicen la acción deseada y los lleven a una página específica en su sitio (o fuera de su sitio) haciendo clic en ella. Por lo tanto, debe hacer que su botón sea visible instantáneamente en su página para atraer la atención de sus visitantes y hacer que hagan clic en él para generar más conversiones. Esto significa que el diseño del botón debe permitir que se destaque de otros enlaces de apariencia estándar que pueden aparecer en su menú de encabezado.

Ahora, de forma predeterminada, WordPress no viene con la capacidad de agregar botones individuales a su área de encabezado. En su lugar, puede agregar un menú de navegación a su encabezado con enlaces que tengan el mismo diseño. Aún así, hay una manera de «Transformar» un enlace de menú en el menú de navegación del encabezado y hacerlo aparecer como un botón. Afortunadamente, esto es fácil de hacer si usa un CSS personalizado. Entonces, esta vez, le mostraremos cómo agregar un botón al menú de navegación del encabezado de WordPress. Inmediatamente después, también demostraremos cómo inserte y personalice un widget de botón en cualquier otra área de encabezado de su elección (además de agregarlo justo al lado de su menú de navegación) usando el tema Bridge. Así que siéntese, relájese y siga leyendo.

Agregar un botón en su menú de encabezado de WordPress usando CSS personalizado

Para comenzar a transformar su enlace de menú en un botón, debe insertar el enlace de menú que desea utilizar por ir a Apariencia >> Menús. Luego, agregue un enlace a un menú de navegación creado previamente.

Si su menú ya contiene un elemento de menú que desea convertir en un botón, simplemente presione la flecha en su elemento de menú para expandirlo y editarlo.

Si aún no ha creado su elemento de menú, puede encontrarlo en el lado izquierdo de su pantalla (encontrándolo en Páginas, Publicaciones, etc.) dependiendo de si su elemento de menú conduce a una página, publicación u otra publicación. tipo) y luego haciendo clic en el Agregar al menú botón. En caso de que desee vincular a una página fuera de su sitio, puede elegir el Enlaces personalizados menú desplegable e inserte su URL y el texto del enlace manualmente, luego haga clic en Agregar al menú.

A continuación, asegúrese de dar un Etiqueta de navegación a su artículo (si aún no lo ha hecho).

Una vez que haga esto, debe continuar y acceder al Opciones de pantalla botón (ubicado en la parte superior de la pantalla). Asegúrese de que la casilla que dice «Clases CSS» esté marcada. Esto le permitirá agregar una clase CSS personalizada a su enlace y luego darle el estilo que desee.

Ahora, en la configuración del elemento del menú, podrá ver la nueva opción de clase CSS. Inserte un nombre para su clase de menú (el nuestro es botón de menú de encabezado, pero puede asignar cualquier nombre único de su elección aquí).

Golpea el Menú Guardar para guardar la configuración.

A continuación, debe personalizar el aspecto de su botón de menú de encabezado utilizando algún código CSS personalizado. Ir a Apariencia >> Personalizar para acceder a su personalizador de temas de WordPress y golpea el CSS adicional botón.

Inserte su código CSS personalizado aquí y luego haga clic en Publicar. Sin embargo, debe tener en cuenta que esto hará que todos sus cambios aparezcan instantáneamente en vivo, así que asegúrese de presionar este botón solo después de que esté completamente satisfecho con el aspecto del botón del menú del encabezado.

Si lo desea, puede insertar nuestro código CSS o cambiarlo de la forma que desee para que se ajuste a sus preferencias de diseño (cambie el borde y el radio del borde, el color de fondo y de texto, etc.):

.header-menu-button { 
background-color:#86af49;
border:1px;
border-radius:25px;
}
.header-menu-button a, .header-menu-button a:hover, .header-menu-button a:active { 
color:#fff !important;
}

Hemos optado por el botón de color verde (que se adapta perfectamente a nuestro diseño) y el color blanco liso del texto del botón. Además, hemos establecido un radio de borde de 25px para que nuestro botón tenga bordes ligeramente redondeados. Debe tener en cuenta que cuanto más disminuya el número de píxeles, más nítidos serán los bordes, mientras que aumentar el número de píxeles hará que su botón tenga una forma más redondeada.

Inmediatamente después de agregar su código CSS y presionar Publicar, podrá ver cómo se verá su botón en la vista previa del sitio web.

Agregar un botón a su encabezado usando temas de Qode

Hemos mencionado al principio que WordPress no viene con la opción de agregar un botón al área de su encabezado de forma inmediata. Dicho esto, algunos temas de WordPress vienen con muchas características adicionales destinadas a expandir aún más la funcionalidad de WordPress de varias maneras. Por ejemplo, en el caso de los temas de Qode, hay un widget llamado Botón Qode que le permite agregar y personalizar un botón directamente en el área de su encabezado. Le mostraremos cómo hacer esto usando el tema Bridge, así que asegúrese de seguir leyendo.

Ahora, desde el principio, debemos mencionar que Bridge (así como muchos otros temas de Qode) contiene múltiples áreas de widgets personalizados que puede usar para agregar diferentes widgets a su sitio. Cuando se trata del encabezado del sitio web en particular, consta de dos áreas principales: encabezado superior e inferior del encabezado. Luego, estas áreas se dividen en Encabezado superior izquierdo, encabezado superior derecho, encabezado inferior derecho y encabezado inferior central área de widgets. Podrá agregar widgets a cualquiera de estas áreas yendo a Apariencia >> Widgets.

Si está utilizando Bridge y no ve algunas de estas áreas en su lista de áreas de widgets, existe la posibilidad de que una de las áreas de encabezado (generalmente un Encabezado superior) esté apagada. Necesitas asegúrese de que esta área se muestra accediendo Opciones de Qode >> Encabezado en su panel de WordPress.

Luego, encuentra el Encabezado superior sección y cambiar el Mostrar área superior del encabezado para sí.

Hay muchas otras opciones aquí relacionadas con el área de la parte superior de su encabezado que puede ajustar de acuerdo con sus preferencias, como el color de fondo, el relleno, la capacidad de ocultarlo en el desplazamiento y otras.

Por supuesto, también encontrará otras opciones relacionadas con el área inferior del encabezado, así como otras opciones generales del encabezado, como la capacidad de cambiar el color del borde, la transparencia, configurarlo para que esté en la cuadrícula, etc.

Una vez que esté satisfecho con su configuración, presione el Guardar cambios botón.

Ahora, veamos cómo puede agregar un botón a una de estas áreas de widgets usando el Botón Qode widget. Puede agregar este botón a cualquier área de widget de encabezado que desee. Vamos a demostrar cómo agregar un botón al Encabezado Inferior Derecha área de widgets, que hará que nuestro botón aparezca justo al lado del menú de navegación del encabezado. Esta es una de las áreas más comunes para agregar un botón a un sitio, lo cual es bastante lógico, ya que el menú de navegación en sí es uno de los elementos del sitio web más fáciles de notar.

Para hacer esto, busque un Botón Qode widget, elija el área de su widget (encabezado inferior derecho) y presione el Agregar widget (o simplemente arrástrelo al área de widgets a la derecha).

Con las opciones del widget del botón Qode, podrá establezca el tamaño de su botón, agregue el texto de su botón, enlace, cambie sus colores (color de desplazamiento, color de fondo, etc.) y mucho más.

Golpea el Ahorrar una vez que haya terminado de configurar las opciones del widget de su botón, y continúe para ver cómo se ve su botón en vivo.

Por supuesto, como ya hemos mencionado, puede agregar fácilmente su botón a cualquier otra área de widget de encabezado disponible. Por ejemplo, así es como se ve nuestro botón una vez que agregamos (y personalizamos) nuestro widget Qode Button en el área del widget del encabezado superior izquierdo (de la misma manera que lo hicimos para nuestro área del encabezado inferior derecho):

Como puede ver, nuestro botón ahora se encuentra encima del logo de la izquierda.

O bien, aquí está el aspecto de nuestro botón cuando se agrega al área del widget de encabezado superior derecho:

Por supuesto, puede usar la misma opción CSS personalizada que usamos en el primer método en uno de nuestros temas (para convertir su elemento de menú en un botón), pero el widget Qode Button es una opción mucho más simple ya que le permite diseñar su botón de la forma que desee sin usar ningún código. Además, como puede ver en nuestros ejemplos de imágenes anteriores, puede colocarlo en cualquier lugar que desee en su encabezado.

Conclusión

No importa si desea agregar un enlace a un formulario de registro, un botón de compra o cualquier otro tipo de CTA, su encabezado es uno de los mejores lugares para llamar la atención sobre su botón y motivar a sus visitantes a tomar medidas. En esencia, agregar un botón a su menú de encabezado es fácil: todo lo que necesita hacer es transformar su elemento de menú existente asignándole una clase CSS personalizada y luego diseñar su botón usando el Apariencia >> Personalizar pantalla. Aún así, si está usando (o planea usar) uno de nuestros temas, tendrá muchas más opciones de personalización a su disposición y también podrá colocar rápida y fácilmente su botón en cualquier área de widgets de su elección (no solo su encabezado menú). Por lo tanto, elija su método preferido y siga nuestras instrucciones cuidadosamente para que pueda agregar una llamada a la acción prominente a su encabezado que ayudará a mejorar la experiencia del usuario y aumentar sus conversiones.