Una pratica guida su come modellare l'impaginazione in Divi

L'impaginazione è uno di quegli elementi di un sito web che spesso viene trascurato, soprattutto quando si tratta di design. E ci sono più posti in cui l'impaginazione può essere appropriata da usare nel tuo sito web. Fondamentalmente, l'impaginazione (o un menu di impaginazione) consente agli utenti di navigare attraverso più pagine di elementi (ad esempio un archivio di post). Ciò è particolarmente utile per ridurre il contenuto della pagina iniziale.

Divi ha più moduli che includono l'impaginazione (come il modulo galleria) che possono essere stilizzati utilizzando le impostazioni integrate. Alcuni di questi moduli (come blog e portfolio) ereditano l'impaginazione predefinita del tema Divi (o WordPress) che può essere semplificata per alcuni siti. Ma con l'aiuto di un plugin, puoi sostituire l'impaginazione dell'intero tema con uno più complesso. Quindi puoi modellarlo con i CSS come preferisci.

In questo tutorial, ti mostrerò come modellare l'impaginazione in Divi. Ecco di cosa parleremo:

• Cose da considerare quando si modella l'impaginazione in Divi
• Modificare l'impaginazione del modulo Galleria Divi e del modulo Portfolio filtrabile
• Stili di impaginazione avanzati per il modulo Galleria e il modulo Portfolio filtrabile
• Modulo Blog Stile e Impaginazione Modulo Portfolio
• Aggiunta di impaginazioni complesse a Divi utilizzando il plugin WP-PageNavi
• Disegnare l'impaginazione WP-PageNavi con CSS personalizzati

Iniziamo.

Sbirciata

Questo post riguarda principalmente come modellare l'impaginazione. Tuttavia, qui ci sono un paio di stili di impaginazione complessi che ti mostrerò come costruire.

Iniziare

Iscriviti al nostro canale Youtube

Per questo tutorial, avrai bisogno di quanto segue:

• il tema Divi installato e attivo.
• Per testare i progetti di impaginazione di diversi moduli, avrai bisogno di alcuni contenuti fittizi. Ad esempio, per progettare l'impaginazione del modulo portfolio (o portfolio filtrabile), avrai bisogno di circa 12-16 progetti aggiunti al tuo tema in modo da avere abbastanza contenuto per consentire l'impaginazione. Per il modulo galleria, avrai anche bisogno di circa 12-16 immagini per popolare la galleria.
• Se desideri utilizzare il plug-in WP-PageNavi, dovrai installare e attivare il plug-in. Questo è un plug-in gratuito che può essere scaricato dalla directory di WordPress dalla dashboard di WordPress del tuo sito. Vai su Plugin > Aggiungi nuovo e cerca WP-PageNavi.
  

Una volta che hai dei contenuti fittizi, sei pronto per creare una nuova pagina. Dalla dashboard di WordPress, vai a Pagine > Aggiungi nuovo. Assegna un titolo alla tua pagina e distribuisci Divi Builder. Seleziona l'opzione "Costruisci da zero". Quindi fare clic su Crea sul front-end.

Ora sei pronto per iniziare a testare alcuni progetti di impaginazione.

Cose da considerare quando si modella l'impaginazione in Divi

In generale, probabilmente non vorrai impazzire troppo con il design dell'impaginazione perché, come qualsiasi menu di navigazione, è importante mantenerlo semplice e intuitivo. Tuttavia, ecco alcune cose che potresti considerare quando progetta l'impaginazione in Divi.

Carattere di impaginazione

L'impaginazione è un ottimo posto per staccare dai caratteri principali che stai utilizzando per il tuo sito. Vuoi scegliere i migliori caratteri orientati alle interfacce utente e alla navigazione. E poiché l'impaginazione contiene principalmente numeri, devi assicurarti che il carattere mostri tutti i numeri con altezza e larghezza uguali (ciò che gli esperti di tipografia chiamano rigatura e tabella). Alcuni dei miei preferiti conservatori includono Oxygen, Nunito Sans e Source Sans Pro. E se hai molte pagine nella tua impaginazione, potresti aver bisogno di liberare spazio utilizzando un font condensato come Fjalla One o Roboto Condensed.

Stile carattere impaginazione

Puoi anche provare alcuni stili di carattere per distinguere l'impaginazione. Ad esempio, puoi utilizzare lo stile del carattere maiuscolo per rendere i collegamenti "successivo" e "precedente" più pronunciati e uguali all'altezza dei numeri di pagina. Tuttavia, l'aggiunta dello stile del carattere sottolineato potrebbe essere un po' ridondante considerando che i collegamenti sono già in un menu di navigazione.

Spaziatura delle lettere di impaginazione

La spaziatura delle lettere è un ottimo modo per aggiungere un po' più di spaziatura orizzontale all'impaginazione. Questo può aggiungere un bel elemento di design e far risaltare la navigazione.

Allineamento del testo di impaginazione

In Divi puoi facilmente allineare la tua paginazione a sinistra, al centro o a destra della pagina. Quindi non dimenticarlo ogni volta che stai progettando la tua pagina web.

Spazio cliccabile

È importante avere abbastanza spazio cliccabile per i tuoi link di impaginazione. Per impostazione predefinita, questo sarà abbastanza piccolo. È possibile aumentare lo spazio selezionabile utilizzando un testo più grande o aumentando l'altezza della riga. Ma puoi anche aggiungere un po 'di riempimento attorno a quei collegamenti con alcuni CSS.

Dimensione del testo dell'impaginazione

La dimensione del testo di impaginazione normalmente è piuttosto piccola. Questo è probabilmente per impedirgli di distrarre gli utenti dal contenuto della pagina. Tuttavia, avere una dimensione del testo più grande può aumentare lo spazio cliccabile del collegamento di impaginazione e renderlo più evidente agli utenti. Mi piace usare un'unità di lunghezza vw per un testo di impaginazione più grande in modo che si adatti bene al browser e al contenuto.

Altezza riga di impaginazione

Poiché l'impaginazione normalmente rimane su una riga, puoi farla franca aggiungendo un po' più di altezza di riga ai link per aggiungere ulteriore spazio cliccabile.

Impaginazione testo Shadow

L'ombra del testo può distrarre se usata male. È meglio lasciarlo fuori a meno che tu non abbia intenzione di mantenerlo sottile. Può anche essere usato per aggiungere un bagliore creativo attorno al tuo testo se vuoi questo genere di cose.

Impaginazione Pagina attiva

Questo aspetto dell'impaginazione è importante per far sapere agli utenti su quale pagina si trovano attualmente durante la navigazione. Dovrebbe esserci un chiaro contrasto tra lo stile del collegamento alla pagina attiva e i collegamenti alla pagina non attivi. Per impostazione predefinita, Divi utilizzerà il colore dell'accento primario impostato nel Personalizzatore di temi come colore del collegamento alla pagina attiva in Divi. Tuttavia, puoi sovrascriverlo con la riga di CSS.

Per i moduli che hanno l'impaginazione, Divi ha opzioni di progettazione integrate per lo styling di diversi elementi dell'impaginazione. Inoltre puoi aggiungere facilmente alcuni frammenti di CSS nella scheda Avanzate per un controllo ancora maggiore sul design in un unico posto conveniente.

Ma per l'impaginazione a livello di tema, puoi ottenere una soluzione complessa utilizzando il plug-in WP-PageNavi con CSS personalizzato (ne parleremo più avanti).

Per ora, iniziamo con come modellare l'impaginazione nei moduli Divi.

Modificare lo stile del modulo Galleria Divi e impaginazione del modulo Portfolio filtrabile

Con Divi Builder attivo su una nuova pagina, crea una nuova sezione regolare con una riga a una colonna. Quindi aggiungi un modulo portfolio filtrabile alla riga. Come accennato in precedenza, assicurati di aver creato 12-16 progetti in modo da poter vedere l'impaginazione.

Nelle impostazioni del portafoglio filtrabile, aggiorna quanto segue:

Numero post: 4 (così puoi vedere più link di pagina nell'impaginazione)

Titolo spettacolo: NO
Mostra categorie: No

Per impostazione predefinita, Divi mostrerà l'impaginazione, quindi lascia l'opzione impostata su S.

Dovresti vedere l'impaginazione in basso a destra del portfolio.

Per modellare l'impaginazione, vai alla scheda Design e apri l'interruttore Testo di impaginazione per vedere tutte le opzioni disponibili. Aggiorna quanto segue:

Layout: Griglia
Carattere di impaginazione: Source Sans Pro
Stile carattere di impaginazione: TT
Allineamento del testo dell'impaginazione: Centro
Colore del testo dell'impaginazione: #cccccc
Dimensione del testo dell'impaginazione: 4vw (desktop), 38px (tablet e telefono)
Spaziatura delle lettere di impaginazione: 1vw
Altezza riga di impaginazione: 2em

Quindi fare clic sulla scheda Avanzate e aggiungere il seguente frammento di CSS in Pagina attiva Paginazione :

color: #0096eb !important;

Ingrandendo il testo con un'altezza della riga maggiore, c'è più spazio cliccabile per gli utenti. La modifica dell'allineamento al centro e l'aggiunta di una piccola spaziatura tra le lettere aiuta a rendere più evidente l'impaginazione. E il colore del testo di impaginazione personalizzato con il colore della pagina attivo a contrasto aiuta l'utente a sapere su quale pagina si trova.

Altri frammenti CSS rapidi

Ecco alcuni frammenti CSS facili e veloci per modificare il design dell'impaginazione.

Per eliminare la linea di confine predefinita che si trova direttamente sopra l'impaginazione, puoi inserire il seguente CSS in Portfolio impaginazione:

border: none;

Per dare alla tua paginazione un bordo completo, puoi inserire il seguente CSS in Portfolio Impaginazione:

border: 2px solid #dddddd;

Per dare all'impaginazione un colore di sfondo, puoi inserire il seguente CSS in Portfolio Impaginazione:

background: #333333;

Funziona anche per il modulo Galleria

Queste stesse impostazioni di progettazione funzioneranno anche per il modulo Galleria. In effetti puoi copiare gli stili di testo di impaginazione dal modulo Portfolio filtrabile e incollarli in un modulo Galleria! Assicurati solo di trasferire anche su eventuali frammenti CSS.

Stili di impaginazione avanzati per il modulo Galleria e il modulo Portfolio filtrabile

Se desideri ottenere un design più avanzato per l'impaginazione dei tuoi moduli Portfolio filtrabile e Galleria, puoi utilizzare alcuni CSS personalizzati più avanzati. Quello che mi piace di questo particolare esempio è che il CSS personalizzato funziona in tandem con le impostazioni integrate del modulo.

Per dimostrare, usiamo di nuovo il Portfolio filtrabile. Questa volta, aggiorna le opzioni di progettazione con quanto segue:

Layout: Griglia
Dimensione del testo dell'impaginazione: 16px
Altezza riga di impaginazione: 2,5 em

Nella scheda Avanzate, aggiungi la seguente classe CSS:

Classe CSS: pagi-space

Ciò consentirà al nostro CSS di essere applicato solo a questo modulo.

Ora salva le tue impostazioni e apri il modal popup Impostazioni pagina. Nella scheda Avanzate, aggiungi il seguente codice CSS all'interno della casella CSS personalizzato.

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

Con il codice in atto, puoi vedere che l'impaginazione ora ha più spazio cliccabile per ciascuno dei link della pagina. E i collegamenti hanno anche i colori di sfondo aggiunti in modo che assomiglino più a pulsanti cliccabili. Viene aggiunto anche un sottile bordo a ciascuno dei collegamenti al passaggio del mouse. Il collegamento alla pagina attiva si distingue per uno sfondo scuro a contrasto con un colore del testo più chiaro.

Questo codice modellerà l'impaginazione sia per il modulo portfolio filtrabile che per il modulo gallery. Assicurati solo di aggiungere la classe CSS "pagi-space" al modulo affinché abbia effetto.

Ecco il risultato sul modulo portfolio filtrabile.

Modulo Blog Stile e Impaginazione Modulo Portfolio

Il Modulo Blog e il Modulo Portfolio ereditano l'impaginazione predefinita di WordPress che ti consente di navigare nell'archivio dei tuoi post con un collegamento a "Articoli precedenti" e un collegamento a "Articoli successivi".

Ecco come appare l'impaginazione predefinita nella pagina dell'archivio del blog nel tema Divi:

Questa stessa impaginazione viene utilizzata dal modulo blog e dal modulo portfolio.

Se stai utilizzando il modulo Blog (o il modulo portfolio), puoi modellare il testo di impaginazione utilizzando le impostazioni integrate.

Questa è una soluzione semplice ed elegante per la maggior parte dei casi. Tuttavia, se stai cercando un'impaginazione più complessa per sostituire l'impaginazione Divi/WordPress predefinita, esiste una soluzione così semplice che potrebbe sorprenderti.

Aggiunta di impaginazioni complesse a Divi utilizzando il plugin WP-PageNavi

Se desideri un'impaginazione più avanzata per l'intero tema Divi, incluso il modulo blog e il modulo portfolio, puoi sostituire l'impaginazione predefinita di WordPress con una diversa utilizzando il popolare plugin chiamato WP-PageNavi. Questo plugin funziona bene con Divi. Il design è semplice ma può essere facilmente personalizzato utilizzando i CSS.

Aggiungere il plugin a Divi

Se non lo hai già fatto, vai avanti e installa il plug-in come descritto nella sezione "Guida introduttiva" nella parte superiore del post. Una volta che il plugin è installato e attivo, la nuova forma di impaginazione apparirà automaticamente in tutto il tuo tema.

Influirà anche sul modulo blog e sul modulo portfolio.

Impostazioni plugin

Puoi individuare le impostazioni del plug-in dalla dashboard di WordPress accedendo a Impostazioni > WP-PageNavi.

Le impostazioni servono principalmente per personalizzare la funzionalità e il contenuto del testo visualizzato. Tuttavia, se vuoi dare uno stile all'impaginazione, dovrai utilizzare alcuni CSS personalizzati.

Disegnare l'impaginazione WP-PageNavi con CSS personalizzati

Dal momento che probabilmente vorrai modellare l'impaginazione per l'intero tema, ha più senso aggiungere il CSS al personalizzatore del tema o al file style.css del tema figlio. Vai avanti e inserisci il seguente CSS nella casella CSS aggiuntivo per la personalizzazione del tema:

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

Questo è il risultato finale.

Styling WP-PageNavi nel modulo Blog e nel modulo Portfolio

Come accennato in precedenza, il modulo Blog e il modulo Portfolio ereditano la navigazione predefinita delle pagine di WordPress. Poiché questo è stato sostituito con la nuova impaginazione complessa di WP-PageNavi, i moduli mostreranno anche questa nuova impaginazione.

È possibile utilizzare le opzioni di progettazione del testo di impaginazione integrate per aggiungere ulteriore stile all'impaginazione.

Tieni presente che alcune delle opzioni potrebbero non funzionare come previsto con CSS personalizzato esterno in atto.

Pensieri finali

L'impaginazione non deve continuare a essere un ripensamento durante la creazione di un sito Web in Divi. Ci sono alcune utili opzioni integrate per aiutare con quei moduli che usano l'impaginazione. E con alcuni CSS personalizzati puoi creare qualsiasi stile tu voglia. Il plugin WP-PageNavi è una soluzione elegante per aggiungere un'impaginazione complessa in tutto il tema Divi. Non solo funziona perfettamente con Divi, ma ti offre opzioni aggiuntive che puoi facilmente personalizzare. Lo stile dell'impaginazione di WP-PageNavi richiede un po' di CSS, ma si spera che il modello utilizzato in questo articolo ti metta sulla strada giusta.

I progetti di esempio in questo post erano volutamente semplici.

Non vedo l'ora di sentirti nei commenti.

Saluti!