Notamos algo en los formularios de donación de nuestros usuarios: vemos que la gente pone un trabajo real en su página de campaña, y el formulario de donación que se encuentra justo en medio de ella parecía pertenecer a un sitio web diferente.
Azul incorrecto, esquinas incorrectas, sin relación alguna con el logo tres centímetros por encima.
Queríamos que fuera lo más fácil posible para cualquier persona dentro de tu organización sin fines de lucro configurar un formulario que pareciera pertenecer a tu sitio web.
Así que en eso pasamos la mayor parte de esta versión. Se llama la pestaña Estilos, vive dentro del Constructor de Campañas, y es el titular de Charitable Pro 1.8.17. 🎨
Dentro del constructor de campañas, la verás justo al lado de la pestaña General. Vamos a ver qué puede hacer por ti.
Por qué la forma en que luce tu formulario decide si la gente dona
Aquí está la cosa que no dejaba de molestarme mientras construía esto: la confianza es básicamente toda la transacción en línea. Nadie puede estrechar tu mano ni leer tu lenguaje corporal antes de que te den un número de tarjeta, así que la página tiene que hacer ese trabajo en su lugar. Un formulario que se ve extraño, como si fuera una ocurrencia tardía adjunta a tu sitio, introduce medio segundo de duda justo cuando necesitas lo contrario.
Con muchas herramientas de recaudación de fondos, cerrar esa brecha significaba CSS personalizado, un desarrollador o un ticket de soporte, que es exactamente por qué tantas buenas campañas se envían con un formulario que casi, pero no del todo, coincide con la marca de tu organización sin fines de lucro.
Quería que Charitable nunca te causara ese problema. El control de diseño ahora vive dentro del constructor, junto a todo lo demás que ya estás gestionando, por lo que estar a la marca es simplemente lo que sucede por defecto.
Míralo en acción
Así es como se ve la primera vez que lo abres:
Cuándo sentirá la diferencia
Algunos de los momentos que tuve en mente mientras construía esto:
🎯 Una renovación de marca: ¿Nuevo logo y colores este año? Aplica tu paleta una vez como Colores Globales y cada campo se alinea, sin edición página por página.
🏢 Múltiples causas, un sitio: Dale a tu campaña de ayuda en desastres un rojo urgente y a tu fondo de becas un verde tranquilo, cada uno coincidiendo con su propio mensaje.
✨ Una campaña insignia de fin de año: Rediseña el formulario para que se sienta como un momento, con un acento audaz en el botón de donar y una cantidad sugerida resaltada.
🤝 Trabajo con clientes en una agencia: Entrega a cada cliente un formulario que coincida con su marca sin escribir una línea de CSS a medida por sitio.
♿ Un equipo con mentalidad de accesibilidad: Reduce el movimiento a ninguno y deja que el constructor honre a los visitantes que prefieren movimiento reducido, automáticamente.
Diseño sin un desarrollador
La pestaña Estilos se encuentra dentro del panel Diseño del Creador de Campañas. Busca la etiqueta NUEVO si no la ves de inmediato. Cada cambio que realices se muestra al instante en la vista previa en vivo que está al lado. Sin botón de guardar, sin actualizar, sin preguntarte si realmente funcionó.
Lanzamos 4 preajustes porque no queríamos que lo primero que vieras fuera una página en blanco: Morado Intenso, Azul Océano, Verde Bosque y Rojo Intenso. Elige uno y obtendrás un conjunto coordinado de colores, tipografía y movimiento en un solo clic, algo real para reaccionar y ajustar en lugar de empezar de cero.
A partir de ahí, tienes 9 Colores Globales para hacerlos tuyos: Primario, Secundario, Fondo, Texto, Fondo del Botón, Texto del Botón, Barra de Progreso y los colores de la pestaña de donación. Establécelos una vez y se aplicarán a todas las campañas. La tipografía funciona de la misma manera. Elige una familia de fuentes (Predeterminada del Tema, Sans-Serif, Serif o Monospace) y establece los tamaños de encabezado y cuerpo en Pequeño, Mediano o Grande.
La animación también tiene tres opciones: Ninguna, Sutil o Suave, para cómo se mueven el formulario y la barra de progreso. Admito que volví a esta pestaña varias veces mientras la estaba construyendo, principalmente porque ver un color actualizarse en tiempo real nunca dejaba de ser interesante.
Estilo de Campos Individuales, Hasta el Detalle
A veces, un solo campo necesita destacar o integrarse. Hemos añadido Estilos de Caja por campo exactamente para eso, para que tengas un control real sobre los campos que tienen más peso en la página.
En los campos de Texto y Lista puedes establecer el color de fondo, el estilo del borde (Sin Borde, Solo Borde Izquierdo o Borde Completo), el color del borde, el ancho del borde, el radio del borde y la alineación, un campo a la vez. El mismo estilo se aplica a las fotos, las cuentas atrás, la barra de progreso, las pestañas y otros campos, para que nada en el formulario se quede atascado luciendo como si hubiera sido lanzado hace años.
Un valor predeterminado con el que estoy particularmente contento: el borde de acento de un campo de Lista toma automáticamente el color Secundario de tu campaña en lugar de usar un azul fijo por defecto. No tienes que tocar ese campo para que ya coincida. Lo que sea que establezcas, hasta la altura de línea del cuerpo y los tamaños de los titulares, se muestra en el formulario de donación en vivo exactamente como lo diseñaste.
Primeros Pasos: Estiliza tu Primera Campaña
Me cronometré el otro día. Desde abrir una campaña hasta tener un formulario completamente rediseñado tardé menos de cinco minutos, y eso incluye pausar dos veces para dudar de un color. Puedes personalizar tu formulario de donación igual de rápido. Este es el camino que seguí.
- Ve a **Campañas** en wp-admin y abre una campaña, o crea una nueva, luego haz clic en **Editar con Constructor**.
- En el constructor, abre el panel **Diseño** a la derecha y haz clic en la pestaña **Estilos** (busca la etiqueta NUEVO).
- En **Estilos Globales**, elige un **Preajuste de Diseño** para establecer el aspecto general, luego ajusta tus **Colores Globales**, **Tipografía** y **Animaciones**.
- Haz clic en cualquier campo de la vista previa para abrir sus Estilos de caja y ajustar bordes, fondo y espaciado para ese campo.
- Observa cómo se actualiza la vista previa en vivo mientras avanzas, luego Guarda. Tu nuevo estilo se aplicará inmediatamente en la página de la campaña.
Para agencias y desarrolladores
Extiende la pestaña Estilos con tus propios controles
Hemos creado esto para que se pueda extender, no solo para usarlo. Registra controles personalizados por campo en JavaScript a través de window.charitableDesignFieldControls, y conéctate a la renderización del lado del servidor con las acciones charitable_design_styles_global y charitable_design_styles_field.
Todo para una campaña vive en un único valor meta campaign_style_tokens, por lo que es fácil de leer, mover y entender, ya seas tú o yo quien lo mire dentro de seis meses.
Construido sobre un sistema de tokens
Los colores, la tipografía y la animación se almacenan como tokens de diseño en lugar de estilos en línea dispersos. Esa fue una decisión deliberada por mi parte. Mantiene la salida limpia y hace que una campaña sea portátil si alguna vez necesitas moverla a otro lugar.
Preguntas frecuentes sobre la pestaña Estilos
¿Requiere esto Charitable Pro?
Sí. El Creador de Campañas, incluida la pestaña Estilos, es una función de Charitable Pro y requiere Charitable Pro 1.8.17 o posterior.
¿Cambiará las campañas que ya he creado?
No, tus campañas existentes conservan su aspecto. Las campañas creadas antes del sistema de tokens se migran automáticamente al nuevo sistema de Estilos, sin pérdida de datos, por lo que nada se rompe y todo sigue siendo editable.
¿Necesito saber CSS?
No, y ese era el objetivo. Todo es visual. Los desarrolladores aún pueden extenderlo con ganchos y filtros si quieren ir más allá, pero nunca necesitarás código solo para usarlo.
¿Mi estilo se verá bien en el móvil?
Sí. Los colores, la tipografía y el estilo de campo de la pestaña Estilos se transfieren al formulario de donación en vivo en cualquier tamaño de pantalla.
¿Puedo reutilizar un aspecto en varias campañas?
Aplica el mismo Preset de Diseño y Colores Globales a cualquier campaña para mantener una sensación coherente y de marca, mientras que cualquier campaña que necesite destacar es libre de hacerlo.
Empieza con la pestaña Estilos
La pestaña Estilos ya está disponible en Charitable Pro 1.8.17. Abre una campaña, haz clic en la pestaña Estilos y comprueba lo rápido que tu formulario empieza a parecer que te pertenece realmente.
Lee la Documentación de Estilos del Constructor de Campañas →
Más en Charitable Pro 1.8.17
La pestaña Estilos fue lo más importante en esta versión, pero no lo único que se lanzó.
También hay de nuevo:
- Las plantillas Beacon
- Campo Hero de Campaña
- El bloque Gutenberg de Formulario de Donación
- Cantidades de donación visuales con imágenes por cantidad
- Nuevos widgets de recaudación de fondos para Elementor, WPBakery y Divi.
¡Charitable tiene más de 1 millón de descargas!
Confiado por millones para impulsar campañas de recaudación de fondos exitosas. Prueba Charitable sin riesgos hoy mismo.
✅ 14 días de devolución de dinero
✅ Precios transparentes
✅ Configuración sin código
Novedades en Charitable
También hemos lanzado varias funciones y mejoras potentes recientemente:
🧾
Diseña una página de agradecimiento personalizada y alineada con tu marca para cada campaña, sin necesidad de código.
📣
Modera tu red de "peer-to-peer" con nuevas pantallas de directorio y aprobaciones en un solo clic.
⚡
Acepta UPI, tarjetas y divisas globales para donaciones con sede en la India, directamente en tu formulario.
🔔
Envía notificaciones push instantáneas para agradecimientos, lanzamientos de campañas y hitos de objetivos.
🛡️
Detección de bots en tiempo real que marca ataques y bloquea a los malos actores antes de que lleguen a tus formularios de donación.
🧳
Servicio de Migración "White Glove"
Deja que nuestro equipo mueva tus donantes, donaciones y donaciones recurrentes desde GiveWP por ti.
Hemos estado añadiendo constantemente a Charitable, funciones y mejoras diseñadas para ayudarte a recaudar más y servir mejor a tus donantes. Ve todo lo que hemos lanzado en el Registro de cambios de Charitable.
¿Aún no eres usuario de Charitable Pro? Regístrate hoy y obtén hasta un 50% de descuento en tu plan. Estamos seguros de que te encantará recaudar fondos con Charitable. Si, por cualquier motivo, Charitable no es adecuado para ti, te reembolsaremos tu compra con nuestra garantía de devolución de 14 días. Consigue Charitable Pro ahora »
Si tienes alguna pregunta o quieres ayuda para configurar, nuestro equipo de soporte está listo para ayudarte a que tus campañas luzcan lo mejor posible.
Mantente conectado para más recursos para organizaciones sin fines de lucro
Para más tutoriales y vídeos adaptados a organizaciones sin fines de lucro, suscríbete a nuestro canal de YouTube. Publicamos regularmente consejos de expertos, guías paso a paso sobre donaciones en línea, estrategias de recaudación de fondos y recursos prácticos para ayudar a tu organización a tener éxito.
🗞️ Recibe consejos semanales y guías exclusivas en tu bandeja de entrada
Únete a nuestro boletín →
🎥 Mira tutoriales paso a paso e historias de éxito
Suscríbete a nuestro canal de YouTube →
👩🏽💻 Conecta con nuestra comunidad y obtén información diaria sobre organizaciones sin fines de lucro
Síguenos en LinkedIn →
🥳 Reels divertidos e información sobre organizaciones sin fines de lucro
Síguenos en Instagram →
👀 Vídeos interesantes y divertidos para ayudarte a hacer crecer tu causa
Síguenos en TikTok→
🌎 Suscríbete y sigue para recibir consejos generales de recaudación de fondos
Obtén consejos de recaudación de fondos en TikTok →
Potentes recursos de recaudación de fondos
⬇️ Descarga estrategias probadas, ideas de campañas y herramientas de expertos
Obtén el Kit de Recaudación de Fondos →
💸 Obtén recursos gratuitos de recaudación de fondos
Ve al Centro de Recaudación de Fondos de Charitable →
¿Tienes preguntas sobre Charitable?
Preguntas frecuentes de Charitable →
🏎️ Prueba Charitable
Crea tu demostración de Charitable →
Comprende la terminología y la jerga de las organizaciones sin fines de lucro
Glosario de organizaciones sin fines de lucro→
% ¿Buscas ofertas y descuentos para organizaciones sin fines de lucro?
Las mejores ofertas y descuentos para organizaciones sin fines de lucro →
Deja una respuesta