¿Quieres que tu formulario de donación parezca pertenecer a tu organización sin fines de lucro, en lugar de ser un complemento genérico añadido a tu página de campaña?
La pestaña Estilos en el Creador de Campañas te permite establecer colores, fuentes y estilos por campo para cada campaña, todo sin escribir una línea de CSS.
¿Qué contiene esta guía?
- Abrir la pestaña Estilos
- Elegir un ajuste preestablecido de diseño
- Establecer los colores globales
- Establecer tipografía y animaciones
- Estilizar campos individuales
- Comprender los estilos personalizados frente a los heredados
- Guardar y previsualizar sus cambios
- Qué sucede con las campañas existentes
- Para Desarrolladores y Agencias
- Preguntas frecuentes sobre la pestaña Estilos
Abrir la pestaña Estilos
La pestaña Estilos se encuentra dentro del panel Diseño del Creador de Campañas.
- En wp-admin, ve a Campañas y abre la campaña que deseas estilizar, o crea una nueva.
- Haz clic en Editar con Constructor.
- En el constructor, abre el panel Diseño en el lado derecho, luego haz clic en la pestaña Estilos. Busca la etiqueta NUEVO junto a ella, junto a General, Pestañas y Avanzado.
Nota importante: El Creador de Campañas, incluida la pestaña Estilos, requiere Charitable Pro 1.8.17 o posterior.
Elegir un ajuste preestablecido de diseño
En la parte superior de la pestaña Estilos, en Estilos globales, encontrarás cuatro ajustes preestablecidos de diseño: Morado intenso, Azul océano, Verde bosque y Rojo intenso.
Haz clic en cualquier ajuste preestablecido para aplicar un conjunto coordinado de colores, tipografía y animaciones a toda la campaña con un solo clic. Un ajuste preestablecido es un punto de partida, no una respuesta final. Elige el que más se acerque a tu marca, luego ajusta los colores globales, la tipografía y las animaciones debajo de él.
[Captura de pantalla: ajustes preestablecidos de diseño de estilos globales.png: la sección Estilos globales que muestra las cuatro opciones de ajuste preestablecido de diseño]
Establecer los colores globales
Los colores globales son la paleta de la que se nutre toda tu campaña. Establece uno una vez y se aplicará a cada campo que no tenga su propia anulación.
Encontrarás nueve colores globales, cada uno con una muestra de color y un campo de valor hexadecimal:
- Primario: tu color de marca principal, utilizado en acentos y resaltados
- Secundario: un color de apoyo, utilizado para cosas como bordes de acento
- Fondo: el color de fondo del formulario
- Texto: el color de texto predeterminado en todo el formulario
- Fondo del botón: el color de relleno del botón Donar
- Texto del botón: el color de la etiqueta en el botón Donar
- Barra de progreso: el color de relleno de la barra de progreso de recaudación de fondos
- Fondo de pestaña: el color de fondo de las pestañas de donación
- Texto de pestaña: el color de la etiqueta en las pestañas de donación
Haz clic en una muestra para abrir el selector de color, o escribe un valor hexadecimal directamente en el campo junto a él.
Consejo profesional: Si gestionas campañas para varias causas en un mismo sitio, asigna a cada campaña sus propios Colores globales en lugar de depender de una paleta compartida. Una campaña de ayuda en caso de desastre y un fondo de becas no tienen por qué tener el mismo aspecto.
Establecer tipografía y animaciones
Debajo de Colores globales, la sección Tipografía controla las fuentes y el tamaño de toda la página.
- Familia de fuentes: elige Predeterminado del tema, Sans-Serif, Serif o Monospace
- Tamaño de encabezado: elige Pequeño, Mediano o Grande
- Tamaño de cuerpo: elige Pequeño, Mediano o Grande
Debajo de Tipografía, la sección Animaciones controla cómo se mueven el formulario y la barra de progreso. Elige Ninguna, Sutil o Suave.
Consejo profesional: Si tú o tus donantes prefieren menos movimiento, establece las Animaciones en Ninguna. El creador respeta esa elección en todos los lugares donde el formulario y la barra de progreso se moverían de otra manera.
Estilizar campos individuales
Colores globales y Tipografía establecen el aspecto general. Cuando un campo específico necesita destacar o integrarse, haz clic directamente en ese campo en la vista previa en vivo para abrir sus propios Estilos de caja.
Los controles exactos cambian según el tipo de campo, pero aquí tienes lo que encontrarás en los más comunes.
Campos de texto y lista
Haz clic en un campo de texto o lista en la vista previa y verás tres grupos de controles: Encabezado, Texto del cuerpo y Estilos de caja.
- Encabezado: Color y tamaño de fuente
- Texto del cuerpo: Color, tamaño de fuente y altura de línea
- Estilos de caja: Color de fondo, Estilo de borde (Sin borde, Solo borde izquierdo o Borde completo), Color del borde, Ancho del borde, Radio del borde y Alineación del texto
Botón de Donar
Haz clic en el botón Donar en la vista previa para establecer su Color de fondo, Color del texto, Radio del borde, Transformación del texto (por ejemplo, Mayúsculas) y Tamaño de fuente.
Fotos
Haz clic en un campo de foto para establecer su Borde de foto: Color del borde, Tamaño del borde y Radio del borde.
Barra de progreso
Haz clic en la barra de progreso para establecer su Color de la barra, Altura de la barra y Color del encabezado.
El mismo tipo de estilo por campo se aplica a las cuentas atrás, las pestañas de donación y otros tipos de campos, por lo que nada en el formulario queda fuera de lugar.
Comprender los estilos personalizados frente a los heredados
Junto a algunos controles de color en los Estilos de caja de un campo, verás una pequeña etiqueta que dice PERSONALIZADO o HEREDADO.
- HEREDADO significa que el campo está tomando su color de los Colores globales. Cambia el Color global y este campo se actualizará automáticamente.
- PERSONALIZADO significa que has establecido una anulación para este campo específico. No cambiará cuando actualices los Colores globales.
Por ejemplo, el borde de acento de un campo de Lista toma automáticamente el color Secundario de tu campaña, por lo que se muestra COMO HEREDADO hasta que establezcas tu propio color para él. Eso es lo que te permite establecer una paleta una vez y que la mayoría de los campos sigan la línea, al mismo tiempo que te da la opción de hacer que cualquier campo individual sea algo propio.
Guardar y previsualizar sus cambios
Cada cambio en la pestaña Estilos actualiza la vista previa en vivo de al lado al instante. No hay un botón de vista previa separado y nada que actualizar.
Importante: La vista previa en vivo muestra tus cambios de inmediato, pero no se aplican a la página de la campaña publicada hasta que haces clic en Guardar.
Qué sucede con las campañas existentes
Si creaste una campaña antes de que existiera la pestaña Estilos, no necesitas hacer nada. Tu campaña se migró al nuevo sistema de estilos automáticamente, sin pérdida de datos, y conserva su aspecto original hasta que decidas abrir la pestaña Estilos y cambiarla.
Para Desarrolladores y Agencias
Todo lo que estableces en la pestaña Estilos se almacena en un único valor meta campaign_style_tokens como tokens de diseño, no como estilos en línea dispersos. Eso mantiene la salida limpia y hace que el estilo de una campaña sea fácil de leer, mover o reutilizar en otro lugar.
Si creas para clientes, puedes extender la pestaña Estilos con tus propios controles:
- Registra controles personalizados por campo en JavaScript a través de
window.charitableDesignFieldControls. - Engancha la renderización del lado del servidor con las acciones
charitable_design_styles_globalycharitable_design_styles_field.
Nada de esto es necesario para usar la pestaña Estilos en el día a día. Está ahí para agencias y desarrolladores que quieran ir más allá.
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. Las campañas existentes conservan su aspecto actual. Se migran al sistema de Estilos automáticamente, sin pérdida de datos, y permanecen exactamente como estaban hasta que las edites.
¿Necesito saber CSS?
No. Cada control en la pestaña Estilos es visual. Los desarrolladores pueden extenderlo más con ganchos y filtros, 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 los campos se trasladan al formulario de donación en vivo en cualquier tamaño de pantalla.
¿Puedo reutilizar un aspecto en varias campañas?
Sí. Aplica la misma Plantilla de Diseño y Colores Globales a cualquier campaña para mantener una sensación coherente y de marca. Cualquier campaña que necesite destacar todavía es libre de usar sus propios colores y estilo de campo.
¡Eso es todo! Has aprendido a usar la pestaña Estilos para diseñar un formulario de donación de marca, desde la paleta general hasta los campos individuales.
A continuación, también puedes aprender más sobre el Creador de Campañas o cómo personalizar tu formulario de donación.
¡Caritable tiene más de 1.2 millones 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
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
🤖 Usa Charitable con tu asistente de IA
⬇️ 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 →
