La pagina è strutturata come una sequenza mirata di gruppi di contenuti, anziché come una semplice raccolta piatta di schede offerta. Il blocco iniziale con testo su immagine definisce il tema dei coupon e colloca la prima azione prima ancora che i visitatori raggiungano la sezione degli sconti in evidenza. Quell'area suddivisa varia la gerarchia affiancando l'immagine di un acquirente a tre voci di esercenti disposte in verticale. Un ampio blocco promozionale crea quindi una transizione verso la raccolta sconti più ampia.
La sezione a griglia rappresenta il livello principale con contenuti ripetuti, con sei schede di esercenti disposte su due colonne e seguite dall'azione „Vedi tutti i coupon“. Dopo questa fase di consultazione, il riquadro in stile recensione introduce una tipologia di contenuto differente: l'immagine di un cliente e un messaggio sul risparmio ottenuto. Le quattro schede di istruzioni numerate creano un'ulteriore struttura annidata, suddividendo la spiegazione del riscatto in quattro passaggi collegati anziché in un unico paragrafo. Il blocco finale con testo su immagine riporta il visitatore all'azione per i coupon, mentre il footer essenziale chiude la sequenza. Questa organizzazione conferisce al design relazioni ben identificabili tra messaggio di apertura, contenuti in evidenza, offerte ricorrenti, istruzioni e punti di interazione. La sua gerarchia può quindi essere esaminata come un insieme di aree collegate con ruoli differenti, senza dover dedurre un'artificiosa struttura semantica di markup.
Quando utilizzi Generatore di modelli HTML5 sarai in grado di regolare colori, caratteri, intestazione e fooer, layout, colonne e altri elementi di design, nonché contenuti e immagini.
Personalizza visivamente questo template HTML5 predefinito nell'editor di Nicepage, mantenendo al contempo una struttura di pagina chiara e comprensibile. Utilizza il pannello Livelli per visualizzare la gerarchia di Intestazione, Blocchi, Contenitori, Elementi e Piè di pagina, navigare tra le diverse sezioni della pagina e selezionare rapidamente gli elementi all'interno del layout.
Il pannello Livelli offre anche pratici controlli per lavorare con pagine più complesse. Blocchi, Contenitori ed Elementi possono essere rinominati per una più facile identificazione, nascosti temporaneamente durante la modifica o bloccati per evitare modifiche accidentali. La struttura può anche mostrare la struttura interna di elementi come Menu e Moduli di contatto.
I blocchi dividono la pagina in sezioni di contenuto principali, mentre i contenitori e gli elementi organizzano il contenuto al loro interno. Mantenere visibile questa gerarchia semplifica la comprensione delle relazioni tra le singole parti della pagina, soprattutto quando un layout contiene molti elementi annidati. È possibile utilizzare il pannello Livelli per navigare all'interno di questa struttura anziché selezionare tutto direttamente sull'area di lavoro, semplificando l'ispezione e la gestione di layout complessi grazie a una gerarchia di pagine organizzata.
Dopo aver personalizzato la pagina a livello visivo, l'HTML risultante può essere rivisto e adattato quando sono necessarie modifiche a livello di codice. Se un progetto richiede markup o funzionalità aggiuntive rispetto agli elementi standard della pagina, utilizzare l'elemento HTML per aggiungere codice HTML personalizzato mirato dove necessario.
Questo flusso di lavoro combina la modifica visiva con una chiara visualizzazione della gerarchia della pagina, rendendo il modello utile sia come design già pronto che come progetto HTML5 la cui struttura può essere ispezionata, gestita, adattata ed estesa.