Contatore percentuale Modello CSS

Il blocco con contatori percentuali combina una sezione «chi siamo» con un pannello delle metriche nettamente separato. A sinistra, l'etichetta «chi siamo», il grande titolo dell'agenzia, una dichiarazione di supporto e un paragrafo descrittivo creano una gerarchia verticale del testo che spazia da pianificazione e marketing fino all'acquisizione clienti e alle vendite. A destra, un pannello grigio chiaro presenta quattro percentuali — 50%, 17%, 20% e 13% — disposte su due righe e due colonne, con testo esplicativo sotto ogni valore. L'accento verde sul titolo, la tipografia marcata, lo spazio bianco e il contrasto tra superfici bianche e grigie ne definiscono il sistema stilistico.

Lo spazio bianco unisce i caratteri verdi al pannello dei contatori grigio

Il lato sinistro definisce il campo visivo principale del blocco: uno sfondo bianco accoglie l'etichetta «chi siamo», il grande titolo «Siamo la migliore agenzia per far crescere le tue trattative», una frase esplicativa e un testo descrittivo dedicato a sviluppo di concept, pianificazione aziendale, gestione di progetti, marketing, acquisizione clienti e vendite. L'ampia scala del titolo crea un punto d'accesso evidente, mentre il testo secondario resta visivamente subordinato per dimensione, peso e spaziatura.

Il lato destro impiega un pannello grigio chiaro per separare quattro elementi percentuali ricorrenti dall'area narrativa. I valori 50%, 17%, 20% e 13% formano una griglia compatta due per due, e il testo di supporto sotto ogni valore delinea unità verticali uniformi. Questo trattamento a riquadro conferisce alle metriche sfondo, allineamento e contrasto dedicati, senza alterare la funzione statica di presentazione e riepilogo del blocco.

In un'ottica di modello CSS, le relazioni di stile fondamentali si sviluppano all'interno di questa sezione: il tocco di verde nel titolo, la tipografia marcata, le superfici bianche e grigio chiaro, la generosa distanza tra le due aree e l'allineamento ripetuto dei contatori. Queste proprietà possono essere perfezionate come insieme coordinato, preservando la gerarchia del testo e la struttura a quattro metriche. Ne risulta un blocco la cui resa visiva si basa su contrasto e spaziatura calibrati anziché su orpelli decorativi.

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 1467323 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.