Crear una página de donaciones personalizada o una vitrina de campañas a menudo requiere codificación compleja o herramientas de terceros que no encajan con el diseño de tu sitio.
Charitable resuelve esto con integración nativa para Divi, ofreciendo cuatro módulos diseñados específicamente que te permiten arrastrar y soltar elementos de recaudación de fondos directamente en tus diseños.
Con estos widgets, puedes añadir un simple botón de donación o crear una página de destino de campaña con todas las funciones.
En esta guía, te mostraremos cómo usar los módulos de Charitable Divi para personalizar tu sitio web de recaudación de fondos sin ningún conocimiento de codificación.
Nota: Los módulos de Divi son una característica premium disponible en Charitable Pro.
¿Todavía no tienes Charitable? Necesitarás instalarlo primero. La función de widgets de Divi está disponible en el plugin Charitable Pro.
¿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 »
Tabla de Contenidos
Requisitos previos
Antes de empezar a usar los módulos de Divi de Charitable, hay algunas cosas que debes tener preparadas para asegurarte de que todo funcione correctamente.
- Tema Divi o plugin Divi Builder instalado y activo
- Charitable (gratuito) o Charitable Pro instalado y activo
- Al menos una campaña creada en Charitable
Encontrar los módulos de Charitable
Los módulos de Charitable están agrupados en su propia categoría específica dentro del constructor de Divi, lo que los hace muy fáciles de acceder.
Primero, abre cualquier página o publicación donde quieras añadir elementos de recaudación de fondos usando el Constructor Visual de Divi.
- Haz clic en el icono de signo más gris para añadir un nuevo módulo
- Busca la categoría Charitable en el selector de módulos
- Los cuatro módulos de Charitable estarán listados allí
- Campaña Charitable: Muestra una única campaña.
- Campañas Charitable: Muestra una cuadrícula o lista de varias campañas.
- Formulario de Donación Charitable: Incrusta un formulario de donación.
- Botón de Donación Charitable: Añade un botón de llamada a la acción.
Ahora, veamos cómo usar cada uno de estos módulos de manera efectiva.
Módulo de Campaña Charitable
El módulo de Campaña está diseñado para mostrar una única campaña específica en tu página. Extrae automáticamente detalles clave como el título de la campaña, la descripción, la barra de progreso y las estadísticas de donación actuales.
Cuándo usar este módulo
- Destacar una campaña específica: Si tienes una recaudación de fondos importante en curso, puedes colocar este módulo en tu página de inicio para darle la máxima visibilidad.
- Crear una página de destino: Es perfecto para crear una página de destino dedicada a una causa específica, lo que te permite adaptar los detalles de la campaña a tu marca.
- Resaltar una iniciativa: Úsalo para llamar la atención sobre tu objetivo de recaudación de fondos más importante del mes.
Módulo de Campañas Charitable
Si deseas mostrar más de un evento de recaudación de fondos a la vez, el módulo de Campañas es la opción correcta.
Este módulo muestra una cuadrícula o lista de varias campañas, lo que permite a los visitantes explorar tus iniciativas activas.
Puedes elegir la opción que desees simplemente haciendo clic en ella. Aparecerá un botón azul de "SÍ".
Cuándo usar este módulo
- Sección "Campañas Actuales": Crea una sección en tu página de inicio que muestre todos tus eventos de recaudación de fondos activos.
- Archivos de Campañas: Crea una página dedicada donde los donantes puedan ver todas las causas pasadas y presentes.
- Visualización en Barra Lateral o Pie de Página: Puedes usar esto para mostrar campañas destacadas en áreas más pequeñas como un pie de página o una barra lateral.
Módulo de Formulario de Donación Charitable
El módulo de Formulario de Donación te permite incrustar un formulario de donación completo para una campaña específica directamente en cualquier diseño de página.
Nota: Al usar este módulo en el Constructor Visual, verás una imagen de marcador de posición. El formulario de donación interactivo real aparecerá en el frontend activo de tu sitio web.
Cuándo usar este módulo
- Páginas de Destino de Campañas: Añade el formulario de donación directamente a una página de campaña para reducir la fricción para los donantes.
- Página de Donación Independiente: Crea una página específica únicamente para aceptar donaciones sin distracciones.
- Funcionalidad de Incrustación: Puedes añadir fácilmente capacidades de donación a cualquier publicación de blog o diseño de página.
Módulo de Botón de Donación Charitable
El módulo de Botón de Donación crea un botón o enlace de llamada a la acción (CTA) que dirige a los visitantes a una campaña específica para hacer una donación.
Cuándo usar este módulo
- Llamadas a la Acción (CTA): Coloca botones de donación en todo el contenido de tu sitio para fomentar las donaciones.
- Encabezados y Secciones Principales: Botones precisos de "Donar Ahora" en el encabezado de tu sitio o en las secciones de imágenes principales para una alta visibilidad.
- Enlaces de Contenido: Añade enlaces de donación dentro de tus publicaciones de blog o estudios de caso.
Personalizar los widgets de Divi
Cuando añades un módulo a tu página, como el módulo de Campañas, verás aparecer una ventana de configuración con una barra de tareas a la izquierda.
Divi divide estas configuraciones en tres pestañas: Contenido, Diseño y Avanzado. Aquí te explicamos cómo puedes usarlas para personalizar tus elementos de recaudación de fondos.
1. Pestaña de Contenido
Las opciones de esta pestaña variarán ligeramente dependiendo del módulo específico que haya seleccionado. Para el módulo de Campañas, normalmente encontrará:
- Filtrado: Le permite controlar qué campañas se muestran en la cuadrícula.
- Comentarios: Envíe notas y sugerencias a Charitable
- Fondo: Puede personalizar completamente el fondo del módulo. Puede agregar un color sólido, cargar una imagen o video, e incluso aplicar patrones o máscaras para un aspecto moderno.
- Etiqueta de administrador: Esto le permite nombrar el módulo para poder identificarlo fácilmente en la vista del constructor del backend.
2. Pestaña de Diseño
La pestaña Diseño es donde controla el estilo visual de su sección de recaudación de fondos. Tiene control total sobre:
- Texto: Personalice fuentes, tamaños y colores para que coincidan con su tema.
- Diseño: Ajuste cómo se organizan las campañas.
- Tamaño y espaciado: Gestione el ancho, la altura, los márgenes y el relleno.
- Borde y sombra: Agregue bordes, esquinas redondeadas y sombras de caja para dar profundidad.
- Efectos: Incluso puede agregar filtros, transformaciones y animaciones para que sus campañas destaquen.
3. Pestaña Avanzada
Para desarrolladores o aquellos que necesitan un control preciso, la pestaña Avanzada ofrece opciones para:
- CSS personalizado: Agregue su propio CSS a elementos específicos del módulo.
- Atributos: Gestione los atributos HTML.
- Condiciones: Establezca lógica condicional para cuándo se debe mostrar el módulo.
También puede controlar la visibilidad, las transiciones, las posiciones y los efectos de desplazamiento.
CSS personalizado
Cada módulo de Charitable incluye una sección de CSS personalizado en la pestaña Avanzada, que le permite apuntar a elementos específicos:
Los objetivos CSS comunes incluyen:
- Títulos de campañas
- Barras de progreso
- Botones de donación
- Campos de formulario
- Tarjetas de campaña (en vista de cuadrícula)
Consejos para obtener los mejores resultados
Para sacar el máximo provecho de los módulos de Divi de Charitable, aquí tiene algunos consejos rápidos a tener en cuenta mientras crea sus páginas.
- Vista previa del constructor visual: Los módulos de Campaña y Campañas muestran vistas previas en vivo directamente en el constructor. Sin embargo, el módulo de Formulario de donación muestra una imagen de marcador de posición mientras se edita. No se preocupe, el formulario real aparecerá correctamente en el frontend.
- Consistencia de estilo: Para un aspecto profesional, utilice la configuración de texto global en la pestaña Diseño para que sus fuentes coincidan con su tema de Divi.
- Optimización móvil: Compruebe siempre su diseño en vistas móviles. Es posible que desee reducir el número de columnas en la cuadrícula de campañas para los usuarios de tabletas y teléfonos para garantizar que el texto siga siendo legible.
- Rendimiento: Las opciones desplegables de campaña se almacenan en caché para mejorar el rendimiento. Si acaba de crear una campaña y no la ve en la lista, guarde su diseño como borrador y actualice el constructor.
Solución de problemas comunes
Si encuentras problemas al configurar tus módulos, aquí tienes las soluciones más comunes:
- ¿Módulos no aparecen? Asegúrate de que tanto el plugin Charitable como el Divi Builder (o tema) estén activos. Si lo están, intenta borrar la caché de tu navegador.
- ¿El desplegable de campañas está vacío? Debes tener al menos una campaña con el estado "Publicada" para que aparezca en la lista. Las campañas en borrador no se mostrarán.
- ¿El estilo no se aplica? Esto suele ser un problema de caché. Ve a Divi » Opciones del Tema » Constructor » Avanzado y borra la caché CSS estática de Divi. Además, comprueba si hay conflictos CSS con tu tema activo.
¡Eso es todo! Ahora has aprendido a usar los módulos de Charitable Divi para crear páginas de recaudación de fondos espectaculares.
¿No estás seguro de cómo crear una recaudación de fondos? Aprende Cómo configurar tu primera campaña »
Aquí tienes algunas de las guías "cómo hacer" y artículos de ayuda más populares para nuevos usuarios:
- Crear y editar donaciones en el panel de WordPress
- Cómo usar el sistema de gestión de donantes
- Conectar con Google Analytics
- Problemas con correos electrónicos de donación que no se envían
- Reenviar correos electrónicos de donación desde el panel
- Widgets y Shortcodes
¿Quieres más consejos sobre recaudación de fondos y asesoramiento para organizaciones sin fines de lucro?
Compartimos regularmente guías prácticas, estrategias probadas y consejos de expertos para ayudarte a recaudar más fondos y construir relaciones más sólidas con los donantes. Únete a miles de organizaciones sin fines de lucro que reciben nuestro mejor contenido directamente:
- Únase a nuestro boletín – Reciba consejos semanales y guías exclusivas en su bandeja de entrada
- Suscríbase a nuestro canal de YouTube – Vea tutoriales paso a paso e historias de éxito
- Síganos en LinkedIn – Conéctese con nuestra comunidad y obtenga información diaria sobre organizaciones sin fines de lucro
- Síganos en TikTok – Vídeos informativos y divertidos para ayudarle a hacer crecer su causa
- Síguenos en Instagram – Reels divertidos con ideas y consejos para organizaciones sin ánimo de lucro
Sin relleno, solo consejos prácticos de personas que entienden los desafíos que enfrentas cada día.
¿Hay tutoriales en vídeo disponibles para Charitable?
¡Sí! Suscríbete al canal de YouTube de Charitable para obtener tutoriales paso a paso e historias de éxito.
¿Necesitas soporte? ¿Tienes alguna pregunta? Si eres un usuario lite/gratuito de Charitable, puedes contactar a nuestro equipo en los foros de soporte de WordPress.org. Si tienes una licencia activa, no dudes en contactarnos directamente para soporte prioritario.
