{"id":135898,"date":"2026-03-19T09:00:00","date_gmt":"2026-03-19T08:00:00","guid":{"rendered":"https:\/\/supporthost.com\/it\/?p=135898"},"modified":"2026-03-01T21:22:26","modified_gmt":"2026-03-01T20:22:26","slug":"layout-siti-web","status":"publish","type":"post","link":"https:\/\/supporthost.com\/it\/layout-siti-web\/","title":{"rendered":"16 Tipi di layout di siti web con tanti esempi"},"content":{"rendered":"\n<p>Se hai deciso di creare un sito, una delle prime cose che dovrai scegliere sar\u00e0 il layout, uno dei fattori da cui dipendono il <strong>comportamento degli utenti<\/strong> e le <strong>conversioni<\/strong>. L\u2019organizzazione grafica della pagina infatti non \u00e8 solo una questione estetica, ma uno strumento di comunicazione che pu\u00f2 produrre risultati molto differenti.<\/p>\n\n\n\n<p>In questa guida capiremo prima di tutto <strong>quali elementi formano una pagina<\/strong> e poi vedremo come variandone la posizione, le dimensioni e altre caratteristiche si possano ottenere diverse tipologie di struttura.<\/p>\n\n\n\n<p>Conoscere i principali tipi di layout dei siti web ti aiuter\u00e0 a trovare la configurazione che funziona meglio per il tuo progetto. Potrai costruire il tuo sito da zero oppure usare un <em>template<\/em>, ma non dimenticare di partire con il piede giusto affidandoti a un <a href=\"https:\/\/supporthost.com\/it\/hosting-condiviso\/\">ottimo servizio di hosting<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Indice<\/h2><nav><ul><li><a href=\"#cose-il-layout-di-un-sito-web\">Cos\u2019\u00e8 il layout di un sito web?<\/a><\/li><li><a href=\"#componenti-principali-del-layout-di-un-sito-web\">Componenti principali del layout di un sito web<\/a><\/li><li><a href=\"#quanti-tipi-di-layout-di-siti-web-esistono\">Quanti tipi di layout di siti web esistono?<\/a><\/li><li><a href=\"#layout-a-rivista\">Layout a rivista\u00a0<\/a><\/li><li><a href=\"#layout-a-portfolio\">Layout a portfolio\u00a0<\/a><\/li><li><a href=\"#layout-immagine-in-evidenza\">Layout immagine in evidenza<\/a><\/li><li><a href=\"#layout-a-schermo-intero\">Layout a schermo intero<\/a><\/li><li><a href=\"#layout-a-schermo-diviso\">Layout a schermo diviso<\/a><\/li><li><a href=\"#layout-a-griglia-o-matrice\">Layout a griglia o matrice<\/a><\/li><li><a href=\"#layout-a-card\">Layout a card<\/a><\/li><li><a href=\"#layout-asimmetrico\">Layout asimmetrico<\/a><\/li><li><a href=\"#layout-alternato\">Layout alternato<\/a><\/li><li><a href=\"#layout-a-z\">Layout a Z\u00a0<\/a><\/li><li><a href=\"#layout-a-f\">Layout a F<\/a><\/li><li><a href=\"#layout-a-colonna-singola\">Layout a colonna singola<\/a><\/li><li><a href=\"#layout-con-barra-laterale\">Layout con barra laterale<\/a><\/li><li><a href=\"#layout-a-fasce-orizzontali\">Layout a fasce orizzontali<\/a><\/li><li><a href=\"#layout-a-simmetria-radiale\">Layout a simmetria radiale<\/a><\/li><li><a href=\"#layout-a-pagina-singola\">Layout a pagina singola<\/a><\/li><li><a href=\"#layout-minimalista\">Layout minimalista<\/a><\/li><li><a href=\"#adattabilita-del-layout-ai-dispositivi-mobile\">Adattabilit\u00e0 del layout ai dispositivi mobile<\/a><\/li><li><a href=\"#conclusioni\">Conclusioni\u00a0<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cose-il-layout-di-un-sito-web\">Cos\u2019\u00e8 il layout di un sito web?<\/h2>\n\n\n\n<p>Il layout di un sito web \u00e8 lo <strong>schema secondo cui si dispongono sulla pagina gli elementi<\/strong> <strong>principali <\/strong>che la compongono, cio\u00e8 una serie di blocchi di testo ed eventuali immagini o video.<\/p>\n\n\n\n<p>La maggior parte dei layout dei siti viene costruita <strong>assemblando<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>testata&nbsp;<\/li>\n\n\n\n<li><em>hero&nbsp;<\/em><\/li>\n\n\n\n<li>contenuto principale<\/li>\n\n\n\n<li><em>footer<\/em><\/li>\n\n\n\n<li><em>sidebar<\/em><\/li>\n\n\n\n<li><em>call to action<\/em>.<\/li>\n<\/ul>\n\n\n\n<p>Inoltre c\u2019\u00e8 chi considera anche lo <strong>spazio bianco<\/strong> un componente fondamentale della struttura della pagina, poich\u00e9 contribuisce a gestire e indirizzare l\u2019attenzione dell\u2019utente.<\/p>\n\n\n\n<p>La scelta del <strong>layout <\/strong>non riguarda solo l\u2019aspetto del sito. Infatti la posizione e le dimensioni degli elementi determinano l\u2019ordine in cui le persone ricevono le informazioni e <strong>creano una gerarchia<\/strong> all\u2019interno del contenuto.<\/p>\n\n\n\n<p>Vediamo pi\u00f9 nel dettaglio a cosa servono i diversi componenti che abbiamo a disposizione per creare la struttura di una pagina web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"componenti-principali-del-layout-di-un-sito-web\">Componenti principali del layout di un sito web<\/h2>\n\n\n\n<p>La <strong>testata<\/strong> (o header) \u00e8 la striscia superiore del sito, che nella stragrande maggioranza dei siti contiene il <a href=\"https:\/\/supporthost.com\/it\/menu-di-navigazione-sito-web\/\">men\u00f9 di navigazione<\/a> principale e di solito anche il nome dell\u2019azienda e il logo. Spesso ospita anche il men\u00f9 di selezione della lingua del tuo sito o il pulsante per l\u2019accesso. Questa \u00e8 l\u2019area in cui potresti inserire un <a href=\"https:\/\/supporthost.com\/it\/mega-menu-wordpress\/\">mega men\u00f9 su WordPress<\/a>.<\/p>\n\n\n\n<p>L\u2019<strong>hero<\/strong> \u00e8 una sezione iniziale molto vistosa che sfrutta un\u2019immagine o un video per catturare l\u2019attenzione e trasmettere un messaggio chiave con un testo breve. Contiene banner, slider o caroselli. E quando c\u2019\u00e8, si trova subito sotto la testata.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"757\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-web-medium-hero-1024x757.png\" alt=\"Layout Sito Web Medium Hero\" class=\"wp-image-135900\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-web-medium-hero-1024x757.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-web-medium-hero-300x222.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-web-medium-hero-768x567.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-web-medium-hero-85x63.png 85w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-web-medium-hero.png 1218w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Per <strong>contenuto principale<\/strong> si intende la parte centrale della pagina, quella che ospita la maggior parte del testo. Nel caso di un articolo su WordPress per esempio, \u00e8 la sezione che mostra l\u2019articolo vero e proprio, comprese eventuali immagini, video, grafiche o tabelle che lo completano.<\/p>\n\n\n\n<p>Il <strong>footer <\/strong>\u00e8 l\u2019area che si posiziona in fondo alla pagina per raccogliere informazioni di servizio riguardanti privacy e copyright, link a pagine <em>Contatti<\/em> o <em>Dove siamo<\/em>.<\/p>\n\n\n\n<p>La <strong>barra laterale<\/strong> (o sidebar) \u00e8 una sezione opzionale che si posiziona di solito sulla destra per aggiungere ulteriori men\u00f9 e link utili, moduli, ecc. Non \u00e8 vietato mettere la sidebar a sinistra. Il sito di Clay per esempio ne ha due, una per lato:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"564\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/barre-laterali-layout-sito-clay-1024x564.png\" alt=\"Barre Laterali Layout Sito Clay\" class=\"wp-image-135901\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/barre-laterali-layout-sito-clay-1024x564.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/barre-laterali-layout-sito-clay-300x165.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/barre-laterali-layout-sito-clay-768x423.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/barre-laterali-layout-sito-clay-114x63.png 114w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/barre-laterali-layout-sito-clay-1536x846.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/barre-laterali-layout-sito-clay.png 1677w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>La <strong>call to action<\/strong> (CTA) \u00e8 il blocco con cui \u2013 con testi brevi e pulsanti \u2013 si invita l\u2019utente a eseguire un\u2019azione, come iscriversi, compilare un modulo o acquistare.<\/p>\n\n\n\n<p>All\u2019interno di un sito, il <strong>layout cambia in parte in base al tipo di contenuto<\/strong>. Infatti, mentre l\u2019header e il footer sono visibili su tutte le pagine nella maggior parte dei siti, altri elementi tendono a variare. Ad esempio su WordPress la barra laterale si vede di frequente negli articoli ma non altrettanto spesso sulle pagine o in homepage.<\/p>\n\n\n\n<p>Per questo, quando si costruisce un sito, di solito si configurano <strong>pi\u00f9 modelli di pagina<\/strong> (template), ognuno col proprio layout, per l\u2019homepage, gli articoli del blog, le pagine istituzionali o le landing page.<\/p>\n\n\n\n<p>I <a href=\"https:\/\/supporthost.com\/it\/temi-wordpress\/\">temi WordPress<\/a> consentono di configurare diversi template e anche altri CMS \u2013 <a href=\"https:\/\/supporthost.com\/it\/cose-joomla\/\">Joomla<\/a>, <a href=\"https:\/\/supporthost.com\/it\/cose-drupal\/\">Drupal<\/a>, <a href=\"https:\/\/supporthost.com\/it\/cose-magento\/\">Magento<\/a>, <a href=\"https:\/\/supporthost.com\/it\/cose-prestashop\/\">Prestashop<\/a> \u2013 fanno lo stesso.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"quanti-tipi-di-layout-di-siti-web-esistono\">Quanti tipi di layout di siti web esistono?<\/h2>\n\n\n\n<p>Il layout di una pagina web pu\u00f2 essere declinato in tantissimi modi, ma possiamo fare riferimento a un certo numero di schemi ricorrenti.&nbsp;<\/p>\n\n\n\n<p>Qui vedremo i <strong>16 tipi di layout di siti web<\/strong> principali:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>layout a rivista<\/li>\n\n\n\n<li>layout a portfolio<\/li>\n\n\n\n<li>layout immagine in evidenza<\/li>\n\n\n\n<li>layout a schermo intero<\/li>\n\n\n\n<li>layout a schermo diviso<\/li>\n\n\n\n<li>layout a griglia o matrice<\/li>\n\n\n\n<li>layout a card<\/li>\n\n\n\n<li>layout asimmetrico<\/li>\n\n\n\n<li>layout alternato<\/li>\n\n\n\n<li>layout a Z<\/li>\n\n\n\n<li>layout a F<\/li>\n\n\n\n<li>layout a colonna singola<\/li>\n\n\n\n<li>layout con barra laterale<\/li>\n\n\n\n<li>layout a simmetria radiale<\/li>\n\n\n\n<li>layout a pagina singola<\/li>\n\n\n\n<li>layout minimalista.<\/li>\n<\/ul>\n\n\n\n<p>Nei layout pi\u00f9 densi di contenuti visivi, come possono essere quello a rivista o a card, \u00e8 fondamentale <a href=\"https:\/\/supporthost.com\/it\/ottimizzare-immagini-wordpress\/\">ottimizzare le immagini<\/a> e attivare il caricamento differito. Se usi WordPress, puoi seguire la nostra guida al <a href=\"https:\/\/supporthost.com\/it\/lazy-load-wordpress\/\">lazy loading<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-rivista\">Layout a rivista&nbsp;<\/h2>\n\n\n\n<p>Il layout a rivista, chiamato anche magazine, si ispira proprio all\u2019organizzazione grafica dei giornali. Questo modello pu\u00f2 essere declinato con stili diversi ma conserva sempre la sua caratteristica fondamentale di condensare <strong>tanti contenuti in poco spazio<\/strong>.<\/p>\n\n\n\n<p>\u00c8 tipico dei <strong>grandi siti informativi<\/strong>, per esempio testate giornalistiche online o portali che aggregano contenuti creati dagli utenti (come Medium).<\/p>\n\n\n\n<p>Qui lo vediamo applicato sulla pagina principale di Wired:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"748\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-wired-1024x748.png\" alt=\"Layout Rivista Wired\" class=\"wp-image-135902\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-wired-1024x748.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-wired-300x219.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-wired-768x561.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-wired-86x63.png 86w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-wired.png 1256w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Mentre questa \u00e8 la homepage di HuffPost:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"784\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-huffingtonpost-1024x784.png\" alt=\"Layout Rivista Huffingtonpost\" class=\"wp-image-135903\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-huffingtonpost-1024x784.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-huffingtonpost-300x230.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-huffingtonpost-768x588.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-huffingtonpost-82x63.png 82w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-rivista-huffingtonpost.png 1207w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Come puoi intuire, il layout a rivista <strong>non \u00e8 adatto a essere visualizzato da smartphone<\/strong> e tablet, per questo nella versione mobile vengono implementati altri tipi di struttura. Ecco per esempio il layout di Wired visto dal telefono:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"484\" height=\"903\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2026\/01\/wired-layout-mobile.png\" alt=\"Wired Layout Mobile\" class=\"wp-image-136525\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2026\/01\/wired-layout-mobile.png 484w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2026\/01\/wired-layout-mobile-161x300.png 161w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2026\/01\/wired-layout-mobile-34x63.png 34w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><\/figure>\n\n\n\n<p>Il rischio di rendere la pagina troppo caotica esiste anche quando si configura il layout a rivista per la visualizzazione dal pc, ma con un po&#8217; di attenzione lo si pu\u00f2 evitare.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-portfolio\">Layout a portfolio&nbsp;<\/h2>\n\n\n\n<p>L\u2019intento del layout a portfolio, o a galleria, \u00e8 dare risalto a progetti che abbiano un <strong>alto impatto visivo<\/strong>: pu\u00f2 trattarsi di lavori di grafica o di architettura, dipinti, ma anche copertine di album musicali, locandine, ecc.<\/p>\n\n\n\n<p>Questo modello mette <strong>in primo piano le immagini oppure i video<\/strong>, spesso con gallerie interattive (<em>slider<\/em>). Per non distogliere l\u2019attenzione degli utenti dagli elementi visivi, di solito lo si realizza con un design ordinato e minimalista.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"876\" height=\"1024\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-portfolio-behance-876x1024.png\" alt=\"Layout Portfolio Behance\" class=\"wp-image-135904\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-portfolio-behance-876x1024.png 876w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-portfolio-behance-257x300.png 257w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-portfolio-behance-768x898.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-portfolio-behance-54x63.png 54w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-portfolio-behance.png 1200w\" sizes=\"auto, (max-width: 876px) 100vw, 876px\" \/><\/figure>\n\n\n\n<p>Anche il layout a portfolio richiede di curare in modo particolare l\u2019<a href=\"https:\/\/supporthost.com\/it\/strumenti-per-ottimizzare-immagini\/\">ottimizzazione delle immagini<\/a>.&nbsp;<\/p>\n\n\n\n<p>Vista l\u2019importanza che d\u00e0 ai contenuti visivi, non \u00e8 la scelta giusta per chi vuole inserire nella pagina anche <strong>testi lunghi, che rischierebbero di essere ignorati<\/strong> dagli utenti.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-immagine-in-evidenza\">Layout immagine in evidenza<\/h2>\n\n\n\n<p>Il layout immagine in evidenza punta molto sull\u2019impatto dell\u2019<strong>immagine contenuta nell\u2019hero<\/strong>, che pu\u00f2 essere a larghezza piena oppure no e con un eventuale testo in sovrapposizione (<em>overlay<\/em>).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-il-pasto-nudo-1024x508.png\" alt=\"Layout Immagine Evidenza Il Pasto Nudo\" class=\"wp-image-135905\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-il-pasto-nudo-1024x508.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-il-pasto-nudo-300x149.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-il-pasto-nudo-768x381.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-il-pasto-nudo-120x60.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-il-pasto-nudo.png 1284w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Questa struttura viene <strong>usata abitualmente<\/strong> sia in homepage che in pagine di categoria o articoli. Non a caso \u00e8 supportata nativamente dalla maggior parte dei temi WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"524\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-articolo-1024x524.png\" alt=\"Layout Immagine Evidenza Articolo\" class=\"wp-image-135906\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-articolo-1024x524.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-articolo-300x153.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-articolo-768x393.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-articolo-120x61.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-articolo-1536x786.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-immagine-evidenza-articolo.png 1806w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Anche il layout immagine in evidenza attira l\u2019attenzione sulle immagini <strong>ritardando un po\u2019 la lettura del contenuto<\/strong>. Ma se le dimensioni sono equilibrate e la foto o la grafica sono azzeccate, questo schema rappresenta un ottimo compromesso per bilanciare elementi visivi e testuali.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-schermo-intero\">Layout a schermo intero<\/h2>\n\n\n\n<p>Nel layout a schermo intero la sezione <strong>hero occupa tutta l\u2019area immediatamente visibile<\/strong> della homepage (<em>above the fold<\/em>), creando un\u2019esperienza immersiva. Spesso l\u2019effetto \u00e8 amplificato da contenuti dinamici come caroselli a scorrimento automatico o video al posto della classica immagine statica.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-intero-project-360-1024x527.png\" alt=\"Layout Schermo Intero Project 360\" class=\"wp-image-135907\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-intero-project-360-1024x527.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-intero-project-360-300x154.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-intero-project-360-768x395.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-intero-project-360-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-intero-project-360-1536x791.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-intero-project-360.png 1795w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Questo modello \u00e8 <a href=\"https:\/\/www.antartika.it\/web-development\/carosello-in-homepage-si-o-no\/\" rel=\"noopener\">contestato da alcuni esperti<\/a> di SEO e di marketing, che sostengono <strong>riduca le conversioni<\/strong> perch\u00e9:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>allontana i contenuti che l\u2019utente sta cercando, che vengono spinti pi\u00f9 in basso nella pagina;<\/li>\n\n\n\n<li>gli elementi in movimento possono essere inconsciamente assimilati ai banner pubblicitari e ignorati in automatico;<\/li>\n\n\n\n<li>le immagini che scorrono da sole possono generare frustrazione e riducono l\u2019accessibilit\u00e0.<\/li>\n<\/ul>\n\n\n\n<p>La situazione migliora quando si d\u00e0 alle persone la possibilit\u00e0 di fermare le immagini di loro interesse per guardarle con calma.<\/p>\n\n\n\n<p>Il layout a tutto schermo \u00e8 accusato anche di <strong>allungare i tempi di caricamento<\/strong> della pagina e quindi di danneggiare l\u2019esperienza utente.&nbsp;<\/p>\n\n\n\n<p>Con alcuni accorgimenti possiamo comunque <strong>garantire una buona <a href=\"https:\/\/supporthost.com\/it\/esperienza-utente-wordpress\/\">UX su WordPress<\/a><\/strong> senza rinunciare alle immagini, e lo stesso vale sugli altri CMS.<\/p>\n\n\n\n<p>Inoltre puoi misurare il reale impatto che le immagini e i video stanno avendo sul tuo sito con strumenti come <a href=\"https:\/\/supporthost.com\/it\/pagespeed-insights\/\">Google PageSpeed Insights<\/a>, <a href=\"https:\/\/supporthost.com\/it\/webpagetest\/\">WebPageTest<\/a> o <a href=\"https:\/\/supporthost.com\/it\/gtmetrix\/\">GTmetrix<\/a>.<\/p>\n\n\n\n<p>Il layout a schermo intero resta una scelta valida per aziende e professionisti che lavorano con immagini o effetti speciali \u2013 come Foundry \u2013 oppure per siti che vendono <strong>esperienze legate alla vista<\/strong>. Non a caso questa struttura \u00e8 stata usata spesso anche da Airbnb.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1251\" height=\"799\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-intero-video-foundry.gif\" alt=\"Layout Schermo Intero Video Foundry\" class=\"wp-image-135909\" \/><\/figure>\n\n\n\n<p>\u00c8 un modello <strong>adatto alla homepage<\/strong> ma non a contenuti pi\u00f9 testuali.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-schermo-diviso\">Layout a schermo diviso<\/h2>\n\n\n\n<p>Nel layout a schermo diviso, o semplicemente layout diviso, l\u2019<strong>hero ospita due sezioni<\/strong>, di uguale peso oppure asimmetriche, che possono essere pi\u00f9 o meno grandi rispetto alla pagina. In modo simile al layout a schermo intero, anche questo modello mantiene a lungo l\u2019attenzione del visitatore nella parte alta della pagina.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"637\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-diviso-studio-meta-1024x637.png\" alt=\"Layout Schermo Diviso Studio Meta\" class=\"wp-image-135910\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-diviso-studio-meta-1024x637.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-diviso-studio-meta-300x187.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-diviso-studio-meta-768x478.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-diviso-studio-meta-101x63.png 101w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-schermo-diviso-studio-meta.png 1152w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Nella maggior parte dei casi la divisione del layout riguarda solo l\u2019hero. Non \u00e8 vietato per\u00f2 estenderla al contenuto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-effectlab-1024x651.png\" alt=\"Layout Diviso Effectlab\" class=\"wp-image-135911\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-effectlab-1024x651.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-effectlab-300x191.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-effectlab-768x488.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-effectlab-99x63.png 99w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-effectlab.png 1454w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Il layout a schermo diviso ha <strong>molte potenzialit\u00e0<\/strong>: permette di mettere in luce due aspetti chiave per il brand, oppure di affiancare un\u2019immagine e un testo, mostrare due varianti di un prodotto o lo stesso prodotto da due punti di vista diversi, ecc.&nbsp;<\/p>\n\n\n\n<p>Sul <a href=\"https:\/\/tympanus.net\/codrops\/2013\/10\/25\/split-layout\/\" rel=\"noopener\">sito di Codrops<\/a> puoi trovare un <strong>tutorial con demo e codice<\/strong> per la costruzione di questa struttura.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"534\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-tutorial-codrops-1024x534.png\" alt=\"Layout Diviso Tutorial Codrops\" class=\"wp-image-135912\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-tutorial-codrops-1024x534.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-tutorial-codrops-300x156.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-tutorial-codrops-768x401.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-tutorial-codrops-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-tutorial-codrops-1536x801.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-tutorial-codrops.png 1771w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Sono possibili anche varianti con schermo diviso in pi\u00f9 di due parti, per esempio con un <strong>hero formato da tre blocchi<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-in-tre-fru-1024x453.png\" alt=\"Layout Diviso In Tre Fru\" class=\"wp-image-135913\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-in-tre-fru-1024x453.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-in-tre-fru-300x133.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-in-tre-fru-768x340.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-in-tre-fru-120x53.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-in-tre-fru-1536x680.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-diviso-in-tre-fru.png 1549w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-griglia-o-matrice\">Layout a griglia o matrice<\/h2>\n\n\n\n<p>Il layout a griglia, o a matrice, mostra tanti contenuti senza creare una gerarchia. In questo caso il corpo centrale della pagina ospita vari <strong>blocchi <\/strong>disposti secondo un <strong>reticolo ortogonale<\/strong>, a distanza regolare o meno.&nbsp;<\/p>\n\n\n\n<p>\u00c8 uno schema efficace per presentare prodotti o categorie, che troviamo spesso negli ecommerce e in alcuni siti di news. Pu\u00f2 essere usato per dare <strong>enfasi alle immagini<\/strong>, come avviene sul sito di Sharon Radish.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1304\" height=\"897\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-card-sharon-radish.gif\" alt=\"Layout Sito Card Sharon Radish\" class=\"wp-image-135914\" \/><\/figure>\n\n\n\n<p>Questo invece \u00e8 il layout a matrice di Airbnb:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"741\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-matrice-airbnb-1024x741.png\" alt=\"Layout Matrice Airbnb\" class=\"wp-image-135915\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-matrice-airbnb-1024x741.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-matrice-airbnb-300x217.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-matrice-airbnb-768x556.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-matrice-airbnb-87x63.png 87w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-matrice-airbnb.png 1276w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Mentre su Pinterest abbiamo una griglia con <strong>blocchi di dimensioni variabili<\/strong>, ma comunque rettangolari e allineati.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"544\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-griglia-pinterest-1024x544.png\" alt=\"Layout Griglia Pinterest\" class=\"wp-image-135916\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-griglia-pinterest-1024x544.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-griglia-pinterest-300x159.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-griglia-pinterest-768x408.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-griglia-pinterest-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-griglia-pinterest-1536x816.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-griglia-pinterest.png 1662w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Se scegli un layout di questo tipo, potresti trovarti con tante immagini sulla pagina, e sar\u00e0 importante che siano in un formato ottimale come <a href=\"https:\/\/supporthost.com\/it\/avif-vs-webp\/\">AVIF o WebP<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-card\">Layout a card<\/h2>\n\n\n\n<p>Il layout a card \u2013 o a schede o a carte \u2013 \u00e8 una variante del layout a griglia che serve a organizzare sulla stessa pagina <strong>informazioni sintetiche su tanti prodotti<\/strong>, argomenti o articoli.&nbsp;<\/p>\n\n\n\n<p>Il suo tratto distintivo sono i <strong>contenitori rettangolari <\/strong>(card), ognuno dei quali racchiude immagini e testi su un solo prodotto o un argomento. Di solito sono presenti un\u2019immagine di anteprima (<em>thumbnail<\/em>), un titolo e altre informazioni, e un pulsante per accedere a una pagina o una finestra di approfondimento.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-effectlab-1024x596.png\" alt=\"Layout Card Effectlab\" class=\"wp-image-135917\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-effectlab-1024x596.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-effectlab-300x175.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-effectlab-768x447.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-effectlab-108x63.png 108w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-effectlab.png 1499w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u00c8 usatissimo nelle <strong>pagine di categoria<\/strong> degli ecommerce per presentare i prodotti, cos\u00ec come nelle <strong>pagine archivio<\/strong> di WordPress per visualizzare gli articoli, ma \u00e8 adattabile ad altre esigenze. Qui per esempio, lo vediamo applicato nella pagina del sito di Spotify dedicata ai piani tariffari:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"699\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-spotify-1024x699.png\" alt=\"Layout Card Spotify\" class=\"wp-image-135918\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-spotify-1024x699.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-spotify-300x205.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-spotify-768x524.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-spotify-92x63.png 92w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-card-spotify.png 1354w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Anche con il layout a card ti serviranno <strong>immagini belle ma leggere<\/strong> per mantenere alta la velocit\u00e0 del sito. Tra i migliori formati <a href=\"https:\/\/supporthost.com\/it\/webp-wordpress\/\">per WordPress c\u2019\u00e8 il WebP<\/a>, ottimo anche sugli altri CMS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-asimmetrico\">Layout asimmetrico<\/h2>\n\n\n\n<p>Per layout asimmetrico si intendono diverse strutture in cui gli <strong>elementi sono distribuiti in modo non speculare<\/strong>, nella parte superiore della pagina, in quella centrale o entrambe.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-effectlab-1024x535.png\" alt=\"Layout Asimmetrico Effectlab\" class=\"wp-image-135919\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-effectlab-1024x535.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-effectlab-300x157.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-effectlab-768x401.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-effectlab-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-effectlab-1536x802.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-effectlab.png 1769w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Questo schema si pu\u00f2 <strong>combinare con quelli gi\u00e0 visti<\/strong>, per esempio per ottenere layout divisi asimmetrici oppure layout a griglia o card asimmetrici.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"992\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-niil-architecture-1024x992.png\" alt=\"Layout Asimmetrico Niil Architecture\" class=\"wp-image-135920\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-niil-architecture-1024x992.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-niil-architecture-300x291.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-niil-architecture-768x744.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-niil-architecture-65x63.png 65w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-asimmetrico-niil-architecture.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Il layout asimmetrico lascia spazio alla creativit\u00e0 e pu\u00f2 offrire al sito un aspetto meno scontato. D\u2019altra parte per\u00f2 va studiato con <strong>attenzione per evitare un effetto caotico<\/strong> e garantire una buona esperienza utente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-alternato\">Layout alternato<\/h2>\n\n\n\n<p>Il layout alternato \u00e8 una variante del layout asimmetrico che prevede blocchi di <strong>testo e immagini disposti a zig zag<\/strong>. La struttura \u00e8 a due colonne e a fasce orizzontali. Il testo viene posizionato alternativamente a destra o a sinistra e di conseguenza anche l\u2019immagine si sposta da un lato all\u2019altro.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"735\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-alternato-slack-1024x735.png\" alt=\"Layout Alternato Slack\" class=\"wp-image-135921\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-alternato-slack-1024x735.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-alternato-slack-300x215.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-alternato-slack-768x551.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-alternato-slack-88x63.png 88w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-alternato-slack.png 1285w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Questo schema \u00e8 utile quando si vuole trattare un<strong> argomento per punti in modo visivamente non monotono<\/strong>. Infatti ogni blocco di testo pu\u00f2 essere dedicato a un concetto chiave e affiancato da un\u2019immagine che lo completa.&nbsp;<\/p>\n\n\n\n<p>Il layout alternato \u00e8 usato spesso su pagine di vendita e nei contenuti aziendali dedicati allo storytelling o alla promozione di prodotti e servizi.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-z\">Layout a Z&nbsp;<\/h2>\n\n\n\n<p>Il layout a Z ricalca uno degli schemi che seguono gli occhi dell\u2019osservatore quando si muovono sulla pagina: il <strong>pattern Z<\/strong>.<\/p>\n\n\n\n<p>Questo schema si verifica su pagine semplici con pochi elementi visivi bilanciati. Qui lo sguardo tende a muoversi dall\u2019angolo superiore sinistro fino a quello opposto, poi in diagonale verso l\u2019angolo inferiore sinistro e da l\u00ec di nuovo verso destra.<\/p>\n\n\n\n<p>Per sfruttare al massimo questa tendenza dell\u2019occhio umano, nel layout a Z vengono <strong>distribuiti lungo questa traiettoria gli elementi chiave<\/strong> della pagina, che di solito sono titoli, introduzioni alle call to action, CTA e pulsanti.<\/p>\n\n\n\n<p>\u00c8 uno schema adatto nelle pagine che richiedono poco testo, come quelle di login, o in alcune homepage semplici.<\/p>\n\n\n\n<p>Potresti aver visto il layout a Z nella vecchia pagina di login di Facebook.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"681\" height=\"208\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-z-facebook.png\" alt=\"Layout Z Facebook\" class=\"wp-image-135922\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-z-facebook.png 681w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-z-facebook-300x92.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-z-facebook-120x37.png 120w\" sizes=\"auto, (max-width: 681px) 100vw, 681px\" \/><\/figure>\n\n\n\n<p>Il <strong>layout a zig zag<\/strong>, invece, \u00e8 un\u2019espansione del layout a Z che ripete questo tipo di percorso pi\u00f9 volte nella pagina.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-f\">Layout a F<\/h2>\n\n\n\n<p>Il layout a F sfrutta un altro <strong>pattern di lettura<\/strong>: quello che gli occhi seguono sulle <strong>pagine con molto testo<\/strong>. In questo caso gli occhi dell\u2019utente tendono a muoversi in orizzontale dall\u2019angolo sinistro a quello destro, per poi tornare sul lato sinistro e scendere lungo una linea verticale.<\/p>\n\n\n\n<p>Come nel layout a Z, anche qui gli <strong>elementi pi\u00f9 importanti <\/strong>vengono posizionati lungo la traiettoria percorsa naturalmente durante la scansione della pagina.<\/p>\n\n\n\n<p>\u00c8 quello che viene fatto in questa pagina di Linkedin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"809\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-f-linkedin-1024x809.png\" alt=\"Layout F Linkedin\" class=\"wp-image-135923\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-f-linkedin-1024x809.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-f-linkedin-300x237.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-f-linkedin-768x607.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-f-linkedin-80x63.png 80w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-f-linkedin.png 1185w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-colonna-singola\">Layout a colonna singola<\/h2>\n\n\n\n<p>Mentre i layout a rivista o a card sono tipici di homepage o pagine di categoria, il layout a colonna singola \u00e8 usato soprattutto per gli <strong>articoli<\/strong> dei giornali online e per i <strong>post <\/strong>sui diversi CMS.<\/p>\n\n\n\n<p>Il suo tratto distintivo \u00e8 mostrare il contenuto principale della pagina su <strong>una sola colonna<\/strong>, come in questo esempio da Substack:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"1024\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-colonna-singola-substack-683x1024.png\" alt=\"Layout Colonna Singola Substack\" class=\"wp-image-135924\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-colonna-singola-substack-683x1024.png 683w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-colonna-singola-substack-200x300.png 200w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-colonna-singola-substack-768x1151.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-colonna-singola-substack-42x63.png 42w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-colonna-singola-substack-1025x1536.png 1025w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-colonna-singola-substack.png 1200w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/figure>\n\n\n\n<p>\u00c8 uno schema che riduce le distrazioni e cos\u00ec <strong>facilita la lettura<\/strong>. Lo si pu\u00f2 trovare facilmente in tanti <a href=\"https:\/\/supporthost.com\/it\/blog-wordpress\/\">blog creati con WordPress<\/a>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-con-barra-laterale\">Layout con barra laterale<\/h2>\n\n\n\n<p>Il layout con barra laterale (sidebar) \u00e8 un parente stretto di quello a colonna singola. Anche questo \u00e8 un classico dei <strong>blog post<\/strong> di WordPress, ma lo troviamo anche su altre piattaforme.<\/p>\n\n\n\n<p>In questo caso accanto al corpo del testo c\u2019\u00e8 la <strong>sidebar, a destra o a sinistra<\/strong>, che pu\u00f2 contenere elementi utili come la <a href=\"https:\/\/supporthost.com\/it\/ricerca-wordpress\/\" data-type=\"post\" data-id=\"126625\">ricerca WordPress<\/a>.&nbsp;<\/p>\n\n\n\n<p>Il contenuto principale spesso \u00e8 su una sola colonna, come in questo <strong>esempio<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"751\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-articolo-supporthost-1024x751.png\" alt=\"Layout Barra Laterale Articolo Supporthost\" class=\"wp-image-135925\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-articolo-supporthost-1024x751.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-articolo-supporthost-300x220.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-articolo-supporthost-768x563.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-articolo-supporthost-86x63.png 86w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-articolo-supporthost.png 1259w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ma non \u00e8 l\u2019unico modo per implementare il layout con la barra laterale. Per esempio nella pagina <em>Blog <\/em>del nostro sito, la sidebar si trova accanto a una struttura a griglia su due colonne.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"504\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-pagina-blog-supporthost-1024x504.png\" alt=\"Layout Barra Laterale Pagina Blog Supporthost\" class=\"wp-image-135926\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-pagina-blog-supporthost-1024x504.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-pagina-blog-supporthost-300x148.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-pagina-blog-supporthost-768x378.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-pagina-blog-supporthost-120x59.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-barra-laterale-pagina-blog-supporthost.png 1273w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In particolare, su WordPress si possono inserire nella barra laterale molti tipi di blocchi grazie ai widget nativi o dei plugin. Per esempio \u00e8 possibile inserire moduli creati con <a href=\"https:\/\/supporthost.com\/it\/plugin-form-wordpress\/\">plugin per i form<\/a> o <a href=\"https:\/\/supporthost.com\/it\/plugin-newsletter-wordpress\/\">plugin per la newsletter<\/a>, <a href=\"https:\/\/supporthost.com\/it\/google-maps-wordpress\/\">mappe di Google Maps<\/a>, ecc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-fasce-orizzontali\">Layout a fasce orizzontali<\/h2>\n\n\n\n<p>Il layout a fasce orizzontali \u00e8 una variante del modello a colonna singola in cui le <strong>linee orizzontali sono accentuate<\/strong> attraverso l\u2019uso di immagini a larghezza piena e campiture di colore.<\/p>\n\n\n\n<p>Ogni fascia ospita un contenuto con una <strong>funzione diversa<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"963\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-fasce-orizzontali-neve-template-museum.png\" alt=\"Layout Sito Fasce Orizzontali Neve Template Museum\" class=\"wp-image-135928\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-fasce-orizzontali-neve-template-museum.png 680w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-fasce-orizzontali-neve-template-museum-212x300.png 212w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-fasce-orizzontali-neve-template-museum-44x63.png 44w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Lo possiamo trovare, per esempio, nei template di sito del <a href=\"https:\/\/supporthost.com\/it\/neve\/\">tema Neve<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"749\" height=\"666\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-fasce-orizzontali-neve-template-edited.png\" alt=\"Layout Sito Fasce Orizzontali Neve Template\" class=\"wp-image-135930\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-fasce-orizzontali-neve-template-edited.png 749w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-fasce-orizzontali-neve-template-edited-300x267.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-sito-fasce-orizzontali-neve-template-edited-71x63.png 71w\" sizes=\"auto, (max-width: 749px) 100vw, 749px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-simmetria-radiale\">Layout a simmetria radiale<\/h2>\n\n\n\n<p>Il layout a simmetria radiale \u00e8 un modello di pagina web molto insolito in cui i <strong>contenuti si dispongono in modo concentrico<\/strong>.<\/p>\n\n\n\n<p>Un esempio \u00e8 il sito di <a href=\"https:\/\/vlog.it\/\" rel=\"noopener\">Vlog<\/a>, in cui viene usato per mostrare le anteprime di una serie di video senza nessuna CTA.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"516\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-simmetria-radiale-vlog-1024x516.png\" alt=\"Layout Simmetria Radiale Vlog\" class=\"wp-image-135931\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-simmetria-radiale-vlog-1024x516.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-simmetria-radiale-vlog-300x151.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-simmetria-radiale-vlog-768x387.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-simmetria-radiale-vlog-120x60.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-simmetria-radiale-vlog-1536x774.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-simmetria-radiale-vlog.png 1834w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Come puoi vedere, il layout a simmetria radiale si presta a progetti artistici ma ha senso <strong>solo su pagine molto semplici<\/strong>. Questo perch\u00e9 \u00e8 poco flessibile, rende difficile inserire i testi e non si visualizza bene sui dispositivi mobili.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-a-pagina-singola\">Layout a pagina singola<\/h2>\n\n\n\n<p>Il layout a pagina singola riunisce <strong>tutto il contenuto del sito in un&#8217;unica pagina<\/strong>. Di solito si usa una sola colonna, divisa in sezioni orizzontali ognuna con una propria funzione.&nbsp;<\/p>\n\n\n\n<p>Ci possono essere parti dedicate a mettere in evidenza i punti di forza del brand, presentare delle testimonianze, informare sui prezzi ecc., come puoi vedere nel <a href=\"https:\/\/demosites.io\/one-page\/?_gl=1%2Afkjyp8%2A_gcl_aw%2AR0NMLjE3NjYyNjk3MzEuQ2owS0NRaUFyNW5LQmhDcEFSSXNBQ2FfTmlPeE0zWWFzazd4WVZncnhuNHNRb05UYUpMWlBpOEN1bVFDeDh1TVFENGRNUHljM05vRTAta2FBbUk2RUFMd193Y0I.%2A_gcl_au%2ANDUwMzkzMzI0LjE3NjYyNjk3MzE.%2AFPAU%2ANDUwMzkzMzI0LjE3NjYyNjk3MzE.%2A_ga%2AMjc4NDkwOTM0LjE3NjYyNjk3MzE.%2A_ga_D2Q8EGWPY5%2AczE3NjYyNjk3MzEkbzEkZzEkdDE3NjYyNjk3NTEkajQwJGwwJGgzMzIxMzEzNzk.%2A_fplc%2ARUFBN2ZxZ3ZmQklsZmNRMFd5aiUyRjJDRyUyRiUyQjEyYXlUdVUzdmtpUnJhUWp5ZjQ5czBnS0N1Rm9KcGdoZ0lzMWdqJTJCZTE4Y0l1Zms0ajdhcVNuV05VdmJTV1RrZzlKSU5NOU83VUY3MlgwN3dVWEswUGdaWFd3SVpvQTFEUVNOV3clM0QlM0Q.\" rel=\"noopener\">template One page<\/a> di Neve.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1477\" height=\"949\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-pagina-singola-neve-template.gif\" alt=\"Layout Pagina Singola Neve Template\" class=\"wp-image-135933\" \/><\/figure>\n\n\n\n<p>Nel layout a pagina singola non ci sono link ad altri contenuti del sito. Di solito per\u00f2 sono presenti ancore che permettono all\u2019utente di<strong> saltare alla sezione che gli interessa<\/strong> di pi\u00f9; necessarie anche perch\u00e9 spesso la pagina \u00e8 molto lunga.<\/p>\n\n\n\n<p>Il layout a pagina singola pu\u00f2 essere utile a chiunque voglia creare un sito essenziale, ma \u00e8 particolarmente <strong>adatto a spiegare in dettaglio un solo argomento<\/strong> e perseguire un unico obiettivo di conversione. Ecco perch\u00e9 \u00e8 il modello di riferimento per le <a href=\"https:\/\/supporthost.com\/it\/landing-page\/\">landing page<\/a>, dove viene usato per promuovere un prodotto o servizio.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-minimalista\">Layout minimalista<\/h2>\n\n\n\n<p>Il layout minimalista ha la caratteristica principale di <strong>ridurre il design ai componenti essenziali<\/strong> ed \u00e8 riconoscibile per l\u2019ampio uso di spazio bianco.<\/p>\n\n\n\n<p>In questa struttura si usano <strong>caratteri molto leggibili e pochi colori<\/strong>, senza nessun elemento decorativo. Non \u00e8 raro trovare ampie sezioni monocromatiche che servono a mettere in risalto il contenuto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"493\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/12\/layout-minimalista.gif\" alt=\"Layout Minimalista\" class=\"wp-image-135934\" \/><\/figure>\n\n\n\n<p>Il layout minimalista pu\u00f2 avere diverse strutture ma quella pi\u00f9 usata \u00e8 la pi\u00f9 semplice, cio\u00e8 la colonna singola.<\/p>\n\n\n\n<p>La forza di questo modello consiste nella sua capacit\u00e0 di creare un <strong>percorso di lettura chiaro<\/strong> e comunicare pochi messaggi selezionati senza rischio di distrazione.<\/p>\n\n\n\n<p>Pu\u00f2 trasmettere un senso di <strong>eleganza, lusso o modernit\u00e0<\/strong>. Per questo viene usato spesso in siti di design, architettura, soprattutto in varianti monocromatiche sul grigio o sul nero, mentre le versioni con colori pi\u00f9 vivaci sono tipiche dei siti di tecnologia.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adattabilita-del-layout-ai-dispositivi-mobile\">Adattabilit\u00e0 del layout ai dispositivi mobile<\/h2>\n\n\n\n<p>La maggior parte di questi layout \u00e8 nata per essere visualizzata su desktop. Questo significa che <strong>su mobile deve essere adattata<\/strong> a uno spazio orizzontale molto pi\u00f9 ristretto applicando il responsive design.&nbsp;<\/p>\n\n\n\n<p>Alcune strutture, come <strong>griglia<\/strong>, <strong>card<\/strong>, <strong>portfolio<\/strong> o <strong>rivista<\/strong>, sono <strong>compatibili con il mobile<\/strong> perch\u00e9 possono riconfigurarsi facilmente riducendo il numero di colonne, rimpicciolendo gli elementi e impilandoli.<\/p>\n\n\n\n<p>Per gli altri layout invece l\u2019adattamento consiste nella maggior parte dei casi in una <strong>semplificazione della struttura<\/strong>.<\/p>\n\n\n\n<p>Per esempio i layout a <strong>Z o a F<\/strong> devono essere ripensati per uno scorrimento prevalentemente verticale con una <strong>scansione orizzontale limitata<\/strong>.<\/p>\n\n\n\n<p>Layout come <strong>schermo diviso<\/strong>, <strong>asimmetrico<\/strong> o <strong>a simmetria radiale<\/strong> non sono visualizzabili su mobile e devono essere trasformati in un layout a <strong>colonna unica<\/strong>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni&nbsp;<\/h2>\n\n\n\n<p>In questa <strong>guida al layout dei siti <\/strong>abbiamo visto prima di tutto quali sono gli elementi essenziali che formano la struttura di una pagina web. Poi abbiamo parlato dei tipi pi\u00f9 comuni di layout e dei loro punti di forza e criticit\u00e0.<\/p>\n\n\n\n<p>Come avrai notato, <strong>non sempre c\u2019\u00e8 un confine netto<\/strong> tra un tipo di struttura e un altro. Per esempio i layout a griglia possono essere usati anche per presentare un portfolio mentre i layout a rivista con blocchi di dimensioni simili a distanza regolare diventano identici ai layout a matrice.<\/p>\n\n\n\n<p>Inoltre <strong>diversi layout si possono combinare<\/strong> nella stessa pagina. Questo succede spesso con le strutture che riguardano solo la parte superiore della pagina e devono essere integrati con altre strutture per organizzare la parte sottostante.<\/p>\n\n\n\n<p>E tu hai gi\u00e0 scelto il layout per il tuo sito? Hai ottenuto il risultato che cercavi? Se vuoi, raccontacelo nei commenti.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se hai deciso di creare un sito, una delle prime cose che dovrai scegliere sar\u00e0 il layout, uno dei fattori da cui dipendono il comportamento degli utenti e le conversioni. L\u2019organizzazione grafica della pagina infatti non \u00e8 solo una questione estetica, ma uno strumento di comunicazione che pu\u00f2 produrre risultati molto differenti. In questa guida [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":137622,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-135898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-generale"],"acf":[],"_links":{"self":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/135898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/comments?post=135898"}],"version-history":[{"count":23,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/135898\/revisions"}],"predecessor-version":[{"id":137787,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/135898\/revisions\/137787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media\/137622"}],"wp:attachment":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media?parent=135898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/categories?post=135898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/tags?post=135898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}