Documentazione tecnica

Guida Studio Ryft

Struttura del sito, flusso di navigazione e procedure operative. Pagina non indicizzata.

1. Mappa delle pagine

PaginaIndirizzoRuoloStato
Intro/intro/Home nuova. Autonoma: asset e portfolio si aprono al suo interno.Attiva
Venture Studio/venture/Pagine asset estese (ex “prototipo”), scroll orizzontale.Attiva
Test Hero 3D/test-rift-3d/Banco di prova animazioni rift in WebGL.Test
Home / Servizi / Chi siamo / Contatti / Portfolio/home/ …Vecchio sito JupiterX, in sostituzione.Legacy

2. Diagramma di flusso della navigazione

Visitatore apre ryft.it/intro/ Preloader countdown 0→100 INSIEME → STUDIO RYFT HERO sfondo rift + payoff [Prenota una call] Sezione ASSET 4 riquadri — comparsa scaglionata + hover Sezione PORTFOLIO 18 progetti — scroll ORIZZONTALE PANNELLO ASSET (interno) immagine + descrizione “Da solo” / “Integrato” CTA Prenota una call chiude con × o Esc GALLERIA PROGETTO (interna) foto deduplicate (max 10) bottone “Visita il sito” URL preso dall’excerpt chiude con × o Esc Sito del cliente nuova scheda — unico link esterno /venture/ asset estesi (facoltativo)

L’intro è autonomo: asset e portfolio si aprono in pannelli interni. L’unico collegamento verso l’esterno è il bottone “Visita il sito” del singolo progetto. Rimuovendo il vecchio sito, l’intro continua a funzionare.

3. Da dove arrivano i contenuti

Portfolio

Letto in tempo reale via API da WordPress: /wp-json/wp/v2/posts?categories=8.

  • Titolo → titolo del progetto.
  • Immagini → estratte dal contenuto e deduplicate: WordPress genera più misure della stessa foto, si tiene solo la più grande.
  • Bottone “Visita il sito” → URL preso dal campo Riassunto (excerpt) del progetto.

Per cambiare il sito di un progetto basta modificare il Riassunto del post: l’intro si aggiorna da solo, senza toccare il codice.

Asset

Testi e immagini sono scritti dentro la pagina Intro, nell’array ASSETS del widget HTML: titolo, sottotitolo, descrizione, “Da solo”, “Integrato” e immagine di sfondo.

4. Componenti e comportamenti

ComponenteCome funziona
PreloaderContatore 0→100; le parole INSIEME, DIGITAL, OPPORTUNITÀ, CRESCITA, CONSOLIDAMENTO si compongono fino a STUDIO RYFT, poi sipario verso l’alto.
Scroll inerzialeLo scroll nativo resta (accessibilità e SEO); il contenuto lo insegue smorzato.
Portfolio orizzontaleNella sua zona lo scroll verticale diventa traslazione laterale, con barra di avanzamento.
Effetto acquaCampo di flusso WebGL: il cursore increspa le immagini lasciando una scia. Solo desktop, solo portfolio.
Bottoni Neon PulseBordo oro #D7A94A con bagliore pulsante al passaggio del mouse. Presenti su Intro, Venture, Servizi e Portfolio.
AccessibilitàCon “riduci animazioni” attivo le animazioni si spengono e resta lo sfondo statico.

5. Come si aggiorna

  • Un progetto del portfolio: si modifica il post in WordPress (categoria 8). Immagini e link si aggiornano da soli.
  • Un testo asset: si modifica l’array ASSETS nel widget HTML della pagina Intro.
  • Dopo ogni modifica: svuotare la cache di Elementor e ricaricare con Ctrl+Shift+R.

6. Backup

Copia completa su Google Drive, cartella Backup Sito Ryft: dati Elementor di tutte le pagine, HTML dei widget, elenco pagine e contenuti dei 18 progetti.

Il connettore Drive può solo creare file, non sovrascriverli: ogni backup è una nuova versione datata. Non esiste sincronizzazione automatica.

7. Note e punti aperti

  • Le pagine legacy (home, servizi, chi siamo, contatti, portfolio) appartengono al vecchio tema e verranno rimosse.
  • Il font previsto è Degular (Adobe Fonts): in attesa dell’ID del kit si usa Archivo.
  • Le pagine di prova sono noindex: da rendere indicizzabili alla pubblicazione ufficiale.