Il Designer in Webflow

Stiamo lavorando alla produzione dei video.

Il Designer di Webflow è l’interfaccia dove avviene la magia.

‍

Questa funzione permette all’utente di sviluppare siti web. L’utente avrà la possiblità di inserire elementi e di modificarne lo stile.

‍

Il Designer è composto da più parti: scopriamole assieme.

‍

Come si accede al Designer?

Per accedere al Designer ci sono 3 modi: attraverso la Dashboard, le impostazioni del sito web e l’Editor.

‍

La modalità più comune per accedere al Designer è attraverso la Dashboard.

‍

La Dashboard è la schermata di partenza quando accediamo in Webflow (ne abbiamo parlato nella lezione precedente).

In questa sezione saremo in grado di accedere a tutti i nostri siti web alla quale stiamo lavorando.

‍

Se abbiamo già creato un sito web, lo ritroveremo nella sezione Dashboard e facendo mouse over sopra il nostro sito web potremo accedere al Designer:

Accesso al Designer attraverso la Dashboard

‍

Una seconda modalità d’accesso per entrare nel Designer la troviamo nelle impostazioni di ogni sito web (proect settings). Nella parte superiore della schermata troviamo il tasto di colore viola con il simbolo del pennello, Designer:

‍

Accesso al Designer attraverso le impostazioni (project setting) del nostro sito web

‍

La terza ed ultima modalità di accesso al Designer la troviamo all'interno della funzione Editor di Webflow.

‍

Una volta pubblicato il sito web, Webflow ci permette di modificare i siti web dalla funzione Editor. Questa funzione permette di effettuare le modifiche come una modifica di testo, sostituire immagini, etc. In sostanza, permette di effettuare modifiche all’utente in maniera più semplice.

‍

Nello screenshot in basso abbiamo evidenziato il bottone per accedere al Designer dalla schermata Editor.

‍

‍

Facendo un recap delle 3 modalità di accesso:

attraverso la Dashboard
attraverso le impostazioni del sito web (project settings)
attraverso l’Editor

‍

Anatomia del Designer

Una volta entrati nella funzione Designer questa è la schermata che troviamo:

Dashboard di Webflow

‍

Per avere una comprensione più approfondita dello strumento Designer abbiamo suddiviso la schermata, evidenziando le principali funzionalità in 3 parti:

Canva
Sidebar sx (menù ed elementi)
Bottone pubblicazione siti web
Sidebar dx

‍

Canva

Iniziamo con il canva: in inglese il suo significato è tela.

‍

Questo spazio serve a vedere graficamente le modifiche che stiamo apportando al sito web quando lo sviluppiamo. Possiamo inserire elementi e vedere direttamente i cambiamenti di stile che apportiamo ai nostri elementi direttamente in questa area di lavoro.

‍

Sidebar sx

‍

‍

Sul lato sx della schermata Designer troviamo una sidebar con 9 icone:

W di webflow
Element
Simbols
Navigator
Pagine
CMS
Ecommerce
Assets
Settings

‍

Tra queste icone troviamo sia strumenti utili per lo sviluppo del nostro sito web (che utilizziamo nello stesso Designer) sia link che riportano ad altre funzionalità all’interno di Webflow.

‍

Cominciamo dalla prima icona.

‍

W di webflow

Nel riquadro in alto a sinistra, indicato con la W di Webflow, troviamo il pulsante che permette all’utente di entrare rapidamente in 3 funzioni:

‍

Dashboard
Project settings (impostazioni del sito web)
Editor

‍

Dashboard

Il primo bottone ci porterà alla schermata della nostra Dashboard in cui è possibile creare un nuovo sito web o accedere ai siti web già creati in precedenza. Per approfondire questa funzione vai alla lezione precedente.

‍

Project settings

Il secondo bottone, “Project Setting”, ci porta alla pagina delle impostazioni del sito web (da non confondere con le impostazioni dell’account generale).

‍

‍

In questa pagina troveremo 10 sezioni all’interno delle quali sarà possibile cambiare sia gli aspetti tecnici (es. inserire i tracciamenti di Analytics, il pixel di Facebook, etc) ma anche le componenti di design (es. aggiungere i font, cambiare favicon, etc).

‍

É una pagina molto importante che permette all’utente di modificare impostazioni di base e avanzate al nostro sito web.

‍

Editor

Il terzo bottone che troviamo, in alto a sinistra, è quello dell’Editor.

‍

‍

Questa funzione consente, una volta creato e pubblicato il sito web (se il sito web non è pubblicato non è possibile accedervi), di apportare modifiche in maniera interattiva al sito web.

‍

Lo scopo dell’Editor è quello di agevolare gli utenti che devono modificare elementi sostanziali come i testi, i link ai bottoni, etc. senza tuttavia accedere allo strumento Designer che, richiedendo una maggiore competenza tecnica, alzerebbe il margine di errore.

‍

‍

Lo strumento Editor è ideale se lavoriamo con dei collaboratori o dei clienti che vogliono avere libertà di manovra, avendo la sicurezza che non facciano danni dentro il Designer.

‍

Elements

‍

‍

Con il primo bottone è possibile aggiungere elementi al nostro sito web, il cosiddetto scheletro se avete letto l’articolo dedicato.

Dopo aver cliccato si aprirà un menù a tendina con all’interno 7 sezioni:

Layout
Basic
Typography
CMS
Media
Forms
Components

‍

All’interno di queste sezioni troviamo tutti gli elementi e le parti della nostra pagina web che potremo inserire nel sito web. Ad esempio: un elemento testuale (titolo, paragrafo, etc), un’immagine, un link. Fino ad arrivare all’elemento Embed che ci permette, ad esempio, di integrare un video Youtube nel nostro sito web.

Non è importante conoscere tutti gli elementi a menadito, ma sapere che attraverso questo bottone possiamo aggiungere un elemento alla nostra pagina. Con il passare del tempo, dopo aver sviluppato svariate pagine, avremo modo di fare nostri gli elementi che Webflow ci propone a seconda dell’esigenza che si propone.

‍

⚠️Uno short command da imparare per risparmiare tempo è CMD+E o CMD+K (mac) o CTRL+E o CTRL+K (windows). Questo comando farà apparire una barra di ricerca per cercare e trovare l’elemento di cui abbiamo bisogno in maniera immediata.

‍

‍

Sempre all’interno del bottone Elementi (Elements), troviamo la tab Layouts.

Questa funzione ci permette di inserire elementi pre-impostati all’interno del nostro canva che agevolano il lavoro. Se ad esempio, dobbiamo aggiungere un Header, possiamo utilizzare questi modelli già pronti all’uso.

‍

Vediamo un esempio.

‍

Come si vede nell’esempio in basso, possiamo selezionare il modello Header dal menù Elements → Layouts.

‍

Simboli

‍

La sezione, Simboli, è utile quando vogliamo modificare elementi della pagina che si ripetono in diverse pagine.

‍

Prendiamo ad esempio un ipotetico footer (la sezione più in basso del nostro sito web) nella quale abbiamo un form, con il solo campo “mail”, per raccogliere le mail dei nostri utenti. Dopo 1 mese che siamo live con il nostro sito web decidiamo di voler introdurre una nuova pagina per la vendita dei nostri prodotti. Inoltre, vogliamo inserire all’interno del nostro form un nuovo campo “nome e cognome” per farci lasciare dall’utente anche queste informazioni.

Grazie alla funzione Simboli avremo 2 vantaggi:

Potremo replicare il nostro footer nella nuova pagina prodotti
Potremo inserire il nuovo campo “nome e cognome” e far si che si modifichi in tutte le pagine (anche nella pagina nuova appena creata) senza dover modificare tutte le pagine inserendo il nuovo campo.

‍

Navigator

‍

Questa funzione ci permette di avere una visione chiara di tutti gli elementi che abbiamo inserito all’interno del nostro sito web.

‍

‍

Molto importante quando vogliamo capire come abbiamo strutturato (o nidificato) i nostri elementi. I siti web ragionano con il modello a blocchi (o box model) che permettono di organizzare gli elementi in modo flessibile (ne abbiamo parlato nella lezione 3).

‍

Pagine

‍

In questa funzione potremo accedere e modificare le nostre pagine attraverso il Designer di riferimento.

Inoltre, sarà possibile accedere nelle impostazioni di pagina e impostare elementi come il nome della pagina, impostazioni relative alla SEO, impostare le informazioni relative al link di condivisione nei social e vedere il codice sorgente che Webflow scrive per noi.

‍

Per accedere alle impostazioni di pagina dovremo recarci all’interno dell’icona Pages → icona ingranaggio vedi screenshot in basso.

‍

CMS

‍

‍

Il bottone del CMS, permette di organizzare in modo facile e scalabile il nostri contenuti.

‍

Prendiamo ad esempio Webflow Facile. Il nostro sito web è formato principalmente da articoli che vengono realizzati e inseriti nel sito web tramite CMS.

Questo permette di:

avere una visione completa di tutti i contenuti in un’unica sezione
avere un template univoco e standardizzato dei nostri articoli
poter richiamare il contenuto identico nelle pagine che vogliamo
modificare il contenuto da questa sezione e applicare i cambiamenti in tutte le pagine nella quale il contenuto è presente.

‍

E-Commerce

‍

‍

Questa sezione è verticale per i siti web e-commerce. All’interno di questa sezione potremo gestire tutti i prodotti all’interno del nostro sito web, suddividerli in categorie, inserire gli sconti e gestire gli ordini che avvengono nel nostro sito web.

‍

Asset

‍

‍

Nella sezione Assets possiamo gestire tutti i formati che abbiamo caricato (e in alcuni casi utilizzato) nel nostro sito web. Ad esempio GIF, PNG, JPEG, SVG, BMP, PDF, JSON (Lottie) e molti altri.

‍

Impostazioni della pagina

‍

‍

Ultima sezione delle icone che vediamo nella sidebar sx, è quella delle impostazioni generali.

Al suo interno potremo gestire l’indicizzazione del sito (ma comunque è consigliato il passaggio in Google Search Console), aggiornare alcune informazioni dello store E-Commerce e gestire le impostazioni delle mail.

‍

Publish: bottone pubblicazione siti web

‍

Spostandosi nella parte centrale del Designer, troviamo il pulsante “Publish”. Grazie a questo bottone possiamo gestire la pubblicazione del sito web nei 2 domini disponibili:

Il subdomain, o sottodominio sono anche detti di terzo livello
Il dominio principale, se lo abbiamo integrato (da acquistare)

‍

Sidebar dx

L’ultima sezione di cui parliamo è quella nella parte destra del nostro Designer. A sua volta, è formata da 4 sezioni:

‍

Style

‍

Questa tab, indicata con il pennello, permette di sviluppare il CSS al nostro sito-web. Dopo aver inserito gli Elementi del sito web come titolo, paragrafi, bottoni,etc (le parti che compongono l’auto, ricordate l’esempio della lezione 2?), attraverso questa sezione, saremo in grado di modificare ogni Elemento così da abbellire la carrozzeria della nostra auto.

‍

Se hai dubbi rispetto a HTML e CSS torna alla lezione 2.

‍

Elements setting

‍

Sono impostazioni aggiuntive che possiamo inserire ai nostri Elementi. Ricordiamoci che ogni Elemento ha caratteristiche ad-hoc e quindi troveremo delle impostazioni diverse rispetto all’Elemento selezionato.

‍

Style Manager

Attraverso l’icona delle 3 goccioline, possiamo avere la visione di tutti i Tag e le Classi che abbiamo applicato al nostro sito web.

Possiamo rinominare le Classi
Fare pulizia laddove ci siano Classi non utilizzate

‍

Ad esempio, nello screenshot sopra si vedono 94 classi non utilizzate (lo si vede in alto a dx di fianco alla scritta Style Manager).

Attraverso il tasto Clean Up saremo in grado di eliminare quelle 94 classi che non servono.

‍

⚠️ Prima della pubblicazione del sito web è consigliato eliminare tutte le classi non utilizzate così da ridurre il peso del sito web e aumentare le prestazioni dello stesso.

Interactions

‍

L’ultima tab è quella relativa alle interazioni che possiamo inserire nel sito web. Le interazioni servono a rendere il nostro sito più accattivante ma anche per dare un maggior focus ad alcuni elementi. Inoltre è un ottimo modo per aumentare l’esperienza dell’utente. Ad esempio, pensiamo ad un semplice pre-loader di pagina (la rotellina che gira appena prima che la pagina sia caricata) come ci possa aiutare a rilassare il nostro utente nell’attesa di caricamento di pagina.

‍