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

Antes de la versión 5.8, WordPress usaba un editor clásico sin funciones básicas. Debe confiar en complementos de terceros para crear elementos simples como botones y tablas. Sin embargo, el último editor de Gutenberg ofrece una interfaz basada en bloques que incluye un bloque de botones para crear botones en sus páginas de manera simple y sencilla. Ya sea un CTA o un botón de la barra lateral, puede usar el bloque de botones en el editor de bloques de Gutenberg para crear rápidamente botones personalizados y diseñarlos de acuerdo con su marca y preferencias de diseño.

📑 Aquí podrás encontrar 👇

Bloque de botones de Gutenberg

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 un botón a WordPress Gutenberg

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.

Bloque de botones con las opciones superiores de la barra de herramientas
Bloque de botones con las opciones superiores de la barra de herramientas

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.
Añadir un enlace al botón en WordPress
Agregar un enlace al botón

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.

Botones horizontales y verticales

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".

Agregar un grupo de botones
Agregar un grupo de botones

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.

Grupo de botones horizontales
Grupo de botones horizontales

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.

Grupo vertical de botones
Grupo vertical de botones

Personalizar botones en WordPress

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.

Configuración del bloque de botones de Gutenberg
Configuración del bloque de botones de Gutenberg
  • 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".
Estilos de botones
Estilos de botones
  • 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.
Colores de fondo y texto
Colores de fondo y texto
  • 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.
Botones de degradado en Gutenberg
Botones de degradado en Gutenberg
  • 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.
Otras configuraciones de botones
Otras configuraciones de botones
  • 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.
Agregar atributos al enlace rel
Agregar atributos al enlace rel
  • 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.
Plantillas de botones de Gutenberg
Plantillas de botones de Gutenberg

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:

Ultimas palabras

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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir