Cómo agregar un botón flotante de llamada a la acción en WordPress










  • Su botón de llamada a la acción es uno de los elementos más importantes para lograr que un visitante participe (¡o compre!). Pero si su botón está en una posición estática en una página, a veces se puede empujar debajo de » el pliegue «. Un botón flotante de llamada a la acción resuelve ese problema.

    El botón se puede colocar en una posición destacada y permanecer allí mientras se desplaza la página.

    Usaremos el complemento Buttonizer para nuestro botón de llamada a la acción (CTA). Buttonizer tiene muchas funciones integradas. Por lo tanto, es fácil crear botones que lleven a su visitante a una URL, inicien un chat, una llamada telefónica, un mensaje SMS, una publicación en las redes sociales y más.

    Hoy, veremos la creación de un botón CTA que envía al visitante a otra página de su sitio. Luego, hablaremos brevemente sobre algunas de las otras opciones disponibles con Buttonizer.

    Instalación del complemento Buttonizer

    Inicie sesión en su panel de administración de WordPress.

    En la navegación de la columna izquierda, pase el mouse sobre el enlace «Complementos» y haga clic en el enlace «Agregar nuevo».

    pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo"

    En el cuadro «Buscar complementos…», ingrese «Buttonizer».

    busque el complemento Buttonizer de WordPress

    Una vez que haya localizado el complemento, haga clic en el botón «Instalar ahora».

    haga clic para instalar el complemento WordPress Buttonizer

    Haga clic en el botón «Activar».

    haga clic para activar el plugin de WordPress Buttonizer

    Uso de Buttonizer para crear un botón flotante de WordPress

    En la columna de navegación de la izquierda, pase el mouse sobre el enlace «Buttonizer» y haga clic en el enlace «Buttonizer».

    haga clic en el enlace "Buttonizador"

    Cuando se abre Buttonizer, también abre la página de inicio de su sitio en un panel separado. Esa es una vista previa para que pueda ver cómo se verá su botón flotante de llamada a la acción en el sitio.

    Por defecto, Buttonizer muestra dos botones en un grupo. Voy a eliminar uno de ellos para que podamos centrarnos en configurar un solo botón.

    Lo primero que vamos a hacer es hacer clic en el icono de llave inglesa para acceder a la configuración básica del botón.

    haga clic en el icono de llave inglesa

    Aquí configura la posición del botón, la animación, el estilo, la acción y si el botón se muestra en una pantalla de escritorio, móvil o ambos. Repasemos cada una de las opciones.

    configuración básica de botones

    Posición

    Esto coloca el botón en una de las esquinas del sitio o en una ubicación personalizada. Cuando cambia la posición en el menú desplegable, puede ver cómo se mueve el botón en el panel de vista previa.

    La ubicación personalizada es útil si desea configurar un botón, por ejemplo, en el medio del costado de la página. Para hacerlo, seleccione «Personalizado» en el menú desplegable «Posición». Luego establezca el valor «Y (%)» en 50.

    configuración de la posición del botón personalizado

    Puede ver que el botón se mueve a la mitad del lado derecho de la página. Al jugar con esos valores de los ejes X e Y, puede colocar el botón donde desee en la página.

    Animación

    Hay dos opciones de animación en la versión gratuita del complemento. Ambos funcionan cada 8 o 10 segundos para llamar la atención sobre el botón.

    opciones de animación

    Estilo

    El estilo cambia el botón de redondo (o predeterminado) a cuadrado o rectangular. Si elige Rectángulo, la etiqueta del botón (lo abordaremos en breve) aparece junto al botón.

    botón rectangular con etiqueta

    Acción

    La «acción del botón» es donde eliges lo que hace el botón.

    selección de acción de botón

    Estamos configurando un botón para ir a una página del sitio, pero como puede ver, hay muchas otras opciones.

    • Acciones populares
      • URL del sitio web
      • Acción de llamada (número de teléfono)
      • Acción de correo (dirección de correo electrónico)
      • charla de WhatsApp
      • Volver arriba
      • Retroceder una página
      • Compartiendo socialmente
    • Haz clic para chatear
      • SMS
      • Widget de chat de Messenger
      • Enlace de mensajería de
      • Mensaje directo de Twitter
      • skype
      • LÍNEA
      • Telegrama
      • WeChat
      • Viber
    • Medios de comunicación social
      • Instagram
      • Snapchat
      • VKontakte
      • Waze
    • Surgir
      • poptin
      • elemento emergente
      • Creador de ventanas emergentes
      • Ventanas emergentes – Ventana emergente de WordPress
    • Comportamiento
      • Copiar URL al portapapeles
      • Imprimir página

    Creación de un botón de enlace

    Bien, ahora que hemos repasado las configuraciones básicas, creemos nuestro botón. Luego veremos otras cosas que podemos hacer con él.

    • Voy a dejar la «Posición» establecida en la parte inferior derecha predeterminada.
    • Pasaré «Animación», así que dejaremos ese ajuste en «Sin animación».
    • Para «Estilo», elegiré «Rectángulo». De esa forma, cuando agregue texto de etiqueta al botón, se mostrará como un solo rectángulo. El texto de la etiqueta también aparecerá en el estilo «Predeterminado», pero el texto flota cerca en un contenedor separado.
    • La «Acción del botón» es «URL del sitio web». Ingresaré la URL en el campo de texto justo debajo del menú desplegable «Acción del botón».
    • Dejaré la configuración «Abrir nueva pestaña» en la posición predeterminada desactivada y dejaré activada la configuración «Mostrar en», «Móvil» y «Escritorio».

    Así es como se verá la configuración cuando todo esté hecho:

    Configuración del botón URL

    Antes de guardar el botón, tenemos que configurar el texto que queremos mostrar al lado del botón. Así que vamos a desplazarnos hacia abajo hasta la sección de etiquetas.

    En el campo «Etiqueta», ingresaremos el texto. Puedes ver cómo se ve en la vista previa. Si desea un tamaño de fuente más grande, también puede configurarlo.

    texto de la etiqueta para el botón

    Hay dos configuraciones de «Visibilidad», la primera para escritorio, la segunda para dispositivos móviles. Esta configuración le permite ocultar la etiqueta en una pantalla de escritorio o mostrarla cuando un visitante se desplaza sobre ella. También puede ocultar la etiqueta por completo en dispositivos móviles.

    Dado que ocultar el texto de nuestro botón no sería una buena idea (no queremos crear un botón misterioso), dejaremos ambos configurados en «Mostrar siempre la etiqueta».

    opciones de visibilidad de botones

    Ahora haré clic en el botón «Guardar y publicar» y el botón estará visible en el sitio web. Cuando me desplazo por una página, el botón permanece en su posición. No importa dónde se encuentre un visitante en una página determinada, el botón siempre está allí con ellos.

    haga clic en el botón "Guardar y publicar"

    botón en el sitio web

    El resto de las opciones de configuración del botón

    Nos saltamos un par de cosas, así que retrocedamos y verifiquemos.

    Color del boton

    Aquí es donde puede cambiar el color del botón para que se ajuste al diseño de su sitio web. Elija «Base» o «Interacción» para abrir un selector de color. “Base” es el color normal del botón. “Interacción” es el color al que cambiará el botón cuando un visitante se desplace sobre él.

    selector de color

    Radio del borde

    Esto controla la redondez del botón con un valor entre 1 y 50. Establecido en 50, el botón es completamente redondo. Cuanto menor sea el número, más cuadrado se vuelve el botón.

    Aquí cambié el «Radio del borde» a 25, y puedes ver que el botón se convierte en un cuadrado con esquinas redondeadas.

    radio del borde

    Color de la etiqueta

    La configuración «Color de la etiqueta» controla los colores de fondo y del texto si muestra la etiqueta del botón.

    Icono de botón

    Finalmente, la sección «Icono de botón» es donde configura el elemento gráfico en el botón. De forma predeterminada, el botón principal utiliza el icono «fa-user» de Font Awesome. Pero puede seleccionar un icono diferente para su botón.

    Haga clic en el campo «Icono» para abrir el selector de iconos. Puede desplazarse por los iconos o buscar por palabra clave.

    selector de iconos

    Haga clic en un ícono en el selector y el ícono de su botón cambiará.

    nuevo icono

    La sección «Color de icono» le permite elegir diferentes colores de icono para «Base» e «Interacción». Al cambiar los colores aquí y en la sección «Color del botón», puede crear algunos efectos interesantes.

    La configuración de «Tamaño del icono» controla, lo adivinaste, el tamaño del icono en el botón.

    Otras características geniales de Buttonizer

    La configuración de «Acción del botón» es donde Buttonizer muestra su potencial.

    ¿Quiere colocar un botón flotante de WhatsApp en su sitio de WordPress? Elija «Chat de WhatsApp» en «Acción del botón», ingrese su número de WhatsApp y listo.

    Elija «Compartir en redes sociales» en «Acción del botón», y una gran selección de sitios de redes sociales están disponibles. Al agregar botones para cada sitio en el que desea que los visitantes compartan, puede crear su propio panel flotante para compartir en redes sociales.

    Hay muchas opciones en Buttonizer, y muchas de ellas están disponibles cuando se usa la versión gratuita del complemento. Me quito el sombrero ante los desarrolladores por eso. Muchas veces, los complementos con versiones pagas ocultan todas sus características geniales a los usuarios gratuitos. Buttonizer no hace eso.

    Nota sobre Google Analytics

    Hay una opción en la configuración de Buttonizer para agregar su código de Google Analytics a sus botones. No agregue el código de Analytics en Buttonizer si ya está utilizando un complemento de Google Analytics en su sitio .

    Si agrega código de Analytics a un botón cuando el código ya está presente en una página, Google pensará que la página de destino se abrió dos veces. Eso hará que su tasa de rebote de Analytics en la página de destino parezca más baja de lo que realmente es.

    Qué sucede si desinstala el complemento

    Si desinstala el complemento Buttonizer, los botones que haya creado ya no estarán visibles en el sitio.

    Los beneficios de un botón flotante de llamada a la acción

    Los beneficios de un botón de chat de llamada a la acción o un botón de «Hacer clic para llamar» son evidentes. Los botones de «página anterior» o «volver al principio» también son llamados a la acción, aunque no en un sentido de marketing. Pero benefician a sus visitantes de otras maneras.

    Sin embargo, seamos realistas, un llamado a la acción está ahí principalmente para beneficiarlo a usted, el propietario del sitio. Está ahí para que los visitantes compren su producto o interactúen con usted directamente (para que eventualmente compren su producto).

    Si su botón o enlace de llamada a la acción está fijo en la parte inferior de una página de texto, muchos de sus visitantes nunca lo verán. Entonces, un CTA flotante o «atascado» tiene la ventaja de estar siempre visible. Un visitante puede tomar medidas en cualquier momento.

    ¿Alguna vez ha experimentado con la ubicación de CTA para ver qué es más efectivo para usted? ¿Ver la lista de opciones de Buttonizer te da alguna idea para CTA que quizás no hayas considerado anteriormente? ¡Házmelo saber en los comentarios!