Editor Visual de Invitaciones
El editor visual es la herramienta principal para disenar tu invitación. Aquí vas a aprender cada opción disponible para que domines la personalización completa.
Antes de empezar
- Tener una invitación creada (en estado Borrador)
- Haber seleccionado una plantilla al crearla
Asi se ve el editor
Cuando abres el editor, vas a ver 3 paneles principales:
Panel izquierdo (Secciones) — Aquí ves todas las secciones de tu invitación. Puedes arrastrar para cambiar el orden, activar/desactivar con el icono del ojo, y agregar nuevas secciones con el botón "+".
Canvas central (Vista previa) — Muestra como se ve tu invitación en tiempo real. Cada cambio que hagas se refleja aquí inmediatamente. Puedes hacer doble clic en cualquier texto para editarlo directamente.
Panel derecho (Propiedades) — Tiene 3 pestanas: Contenido (textos e imagenes), Estilo (diseño visual) y Global (configuración que aplica a toda la invitación).
Atajos de teclado útiles
Usa Ctrl+[ y Ctrl+] para mostrar/ocultar los paneles laterales. Con Ctrl+Z deshaces cambios y con Ctrl+S guardas una versión.
Las secciones de tu invitación
Tu invitación se compone de bloques independientes llamados secciones. Puedes activar solo las que necesites — no es obligatorio usar todas. Aquí estan las 18 secciones disponibles:
| # | Sección | Para que sirve |
|---|---|---|
| 1 | Portada | Imagen principal con nombres de los protagonistas y fecha del evento |
| 2 | Bienvenida | Mensaje de saludo personalizado para tus invitados |
| 3 | Detalles del Evento | Información general: que, cuando, donde |
| 4 | Cuenta Regresiva | Contador animado que muestra cuanto falta para el evento |
| 5 | Nuestra Historia | Relato o linea de tiempo de los protagonistas |
| 6 | Galería | Fotos de los protagonistas o del lugar |
| 7 | Itinerario | Programa de actividades con horarios e iconos |
| 8 | Ubicación | Direccion con mapa interactivo de Google Maps |
| 9 | Confirmación (RSVP) | Formulario para que los invitados confirmen asistencia |
| 10 | Mesa de Regalos | Enlaces a tiendas, cuentas bancarias o fondo colectivo |
| 11 | Hospedaje | Hoteles recomendados y opciones de transporte |
| 12 | Preguntas Frecuentes | Respuestas a dudas comunes (estacionamiento, dress code, etc.) |
| 13 | Música de Fondo | Reproductor de música integrado en la invitación |
| 14 | Padrinos / Corte de Honor | Nombres y fotos de padrinos, damás, chambelanes |
| 15 | Oración | Texto de oración, dedicatoria o mensaje religioso |
| 16 | Agradecimientos | Mensaje de gracias al final de la invitación |
| 17 | Código de Vestimenta | Indicaciones de como deben vestirse los invitados |
| 18 | Pie de Pagina | Creditos, redes sociales o mensaje de cierre |
Secciones protegidas
La Portada y el Pie de Pagina no se pueden eliminar — siempre estan presentes. Las demás las puedes agregar o quitar libremente.
Como organizar las secciones
En el panel izquierdo puedes hacer 3 cosas con cada sección:
Reordenar — Arrastra una sección hacia arriba o abajo para cambiar el orden en que aparece en la invitación.
Ocultar/Mostrar — Haz clic en el icono del ojo para ocultar una sección sin eliminarla. La sección se conserva con todo su contenido pero no se muestra en la invitación.
Agregar nuevas — Haz clic en el botón "+" abajo de la lista para agregar una sección que no este activa. Vas a ver solo las secciones disponibles que aun no has agregado.
Pestana "Contenido" — Textos e imagenes
Cuando seleccionas una sección en el panel izquierdo, el panel derecho muestra la pestana "Contenido" con los campos editables de esa sección.
Cada sección tiene campos diferentes. Por ejemplo:
En la Portada vas a encontrar campos para el pretítulo (arco decorativo), el título principal, el subtítulo y la imagen de fondo.
En Detalles del Evento puedes editar el día, la hora (desde y hasta), la ubicación y detalles adicionales.
En Nuestra Historia puedes agregar múltiples capitulos, cada uno con título y contenido.
En Padrinos / Corte de Honor agregas personas con nombre, rol (ej: "Padrino de Velacion") y foto.
Edicion directa en el canvas
Los textos simples los puedes editar haciendo doble clic directamente sobre el texto en el canvas central. Para textos enriquecidos (con negritas, cursivas, etc.) usa los campos del panel derecho.
Pestana "Estilo" — Diseño de cada sección
La segunda pestana del panel derecho es "Estilo". Aquí personalizas el aspecto visual de la sección seleccionada. Las opciones disponibles son:
Variante de diseño
Algunas secciones tienen múltiples layouts. Por ejemplo, la Portada puede tener variantes como "Centrada con overlay", "Minimalista", "Clasica con marco". Haz clic en la variante que prefieras y el cambio se aplica al instante.
Fondo
Puedes elegir entre 4 tipos de fondo para cada sección: sin fondo personalizado (usa el global), color solido (con picker de color), gradiente (editor visual de gradiente) o imagen (sube una foto).
Animaciones de entrada
Cada sección puede tener su propia animación cuando el invitado llega a ella. Hay 30 tipos disponibles:
| Categoría | Animaciones |
|---|---|
| Básicas | Fade Up, Fade In, Fade Down, Slide (izq/der/arriba/abajo), Zoom In, Scale Up |
| Elegantes | Rotate In, Blur In, Flip In, Bounce In, Elastic In, Typewriter |
| Avanzadas | Stagger (Up/Left/Scale), Clip (Up/Left/Circle), Mask Down, Split Horizontal |
| Creativas | Glitch In, Swing In, Wave Text, Letra por Letra, Morph In, Parallax Text |
Para cada animación puedes ajustar la duracion (200ms a 2000ms) y el delay (0ms a 1000ms).
Particulas decorativas
Agrega particulas animadas que flotan sobre la sección. Hay 26 tipos en 4 categorías:
| Categoría | Opciones |
|---|---|
| Naturales | Sakura, Hojas, Plumas, Burbujas, Petalos |
| Brillos | Shimmer, Bokeh, Stardust |
| Fuegos | Fuegos Artificiales, Confetti, Chispas |
| Otros | Mariposas, Luciernagas, Aurora y más |
Decoradores
Agrega elementos decorativos a cada sección:
Separadores — 14 estilos: Diamante, Onda, Puntos, Corazon, Cruz, Estrella, Hojas, Infinito, Liston, Linea Floral, Flecha, Laurel, Espiral.
Marcos — 7 estilos: Ornamental, Art Deco, Botanico, Floral, Minimalista, Doble Linea.
Patrones de fondo — 6 estilos: Puntos, Geometrico, Chevron, Marroqui, Hexagonal.
Efectos especiales
| Efecto | Que hace |
|---|---|
| Shimmer en titulo | Brillo animado que recorre el texto del título |
| Text Split | Las letras aparecen una por una con delay configurable |
| Storytelling | Los elementos aparecen en secuencia narrativa |
| Parallax | Movimiento en capas al hacer scroll, con velocidad ajustable |
| Reveal on Scroll | La sección se revela con un efecto de clip-path |
| Tilt 3D | La sección se inclina suavemente al mover el mouse |
| Elementos Flotantes | Puntos decorativos que flotan sobre la sección |
| Heartbeat | Los iconos laten suavemente |
| Breathe | Los titulos brillan con un glow suave |
| Pulse CTA | Los botones de RSVP pulsan para llamar la atencion |
Pestana "Global" — Aplica a toda la invitación
La tercera pestana configura aspectos que afectan a toda la invitación, no solo a una sección.
Colores
Defines la paleta de 5 colores que se aplica de forma coherente a toda la invitación:
| Color | Para que se usa |
|---|---|
| Primario | Titulos, elementos principales, botones |
| Secundario | Subtitulos, elementos complementarios |
| Acento | Enfasis, links, decoraciones |
| Fondo | Color de fondo general de la invitación |
| Texto | Color predeterminado de todos los textos |
Tipografia
Selecciona las fuentes para tu invitación. Tienes acceso a todo el catálogo de Google Fonts:
- Fuente para titulos — Se aplica a todos los encabezados
- Fuente para cuerpo — Se aplica al texto normal
Modo de navegación
Tu invitación puede funcionar de dos maneras:
Scroll continuo — El invitado hace scroll normal para recorrer la invitación de arriba a abajo. Es el modo por defecto.
Pantalla completa (Fullpage) — Cada sección ocupa toda la pantalla y el invitado navega entre secciones con transiciones animadas. Es más cinematografico y espectacular.
Transiciones (solo en modo Pantalla Completa)
Si activas el modo fullpage, puedes elegir la transición entre secciones. Hay 27 transiciones disponibles:
10 Clasicas (CSS) — Elegantes y suaves: Fade, Slide, Cortina, Barrido, Zoom, Morph, Reveal, Parallax, Estrella, Disolver.
17 Cinematograficas (Canvas 2D) — Espectaculares con particulas y efectos: Velo Celestial, Barrido Dorado, Petalos al Viento, Explosion de Confetti, Cascada de Hojas, Revelación Geometrica, Resplandor Sagrado, Vals de Mariposas, Velo Shimmer, Burbujas, Fuegos Artificiales, Tinta, Cinta, Plumas, Aurora, Neon, Rosa en Flor.
Las cinematograficas muestran tu monograma
En las transiciones cinematograficas, entre cada sección aparece el monograma de tu evento con el nombre de la sección siguiente. Es un detalle premium que sorprende a los invitados.
Pantalla de carga (Loader)
La pantalla de carga es lo primero que ven tus invitados mientras la invitación termina de cargar. Puedes activarla con el toggle "Loader cinematico".
Hay 25 estilos disponibles:
8 Clasicos (CSS) — Caligrafia Dorada, Estrellas Celestiales, Minimal Elegante, Explosion Festiva, Petalos Romanticos, Cinematico Oscuro, Ornamento Real, Glitch Moderno.
17 Cinematograficos (Canvas) — Cascada de Diamantes, Galaxia Espiral, Acuarela, Pulso Electrico, Sakura, Polvo de Oro, Lluvia Geometrica, Linterna, Confetti, Tinta, Luces del Norte, Corazon, Luciernagas, Horizonte, Vitral, Ticker Tape, Cruz de Luz.
Efectos globales adicionales
| Efecto | Que hace |
|---|---|
| Cursor personalizado | Cambia el cursor del mouse por un estilo decorativo (dot-ring, sparkle, comet, etc.) |
| Particulas globales | Particulas que flotan en toda la invitación con intensidad ajustable |
| Barra de progreso | Muestra al invitado cuanto le falta por recorrer |
| Puntos de navegación | Indicadores visuales para saltar entre secciones |
| Grano de pelicula | Textura cinematografica sútil con intensidad ajustable |
| Vineta | Oscurecimiento en los bordes para efecto cinematografico |
Barra de herramientas (arriba)
La barra superior del editor tiene todo lo que necesitas para controlar tu espacio de trabajo:
| Herramienta | Que hace | Atajo |
|---|---|---|
| Ocultar paneles | Muestra/oculta los paneles laterales | Ctrl+[ y Ctrl+] |
| Deshacer/Rehacer | Deshace o rehace tu último cambio | Ctrl+Z / Ctrl+Shift+Z |
| Viewport | Cambia entre vista Movil (375px), Tablet (768px) y Escritorio (1280px) | — |
| Replay animaciones | Vuelve a reproducir todas las animaciones | — |
| Zoom | Acerca o aleja la vista previa (50% a 200%) | Ctrl++ / Ctrl+- |
| Exportar | Descarga tu invitación como imagen PNG | — |
| Vista previa | Abre la invitación en una nueva pestana como la veran tus invitados | — |
| Guardar borrador | Guarda los cambios sin crear punto de restauración | — |
| Guardar versión | Guarda y crea un punto al que puedes volver después | Ctrl+S |
Guardado automático
El editor guarda automáticamente mientras trabajas. El indicador de estado te muestra si hay cambios sin guardar, si está guardando, o la última vez que se guardo.
Proximos pasos
Lo que aprendiste
- El editor tiene 3 paneles: secciones (izquierda), vista previa (centro) y propiedades (derecha)
- Tu invitación puede tener hasta 18 secciones — activa solo las que necesites
- La pestana Contenido edita textos e imagenes, Estilo edita el diseño visual, y Global configura colores, fuentes y transiciones
- Hay 27 transiciones, 25 pantallas de carga, 30 animaciones, 26 tipos de particulas y múltiples efectos especiales
- Usa Ctrl+Z para deshacer, Ctrl+S para guardar versión, y doble clic en el canvas para editar textos directamente