¿Cómo agregar y personalizar botones en WordPress? - Aprendermarketing.es/

El bloque de botones, como sugiere el nombre, proporciona una opción conveniente en el editor de bloques de Gutenberg para crear botones y llenarlos con contenido relevante y un hipervínculo a una página web adecuada. Para comenzar este tutorial, comencemos con los conceptos básicos de agregar y diseñar un botón con controles integrados que son naturales para el editor de bloques de Gutenberg.

• Para abrir el bloque de botones, haga clic en el icono más, es decir. Botón "Agregar bloque (+)" y seleccione "Botones".
• Haga clic en "Alternar inserción de bloque" y seleccione el bloque "Botón" disponible en el grupo Diseño.
• solo puedes escribir / botón e ir desde allí.

Agregar texto de botón e hipervínculos

Después de crear un botón, haga clic en él y agregue su texto. Puede usar la barra de herramientas para negrita, cursiva, subrayado, tachado y otras opciones que puede encontrar con cualquier bloque de texto en Gutenberg. También puede cambiar la alineación y la justificación para colocar su botón en el diseño.

Para vincular el botón a una URL específica, haga clic en el icono de la cadena en la barra de herramientas.

• Ingrese una palabra clave y WordPress mostrará automáticamente las URL relevantes de su sitio. Seleccione la página a la que desea vincular y active la opción "abrir en una pestaña nueva" para abrir el vínculo en una nueva pestaña del navegador.
• Cuando desee vincular una página externa, simplemente pegue la URL de la página y haga clic en el botón "Enviar".
• Puede agregar atributos al enlace al botón debajo de la configuración "Avanzada" en la barra lateral.

Recuerde que el color del enlace generalmente está controlado por el estilo de su tema, lo que puede no aplicarse cuando crea un botón en el editor. Así que asegúrese de revisar el botón y usar los colores/colores de fondo correctos para que el texto sea visible.

Una cosa clave a tener en cuenta es que cada bloque de botones tiene una cubierta exterior alrededor del botón. Puede hacer clic un poco horizontalmente desde el botón para ver un ícono + que muestra el texto "Agregar botón".

Haga clic en el ícono más para agregar automáticamente más botones al mismo bloque. Cuando agrega varios botones al shell, se alinearán horizontalmente de forma predeterminada. Puede ver cómo aparecen las diversas configuraciones superiores en la barra de herramientas y la barra lateral. ajuste el espacio entre los bloques y la alineación para ajustar el grupo horizontal de botones en el diseño de su sitio.

Puede cambiar la alineación a la visualización vertical usando la opción de orientación vertical debajo de la configuración de diseño de la barra lateral.

Después de insertar un bloque con botones, encontrará las opciones de estilo de bloque disponibles en el panel de configuración de la barra lateral. Puede usar estas opciones predeterminadas de WordPress para personalizar el aspecto de sus botones. Recuerde que estas opciones son para un botón y la opción cambiará cuando seleccione el grupo de botones como se muestra arriba.

• Estilos - Puede elegir un estilo lleno de color o simplemente delinear alrededor del botón desde esta opción de edición. También puede establecer una preferencia de estilo predeterminada seleccionando una de las dos opciones como su "Estilo predeterminado".

• Color - Ajusta el color de tu texto en seleccionando una de las opciones predeterminadas o agregando un código de color personalizado. De la misma manera, también puede ajustar el color de fondo para su botón, ya sea color sólido o degradado.

• Además de los degradados incorporados, puede crear su propio degradado personalizado ajustando la barra de degradado de color y eligiendo una dirección lineal o radial.

• frontera - La opción de forma de marco le brinda opciones para ajustar el radio del borde para hacer que el botón sea más redondeado. De modo que puede cambiar el estilo del botón de un rectángulo completo a un botón redondo completo. Todo lo que necesita hacer es ajustar el tamaño de píxel del marco del radio y encontrar un radio que se adapte a sus preferencias de estilo. Haga clic en px para cambiar la unidad de píxel a %, EM, REM, VW o VH.

• ancho - De forma predeterminada, el ancho de su botón estará determinado por el tamaño de su contenido más un pequeño relleno en cada lado. Aquí puede cambiar el ancho del botón en un 25 %, 50 %, 75 % o incluso el 100 % del ancho del contenedor. Para cancelar la configuración de ancho en lugar de hacer clic en otra opción de ancho, simplemente haga clic en el mismo ancho por segunda vez y el editor anulará la selección y volverá al ancho predeterminado.
• Tipografía - También puede cambiar el tamaño del texto del botón desde la sección de estilo de tipografía. Seleccione uno de los tamaños de fuente preconstruidos o ingrese un tamaño personalizado en píxeles para la fuente.
• Dimensiones - Cambie el relleno del botón ingresando un número específico de píxeles, lo que ajustará el relleno del botón en consecuencia. Puede ingresar un valor para los cuatro países o hacer clic en el ícono Diferencias por icono y proporcionar líneas superiores e inferiores.

• Avanzado "Por último, pero no menos importante, tenemos la configuración avanzada". Aquí puede incluir clases CSS adicionales y anclajes HTML para personalizar aún más el botón. Como se mencionó anteriormente, cuando vincula el texto del botón, puede agregar los atributos "rel" al cuadro de texto "Link rel". Por ejemplo, puede agregar nofollow al campo para hacer el botón de enlace nofollow.

Nota: Puede usar el mismo bloque de botones de Gutenberg y agregar botones a la barra lateral y al área de gadgets en el pie de página de su sitio.

Modelos de botones de Gutenberg

Además de crear grupos simples y de botones con Gutenberg, puede usar plantillas para insertar un bloque de botones predefinido en WordPress.

• Haz clic en el icono + que aparece como "Alternar inserción de bloque" en la esquina superior izquierda del editor de Gutenberg.
• Vaya a la sección "Modelos" y filtre "Botones" de la lista desplegable.
• Encontrará una lista de plantillas de bloque de botones predefinidas.
• Haga clic en el bloque que desee y péguelo en el área de contenido.

Puede agregar el bloque de botones y las plantillas como un bloque reutilizable e insertarlo en cualquier parte de su sitio.

Otras opciones para crear botones en WordPress

Además de usar el botón de Gutenberg, puedes usar varias opciones para crear botones en WordPress:

Y bueno, se trata de crear botones en el sitio de WordPress. Diseñar y crear botones con Gutenberg Button Editor es un proceso simple pero efectivo. Esto se debe principalmente a la disponibilidad de muchas opciones de estilo integradas diferentes proporcionadas por el bloque de botones de Gutenberg.