L'area di disegno mostra l'output visivo dei siti creati con Blocs. Consente agli utenti di interagire con la pagina in tempo reale, consentendo loro di selezionare elementi, spostarli e modificarne i contenuti. L'area di disegno si trova al centro della finestra principale dell'applicazione inserita tra le barre laterali sinistra e destra.
Il marcatore di selezione
Quando si fa clic su un elemento nell'area di disegno, verrà visualizzato un indicatore blu, denominato indicatore di selezione. A seconda del tipo di oggetto selezionato, questo indicatore può contenere anche alcuni controlli di stile visivo che consentono agli utenti di regolare le dimensioni e la posizione dell'elemento selezionato. Ci riferiamo a questi come Controlli a mano libera, puoi leggere di più su di loro qui.
Impostazioni della tela
L'area di disegno ha una gamma di opzioni che consentono agli utenti di controllare il rendering visivo del sito Web attualmente aperto. Queste opzioni possono essere trovate nel file in basso a sinistra angolo della tela di disegno.
Modalità Wireframe
La modalità Wireframe elimina tutti gli stili essenziali non di layout, consentendo agli utenti di concentrarsi sul contenuto e sulla struttura della pagina.
Modalità contorno
La modalità Struttura mostra un sottile rettangolo blu attorno alle aree di delimitazione di tutti gli elementi sulla pagina, consentendo agli utenti di visualizzare la struttura sottostante.
Modalità Dark Site
La modalità Dark Site inverte i colori del file + pulsanti, rendendoli più distinguibili su sfondi scuri. Simula anche la modalità oscura del sistema operativo e applica il tema scuro class al tag body della pagina corrente.
Visualizza Aggiungi Bloc Pulsante
Attiva / disattiva la visibilità del file + pulsanti utilizzati per aggiungere Blocs a una pagina. Questa opzione può anche essere attivata e disattivata utilizzando la scorciatoia da tastiera ⌥+⌘+4.
Visualizza il pulsante Aggiungi Bric
Attiva / disattiva la visibilità del file + pulsanti utilizzati per aggiungere Brics a una pagina. Questa opzione può anche essere attivata e disattivata utilizzando la scorciatoia da tastiera ⌥+⌘+5.
Visualizza tag di interruzione di riga
Tag di interruzione di riga non sono visibili per impostazione predefinita, questa opzione consente agli utenti di alternare la loro visualizzazione visiva nell'area di disegno.
Filtri per la disabilità visiva
Questa opzione ti consente di selezionare tra vari tipi di filtri per il daltonismo, consentendoti di vedere come apparirebbe il tuo sito a una persona con disabilità visiva.
Le impostazioni di rendering dell'area di disegno hanno effetto solo in-app e non hanno alcun effetto sul sito una volta che è stato visualizzato in anteprima o esportato, sono semplicemente un aiuto per la progettazione visiva in-app.