Configurar los átomos

Los átomos son bloques preparados para propuestas y cotizaciones: la tarjeta del agente, un carrusel, los botones para aprobar, la firma del contrato. Se colocan como cualquier bloque y cada uno trae sus propios ajustes, que el editor llama propiedades: qué datos se ven, qué textos llevan los botones, qué colores usan.

Si todavía no has abierto el editor, empieza por Abrir Design Studio y conocer la pantalla.

Añadir un átomo

1. Haz clic en la zona gris junto al lienzo para que no haya nada seleccionado.
2. En el panel derecho, abre la pestaña Elementos y baja hasta Átomos.
3. Arrastra el átomo hasta la página. Un clic sobre él no lo añade.

El grupo trae once átomos: Tarjeta de agente, Acordeón FAQ, Carrusel, Plan de pagos, Encabezado de Propuesta, Calificación, Caja de ícono, Lottie, Logo, Firma de Contrato y Botones de Aprobación. Debajo está el grupo Plugins, para los bloques propios de la cuenta, con un botón de flechas para recargar la lista.

En la cuenta de pruebas el grupo Plugins sale vacío, con el aviso «No hay plugins personalizados» y la indicación «Crea tus plugins en el panel de Prolibu». Ese panel es el módulo Plugins, que no está en el menú lateral: ábrelo con la paleta de comandos (⌘K o Ctrl+K) escribiendo plugins. Su tabla pide datos técnicos, como Plugin Code y Options Schema, así que crear un plugin es tarea de alguien con conocimientos de programación.

Cambiar las propiedades de un átomo

1. Haz clic en el átomo, en el lienzo o en su fila de Capas.
2. El panel derecho se titula Componente. Arriba tiene los ajustes de siempre: alineación, posición, rotación, tamaño y opacidad.
3. Baja hasta Propiedades del Componente. Debajo del título dice qué bloque es, por ejemplo Componente: Price Quote.
4. Cambia lo que necesites y, cuando termines, pulsa Guardar, arriba a la derecha del editor.

Los datos que muestran los átomos en el editor (Sarah Johnson, John Smith, DEAL-2024-001, importes en $) son de ejemplo. Muchas propiedades aparecen en inglés en la aplicación; aquí se nombran tal cual. Los átomos con listas (Acordeón FAQ, Carrusel) traen al final un botón Restablecer valores.

El Carrusel es la excepción: su panel no tiene Propiedades del Componente, sino dos pestañas propias. Se explica más abajo.

Esto es lo que muestra y lo que se ajusta en cada átomo:

Átomo	Qué muestra	Qué se puede cambiar
Tarjeta de agente	Foto y datos de contacto del agente.	Qué datos se ven: Avatar, Full Name, Job Title, Rating, Email, WhatsApp, Website y Address.
Acordeón FAQ	Preguntas que se despliegan al pulsarlas.	Título, Al abrir, cinco colores en Apariencia y la lista Preguntas frecuentes (trae dos de ejemplo, en inglés). Ver más abajo.
Carrusel	Diapositivas con imagen, antetítulo, título y descripción.	Pestañas Diseño y Contenido. Ver más abajo.
Plan de pagos	Las cuotas del plan de pagos.	Variant (Table), Title (entra con el texto paymentPlan.title; cámbialo por tu título), Show Title & Description, Item Detail, Show Payments Expanded, Open Timeline, Collapse Payment List y Columns.
Encabezado de Propuesta	Etapa, número y fechas de la propuesta.	Qué datos se ven: Stage, Proposal Number, Created Date, Updated Date y Offer Valid Through.
Calificación	Estrellas para puntuar.	Appearance, Rating Stars, Background y Text Color.
Caja de ícono	Un icono dentro de un recuadro.	Ícono (entra con Note Pencil), Color del contenedor y Color del ícono. Ver más abajo.
Lottie	Una animación Lottie.	Lottie JSON, con el botón Cargar archivo .json, Loop y Autoplay.
Logo	Un logo. En el editor se ve como un recuadro gris con la palabra «LOGO».	Fit (Contain o Cover; entra con Contain) y Align (Left, Center o Right; entra con Center). No tiene campo para elegir la imagen: muestra el logo de la cuenta. Ver De dónde sale el logo.
Firma de Contrato	El botón Revisar y Firmar y el nombre del firmante.	Texto del botón, firmantes y plantilla de contrato. Ver más abajo.
Botones de Aprobación	Los botones para aprobar o rechazar.	El texto de cada botón: Approve Button («Approve Proposal») y Deny Button («Deny Proposal»). Debajo hay dos casillas con esos mismos nombres. Al final, los textos de confirmación: Confirm Approval Text, Confirm Denial Text, Confirm Yes y Confirm No.

De dónde sale el logo

El átomo Logo y el recuadro del logo de la página Footer no tienen imagen propia: en la propuesta muestran el logo de la cuenta. Mientras la cuenta no tenga logo, el átomo no muestra nada y el recuadro del Footer sigue gris.

El logo se sube en las preferencias de la cuenta, que solo puede abrir un administrador. El resto de esa pantalla se explica en Configurar tu cuenta.

1. Arriba a la derecha, abre el menú Cuenta y elige Preferencias.
2. En el menú de la izquierda, dentro de General, pulsa Apariencia.
3. En Logo, pulsa Cargar archivo y elige la imagen, o usa Pegar del portapapeles o Cloud Drive.
4. Pulsa Guardar, arriba a la derecha.

Lo comprobamos con un logo de prueba: el átomo Logo y el recuadro del logo del Footer pasaron a mostrarlo en la propuesta del negocio. Fit y Align deciden cómo encaja dentro de la caja del átomo.

Escribir las preguntas de un Acordeón FAQ

El acordeón entra con 500 × 178 y dos preguntas de ejemplo en inglés, «What is included?» y «Terms & Conditions».

1. Selecciona el acordeón y baja hasta Preguntas frecuentes. El número de al lado dice cuántas hay.

2. Pulsa la flecha de una pregunta para desplegarla. Cada una trae:

   • Título: la pregunta.
   • Descripción: la respuesta.
   • Imagen: una dirección, o los botones para cargarla desde tu equipo o desde Cloud Drive.

   Título y Descripción tienen botones de Negrita, Cursiva, Subrayado, Color de texto e Insertar enlace.

3. Escribe el texto en cada campo. El acordeón del lienzo cambia al momento.

4. Para añadir otra pregunta, pulsa el + (Añadir pregunta). Entra al final como «Elemento FAQ» y un número, con «Ingresa descripción aquí…» de respuesta, y el acordeón se alarga.

5. Para quitar una pregunta, pulsa su X (Eliminar elemento). Para cambiar el orden, arrástrala por sus seis puntos.

Arriba, Al abrir decide cómo se ven las preguntas al abrir el documento: Todas plegadas, Solo la primera abierta o Todas abiertas. Con Título (el +) le pones un encabezado al bloque, y Apariencia trae el fondo de la pregunta, el fondo del botón y los colores del icono, del título y del texto.

Al soltar un acordeón en una página, el editor le marca sola la casilla Crecer automáticamente, para que la página se alargue si las respuestas ocupan más. Qué hace esa casilla está en Que la página crezca con su contenido.

Cambiar el icono de una Caja de ícono

1. Selecciona la caja de ícono y baja hasta Propiedades del Componente.
2. Pulsa el desplegable Ícono (Cambiar ícono). Se abre el cuadro Elegir ícono.
3. Escribe en Buscar íconos… el nombre del icono en inglés, por ejemplo star. Los nombres están en inglés: con «estrella» sale «Ningún ícono coincide con la búsqueda».
4. Haz clic en el icono. El cuadro se cierra y el desplegable muestra su nombre, por ejemplo Star.
5. Cambia el fondo en Color del contenedor y el del dibujo en Color del ícono. Escribe el código y pulsa Tab.

Configurar un carrusel

El carrusel entra con 600 × 352 y tres diapositivas de ejemplo. Su panel tiene dos pestañas.

Para cambiar las diapositivas:

1. Selecciona el carrusel y abre la pestaña Contenido. La lista Slides muestra las diapositivas con su número.
2. Pulsa una fila para editarla. El panel pasa a decir, por ejemplo, Editando · 1 Enhanced Aerodynamics, y trae:
   • La imagen: Cargar imagen local, Buscar en Cloud Drive o una dirección en URL.
   • Eyebrow, el texto pequeño de encima del título.
   • Título principal y Descripción.
3. Escribe los textos. El carrusel del lienzo cambia al momento.
4. Pulsa Atrás para volver a la lista.
5. Para añadir otra diapositiva, pulsa Agregar slide. Para quitar una, pulsa la X de su fila, y para cambiar el orden, arrástrala por sus seis puntos. Restablecer valores devuelve la lista a como venía.

La pestaña Diseño trae, además de la posición y el tamaño del bloque, Variantes (cuatro formas de presentar las diapositivas), Tamaño de contenedor (ancho y alto de cada diapositiva, separación y esquinas), Posición de texto, Relleno, Flechas, Indicadores, un Título que se añade con + y los colores de los Controles.

Configurar la firma de contrato

El átomo Firma de Contrato entra con 352 × 95 y muestra el botón Revisar y Firmar y, debajo, el nombre del firmante (John Smith, de ejemplo).

1. Selecciona el átomo y baja hasta Propiedades del Componente.
2. En Texto del botón, escribe el texto que quieres en el botón. Vacío, sugiere «Review & Sign».
3. Adjuntar propuesta viene marcada. Si la dejas así, indica en Páginas de la propuesta qué páginas se adjuntan, por ejemplo 1-3, 5. Vacío significa todas.
4. En Firmantes, pulsa Agregar Firmante para añadir una casilla de firmante. Cada casilla tiene su asa para reordenar y una X roja para quitarla.
5. En Plantilla de contrato, abre la lista Select Contract Template… y elige la plantilla del contrato. Si tu cuenta no tiene ninguna, la lista dice «Sin resultados».

Bloques que llegan con las plantillas de página

Estos bloques no están en la pestaña Elementos. Entran al añadir una plantilla de página del catálogo y se configuran igual que los demás.

Bloque (nombre en Capas)	Plantilla de página	Qué se puede cambiar
Price Quote	Cotización	Title, Summary Template (acepta HTML), qué partes se ven (Show Title & Description, Repeat Headers, Line Item Detail, Show Consolidated, Show Additional Notes…), qué se despliega de entrada (Show Dates Expanded, Show Groups Expanded, Show Families Expanded, Show Line Items Expanded), los resúmenes (Summary of Dates, Summary of Groups, Summary of Families, Summary of Total), el plan de pagos (Payment Plan, Payment Plan Variant, Payment Item Detail, Payment Plan Open Timeline, Collapse Payment List) y la presentación (Expand Line Items with Special Notes, Wrap Line Item Name, Show Attachment Icon, Opener Color, Quote Columns, Payment Plan Columns y Family Columns).
Cover Letter Body	Carta	Título, Línea de autor, Saludo, Cuerpo, Cuerpo (2º párrafo) y Despedida. Los cuerpos traen botones de formato B, I, U y A.
Commercial Profile	Perfil Comercial	Título, Línea de autor, Saludo, Cuerpo y Cuerpo (2º párrafo).
Media	Perfil Comercial	Las mismas opciones del elemento Multimedia: foto o video, reproducción, oscurecer el fondo y encaje.
Notes	Notas	Page Title y la lista de notas (trae «Aclaración importante»), con Restablecer valores.
Satisfaction Body	Encuesta	Tipo de calificación, Relleno y Borde.
Attachments V2	Adjuntos	Title, Subtitle Text y Abrir en modal.
Quick Proposal Approval	Aprobación	El texto de cada estado de la aprobación: pendiente (Title, Section Title, Description (Pending), Notice Title, Notice Text), aprobada (Approved Title, Description (Approved), Approval Date Label, Approved Button) y rechazada (Denied Title, Description (Denied), Denial Date Label, Denied Button). Además, Fondo, los botones y los textos de confirmación.
Agreement Signature V2	Firma	Title, Section Title, Description, Notice Title, Notice Text, Attach Proposal y Proposal Pages.
Content Template y Product Snippets	Personalizado y Snippet	Nada: el panel dice «Sin propiedades configurables».

Las páginas Carta y Perfil Comercial llevan además un Proposal Header (el mismo Encabezado de Propuesta de la tabla anterior), y la Carta, una Agent Card (la Tarjeta de agente).