Cómo crear un botón animado en Elementor Pro y Elementor Gratuito

Cómo crear un botón animado en Elementor Pro y Elementor Gratuito
Tabla de Contenidos

_ Te asesoramos sin compromiso _

Presupuesto diseño web​ ¿Tienes un proyecto en mente? Cuéntanoslo
Los datos facilitados a través de este formulario serán tratados por GALERNA ESTUDIO S.L.U. con CIF B39706023 y domicilio en Calle San Fernando, 58, 8-D · 39010 Santander (Cantabria) de acuerdo con lo establecido en nuestra política de privacidad con la finalidad de poder enviarle información sobre nuestros productos / servicios. Los datos recabados por este formulario no se cederán a terceros salvo por obligación legal. Le recordamos que usted tiene derecho al acceso, rectificación, limitación de tratamiento, supresión, portabilidad y oposición al tratamiento de sus datos dirigiendo su petición a la dirección postal indicada o al correo electrónico [email protected] Igualmente puede dirigirse a nosotros para cualquier aclaración adicional. En caso de no aceptación sus datos no serán tratados.

En este artículo te explicamos como crear un botón Elementor Pro y Elementor Gratuito. Si quieres crear un diseño web atractivo, versátil e innovador que permita destacar tu contenido e invite al usuario a consumirlo, una excelente idea es integrar un botón animado en Elementor, por eso hoy te enseñamos cómo hacerlo. En este artículo aprenderás cómo crear un botón en Elementor de manera rápida y fácil. ¡Acompañanos!

De allí, que este post esté dirigido expresamente a aprender a animar un botón con Elementor, uno de los constructores más usados ya permite desarrollar páginas web fácilmente, mediante la integración de widgets, entre estos el widget botón, el cual como lo indica su nombre, sirve para añadir botones animados y darle la apariencia que se desea.

Botones en Elementor

Es importante mencionar que los botones son uno de los elementos más difíciles de destacar, debido a que la mayoría de los diseños nos permiten crear botones planos que proporcionan una mínima interacción. Por lo que más allá de su funcionalidad, hay que trabajar en que este marque la diferencia y sea llamativo.

Qué tipos de botones podemos añadir con Elementor

Ahora bien, tanto en la versión gratuita de Elementor como en la versión PRO encontramos 5 estilos de botones; y la diferencia radica en el nivel de configuración y personalización que proporciona cada versión.

Tipos de botones en Elementor

  • Por defecto
  • Información
  • Correcto
  • Advertencia
  • Peligro

Al seleccionar uno u otro lo que básicamente cambia es la apariencia del botón.

Utilizar Elementor para crear botones animados

Paso 1: Instalación y configuración de Elementor en tu sitio web de WordPress

Para instalar Elementor debes dirigirte a la sección de Plugins y dar clic en Añadir Nuevo. Estando allí busca Elementor en el buscador. Una vez lo encuentres, haz clic en Instalar y luego en Activar.

Con esto ya habrás instalado la versión gratuita de Elementor, pero si quieres instalar Elementor Pro tienes que comprar una licencia y luego subirla desde la misma sección de Plugins de WordPress.

Para configurar Elementor dependerá de la versión que hayas instalado, ya que entre uno y otro habrán diferentes opciones de configuración; aunque entre las más básicas y a las que hay que prestar atención tenemos:

  1. Ajustes: aquí puedes configurar opciones generales como los tipos de contenido, desactivar colores por defecto, desactivar fuentes por defecto, compartir datos de uso, añadir llaves de integraciones (API). Así mismo, cambiar algunos parámetros como el método de impresión de CSS, el método de carga del editor, permitir la subida de archivos sin filtrar, configurar la carga de fuentes de Google Fonts, entre otros.
  2. Gestor de perfiles: esto lo puedes configurar si existen varios usuarios con acceso al WordPress y quieres limitar las funcionalidades de Elementor.
  3. Herramientas: en esta sección se pueden realizar diversas acciones en función al comportamiento del plugin.
  4. Fuentes personalizadas (PRO): la encuentras con la versión paga y permite cargar las propias tipografías en diversos formatos como: WOFF, WOFF 2, TTF, SVG, EOT.
  5. Custom icons (PRO): aquí podrás subir pack de iconos.
  6. Código personalizado (PRO): se puede añadir código personalizado a la web para no tener que recurrir a la instalación de plugins adicionales.

Paso 2: Creación de una nueva sección y columna en Elementor

Una vez configurado el maquetador de páginas, ya puedes crear una nueva sección y columna, para luego sí trabajar en el widget de botón.

Para ello, debes ubicarte en la sección del sitio web en donde quieres agregar el botón. Luego dar clic en el icono “+” y seleccionar el diseño de la columna. Escoge el formato que necesites.

Paso 3: Añadiendo un widget de botón en Elementor

Lo siguiente que debes hacer es agregar el widget de botón a la columna que recién has incorporado.

Paso 4: Personalización del diseño y estilo del botón

En el menú del widget podrás personalizar el diseño y estilo del botón:

  • Texto: aquí se puede colocar el texto que quieres que tenga el botón.
  • Alineación: para justificar la alineación del botón, si se quiere a la derecha, centro o izquierda.
  • Enlace: puedes añadir enlace en el botón en Elementor de WordPress.
  • Tamaño: da la opción de seleccionar entre diversos tamaños: extra grande, grande, mediano, pequeño y extra pequeño.
  • Icono: así mismo, puedes incorporar un icono al botón, bien sea seleccionandolo desde la biblioteca que tiene el maquetador o desde tu ordenador.
  • Espaciado de iconos: se ajusta el espacio entre el icono y el texto del botón elementor:
  • Botón ancla ID en Elementor: esto es opcional, pero puedes asignar un ID único para usar en situaciones concretas, como por ejemplo, eventos de Google Analytics.
  • En la pestaña de Estilos puedes personalizar toda la parte visual del botón elementor. Estas son las opciones:
  • Tipografía: puedes cambiar la tipografía del texto del botón, en función a las fuentes predeterminadas o también con cualquier otra que quieras agregar.
  • Sombra de texto: permite agregar una sombra y desenfocar un poco el texto.
  • Color del texto: puedes cambiar el color del texto del botón.
  • Color de fondo: aquí se cambia el color de fondo del botón. Puedes usar un color sólido o degradado.
  • Tipo de borde: se selecciona el tipo de borde del botón.
  • Ancho del borde: permite controlar el grosor del borde.
  • Color del borde: puedes cambiar el color de dicho borde.
  • Radio del borde: se establece el radio del borde para aquellos casos en el que se desee un borde redondeado.
  • Sombra de cuadro: sirve para aplicar una sombra en el botón.
  • Relleno: aquí se puede cambiar la configuración del relleno del botón. Se puede ajustar el ancho y el alto.

boton elementor

Paso 5: Aplicación de animaciones al botón en Elementor Pro

En la pestaña de Animación Hover puedes convertir tu botón plano en un botón animado en Elementor. Tienes la opción de darle un estilo diferente para que cuando el puntero se encuentre sobre él, se vea más dinámico y proporcione una mejor interacción con el usuario.

Si quieres animaciones más complejas tendrás que tener Elementor Pro y tener conocimientos de código.

¡Pongamos un ejemplo! Supongamos que quieres crear un botón flotante en Elementor, es decir, que se mantenga fijo mientras el usuario se desplaza hacia arriba y hacia abajo.

Para ello, tienes que dirigirte a la pestaña Avanzado y seleccionar la opción Diseño. Establece el ancho y la posición En línea (Auto) y configura las orientación vertical y horizontal. También el desplazamiento.

Paso 6: Optimización y ajustes finales de tu botón animado en Elementor

A continuación, especifica el índice z para que el botón siempre sea flotante. En esta parte inserta 800 para lograr ese objetivo.

Es importante mencionar que con la versión gratuita de Elementor puedes crear este botón de acción flotante con el método antes mencionado. Sin embargo, si quieres que el botón esté en varias paginas, debes pegarlo de forma manual en cada una de estas.

Mientras  que con Elementor Pro, puedes acceder a la función CSS personalizado y lograr esto y muchas cosas más, pero como ya mencionamos, tienes que tener conocimientos en código.

Paso 7: Publicación e integración del botón en tu página web con Elementor

Por ultimo, para que los cambios se hagan efectivos, debes dar clic en el botón Actualizar  de color verde que se encuentra en la parte inferior del menú de ajustes del botón.

Guarda el resto de cambios de la página y listo, ya habrás publicado e integrado el botón en tu página web.

configuracion estilos boton

Consejos y mejores prácticas para diseñar botones atractivos y efectivos

El secreto del éxito de este elemento es su diseño. Un diseño que realmente llame la atención e inspire al usuario a actuar. Para que puedas lograr esto, a continuación compartimos algunos consejos y buenas prácticas para diseñar botones atractivos y efectivos. ¡Veamos!

Implementa botones fáciles de entender

Deja muy claro que es lo que significa el botón de acción que estás implementando. Por ejemplo, con los botones de Cancelar o Aceptar, o un botón volver arriba elementor, los cuales son botones de acción primarios, tienes que agregar una imagen, icono o texto que diga con exactitud para dónde se dirigirá el usuario.

Haz que el botón principal se destaque entre los demás

Bajo esta premisa, debes saber que una de las principales cosas a tener en cuenta cuando se crea un botón, es que éste no haga que el usuario deba buscarlo por toda la web, sobre todo, cuando todos los botones se ven muy parecidos.

Ten muy presente que en realidad los visitantes no leen, simplemente escanean la interfaz de la web para encontrar lo que desean. Por tanto, asegúrate de que los botones más importantes se destaquen. Intenta hacerlos más grandes, de un color más brillante, con un texto preciso y llamativo.

Evita integrar demasiados botones

Lo mejor que puedes hacer es no proporcionar demasiadas opciones, ya que los usuarios terminarán por sentirse frustrados y no haciendo nada de lo que deberían. Se recomienda implementar los botones por orden de importancia.

Diseña botones que parezcan botones

Lo más importante al momento de crear un botón en elementor es que el mismo parezca un botón. Aunque suene muy obvio, muchos caen en el error de hacer botones desfasados y colocarlos en un lugar poco adecuado.

En tal sentido, lo mejor que puedes hacer es darle un pequeño sombreado alrededor de los bordes, para que se destaque del fondo y el usuario no dude que se trata de un botón.

Crea botones que encajen con la identidad de la marca

En concordancia con lo anterior, y hablando del diseño, es indispensable que estos encajen con el estilo contextual de la marca. Debes verificar que se adecuen a la paleta de colores, el estilo gráfico y las formas de la marca.

Así mismo, debes tomar en consideración la interfaz de la página. Por ejemplo, si la interfaz tiene un color plano, entonces intenta añadir botones grandes y en colores brillantes. Recuerda utilizar formas y efectos para que obtengas un botón animado en Elementor que cautive realmente a los usuarios.

Considera hacer botones redondeados o con formas diferentes

Como parte del consejo anterior, si el diseño de la web tiene elementos con esquinas redondeadas, considera integrar botones con esta terminación o con otra forma que se acople a todo. Al realizarlos de este modo les otorgas un poco más de contraste y mayor prominencia, lo que ayuda a que el usuario haga la acción requerida.

Solución de problemas comunes al crear botones en Elementor

Como has podido verificar, crear un botón en Elementor es una tarea bastante fácil; sin embargo en ocasiones pueden surgir ciertos problemas. A continuación, dejamos soluciones eficaces para algunos de los problemas más comunes al crear botones en Elementor:

El botón no se muestra como debe ser en los dispositivos móviles

Solución: tienes que asegurarte de revisar las opciones de diseño responsivo ubicado en la pestaña Avanzado. Estando allí, ajusta los valores de margen, relleno y tamaño de fuente para cada tipo de dispositivo (escritorio, móvil, tablets).

El botón no tiene el efecto visual que se le dió cuando el usuario pasa el cursor sobre este

Solución: este problema surge cuando se le ha agregado un efecto de interacción a los botones. Para corregirlo debes ir a la pestaña de Estilo y verificar que si agregaste el efecto deseado. En el caso de que no lo hayas hecho, una excelente recomendación es agregar animaciones, cambios de color y sombras cuando se pase el cursor sobre el botón. Asegúrate de activar estos efectos.

El botón no ejecuta la acción definida cuando el usuario hace clic sobre este

Solución: bien sea porque hayas añadido enlace en un botón de Elementor, un botón a una página nueva, mostrar un popup o desencadenar cualquier otra función, y esta no se ejecuta, debes verificar la configuración de acción en la pestaña Contenido y asegurarte que esté configurada correctamente. Por ejemplo, si lo que quieres es que el botón abra un enlace, asegurate de haber ingresado la URL en el campo correspondiente.

El botón no se muestra en la posición o estilo deseado

Solución: si te sucede este problema, revisa las opciones de alineación, margen y relleno en la pestaña Avanzado del widget de botón. Ajusta cada valor en función para posicionar el botón en donde lo necesitas.

En el caso de que el botón se encuentre dentro de una estructura de columnas o secciones, verifica las opciones de diseño de estos elementos, así te aseguras que no estén afectando el aspecto y posición del botón.

Estas prácticas y fáciles soluciones deberían ayudarte a resolver los problemas más comunes al crear botones en Elementor. Si se te presenta algún problema adicional no mostrado aquí, consulta la documentación oficial del maquetador o busca ayuda en la comunidad de Elementor y de seguro lo resolverás.

Conclusiones

En resumen, crear diferentes elementos destacables con Elementor en nuestro sitio web, es algo muy sencillo y rápido de hacer. Su interfaz permite que hasta las personas que tienen poco conocimientos puedan lograrlo. Sin embargo, cuando realmente queremos destacar, hay que prestar especial atención a todas las opciones de configuración  de cada uno de estos.

Hoy vimos que crear un botón con Elementor afirma la aseveración antes mencionada. Con sencillos y pocos pasos ya tendrás un elemento que permite interactuar de manera diferente con los usuarios. Solo asegúrate de agregar tu toque personal (que además se integre al resto del diseño de la web) y verás como el nivel de conversión aumenta desmesuradamente.

Para terminar, no te quedes solo con la ideas que aquí te dejamos, el widget de botón de Elementor permite modificaciones impresionantes, la imaginación es el límite. Solo recuerda trabajar en función a un botón animado en Elementor para un mayor alcance.

¡Nos vemos en una próxima entrega!

Fuentes : Elementor, Uriel Soto, Web Scuadron, Codewatchers

_ Te asesoramos sin compromiso _

Presupuesto diseño web​ ¿Tienes un proyecto en mente? Cuéntanoslo
Los datos facilitados a través de este formulario serán tratados por GALERNA ESTUDIO S.L.U. con CIF B39706023 y domicilio en Calle San Fernando, 58, 8-D · 39010 Santander (Cantabria) de acuerdo con lo establecido en nuestra política de privacidad con la finalidad de poder enviarle información sobre nuestros productos / servicios. Los datos recabados por este formulario no se cederán a terceros salvo por obligación legal. Le recordamos que usted tiene derecho al acceso, rectificación, limitación de tratamiento, supresión, portabilidad y oposición al tratamiento de sus datos dirigiendo su petición a la dirección postal indicada o al correo electrónico [email protected] Igualmente puede dirigirse a nosotros para cualquier aclaración adicional. En caso de no aceptación sus datos no serán tratados.

Deja una respuesta

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