Come abilitare e utilizzare la Modifica visiva in Coderick AI
Descrivere un cambiamento visivo a parole è a volte più difficile di quanto sembri. Dire a un’AI di cambiare il testo del tuo titolo in qualcos’altro o spostare leggermente quel titolo a sinistra può trasformare una correzione di due secondi in un avanti e indietro di cinque minuti. Alcune cose sono semplicemente più veloci da fare a mano.
Ed è esattamente per questo che esiste “Modifica visiva”. Invece di passare attraverso piccole modifiche con comandi, ora puoi cliccare direttamente nell’anteprima del tuo progetto e fare cambiamenti sul posto.
Ecco come usarlo.
Come abilitare Modifica visiva
All’interno del tuo progetto Coderick, clicca sul pulsante Modifica visiva nella barra superiore.
Una volta abilitata, Modifica visuale ti consente di selezionare e modificare gli elementi direttamente nell’anteprima. Tutte le modifiche apportate con Modifica visuale vengono salvate automaticamente. Per annullare o ripetere queste modifiche, sono disponibili due nuovi pulsanti accanto a Modifica visuale: Annulla e Ripeti.
Come modificare direttamente nella schermata di anteprima
Con Modifica visiva attiva, clicca su qualsiasi elemento nell’anteprima per selezionarlo. Apparirà una barra degli strumenti con opzioni di modifica rilevanti per quel tipo di elemento.
Modifiche manuali
Testo
Clicca su qualsiasi elemento di testo per modificarlo in linea. Dalla barra degli strumenti, puoi:
- Modificare direttamente il testo
- Cambiare il tipo, la dimensione e lo stile del carattere (grassetto, corsivo, sottolineato)
- Regolare l’allineamento
- Aggiungere un link o un’emoji
- Cambiare il colore del testo
- Aggiungere ombre al testo
- Aggiungere virgolette stilizzate
- Modificare l’uso delle maiuscole e delle minuscole
- Modificare il testo con l’editor di codice
- Barrare o sottolineare il testo
Pulsanti
I pulsanti che possono essere modificati visivamente hanno queste opzioni generali:
- Modificare direttamente il testo del pulsante
- Cambiare il colore del testo e dello sfondo
- Aggiungere o aggiornare un link
- Modificare la trasparenza del pulsante
- Modificare il padding, lo spessore e il raggio del bordo
- Modificare i pulsanti con l’editor di codice
Immagini
Clicca su un’immagine per:
- Sostituire l’immagine caricandone una dal tuo dispositivo
- Aggiungere o aggiornare un link
- Aggiungere un testo alternativo da utilizzare come descrizione per la SEO
- Aggiungere un effetto di trasparenza
- Personalizzare il padding, lo spessore e il raggio del bordo
- Modificare l’immagine con l’editor di codice
Come modificare con l’IA
Per gli elementi che sono troppo complessi per modifiche manuali — come i menu di navigazione, i footer o i pulsanti di login — vedrai un’opzione Modifica con AI nella barra degli strumenti. Questi elementi hanno più cose in corso sotto il cofano, quindi l’AI gestisce le modifiche per mantenere tutto intatto.
Puoi anche scegliere Modifica con AI per qualsiasi elemento standard se preferisci descrivere il cambiamento piuttosto che farlo manualmente.
Quando clicchi su Modifica con AI su un elemento selezionato:
- L’elemento viene evidenziato e sotto di esso viene visualizzata una casella di chat.
- Coderick AI concentra le modifiche esclusivamente sull’elemento selezionato.
- Nella chat puoi descrivere le modifiche che desideri apportare, ad esempio cambiare il testo, generare un nuovo elemento HTML o un’immagine, cambiare i colori e altro ancora.
Come modificare il codice
Oltre alle opzioni di modifica manuale e con l’IA, Coderick AI offre un editor di codice completo, che consente di modificare direttamente il codice della pagina generata.
Sebbene la modifica del codice e la modifica visuale siano modalità separate, puoi utilizzarle insieme per semplificare il processo di modifica.
In modalità Modifica visuale, seleziona un elemento e scegli Visualizza codice dal relativo menu contestuale.
Si aprirà l’editor di codice, che mostra il codice dell’intera pagina evidenziando quello dell’elemento selezionato.
Salvare e gestire le modifiche
Non è necessario salvare manualmente le modifiche apportate al progetto. L’editor salva automaticamente tutte le modifiche, ma puoi comunque gestirle utilizzando le apposite opzioni.
Per annullare la modifica più recente, premi il pulsante Annulla.
Se hai annullato una modifica e vuoi ripristinarla, usa il pulsante Rifare.
