Fai tuo Tracefield.

Parti dal progetto nativo.

Tracefield è un sito marketing modificabile in Framer per un’azienda di software AI. Gli esempi interattivi aiutano a spiegare il prodotto; non includono un backend di osservabilità, account utente o fatturazione SaaS.

1. Lavora nella tua copia non pubblicata. Apri Pages → Start here — Tracefield per la guida inclusa nel progetto.
2. Apri Preview ed esplora Home, Product, Use Cases, Integrations, Pricing, Resources, Changelog e Contact. Resources comprende anche la pagina articolo CMS; è inclusa una pagina 404 personalizzata.
3. Mantieni Request Console in modalità Sample data per una dimostrazione senza account API. Anche le altre interazioni illustrative funzionano senza servizi esterni.

Hosting, CMS e localizzazione Framer dipendono dal tuo piano. API e servizi email esterni sono separati. Il template non attiva piani a pagamento o account di terze parti.

• Esplora la demo nativa ↗

Imposta l’identità, poi rivedi ogni pagina.

Layout e testi restano modificabili in Framer. I componenti condivisi mantengono coerenti navigazione e footer.

1. In Assets, modifica Site Navigation e Site Footer. Cambia marchio, destinazioni e collegamenti di contatto nei componenti condivisi.
2. Aggiorna gli stili di testo nativi e i contenuti. Seleziona ogni componente interattivo per modificarne testi e colori dal pannello delle proprietà a destra.
3. Sostituisci nomi di prodotti, integrazioni e metriche di esempio con informazioni reali. Controlla le etichette più lunghe su Phone e Tablet.

I controlli modificano quella singola istanza. Cambiare un colore, una tariffa o un nome non riscrive automaticamente le altre istanze o i testi della pagina.

Pubblica gli articoli dal CMS.

Field Notes contiene titolo, sintesi, categoria e corpo degli articoli. La pagina Resources e il template articolo hanno già i collegamenti nativi al CMS.

1. Apri CMS → Field Notes. Modifica un articolo o crea una bozza con titolo, sintesi, categoria e corpo del testo.
2. Controlla l’articolo in Preview, inclusi URL, link e metadati. Mantieni i collegamenti alla raccolta quando cambi la tipografia.
3. Pubblica solo gli articoli revisionati. Per importare JSON pubblico, segui la guida ErinTech Connect: le raccolte importate vanno comunque collegate a un layout.

• Leggi la guida Connect

Adatta le demo al tuo prodotto.

Usa il pannello delle proprietà per modificare l’esploratore di richieste e il calcolatore dei prezzi senza intervenire sul codice.

Collega un feed pubblico quando sei pronto.

Su Product, seleziona Request Console. Scegli Public API e inserisci in Feed URL un endpoint HTTPS pubblico. Il canvas usa dati di esempio; Preview e il sito pubblicato leggono il feed configurato.

1. Prova il feed demo ErinTech indicato sotto. Contiene dati simulati fissi: Refresh li rilegge senza effettuare chiamate a modelli AI.
2. Per un endpoint tuo, usa il formato richieste versione 1, al massimo 100 record e ID univoci. Abilita l’accesso GET dal browser tramite CORS per Preview e per il dominio pubblicato.
3. Prova una risposta valida, un risultato vuoto e una richiesta fallita. Controlla filtri, ordinamento e Refresh sul sito finale.

Pubblica solo dati destinati al pubblico. Le richieste non inviano credenziali e scadono dopo dieci secondi. Tutto il JSON restituito è ispezionabile dai visitatori, anche i campi non visualizzati. Log privati, prompt e chiavi API devono restare nel tuo backend.

• Vedi il JSON delle richieste simulate ↗
• Formato del feed e risoluzione dei problemi

Trasforma la demo in richieste reali.

Il modulo Contact pubblico è un’anteprima senza invio: valida i dati di esempio, li cancella e mostra una conferma. Per ricevere richieste vere, configura il modulo nativo nella tua copia non pubblicata.

1. Su Contact, seleziona Contact form / connect your destination. Imposta Send To → Email con la tua casella e aggiungi l’informativa privacy con il relativo link.
2. Controlla Name, Email e Workload. Mantieni i campi obbligatori, il tipo Email e la corrispondenza tra valori ed etichette delle opzioni. Descrivi il tuo processo reale di risposta.
3. Seleziona il Button nativo e ripristina la variante Default. Controlla Loading, Success ed Error. Rimuovi poi DemoForm → withDemoForm dal modulo per attivare il comportamento nativo.
4. Nella tua copia di test verifica dati non validi, invio da tastiera, vista mobile ed effettiva ricezione nella tua casella. Il messaggio di successo da solo non prova la consegna. Pubblica dopo il test.

Modificare i campi nativi non cambia l’anteprima separata finché resta attivo l’override. La notifica email nativa non implica una conferma automatica al richiedente.

Verifica il sito che useranno i visitatori.

Ripeti questi controlli dopo aver cambiato marchio, contenuti o destinazioni. È una checklist manuale di lancio, non un audit automatico o una certificazione.

1. Sostituisci titolo del sito, descrizione, immagine social, favicon e lingua. Assegna a ogni pagina pubblica titolo e descrizione distinti e un H1 significativo.
2. Sul dominio finale verifica URL canonici, robots.txt e sitemap.xml. Per più lingue pubblica contenuti realmente tradotti con la configurazione di localizzazione Framer appropriata.
3. Prova desktop, tablet, telefono e larghezza di 320px. Usa menu, filtri, calcolatore, FAQ e modulo da tastiera; controlla focus e movimento ridotto.
4. Rivedi link, bozze CMS, affermazioni di esempio, destinazioni del modulo e costi esterni prima di pubblicare. Mantieni non pubblicata la guida nell’editor.