Personalizza i progetti con gli strumenti di design

Usa gli strumenti di design per applicare e personalizzare temi, modificare gli elementi dell’interfaccia utente e mantenere un brand coerente in tutto il tuo progetto.

Gli strumenti di design mettono insieme tutto ciò di cui hai bisogno per personalizzare visivamente il tuo progetto — dai temi di alto livello alle modifiche visive più dettagliate. Puoi gestire l’aspetto generale del tuo progetto tramite Themes oppure apportare modifiche rapide e mirate usando Visual edits, senza scrivere codice né utilizzare crediti.

Per accedere agli strumenti di design, vai a Design view tramite il pulsante + accanto ad Anteprima.

​

Perché usare gli strumenti di design

Gli strumenti di design permettono a tutti — designer, professionisti del marketing e membri del team non tecnici — di apportare modifiche al design in modo visivo, mantenere la coerenza con il brand e lavorare più velocemente.

​

Vantaggi principali

• Branding coerente: Applica temi condivisi che riflettono l’identità del tuo brand
• Iterazione più rapida: Aggiorna layout e testi visivamente, senza bisogno di codice o prompt
• Modifica accessibile: Gli utenti non tecnici possono apportare modifiche di design in tutta sicurezza
• Anteprima in tempo reale: Visualizza ogni modifica grafica in tempo reale prima della pubblicazione

​

Casi d’uso comuni

• Designer che mantengono la coerenza del brand su più Progetti
• Marketer che lanciano nuove pagine di campagna senza discostarsi dalle linee guida del brand
• Product manager che perfezionano direttamente layout e testi
• Team che realizzano rapidamente prototipi e varianti con stili visivi condivisi

​

Temi

I temi definiscono il sistema di stile principale del tuo Progetto — colori, font, spaziature e raggio dei bordi — e costituiscono le fondamenta dell’identità del tuo brand.

​

Funzionalità principali

• Applica: Scegli tra i template Lovable integrati oppure applica un tema personalizzato
• Crea: Genera un tema dal tuo progetto attuale
• Importa: Carica un file CSS personalizzato (come index.css o globals.css) per trasformarlo in un tema
• Personalizza: Modifica colori, tipografia e spaziatura direttamente nella UI
• Condividi: I temi sono disponibili per tutti i membri della tua area di lavoro
• Anteprima: Prova le modifiche in tempo reale prima di applicarle

​

Modifica visiva

La modalità Modifica visiva ti permette di modificare il tuo Progetto direttamente sulla pagina, in modo visivo. È pensata per apportare modifiche rapide e intuitive, mantenendo il pieno controllo sul layout e sulle spaziature.

​

Funzionalità principali

• Seleziona più elementi per modifiche in blocco tenendo premuto ⌘ Command (Mac) o ⊞ Win (Windows).
• Controlli di layout per allineamento e posizionamento
• Regola margini e padding sui singoli lati dei contenitori
• Modifica testo, colori e font direttamente dalla barra laterale
• Formattazione avanzata del testo con interruzioni di riga e stili in linea
• Sostituisci le immagini caricando file o aggiungendo URL di immagini
• Genera immagini con l’AI modificandole tramite prompt

​

Guida rapida

1. Apri la Design view dal pulsante + accanto ad Anteprima.

2. Passa dalle schede Themes e Visual edit per lavorare al design del tuo progetto nel pannello di sinistra.

   • Vai a Themes per selezionare un tema o crearne uno tuo e applicarlo al progetto.
   • Vai a Visual edits per selezionare elementi nell’anteprima in tempo reale e modificarli visivamente.
   Per accedere rapidamente alle modifiche visive, usa la scorciatoia Visual edits nella casella dell’istruzione.

3. Visualizza l’anteprima e salva quando sei soddisfatto del risultato.

Personalizzare visivamente il tuo progetto non consuma crediti, tranne nei casi seguenti:

• Apporti modifiche a elementi dinamici.
• Chiedi al Lovable Agent di modificare il design. Usa invece gli strumenti di design.