Griglia con angoli arrotondati Modello CSS

Il blocco introduce la domanda riflessiva “Perché amiamo gli animali domestici?” attraverso una composizione statica di tre fotografie arrotondate e una scheda di testo di supporto. Un'immagine di grandi dimensioni occupa il lato sinistro, mentre due immagini più piccole sono impilate verticalmente sulla destra e ritraggono persone che abbracciano cani e gatti. Sotto l'immagine principale, la scheda bianca arrotondata racchiude il titolo, un testo di supporto compatto, l'attribuzione delle immagini e un pulsante scuro “scopri di più”. Lo sfondo antracite e il sobrio accento grigio-blu incorniciano le immagini e separano la scheda dal campo visivo circostante.

Immagini arrotondate e contrasto definiscono il sistema visivo della sezione

Le tre fotografie stabiliscono il ritmo visivo principale del blocco, ma gli angoli arrotondati mantengono la composizione più morbida rispetto a una tradizionale griglia di immagini rettangolari. La grande immagine a sinistra ha il maggior peso visivo, mentre le due immagini più piccole a destra creano un contrappeso verticale. Poiché tutte e tre le immagini mostrano persone intente ad abbracciare cani o gatti, la ricorrente smussatura degli angoli aiuta anche a far percepire le diverse fotografie come un unico gruppo visivo armonioso.

La scheda di testo bianca arrotondata introduce il titolo “Perché amiamo gli animali domestici?” sotto la grande immagine. La sua superficie chiara crea un netto contrasto con lo sfondo scuro antracite, mentre il rettangolo tenue grigio-blu sulla destra aggiunge un sobrio accento secondario senza entrare in competizione con le fotografie. Il testo compatto e lo scuro pulsante a pillola “scopri di più” assegnano alla scheda una chiara gerarchia: prima la domanda, poi il testo di supporto, infine l'azione.

Per un'interpretazione in termini di template CSS, queste relazioni rappresentano utili riferimenti di stile. Colori, raggi di curvatura, contrasto della scheda, spaziatura delle immagini, forma del pulsante e dimensioni del testo possono essere personalizzati preservando la stessa disposizione dei contenuti incentrata sugli animali domestici. L'aspetto della sezione dipende da regole locali coordinate, anziché da un'impostazione di stile estesa all'intero sito.

Personalizza con Nicepage

Quando utilizzi Generatore di modelli CSS sarai in grado di regolare colori, caratteri, intestazione e fooer, layout, colonne e altri elementi di design, nonché contenuti e immagini.

Scarica

Modifica modello offline

1. Scarica e installa l'applicazione Nicepage per Windows e Mac. Oppure i plugin WordPress e Joomla da pagina di download
2. Creare una nuova pagina o selezionare esistente
3. Fai clic su Aggiungi nuovo blocco, cerca l'ID 1438220 e fai clic su Invio

Modifica modello online

Avvia Costruttore online questo modello sul nostro hosting

Crea fantastici siti web

WordPress

Windows App

Joomla

Mac OS App

HTML5

Online

Nicepage Builder gratuito

Oltre 15.000 modelli

Facile Drag-n-Drop

Nessuna codifica

Ottimizzato per dispositivi mobili

Parole chiave

Personalizza questo template con CSS

Controlla lo stile specifico di ogni pagina

Personalizza l'aspetto visivo di questo template predefinito direttamente nell'editor di Nicepage. Regola tipografia, spaziatura, sfondi, bordi, colori, posizionamento e altre proprietà di stile utilizzando i controlli visivi, mantenendo al contempo un layout di pagina facile da gestire senza dover scrivere CSS manualmente.

Aggiungi CSS personalizzato quando necessario

Per esigenze di stile che vanno oltre le opzioni standard dell'editor, utilizza CSS personalizzato per aggiungere regole mirate. Il CSS può essere applicato a singoli elementi, pagine specifiche o all'intero sito web, a seconda dell'ambito della personalizzazione, mentre le classi CSS possono essere utilizzate per collegare le regole personalizzate agli elementi selezionati.

Esporta CSS minimo per pagina

Per i progetti in cui le dimensioni del CSS e le prestazioni della pagina sono importanti, Nicepage può esportare CSS minimo per ogni pagina. Invece di affidarsi a un unico foglio di stile comune, ogni pagina può utilizzare un file CSS separato contenente solo le regole di stile necessarie per quella specifica pagina. Secondo la documentazione di Nicepage, questi file CSS specifici per pagina possono essere circa dieci volte più compatti, contribuendo a ridurre il CSS superfluo e a migliorare le prestazioni di caricamento della pagina.

Questo flusso di lavoro combina la stilizzazione visiva con CSS personalizzato opzionale e un output CSS ottimizzato specifico per pagina, offrendo un maggiore controllo quando un progetto lo richiede, senza che la modifica manuale del CSS diventi il metodo principale per personalizzare il template.