Esagono Modelli HTML

Template HTML creativi a esagono per pagine geometriche altamente strutturate

Un template HTML a esagono è una pagina pronta all'uso con sezioni a nido d'ape già integrate nel markup, pronta per ospitare i tuoi servizi, progetti o profili del team. Lo personalizzi in Nicepage, esporti i file e puoi continuare a modificare il codice sorgente a mano. Le cornici catturano l'attenzione nell'anteprima, ma è il markup al loro interno a determinare con quale rapidità riuscirai a fare tuo il template.

Markup all'interno di ogni cella esagonale

In un buon template, l'esagono è solo una cornice attorno a un contenuto che avrebbe senso anche senza di esso. Un'intestazione assegna un nome all'elemento e una breve descrizione lo illustra, mentre il link o il pulsante rimane un elemento separato. Anche i livelli delle intestazioni dovrebbero ignorare le dimensioni visive, così che sei servizi raggruppati condividano lo stesso livello gerarchico anche quando la cella centrale appare più grande.

Il modello più adatto a te dipende da cosa conterranno le celle:

• elementi di portfolio, in cui titolo del progetto e link rimangono separati da un'immagine provvista di testo alternativo adeguato;
• elementi di servizio o di funzionalità con un'intestazione, una breve descrizione e a volte un'icona;
• celle dedicate al team che mantengono nome e ruolo come testo modificabile accanto al ritratto, senza mai incorporarli nell'immagine.

Clonare elementi senza contenitori vuoti

Dopo l'esportazione, la maggior parte delle modifiche si riduce alla ripetizione. In un template ordinato, ogni servizio o progetto ripete lo stesso piccolo blocco con le stesse classi, così per aggiungere un nuovo elemento bastano un blocco copiato e un nuovo testo. La rimozione di un elemento dovrebbe essere altrettanto pulita, senza lasciare contenitori poligonali vuoti o annidamenti residui. Didascalie e pulsanti dovrebbero cambiare senza toccare le cornici, e una nuova foto dovrebbe inserirsi comodamente nel blocco multimediale esistente.

Nell'editor, lo Shape Element di Nicepage mantiene separati decorazione e contenuto, poiché il testo o un pulsante posizionato dentro una forma resta un elemento a sé stante.

Ordine del codice sorgente e file esportati

L'ordine del codice sorgente non si vede mai in un'anteprima, eppure determina la sequenza di lettura delle celle su uno smartphone, dove il nido d'ape si trasforma di solito in una semplice colonna verticale. Un raggruppamento che su un computer portatile si legge in senso orario può risultare disordinato. Quando l'offerta principale appare per prima a livello visivo ma per quarta nel markup, gli utenti da cellulare la raggiungono solo dopo altri tre elementi. Un rapido test consiste nell'immaginare le cornici rimosse per verificare se tutto continui a leggersi in un ordine logico.

I file esportati possono essere caricati sul tuo server o consegnati a uno sviluppatore, che dovrebbe individuare i blocchi di contenuto e il loro ordine a colpo d'occhio. Dopo qualsiasi spostamento, controlla ancora una volta link, descrizioni delle immagini e ordine degli elementi. Se i tuoi progetti, servizi o profili reali si inseriscono nel markup ripetuto di un template cambiando poco più del testo, hai trovato il template HTML a esagono ideale.