Charitable Pro incluye integración nativa con WPBakery Page Builder (anteriormente Visual Composer), lo que te permite añadir fácilmente formularios de donación, visualizaciones de campañas y botones de donación a tus páginas utilizando el editor visual de WPBakery.

Todos los elementos de Charitable se encuentran en la categoría “Charitable” al añadir elementos en WPBakery. Simplemente haz clic en el botón “+” en WPBakery, navega a la categoría Charitable y selecciona el elemento que necesites.

Referencia Rápida

Nombre del Elemento	Propósito	Ajustes Clave	Mejor Caso de Uso
Campaña de Charitable	Mostrar una única campaña con todos sus detalles	Selección de campaña	Páginas de detalles de campaña, secciones de campañas destacadas
Formulario de Donación de Charitable	Mostrar un formulario de donación completo para una campaña	Selección de campaña	Páginas de donación dedicadas, páginas de campaña
Botón de Donación de Charitable	Mostrar un botón o enlace a la página de donación	Campaña, Texto del botón, Tipo de botón, Opción de nueva pestaña	Secciones de llamada a la acción, widgets de barra lateral, banners
Campañas de Charitable	Mostrar una cuadrícula o lista de múltiples campañas	Número, Columnas, Orden, Filtros, Opciones de visualización	Páginas de listado de campañas, secciones de la página de inicio

Los Cuatro Elementos

1. Campaña de Charitable

Qué hace: Muestra una única campaña con toda su información, incluida la descripción de la campaña, la barra de progreso, el formulario de donación (si está habilitado) y los detalles de la campaña.

Cuándo usarlo: Utilice este elemento cuando desee mostrar una campaña específica en una página. Perfecto para páginas de detalles de campañas, secciones de campañas destacadas o para resaltar un esfuerzo de recaudación de fondos en particular.

Configuración y Opciones:

Campaña – Seleccione qué campaña mostrar en el menú desplegable. Solo están disponibles las campañas publicadas.

Opciones de personalización:

• Nombre de clase adicional: Añadir clases CSS personalizadas para el estilo
• ID del elemento: Asignar un ID único para la segmentación CSS o JavaScript
• Cuadro CSS (Opciones de diseño): Utilice el editor CSS integrado de WPBakery para un estilo personalizado

Nota: Este elemento muestra la plantilla completa de la campaña, que incluye toda la información de la campaña configurada en los ajustes de su campaña.

2. Formulario de Donación de Charitable

Qué hace: Muestra un formulario de donación completo para una campaña específica. Admite tanto formularios visuales (nuevo generador de formularios) como formularios heredados.

Cuándo usarlo: Utilice este elemento cuando desee incrustar un formulario de donación directamente en una página. Ideal para páginas de donación dedicadas, páginas de campañas o cualquier página donde desee aceptar donaciones.

Configuración y Opciones:

Campaña – Seleccione el formulario de donación de qué campaña mostrar. El formulario se configurará según los ajustes del formulario de la campaña.

Tipos de formularios admitidos:

• Formularios visuales: Generador de formularios moderno con configuración de campos de arrastrar y soltar
• Formularios heredados: Diseño de formulario tradicional (si el formulario visual no está habilitado)

Comportamiento de la vista previa:

• Los formularios se muestran como vistas previas de solo lectura en el editor de WPBakery por motivos de seguridad y rendimiento.
• Los formularios de varios pasos muestran solo el primer paso en la vista previa.
• La selección del método de pago no se muestra en la vista previa (se muestra un mensaje de marcador de posición).
• La funcionalidad completa está disponible en el frontend cuando los visitantes ven la página.

Opciones de personalización:

• Nombre de clase adicional: Añadir clases CSS personalizadas para el estilo del formulario
• ID del elemento: Asignar un ID único para la segmentación CSS o JavaScript
• Cuadro CSS (Opciones de diseño): Utilice el editor CSS integrado de WPBakery para un estilo personalizado

Importante: La vista previa del formulario en WPBakery es de solo lectura y puede que no muestre todos los campos. Pruebe siempre el proceso de donación real en el frontend para asegurarse de que todo funciona correctamente.

3. Botón de Donación de Charitable

Qué hace: Crea un botón o enlace que dirige a los visitantes a la página de donación de una campaña.

Cuándo usarlo: Utilice este elemento para botones de llamada a la acción, widgets de barra lateral, banners o cualquier lugar donde desee una forma sencilla de dirigir a los visitantes a donar. Perfecto cuando no necesita el formulario completo en la página.

Configuración y Opciones:

Campaña – Seleccione a qué campaña debe enlazar el botón.

Texto del botón – Personalice el texto que se muestra en el botón. Por defecto: “Donar”

Tipo de botón – Elija cómo aparece el botón:

• Botón – Botón con estilo, con fondo y relleno
• Enlace – Enlace de texto con subrayado (sin estilo de botón)

Predeterminado: Botón

Abrir en una pestaña nueva – Marca esta casilla para abrir la página de donación en una nueva pestaña del navegador al hacer clic.

Opciones de personalización:

• Nombre de clase adicional: Añade clases CSS personalizadas para el estilo del botón
• ID del elemento: Asignar un ID único para la segmentación CSS o JavaScript
• Cuadro CSS (Opciones de diseño): Utilice el editor CSS integrado de WPBakery para un estilo personalizado

Consejo: Usa el tipo de botón “Enlace” para una llamada a la acción más sutil, o el tipo “Botón” para una solicitud de donación prominente y llamativa.

4. Campañas de Charitable

Qué hace: Muestra una cuadrícula o lista de múltiples campañas con opciones de filtrado, ordenación y visualización.

Cuándo usarlo: Usa este elemento para páginas de listado de campañas, secciones de la página de inicio que muestren múltiples campañas, o cualquier página donde quieras mostrar varias campañas de recaudación de fondos a la vez.

Configuración y Opciones:

Ajustes básicos:

Número de campañas – Cuántas campañas mostrar. Predeterminado: Ajuste de publicaciones por página de tu sitio

Columnas – Número de columnas en el diseño de cuadrícula (1, 2, 3 o 4). Predeterminado: 2

Ordenar por – Cómo ordenar las campañas:

• Fecha – Las más recientes primero
• Popularidad – Las que tienen más donaciones primero
• Finalizan pronto – Las que finalizan más pronto primero
• Título – Alfabéticamente por nombre de campaña
• Aleatorio – Orden aleatorio
• Cantidad recaudada – La mayor cantidad recaudada primero

Predeterminado: Fecha

Orden – Dirección de ordenación (Ascendente o Descendente). Predeterminado: Descendente

Opciones de filtrado:

Categorías – Filtrar por identificadores de categoría de campaña. Introduce identificadores de categoría separados por comas (ej. “educacion,salud”).

Excluir campañas – Ocultar campañas específicas por ID. Introduce IDs de campaña separados por comas (ej. “12,34,56”).

Incluir campañas inactivas – Marca para incluir campañas finalizadas o inactivas en la lista.

Etiquetas – Filtrar por identificadores de etiqueta de campaña. Introduce identificadores de etiqueta separados por comas (ej. “urgente,destacado”).

Campañas padre – Mostrar solo campañas hijas de IDs de campaña padre especificados. Introduce IDs de campaña padre separados por comas (ej. “12,34”).

Solo padre – Marca para mostrar solo campañas de nivel superior (campañas sin padre).

Opciones de visualización:

Tipo de botón – Qué aparece en cada tarjeta de campaña:

• Botón Donar – Botón “Donar” en cada tarjeta
• Enlace Leer más – Enlace “Leer más” en cada tarjeta
• Sin botón – Sin botón ni enlace (solo la información de la campaña)

Predeterminado: Botón Donar

Límite de descripción – Caracteres máximos para la descripción de la campaña (0-500). Predeterminado: 100

Rejilla adaptable – Habilita el diseño de rejilla adaptable que se ajusta al tamaño de la pantalla. Predeterminado: Habilitado

Diseño de mosaico – Habilita el diseño de rejilla de mosaico (estilo Pinterest) donde los elementos se organizan para llenar los huecos.

Opciones de personalización:

• Nombre de clase adicional: Añade clases CSS personalizadas para el estilo de la rejilla
• ID del elemento: Asignar un ID único para la segmentación CSS o JavaScript
• Cuadro CSS (Opciones de diseño): Utilice el editor CSS integrado de WPBakery para un estilo personalizado

Consejo: Combina opciones de filtrado para crear visualizaciones de campañas personalizadas. Por ejemplo, muestra solo campañas "destacadas" de la categoría "educación", ordenadas por cantidad recaudada.

Características Comunes (Todos los Elementos)

Todos los cuatro elementos de Charitable comparten estas opciones de personalización comunes:

Parámetros de estilo

Nombre de clase adicional (el_class)

Añade una o más clases CSS personalizadas al elemento. Separa varias clases con espacios. Esto te permite dirigir el elemento con CSS personalizado en tu tema o a través del Personalizador.

Ejemplo: mi-campaña-personalizada borde-personalizado

ID del elemento (el_id)

Asigna un atributo de ID HTML único al elemento. Esto es útil para:

• Selección CSS con #tu-id
• Interacciones JavaScript
• Enlaces de anclaje (saltar a una sección de la página)

Importante: Los IDs deben ser únicos en la página. No uses el mismo ID para varios elementos.

Caja CSS (Opciones de diseño)

El editor CSS integrado de WPBakery que te permite añadir CSS personalizado directamente al elemento. Puedes estilizar:

• Márgenes y relleno
• Bordes y fondos
• Tipografía
• Puntos de interrupción adaptables

Este CSS está limitado al elemento específico, por lo que no afectará a otros elementos de la página.

Pestaña de comentarios

Todos los elementos de Charitable incluyen una pestaña de “Comentarios” en su panel de configuración. Esta pestaña contiene un formulario de comentarios donde puedes compartir:

• Sugerencias para nuevas funciones
• Ideas para elementos adicionales de WPBakery
• Informes de errores o problemas que hayas encontrado
• Comentarios generales sobre la integración

Tus comentarios nos ayudan a mejorar la integración de WPBakery y a priorizar nuevas funciones. Todo el feedback es revisado por nuestro equipo de desarrollo.

Nota: El formulario de comentarios se abre en una nueva pestaña, por lo que no perderás tu trabajo en el editor de WPBakery.

Notas para Desarrolladores

Detalles técnicos

• Todos los elementos de Charitable utilizan shortcodes estándar de WPBakery que se pueden personalizar mediante programación.
• Los elementos se pueden estilizar utilizando métodos CSS estándar de WordPress (hojas de estilo del tema, Personalizador o CSS en línea a través de Opciones de diseño).
• La integración respeta las limitaciones del modo de vista previa de WPBakery en cuanto a rendimiento y seguridad.
• Todos los elementos son totalmente adaptables y funcionan con las funciones de diseño adaptable de WPBakery.

Equivalentes de Shortcode

Cada elemento de WPBakery corresponde a un shortcode de Charitable:

• Campaña Charitable → [campaign id="123"]
• Formulario de Donación Charitable → [charitable_donation_form campaign_id="123"]
• Botón de Donación Charitable → [charitable_donate_button campaign="123"]
• Campañas Charitable → [campaigns number="6" columns="2"]

Puedes usar estos shortcodes directamente en tu contenido si lo prefieres, o personalizarlos mediante programación en los archivos PHP de tu tema.

Personalización mediante CSS

Todos los elementos se pueden personalizar con CSS. Aquí tienes algunos enfoques de personalización comunes:

1. Nombre de Clase Adicional: Añade una clase y luego dirígela en la hoja de estilos de tu tema.
2. Opciones de Diseño: Usa el cuadro CSS de WPBakery para el estilo específico del elemento.
3. Hoja de Estilo del Tema: Dirígete a las clases predeterminadas de Charitable (por ejemplo, .charitable-campaign, .charitable-donation-form).
4. Tema Hijo: Sobrescribe las plantillas de Charitable si necesitas una personalización más extensa.

Limitaciones Conocidas

Limitaciones del Modo de Vista Previa

Por razones de seguridad y rendimiento, algunas funciones funcionan de manera diferente en el modo de vista previa de WPBakery en comparación con el frontend:

• Formularios de Donación: Los formularios se muestran como vistas previas de solo lectura en el editor. Los visitantes pueden interactuar con los formularios normalmente en el frontend.
• Formularios de Varios Pasos: Solo se muestra el primer paso en la vista previa. Todos los pasos están disponibles en el frontend.
• Métodos de Pago: La selección de la pasarela de pago no se muestra en la vista previa (se muestra un mensaje de marcador de posición). Las opciones de pago completas aparecen en el frontend.
• Interacciones del Formulario: Los campos del formulario no se pueden rellenar ni enviar en el modo de vista previa. Esto es intencional por seguridad.

Importante: Prueba siempre los formularios de donación en el frontend para asegurarte de que el proceso completo de donación funcione correctamente.

Consideraciones de rendimiento

• Las listas de campañas están limitadas a 6 campañas en la vista previa de WPBakery por motivos de rendimiento.
• La paginación está deshabilitada en el modo de vista previa.
• Es posible que algunas funciones de JavaScript estén deshabilitadas en la vista previa para evitar conflictos con el editor de WPBakery

Solución de problemas

Elementos no mostrados en WPBakery

• Comprobar versión de WPBakery: Asegúrate de que estás ejecutando WPBakery 6.0 o superior. Las versiones anteriores no son compatibles.
• Comprobar versión de Charitable Pro: Asegúrate de que estás ejecutando Charitable Pro 1.8.10.5 o superior.
• Borrar caché: Borra la caché de cualquier plugin de caché y del navegador, luego actualiza el editor de WPBakery.
• Comprobar categoría: Busca la categoría “Charitable” en el selector de elementos (no “Contenido” u otras categorías).

Vista previa del formulario no funciona

• Comprobar configuración de campaña: Asegúrate de que la campaña seleccionada tiene un formulario de donación habilitado en su configuración.
• Comprobar tipo de formulario: Verifica si la campaña utiliza un formulario visual o un formulario heredado en el editor de campañas.
• Limitaciones de vista previa: Recuerda que los formularios son de solo lectura en la vista previa. Prueba en el frontend para ver la funcionalidad completa.

Estilos no aplicados

• Comprobar especificidad CSS: Es posible que tu CSS personalizado necesite una mayor especificidad para anular los estilos predeterminados.
• Usar opciones de diseño: Intenta usar el cuadro CSS de WPBakery (Opciones de diseño) para aplicar estilos específicos a los elementos.
• Borrar caché: Borra la caché del navegador y de WordPress para ver los cambios de estilo.
• Comprobar conflictos de temas: Algunos temas pueden anular los estilos de Charitable. Usa las herramientas de desarrollador del navegador para inspeccionar elementos.

Campañas no mostradas

• Comprobar filtros: Revisa tus opciones de filtrado (categorías, etiquetas, listas de exclusión); pueden ser demasiado restrictivas.
• Comprobar estado de la campaña: Asegúrate de que las campañas estén publicadas. Las campañas no publicadas no aparecerán a menos que se marque “Incluir inactivas”.
• Comprobar ajuste de número: Verifica que el ajuste “Número de campañas” no esté establecido en 0.

Comentarios y Sugerencias

Trabajamos constantemente para mejorar la integración con WPBakery basándonos en los comentarios de los usuarios. Tu opinión nos ayuda a priorizar nuevas funciones y mejoras.

Cómo enviar comentarios

Puedes enviar comentarios de dos maneras:

1. A través de la configuración de elementos: Abre cualquier elemento de Charitable en WPBakery, haz clic en la pestaña “Comentarios” y utiliza el formulario de comentarios.
2. A través de soporte: Ponte en contacto con nuestro equipo de soporte con tus sugerencias o solicitudes de funciones.

Qué buscamos

Nos encantaría conocer tus ideas para:

• Nuevos elementos: ¿Qué elementos adicionales de Charitable serían útiles en WPBakery?
• Mejoras de funciones: ¿Cómo podemos mejorar los elementos existentes?
• Opciones de visualización: ¿Qué nuevas opciones de visualización o diseño te resultarían útiles?
• Mejoras de integración: ¿Qué haría que la integración fuera más fácil de usar?
• Mejoras del flujo de trabajo: ¿Cómo podemos optimizar su flujo de trabajo al crear páginas de donación?

Planes de expansión futuros

Basándonos en los comentarios de los usuarios, estamos considerando añadir:

• Diseños adicionales para mostrar campañas
• Más opciones de filtrado y ordenación
• Opciones de plantillas personalizadas
• Integración con las funciones avanzadas de WPBakery

¿Tiene alguna sugerencia? ¡Queremos escucharla! Utilice la pestaña Comentarios en cualquier elemento de Charitable o póngase en contacto con nuestro equipo de soporte.

¡Gracias!

Gracias por usar Charitable Pro con WPBakery Page Builder. Sus comentarios y sugerencias nos ayudan a crear mejores herramientas para la recaudación de fondos y para marcar la diferencia en el mundo.

Soporte y Recursos

• Documentación de Charitable Pro: https://www.wpcharitable.com/documentation/
• Foros de soporte: Obtenga ayuda de la comunidad y de nuestro equipo de soporte
• Documentación de WPBakery: Obtenga más información sobre las funciones de WPBakery Page Builder