Cómo agregar botones en WordPress: Mejore sus botones de WordPress con PostX

Publicado: 2023-05-17

El bloque de botones de WordPress es un bloque poderoso para WordPress que lleva la personalización de botones a un nivel completamente nuevo. Con una amplia gama de opciones y funciones, le permite crear botones llamativos e interactivos que atraen a los visitantes de su sitio web. Entonces, ¿cómo agregar botones en WordPress?

Use los siguientes pasos para usar botones en WordPress

  • Instalar PostX
  • Agregar bloque de botón PostX
  • Agregar enlaces en el botón de WordPress
  • Personaliza el bloque de botones

Hoy exploraremos los aspectos más destacados del bloque de botones PostX, cómo agregar botones en WordPress usando PostX. Sin más preámbulos, comencemos.

¡Ver demostración ahora!
ocultar contenido
1 Cómo agregar botones en WordPress
2 videotutoriales
2.1 Paso 1: Instalar PostX
2.2 Paso 2: Agregar bloque de botones PostX
2.3 Paso 3: Agregar enlaces en los botones de WordPress
2.4 Paso 4: Personaliza el bloque de botones
2.4.1 Configuración de personalización para un solo botón
2.4.2 Estilo
2.4.3 Tamaño del botón
2.4.4 Texto
2.4.5 Antecedentes
2.4.6 Icono
2.4.7 Configuración de personalización para el grupo de botones (botones múltiples)
2.4.8 Espacio entre botones
2.4.9 Alineación horizontal y vertical
2.4.10 Margen
2.4.11 Animación de botones
3 Conclusión

Cómo agregar botones en WordPress

Ahora, explicaremos cómo agregar botones a los sitios de WordPress. Siga esta guía paso a paso y podrá agregar el botón de WordPress perfecto en su sitio web.

Videotutorial

Aquí hay un video tutorial para agregar el botón de WordPress a su sitio web.

Paso 1: Instalar PostX

Para desbloquear las potentes funciones de PostX y aprovechar sus funciones, debe instalar el complemento.

Para instalar y activar el complemento PostX Gutenberg Blocks:

Installing PostX
Instalación de PostX
  1. Vaya a Complementos → Agregar nuevo.
  2. Busque "PostX".
  3. Haga clic en Instalar y luego en Activar.

Obtener PostX Pro ¡para desbloquear todas las funciones interesantes y crear sitios web increíbles !

Ahora está listo para mejorar su sitio web con los botones de WordPress.

Paso 2: Agregar bloque de botones PostX

Hemos completado la instalación de PostX. Y los botones ahora están disponibles para su uso junto con su personalización extendida. Entonces, sin más preámbulos, le mostraremos cómo agregar botones en WordPress.

Adding Button Block
Agregar bloque de botones

Primero, necesitas ir a una página. Puede ir a la opción de página de WordPress y hacer clic en Agregar nuevo para crear una nueva página. Luego, busque "Grupo de botones" para seleccionar este bloque. Y esto agregará el botón de WordPress a la página.

Paso 3: Agregar enlaces en los botones de WordPress

Hipervincular un botón o, en términos simples, agregar enlaces en los botones de WordPress es fácil.

Adding Links to Buttons
Adición de enlaces a botones

Primero debe seleccionar el botón y seleccionar los textos que desea vincular. Ahora, verá la información sobre herramientas predeterminada de WordPress. En la información sobre herramientas, verá la opción "Enlace" con el icono de hipervínculo. Simplemente haga clic en él para abrir el cuadro de URL y allí agregue el enlace deseado para agregar enlaces en el botón.

Paso 4: personaliza el bloque de botones

Una vez que selecciones el bloque, verás todas las opciones de personalización en la barra lateral derecha.

Button Settings
Configuración de botones

Hay dos tipos de configuraciones para este bloque. Como puede agregar varios botones, este bloque tiene configuraciones separadas para "Botón" y "Grupo de botones".

Te mostraremos todas las opciones de personalización y cómo usarlas.

Configuración de personalización para un solo botón

Para seleccionar y abrir la configuración del botón, debe hacer clic en el botón.

Estilo

Primero, haga clic en el botón para obtener su opción de personalización. La primera configuración que verá son las opciones de estilo. Actualmente, tiene 4 opciones de estilo. Puede elegir el que mejor se adapte al diseño de su sitio.

Button Style
Estilo de botón

Tamaño del botón

La siguiente opción que obtendrá es cambiar el tamaño del botón. Obtendrá Pequeño, Mediano, Grande, Extragrande y Personalizado de forma predeterminada. Obtendrá el tamaño de botón predeterminado si selecciona la opción de tamaño Pequeño, Mediano, Grande o Extragrande.

Button Size

Pero si desea personalizar completamente el tamaño del botón, puede hacerlo seleccionando "Personalizado" y ajustando su parte superior, derecha, inferior e izquierda para establecer medidas horizontales y verticales.

Custom Button Size
Tamaño de botón personalizado

Aquí hay una perspectiva visual de diferentes estilos de botones.

Estilos de botones

Texto

Luego, obtendrá la configuración de texto. Esto le permitirá personalizar el texto del botón según sus necesidades. Verá la configuración de "Tipografía de texto", "Color de texto" y "Color de desplazamiento de texto".

Button Text Setting
Configuración del texto del botón

Si expande la configuración de Tipografía de texto, puede cambiar el tamaño de la fuente (totalmente personalizable), seleccionar fuentes (incluidas las fuentes personalizadas) , el peso de la fuente, la altura, el espaciado, la decoración del texto y los estilos de texto, y transformarlo a mayúsculas, minúsculas y titulo del caso.

Button Text Typography Control
Control de tipografía de texto de botón

Aquí hay una perspectiva visual del efecto de desplazamiento.

Selección de color y efecto de desplazamiento

Fondo

Esta configuración le permitirá personalizar todos los fondos de este bloque de botones.

Button Background Settings
Configuración de fondo del botón

Primero, puede configurar el botón Margen, que es totalmente personalizable, para obtener la ubicación horizontal y vertical perfecta.

Button Margin Control
Control de margen de botón

Luego puede cambiar los colores de los botones, tanto sólidos como degradados. Haga clic en cada uno para abrir la paleta de colores.

Button Color Setting
Configuración del color del botón

Después de eso, puede ajustar el borde de este botón. Esta configuración incluye estilos de borde (3 estilos prefabricados), ancho de borde y color.

Button Border Setting
Configuración del borde del botón

Y también, ajuste el radio del borde del botón seleccionado.

Button Border Radius Adjustment
Ajuste del radio del borde del botón

Además, obtendrá la configuración Box Shadow. Expandirlo le permitirá ajustar "Offset-X", "Offset-Y", "Blur" y "Spread".

Button Border Shadow Control
Control de sombra de borde de botón

Además, puede establecer el color de la sombra. Y obtendrá el interruptor "Insertar" si desea que el botón sombree hacia adentro en lugar de hacia afuera.

Icono

La última configuración que obtendrá en la configuración de los botones es la configuración del icono. Tienes que habilitar la barra de alternancia para usarla. Y una vez que expanda la configuración, verá el menú "Tienda de íconos", donde puede seleccionar íconos de una amplia biblioteca.

Button Icon Settings
Configuración de iconos de botones

Hay un botón para cambiar el icono de antes a después del texto.

Puede cambiar el tamaño del icono y ajustar el espacio entre el icono y el texto.

Icon Size and Space Control
Tamaño de icono y control de espacio

Y también, puede cambiar el color del ícono tanto en modo normal como flotante. Debe hacer clic en la personalización del color del icono para abrir la paleta de colores.

Button Icon Color Control
Icono de botón Control de color

Configuración de personalización para el grupo de botones (botones múltiples)

Para seleccionar el grupo de botones, verá un icono de "Seleccionar grupo de botones" en la información sobre herramientas predeterminada de WordPress.

Button Group Selection
Selección de grupo de botones

Espacio entre botones

Después de seleccionar el grupo de botones, encontrará la configuración de Espacio entre botones. Esta configuración ayuda a establecer la brecha entre 2 y más botones.

Button Gap Management
Gestión de espacios entre botones

Alineación Horizontal y Vertical

Aquí puede ajustar la alineación horizontal y vertical de varios botones.

Horizontal and Vertical Adjustment
Ajuste Horizontal y Vertical

También puede alternar la Alineación vertical para configurar los botones verticalmente.

Vertical Alignment Toggler
Alternador de alineación vertical

Margen

También puede ajustar el margen de todo el grupo de botones desde esta configuración.

Animación de botón

Esta es una de las configuraciones más interesantes en el bloque de botones. Actualmente, obtendrá 4 animaciones configuradas en el bloque de botones de WordPress. Y cada uno de ellos proporciona un enfoque diferente cuando se desplaza sobre el botón. Además, puede ajustar la posición de la animación con el control deslizante Transformación de botón.

Button Animation Selector
Selector de animación de botón

Aquí hay una imagen de las animaciones de los botones.

Animación de botón

Y eso es todo lo que obtendrá con el bloque de botones de WordPress. Ahora ya sabe cómo agregar botones de WordPress con PostX.

Obtener PostX Pro ¡para desbloquear todas las funciones interesantes y crear sitios web increíbles !

Conclusión

Ahora que sabe cómo agregar botones en WordPress, el bloque Button ofrece opciones de personalización avanzadas, que incluyen estilos de botones, integración de iconos, fondos degradados, efectos de desplazamiento, tipografía avanzada, funcionalidad de grupos de botones y animaciones. Puede crear increíbles botones para compartir en redes sociales, o incluso implementar un botón para cargar más completamente personalizado en su sitio.

Con esta poderosa herramienta, puede crear botones visualmente atractivos y atractivos que mejoran la experiencia del usuario de su sitio web. Aproveche el bloque de botones de WordPress de PostX para liberar el poder de los botones personalizables en WordPress.

Puede consultar los tutoriales en vídeo de WordPress en nuestro canal de YouTube. ¡También, encuéntrenos en Facebook y Twitter para actualizaciones periódicas!

¿Te gusta este artículo? Difundir la palabra
  • PostX User-Friendly Interface Update

    Presentamos la actualización de la interfaz fácil de usar de PostX

  • Gutenberg Post Blocks - #1 Best Post Blocks Plugin 1

    Bloques de publicaciones de Gutenberg: el mejor complemento de bloques de publicaciones

  • How to Create WordPress Page Template in Twenty Twenty-two Theme

    Cómo crear una plantilla de página de WordPress en el tema Twenty Twenty-Two

  • Security Update: WPXPO Products

    Importante actualización de seguridad para PostX y ProductX