Introduzione
Impara i concetti base, per iniziare a sviluppare con Webflow.
La struttura delle pagine web
![](https://cdn.prod.website-files.com/62a5c45b5049151d0b01731b/647f500484dd393f46bf2e78_wf_video-image_in-aggiornamento.jpg)
Nella lezione precedente abbiamo visto i passaggi da attuare prima di implementare il nostro sito web in Webflow, questo eviterà un blocco nel processo di creazione.
La fretta di cominciare può rallentare lo sviluppo.
È importante avere in mente, in modo chiaro, i passaggi che dobbiamo svolgere prima dello sviluppo in Webflow.
Con questo non vogliamo stoppare la tua voglia di cominciare e di sbagliare, smanettando in piattaforma , ma vogliamo dirti che prima dello sviluppo c’è una parte di ideazione e di creazione che è bene non sottovalutare.
Questa parte di pre-sviluppo non bisogna lasciarla al caso se vogliamo creare siti web professionali.
Perchè tutto questo pippone?
Perchè come avrai intuito, la parte creativa (dove disegniamo il sito web) e la parte di sviluppo (Webflow) sono direttamente collegate.
Lavorando bene nella parte di ideazione creativa svilupperemo in maniera più spedita e definita il sito web.
Dopo questa doverosa premessa vediamo ora come sono strutturate le pagine web e capiamo come si collega la parte creativa con la parte sviluppo.
Anatomia di una pagina web
![](https://cdn.prod.website-files.com/62a5e1665e8f63c468b7f66a/64014178a02d73435b2ebe06_r7-IN2kY7Z2eMnsTzynlTl4I8Ptl4Moy184HXYQkB0s8-QGTxQIOueqg8fvzna-vwYhkueNHSQERWxXCvFSns_pAh_pojFxz8nfXjAWMzrlU4xXJwDQ3CXvCoIE6NLkQ5jmRziYK6VYI0kotNuC8Z3I.png)
Per semplificare la struttura delle pagine web possiamo dire che sono composte da 4 elementi:
- La barra di navigazione (o Header)
- Le sezioni
- La sezione finale (o Footer)
- I container
- La barra di navigazione (o Header)
Solitamente la troviamo nella parte più in alto del sito web. A volte però possiamo trovare siti web che la presentano anche in altre parti, come ad esempio nella parte SX dello schermo.
![](https://cdn.prod.website-files.com/62a5e1665e8f63c468b7f66a/64014178a536e1ca32ffeadf_vJHWS9OlrgVx7-K6PYcytnV3SKFcHq4lOLKWIFqG12VWq1BmWBk3rPhdBwbYs1yNTXRfkomICW8HpsSPbM1ly-0tbboxHMUewwRGvnKCkNbJDcPh0LbYwqdrw_1Kt5079vErADqRb-BRfC-gkxF9cLo.jpeg)
Esempio Header
- Le sezioni
Sono i blocchi di contenuto che dividono la pagina in modo orizzontalmente.
La prima sezione, solitamente è chiamata Hero: è la prima sezione che troviamo nelle nostre pagine, successivamente abbiamo tutte le altre sezioni che dividono la pagina con altri contenuti. Dopo la sezione Hero, possiamo trovare una breve descrizione dell'azienda, una sezione con i prodotti-servizi che offre l’azienda oppure una sezione con i testimonial che hanno provato il prodotto o servizio.
![](https://cdn.prod.website-files.com/62a5e1665e8f63c468b7f66a/640141784af8ec5ac09c0afe_n_qUsnGMxgqPIEYE5e6KCV6NWZ-U0zJ25m4M7Q4qFUZpHqYpO4eC9E5SzNzs5HosNf7KxXKu3ZafeG08Mlrayr0v0u6PJgBr69TL24MivWbffx0vOgq9yrwhOWEfSb1VHA39LWxErtkHFjtPvPoWKI4.jpeg)
Esempio Hero
![](https://cdn.prod.website-files.com/62a5e1665e8f63c468b7f66a/6401417881fc6285653e3ea4_21QuGGE0yZOQK3XrEhrS9A3TivvhjtHRG4t9W7obNlD6iMFIU-_r18-5L1B4rHJW9LSOtdJzwpwnBlyOjY56TY2v_791_DC1JLYB1_gsBzt9Hc2gH6P-zvQzyTqGHKEsW9-KRrsdssjQGfkSDoOn9cs.jpeg)
Esempio sezioni
- La sezione finale (o Footer)
L’ultima sezione che compone la nostra pagina web è chiamata footer, in inglese foot significa piedi quindi ai piedi della pagina.
![](https://cdn.prod.website-files.com/62a5e1665e8f63c468b7f66a/64014178a02d7300c62ebe07_m820nHlKiOKSCP3x8rT_fTR5hhz2tU27_iFdz85wcOK55Wcx5RX1bHM2PYD8EyE_7nTDTGsrvpGZxETJU-W0rrd-l36Qzr0E13422rZ6cQ1YL9C3u9CeKrmG7xK0w1ZJ40cKCTtU06oyYwrsRkO8ZOM.jpeg)
Esempio Footer
- I container
Ha sempre una funzione di divisione della nostra pagina, ma in questo caso ci aiuta a nella parte verticale anziché orizzontale come abbiamo visto per Header, Sezioni e Footer.
L’inserimento di un container (che altro non è che un Div ovvero un box, come visto nella lezione del Box Model) ci permette di allineare tutti i contenuti dai margini di SX e di DX della nostra pagina.
![](https://cdn.prod.website-files.com/62a5e1665e8f63c468b7f66a/64014178d4d2711ef2cfa05a_dyh1YqeKiYSAM0icMcLaABgZ7HqgCOndgKOdyPgrHY-wRL_gz5iOxdckCo19MOo2uSBM0j9aPDzPHlSXl6DSTVPYVdF4kgD_szM3fGVdOZBjTZ_LENeIVM0NZGPXQuINOzPr6dMTiH1jwvcSYhGV9zM.jpeg)
Esempio Container Webflow Facile
Nella lezione successiva, ed ultima, del percorso Webflow Facile - Impara le basi, analizziamo uno degli elementi più importanti che abbiamo a nostra disposizione: i Div Block.
Per andare alla lezione successiva clicca nel bottone in basso.
LEZIONE PRECEDENTE
LEZIONE SUCCESSIVA
![](https://cdn.prod.website-files.com/62a5c45b5049151d0b01731b/62be344a036c00ce15239fb0_WF_icona_freccia-su.png)