Cómo agregar una barra de progreso de recaudación de fondos con OptinMonster

¿Está buscando una manera fácil pero llamativa de mostrar su progreso de recaudación de fondos a los donantes actuales y potenciales? A la gente le encanta ver esos termómetros para recaudar fondos y saber que sus donaciones están teniendo un impacto real.

En esta publicación, le mostraremos cómo agregar una barra de progreso de recaudación de fondos a OptinMonster utilizando nuestra plantilla de barra flotante, botones Sí / No y un poco de CSS personalizado.

E, incluso si no es una organización sin fines de lucro con objetivos de recaudación de fondos, puede utilizar este tipo de campaña para objetivos o campañas de generación de leads:

Puntaje de satisfacción del cliente

Puede usar las habilidades de este tutorial para mostrar su compromiso con la satisfacción del cliente.

puntaje de satisfacción del cliente mediante botones

Contenido especial

Una barra de progreso también se puede utilizar para incentivar el intercambio de redes sociales o crear rumores sobre un imán principal.

barra de progreso de incentivos de redes sociales

Con un poco de creatividad, puede usar barras de progreso para mantener a los visitantes interesados ​​e informados de una manera divertida y única.

¡Vamos a empezar esta fiesta!

Crea una campaña

Aquí está la campaña que vamos a crear:

ejemplo de barra de progreso de recaudación de fondos

Para comenzar, necesitará una cuenta de OptinMonster. Ya que estamos usando la plantilla Canvas. Registrarse en OptinMonster es rápido, fácil y vale la pena. Además, solo lleva unos 60 segundos.

Regístrese para obtener una cuenta de OptinMonster (las organizaciones sin fines de lucro usan el código NP20OFF al finalizar la compra ¡con un 20% de descuento!) y regrese para continuar con el tutorial. Bueno, espera. ?

Una vez que se haya registrado, inicie sesión en su cuenta de OptinMonster.

Cuando inicies sesión por primera vez, verás tu panel de control. Si eres nuevo para nosotros, estará vacío. Si ha estado presente, verá las campañas que ya ha creado.

Haga clic en el Crear campaña botón para crear una nueva campaña.

create_campaign "width =" 620 "height =" 161 "srcset =" https://blogging-techies.com/wp-content/uploads/2020/03/1584871091_155_Como-crear-un-cuadro-de-caracteristicas-de-Optin-paso-a.png 620w, https://optinmonster.com/wp-content/ uploads / 2018/06 / create_campaign-300x78.png 300w "tamaños =" (ancho máximo: 620px) 100vw, 620px "></p><div class='code-block code-block-6' style='margin: 8px auto; text-align: center; display: block; clear: both;'>
<div data-ad=

Selecciona tu Tipo de campaña. Estamos usando Barra flotante para esta campaña

seleccione el tipo de campaña de barra flotante

A continuación, seleccione el Plantilla de lienzo.

seleccione la plantilla del lienzo

Ahora, nombre su campaña y haga clic Comience a construir.

nombra tu campaña y comienza a construir

El generador de campañas

Después de hacer clic en el Comience a construir botón, serás llevado al generador de campañas. Aquí verá la campaña de barra flotante de Canvas predeterminada.

Tome nota del botón verde en la esquina superior derecha. Eso es Salvar botón. Úselo a menudo.

campaña de barra flotante de lienzo predeterminada

¡Aquí es donde realmente comienza la diversión y puedes comenzar a crear la campaña de tus sueños! ???

Primero, muevamos la barra flotante hacia arriba para que nuestro medidor de progreso de recaudación de fondos aparezca allí. Para hacer eso, haga clic en Configuraciones flotantes luego alternar ¿Cargar barra flotante en la parte superior de la página? a verde.

cargar barra flotante en la parte superior de la página

A continuación, eliminemos el botón de cierre de la campaña. Para hacerlo, haga clic directamente en el botón Cerrar en la vista previa en vivo de la campaña en el lado derecho del creador de la campaña. Esto mostrará las herramientas de edición para ese elemento en el lado izquierdo de la pantalla.

eliminar el botón de cerrar de su campaña

Si tiene una suscripción Pro, también puede eliminar la marca "Powered by OptinMonster" siguiendo este mismo proceso.

Agregar bloques a su campaña

Hacer clic Agregar bloques, haga clic en el bloque que desee y simplemente arrástrelo y suéltelo en la vista previa en vivo de su campaña. Vamos a usar el rectángulo grande y único.

agrega un bloque a tu campaña

A continuación, agregue un bloque de texto a su campaña arrastrando y soltando el elemento de texto justo encima del bloque que acaba de agregar.

agregar un elemento de texto a su campaña

Edición de bloques de campaña

Puede editar fácilmente los bloques que agrega a su campaña haciendo clic directamente en el bloque que desea editar en la vista previa en vivo. Esto abrirá las herramientas de edición en el lado izquierdo de la pantalla.

El creador de campañas de optinmonster hace que sea muy fácil editar su campaña

Diseña tu campaña

Esto es lo que agregamos a nuestro ejemplo de barra de progreso de recaudación de fondos para este tutorial:

  • 1 bloque de rectángulo único (ya lo ha agregado)
  • 2 bloques de texto (ya ha agregado 1 bloque de texto)
  • 1 bloque Sí / No

Continúe y agregue el bloque de texto restante y el bloque Sí / No. Como referencia, su campaña debería verse así:

campaña de barra flotante sin personalización

Ahora que tenemos el marco, es hora de hacerlo bonito. A continuación encontrará notas detalladas para cada cambio que realizamos en cada sección de la campaña para crear la versión final.

Cuadro de texto 1

ediciones al cuadro de texto 1

Utilizamos el cuadro de texto 1 para crear el título de nuestra campaña. Queríamos que el texto de nuestro título fuera más grande y contrastante, pero no para restar valor al medidor de progreso de recaudación de fondos.

Esto es lo que hicimos:

  • Texto: "¡Estamos a la mitad de nuestro objetivo!"
  • Fuente: Bree Serif
  • Talla: 35
  • Alineamiento: centro
  • Color: código hexadecimal # DF6A0D

Todo lo demás se dejó en su valor predeterminado.

Cuadro de texto 2

ediciones al cuadro de texto 2

Utilizamos este cuadro de texto como una apelación. Mantuvimos el texto más pequeño y agregamos un llamado a la acción con instrucciones sobre cómo donar.

Aquí lo que hicimos:

  • Texto: “Necesitamos su ayuda para llegar hasta el final. ¡Simplemente haga clic en la barra de progreso a continuación para hacer una donación ahora mismo!
  • Fuente: Arial (sans serif)
  • Talla: 18
  • Alineamiento: centro

Todo lo demás se dejó en su valor predeterminado.

Sí / No Estilo de botón

Este bloque es nuestro increíble termómetro para recaudar fondos. Vamos a hacer algunos cambios de diseño para personalizar el aspecto de nuestros botones y luego terminarlos con un poco de CSS personalizado.

Debe editar cada botón individualmente, pero es muy fácil de hacer. Simplemente abra las herramientas de edición para los botones tal como lo haría para otro bloque, haciendo clic en el bloque en la vista previa en vivo.

Tendrá la opción de editar el aspecto normal y flotante de cada botón, así como la acción del botón.

cómo editar botones de campaña

Comencemos configurando el Mostrar botones sí / no en línea? opción a verde.

configurar botones para mostrar en línea

Así es como configuramos nuestro si botón:

  • Texto: "$ 50,000 recaudados"
  • Color de fondo: código hexadecimal # 0d82df
  • Familia de fuentes: Arial (sans serif)
  • Color de fuente: código hexadecimal #fff
  • Tamaño de fuente: 43px
  • Peso de fuente: 600
  • Ancho del borde: 0
  • Estilo de borde: ninguno
  • Radio de borde: 10px
  • Relleno: 25 20 25 20 px
  • Margen: 0 0 0 0 px

sí formateo de botones

También necesitamos configurar el Acción para nuestro botón La acción es lo que sucede cuando alguien hace clic en el botón.

En el texto de nuestro cuerpo, les dijimos a los visitantes que hicieran clic en la barra de progreso de recaudación de fondos para donar, por lo que querremos configurar la acción del botón para enviar a los visitantes a una página de donación.

Para configurar la acción del botón, haga clic en el Acción pestaña y establecer el Acción de clic de botón a Redireccionar a una URL e ingrese la URL de su página de donación en el Redireccionar URL campo:

establecer la acción del botón

Ahora es el momento de configurar nuestro No botón. Esto es lo que hicimos:

  • Texto: "Meta: $ 100,000"
  • Color de fondo: transparente
  • Familia de fuentes: Arial (sans serif)
  • Color de fuente: código hexadecimal # b2b2b2
  • Tamaño de fuente: 43px
  • Peso de fuente: 600
  • Altura de línea: .5
  • Ancho del borde: 0
  • Estilo de borde: ninguno
  • Radio de borde: 10px
  • Relleno: 25 12 25 12 px
  • Margen: 0 0 0 0 px

Vamos a personalizar el diseño flotante para el botón no, así que haz clic en la sección de desplazamiento y alterna ¿Personalizar el estilo de desplazamiento del botón? a verde. Desde allí, simplemente haga clic en Copiar estilos regulares.

edite el estilo de desplazamiento sin botón

Configure la acción del botón No para redirigir a la misma URL que el botón Sí. De esta manera, no importa en qué parte de la barra de progreso de recaudación de fondos haga clic su visitante, será llevado al sitio de donación.

Formatear el bloque Sí / No

Hay una última cosa que debemos hacer antes de agregar nuestro CSS personalizado y es editar todo el bloque alrededor de nuestros botones.

En este momento, los botones están flotando sin bordes ni nada que los contenga, pero vamos a arreglarlo ahora mismo. Para hacer eso, haga clic en Bloquear para entrar en las herramientas de edición de bloque.

edite el bloque sí / no

Queremos que los botones se vean como una sola barra de progreso de recaudación de fondos que va de izquierda a derecha sin interrupción. Así es como lo hicimos:

  • Box Shadow: código hexadecimal # 888888
  • Propagación: 10
  • Radio de borde: 10px
  • Relleno: 0 10 0 0 px
  • Margen: 5px

Se verá un poco raro en este momento:

estilo de bloque sin css

No te preocupes; todavía necesitamos agregar nuestro CSS personalizado para terminar esto. Hagamos eso ahora.

Guarde su campaña (¿por qué no, verdad?) Y haga clic en el Diseño pestaña o la Casa botón en el generador de campañas para volver al menú principal.

llegar al menú principal

Desde el menú principal, haga clic en Configuraciones de pantalla luego desplácese hacia abajo Sección CSS:

campo css personalizado

Aquí está el código que usamos:

html div#om-{{id}} .{{ns}} .{{ns}}-YesNoElement--wrapper {
box-shadow: inset rgb(136, 136, 136) 0px 0px 10px !important;
}
html div#om-{{id}} .{{ns}} .{{ns}}-YesNoElement--content button.{{ns}}-YesNo--Yes {
width: 50% !important;
}
html div#om-{{id}} .{{ns}} .{{ns}}-YesNoElement--content button.{{ns}}-YesNo--No {
width: 50% !important;
}

En cuanto al diseño, nuestro medidor de progreso de recaudación de fondos está listo. Nuestro siguiente paso es decidir cuándo queremos que se muestre la campaña.

Establecer reglas de visualización

Para acceder a las reglas de visualización, simplemente haga clic en Reglas de visualización lengüeta. Verá que las reglas predeterminadas están establecidas para mostrar su campaña en cualquier página después de que un visitante haya estado en su sitio durante al menos 5 segundos.

Para esta campaña, vamos a dejar la regla de mostrar la campaña en cada página para que aparezca en todo nuestro sitio. Sin embargo, es realmente fácil mostrarlo solo en páginas específicas cambiando el Ruta de URL actual condición:

las reglas de visualización pueden ayudarlo a orientar su campaña en función de las URL específicas que se visualizan

Para eliminar una condición de sus reglas de visualización, simplemente haga clic en menos botón junto a la condición que desea eliminar:

eliminar condición de la regla de visualización

Si desea mostrar una campaña separada para los espectadores de escritorio y para dispositivos móviles, ¡también puede hacerlo con las reglas de visualización! Simplemente establezca una condición para mostrar su opción en función del dispositivo de su visitante:
dispositivos de destino para mostrar campañas solo a usuarios de computadoras de escritorio o móviles

Publique su campaña

¡Ahora estás listo para publicar tu campaña! Para hacer eso, haga clic en el Publicar pestaña y cambiar el Estado a En Vivo:

publica tu campaña de termómetro para recaudar fondos

Las campañas de OptinMonster se pueden publicar fácilmente en cualquier lugar:

seleccione plataforma de publicación

Actualización de su barra de progreso de recaudación de fondos

¡Puede seguir los pasos anteriores para editar su barra de progreso de recaudación de fondos en cualquier momento, por lo que es increíblemente fácil orientar su campaña a través de sus esfuerzos de recaudación de fondos!

Siempre que desee actualizar sus números de recaudación de fondos, puede hacerlo simplemente cambiando el texto en su si botón, y cambiando los porcentajes en el CSS personalizado.

Dependiendo de la cantidad de texto que cambie, el proceso completo dura alrededor de 20 segundos:

actualizar su campaña de medidor de progreso de recaudación de fondos

Ahí lo tienen chicos. Una barra de progreso de recaudación de fondos totalmente personalizable para su sitio web, con tecnología de OptinMonster. Muy bien, ¿verdad? ??

Si está interesado en cosas más interesantes, definitivamente debe agregar Google Analytics para realizar un seguimiento del rendimiento de su campaña. O bien, vea cómo un diseño diferente podría afectar la respuesta de los visitantes a su campaña con pruebas A / B (no olvide que tendrá que actualizar los números y el texto en 2 lugares si lo intenta). Y asegúrese de consultar estas mejores prácticas para que sus boletines sin fines de lucro se conecten y conviertan.

¿Estás buscando tutoriales más accionables como este? ¡Echa un vistazo a la Universidad OptinMonster!