A parte l’elemento di intestazione, l’intero contenuto della home page è costruito con l’editor a blocchi (alias Gutenberg). In combinazione con gli stili dell’editor di GeneratePress, ora abbiamo una rappresentazione molto migliore del front-end durante la modifica. La possibilità di assegnare a ciascun elemento stili specifici e classi CSS aggiuntive ci permette di non doverci addentrare spesso nell’HTML. In effetti su questo sito non lo facciamo mai.
Struttura della pagina
Iniziamo con l’esaminare la gerarchia.
- Elemento intestazione - L’argomento è trattato in questo articolo
- Titoli H2
- Categorie del negozio
- Ultimi prodotti
- Fila di invito all’azione - divisione quaranta/sessanta
- Fila d’invito all’azione - divisione sessanta/quaranta
- Prodotti in vendita
- Iscriviti
- GP Footer - I widget predefiniti del tema
Titoli H2
Per la nostra pagina di destinazione volevo dei titoli H2 grandi e in grassetto. Più grandi di quelle che abbiamo specificato nel nostro Customiser. Ma anche che fossero super reattivi. Per questo ho creato un CSS personalizzato utilizzando una classe CSS aggiuntiva di:
intestazione grande
Basta selezionare il blocco di intestazione, assicurarsi che sia un H2, aprire il menu a tendina avanzato nella barra laterale delle impostazioni e aggiungere la classe nel campo Classe CSS aggiuntiva. Nota bene: non vedrai la modifica dello stile nell’editor. Come per tutti i CSS, la troverai nel Customizer > CSS aggiuntivo. L’aspetto è il seguente
h2.large-heading {
font-size: calc(28px + (86 - 28)*(100vw - 400px)/(1600 - 400));
line-height: 1.1em;
}Tutto questo sembra complicato ma è ciò che fornisce i controlli responsive. Se vuoi maggiori informazioni sul significato di tutto questo, dai un’occhiata a Tipografia reattiva e fluida con le unità vh e vw.
Categorie del negozio
Costruito utilizzando un blocco Colonne impostato su due colonne. Ogni colonna contiene un’immagine, un titolo, un testo e un link. Niente di speciale e molto semplice da modificare. L’aggiunta di altre colonne può essere effettuata dalle Impostazioni delle colonne. Per creare righe aggiuntive è sufficiente duplicare quelle esistenti.
Fare in modo che l’immagine sia collegata alla categoria
Le impostazioni delle immagini hanno l’opzione Link a. Basta impostare il link a: URL personalizzato e aggiungere il link alla categoria
Stile del link personalizzato
Spero che tu abbia notato il link allo stile personalizzato. Questo si ottiene utilizzando un CSS personalizzato. Per aggiungere questo stile a qualsiasi link all’interno del contenuto, è sufficiente assegnare al blocco una classe CSS aggiuntiva di: loud-link
Ultimi prodotti
Dopo il blocco del titolo aggiungiamo semplicemente uno shortcode Woocommerce: Recent Products.
Righe di invito all’azione (CTA)
Ancora una volta entra in gioco il blocco colonne. Non c’è modo di regolare la larghezza delle colonne. Quindi all’interno dell’editor ti ritrovi con colonne di dimensioni uguali. Per ovviare a questo problema e visualizzare colonne di dimensioni diverse, abbiamo aggiunto alcune semplici classi CSS.
| Classe CSS aggiuntiva | Stile risultante |
| quaranta-sessanta colonne | una riga a due colonne 40% / 60% |
| sessanta-quaranta colonne | una riga a due colonne 60% / 40% |
| mobile-colonna-retro | Inverti l’ordine delle due colonne su mobile. Aggiungi questa classe insieme a una delle precedenti. |
Nota bene: queste classi non applicano gli stili all’interno dell’editor.
Iscriviti
Il modulo di iscrizione è fornito dal plugin Happy Forms. Il modulo viene aggiunto alla seconda colonna utilizzando un widget Short Code. Il codice breve per il tuo modulo si trova nella Dashboard > Happy Forms. Un design comune è quello di utilizzare questi tipi di CTA per spezzare una pagina. Per questo motivo abbiamo dato loro uno stile speciale.
Per prima cosa dobbiamo fare in modo che questa riga si estenda fino al bordo del contenitore (al di fuori del padding del contenuto). Per farlo basta selezionare l’opzione Allinea ampio dalla barra degli strumenti del blocco. Il resto richiede un po’ di CSS già noto per le righe CTA e un piccolo extra. Ecco le classi utilizzate:
- sessanta-quaranta-colonne
una riga a due colonne 60% / 40% - column-banner
questo apporta le necessarie modifiche al padding - centro-verticale
centra verticalmente qualsiasi contenuto collocato all’interno di una delle colonne CTA - bg-grey
Applica il colore di sfondo grigio
Modifica del modulo
Il modulo può essere modificato dalla Dashboard > Happy Forms. Se crei un nuovo modulo, dovrai aggiornare il codice breve utilizzato nella pagina principale.
Cambiare il colore di sfondo delle righe
Vai al Customizer > CSS aggiuntivo (o al foglio di stile del tuo tema figlio se lo hai spostato). E modifica questo CSS:
.bg-grey {
background-color: #f2f3f4;
}Naturalmente puoi creare le tue classi con nomi più appropriati per i colori che scegli.
Posso utilizzare un modulo diverso?
Naturalmente. Se vuoi utilizzare un altro plugin per i moduli, devi semplicemente configurarlo e sostituire il codice breve con quello nuovo.
