Un botón predeterminado recibe clics; un botón con un pequeño movimiento obtiene más de ellos. El gratis Widget de botón creativo en Complementos maestros para Elementor envía una biblioteca de ajustes preestablecidos de efectos flotantes, desde sutiles barridos de fondo hasta animaciones de intercambio de texto, para que un llamado a la acción pueda moverse sin que usted escriba una línea de CSS.
Elige un ajuste preestablecido, escribe el texto, agrega un ícono si lo desea y diseña los estados normal y flotante. Esta guía cubre todo el widget, arrastrándolo hasta el botón terminado.
Qué hace el widget de botones creativos #
El widget representa un botón de llamada a la acción con una animación flotante prediseñada. Las animaciones vienen con 21 ajustes preestablecidos con nombre, 6 gratuitos y 15 con Master Addons Pro, cada uno con su propio movimiento: fondos que se deslizan hacia adentro, bordes que se dibujan a sí mismos, texto que cambia a un mensaje alternativo. Todo lo demás funciona como un botón Elementor normal: texto, enlace, icono, alineación y control a todo color por estado.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- El widget de botones creativos habilitado en el panel de opciones de complementos maestros, en Widgets básicos.
Cómo agregar el widget de botones creativos #
En el editor Elementor, busque el Elementos panel para Botones creativos y arrastre el widget a la página. Aparece un botón oscuro que dice “Agregar su contenido CTA”, ya conectado con el efecto Predeterminado.
Elija un ajuste preestablecido de efecto de botón #
Abierto Controles preestablecidos y de botones en la pestaña Contenido. El Efectos de botón dropdown es el corazón del widget: Default, Winona, Ujarak, Wayra, Tamaya y Rayen son gratuitos. Pipaluk, Moema, Isi, Aylen, Saqui, Wapasha, Nina, Nanuk, Nuka, Antiman, Itzel, Naira, Quidel, Sacnite y Shikoba necesitan Complementos maestros Pro.
Cada nombre es una animación flotante diferente. Pase el botón en el lienzo después de cada selección y el editor reproducirá el efecto en vivo, por lo que audicionar ajustes preestablecidos lleva unos segundos. Los nombres no insinúan lo que hacen, por lo que probar cuatro o cinco es la forma más rápida de encontrar el correcto. Alineación de botones y Alineación de texto de botones siéntese justo debajo, cada uno con un interruptor responsivo para la configuración por dispositivo.
Establezca el texto, el enlace y el texto alternativo #
El Controles de botones el grupo cubre el contenido. Texto del botón es la etiqueta, y Url del enlace apunta el botón a alguna parte, con el ícono de engranaje para las opciones de nueva pestaña y nofollow.
Los ajustes preestablecidos pueden cambiar la etiqueta por un segundo mensaje al pasar el cursor. Elija cualquier efecto que no sea el predeterminado y un Texto de botón alternativo aparece el campo; la demostración lo establece en “¡Haga clic AHORA!” entonces el botón dice “Agregar su contenido CTA” en reposo y se voltea al pasar el cursor.
Agrega un ícono #
El Icono el control abre la biblioteca de iconos de Elementor, con Font Awesome y todos los conjuntos de iconos que haya instalado.
Después de elegir uno, Posición del icono lo coloca antes o después de la etiqueta, y Espaciado de iconos establece el espacio; la demostración lo eleva a 12 píxeles para que el icono y el texto respiren.
Estila el botón #
Cambiar al Estilo pestaña y abre Estilos de botones. El grupo superior maneja la forma: Ancho, Tipografía, Acolchado de botones, Tipo de borde, Radio fronterizo (8 en la demostración, para esquinas suavemente redondeadas), Sombra de caja, y Tamaño del icono.
Debajo de eso, Normal y Flotar cada una de las pestañas tiene tres colores: Color del texto, Color de fondo, y Color del icono. La demostración proporciona el texto en blanco en estado normal en azul:
Luego cambia el estado de vuelo estacionario a texto oscuro sobre verde, por lo que el efecto se anima entre dos miradas claramente diferentes:
A Patrones la sección en la parte inferior proviene de la extensión gratuita Patterns y agrega patrones de fondo decorativos.
El resultado en la página #
En la página en vivo, el botón se coloca en sus colores normales hasta que llega el cursor. Luego se reproduce el ajuste preestablecido: el fondo pasa al color flotante, el icono y el cambio de texto, y aparece el texto alternativo si el ajuste preestablecido usa uno.
Casos de uso comunes #
- Cta de la sección de héroes donde la animación llama la atención sobre la acción principal.
- Botones de la página de precios con un intercambio de texto como “¡Comience” a “¡Es gratis!” en flotar.
- Botones de descarga y registro combinado con un icono para un reconocimiento instantáneo.
- Secciones de página de destino eso necesita un botón para diferenciarse de los valores predeterminados del tema.
Consejos para mejores botones creativos #
- Ajustes preestablecidos de audición en el lienzo. Pase el botón después de cada selección de efectos; la animación se reproduce en el editor, no se necesita vista previa.
- Haga que el estado de vuelo estacionario contraste. La animación se lee mejor cuando los colores normales y flotantes difieren claramente, como la demostración de azul a verde.
- Mantenga breve el texto alternativo. Los ajustes preestablecidos de intercambio de texto se ven limpios cuando ambos mensajes tienen aproximadamente la misma longitud.
- Un botón creativo por sección. El movimiento gana atención; Tres botones en movimiento seguidos compiten entre sí.
- Comprueba el comportamiento del grifo en el móvil. Las pantallas táctiles no flotan, así que asegúrese de que el estado normal se lea como si se pudiera hacer clic por sí solo.
Vídeotutorial #
También puede ver el video a continuación si desea ver el botón creativo en acción, desde elegir un efecto preestablecido hasta la animación flotante terminada en la página en vivo.
Preguntas frecuentes #
¿cuál es el widget de botones creativos en los complementos maestros?
Es un widget de Elementor para botones de llamada a acción con animaciones flotantes prediseñadas. Elige entre 21 ajustes preestablecidos de efectos con nombre (6 gratis, 15 con Pro), configura el texto, el enlace y el ícono, y diseña los estados normal y flotante por separado del panel Elementor.
¿cuántos efectos de botón se incluyen?
El menú desplegable Efectos de botón enumera 21 ajustes preestablecidos. Default, Winona, Ujarak, Wayra, Tamaya y Rayen son gratuitos, y el resto necesita Master Addons Pro, incluidos Winona, Ujarak, Wayra, Tamaya, Rayen, Moema, Naira y Shikoba. Cada uno aplica una animación flotante diferente y el lienzo del editor reproduce el efecto en vivo cuando pasa el botón.
¿qué es el campo Texto de botón alternativo?
Los efectos pueden cambiar la etiqueta del botón por un segundo mensaje al pasar el cursor. Cuando elige cualquier efecto que no sea el predeterminado, aparece el campo Texto de botón alternativo para que pueda configurar el mensaje de desplazamiento, como cambiar “¡Comience” a “¡Es gratis!”.
¿Puedo agregar un ícono al botón creativo?
Sí. El control de iconos abre la biblioteca de iconos de Elementor. Después de elegir un ícono, la posición del ícono lo coloca antes o después del texto, el espaciado de los íconos establece el espacio y el tamaño y el color de los íconos se encuentran en la pestaña Estilo.
¿puedo diseñar el estado flotante por separado?
Sí. Los estilos de botones tienen pestañas Normal y Flover, cada una con su propio color de texto, color de fondo y color de icono. El ajuste preestablecido se anima entre los dos estados, por lo que los colores contrastantes hacen que el efecto sea más visible.
Envolviendo #
El widget Creative Buttons convierte un CTA simple en uno animado sin código personalizado: elija un ajuste preestablecido del menú desplegable Efectos, configure el texto y el ícono y proporcione los colores de estados normal y flotante entre los que vale la pena animar. Se combina bien con el widget Creative Links para enlaces de texto animados. Explora el conjunto completo de Widgets y extensiones de complementos maestros, y mira el Página del widget del botón creativo para demostraciones y una comparación con el widget Elementor Button.
