Subito dopo aver caricato i primi articoli nel portfoglio, dovrei andare ad aggiungere alla pagina Portfoglio appunto, che al momento è vuota.

Come vedi in questo esempio, in queste lezioni andremo a vedere insieme come creare una pagina portfoglio e come collegare una tab per filtrare il risultato.

Dati di ricerca Allora innanzitutto torniamo al all'interno del nostro back di WordPress e andiamo sulla pagina appunto del portfoglio che al momento è vuota come abbiamo visto.

Quindi entriamo nella pagina del portfoglio.

Ovviamente modifica con elemento andiamo a vedere i che ci consentiranno di svolgere questa funzione.

Allora prima di tutto se volete inserire uno stile coerente con le altre pagine, potete chiaramente, in base alle vostre preferenze grafiche, inserire un aero section come abbiamo fatto per la pagina servizi.

Quindi con lo sfondo azzurro un'immagine a destra un testo a sinistra.

Potete chiaramente prendere questi contenuti e replicarli anche in questa pagina, chiaramente in base a quello che desiderate fare a livello di design però in ogni caso, per mostrare i vostri progetti di portfoglio all'interno di una determinata pagina, dovete utilizzare il chiamato appunto portfoglio.

Quindi andiamo alla ricerca dei e digitiamo portfoglio.

Lo trasciniamo internamente a questa colonna e andiamo a vedere quelle che sono le sue impostazioni.

Innanzitutto impostazione di come vedete già compare l'anteprima molto molto interessante.

Allora innanzitutto potete decidere quante colonne, quindi in questo caso io ho caricato tre progetti singoli a portfoglio potremmo provare magari a due se volete inserire qualcosa di più grande sì, sicuramente ci può stare.

Ovviamente dipende anche quanti elementi avete.

Poi potete decidere quanti post visualizzare per pagina e la dimensione dell'immagine.

Potete decidere medium large oppure assegnare direttamente la sua immagine originale.

Quindi l'immagine di quando la caricate potete utilizzare anche in percentuale il rapporto um dell'elemento quindi una percentuale che varia in base la dimensione dell'immagine.

Potete decidere se mostrare il titolo o meno al al lover in questo caso ovviamente sì, altrimenti non sarebbe troppo chiaro e il tag t m l del titolo in questo caso va benissimo h tre anche per la c o.

A questo punto alla voce query possiamo decidere quali progetti mostrare.

Mi spiego? Noi abbiamo creato um delle categorie, quindi possiamo decidere se mostrare una categoria piuttosto che un'altra e a questo punto alla voce sorgente vediamo quello che ci consente di fare alla voce sorgente.

Noi in realtà potremmo inserire vari contenuti.

Ad esempio, potremmo decidere di inserire i contenuti delle pagine una selezione manuale selezionando pagine singole, quelle relative a questa pagina.

In questo caso va benissimo articoli però Elemento vi dà anche altre possibilità.

Per quanto riguarda includi da possiamo aggiungere la voce termine e poi in questa voce che in questo campo che si apre.

Come vedete, le tassonomie disponibili sono categorie tag formati e tassonomie personalizzate.

Questo significa che qui noi possiamo digitare il nome delle categorie che abbiamo creato nella sezione degli articoli che vogliamo mostrare e noi in questa determinata pagina vogliamo mostrare le categorie dei nostri servizi.

Quindi sono social.

Andiamo a digitare consulenza social, poi sono Instagram ed infine sono data.

Quindi, come vedete, se la vostra necessità ed esigenza è quella di inserire solamente una categoria, l'importante è selezionare solo quella determinata categoria.

Altrimenti, se non mettete nessun termine in automatico, lui mostrerà tutti gli articoli del blog.

Se voi avete solo progetti a portfoglio, potete tranquillamente lasciarla a aperta e quindi mostrerà tutto il contenuto che il sistema trova nella voce articoli.

E poi ci sono delle impostazioni per l'ordine.

Ad esempio, se la volete ordinare per data um um e quant'altro, poi la barra del filtro e questa è un'altra, cosa molto interessante a mio avviso, dove potete aggiungere il filtro per categorie, si apre questa voce che ovviamente deve essere attivata su on e poi potete decidere per cosa filtrare in questo caso per categorie.

Infatti come vedete se io vado a cliccare nella rispettiva categoria il sistema filtra tutto in automatico e questa è la funzione molto, molto interessante.

Intanto aggiorno la pagina e poi andiamo a vedere la tv dello stile.

Quindi in questa sezione di contenuto layout abbiamo definito cosa e come mostrare e abbiamo aggiunto una barra di filtro.

Ora alla tav stile possiamo decidere la distanza tra le colonne, quindi se volete una spazzatura volete tenerlo attaccato, magari mettiamo dieci pixel distanza tra le righe, quindi sopra e sotto.

Ovviamente per avere una situazione il più preciso possibile uniforme andrò a inserire la stessa misura in pixel, poi il raggio del bordo.

Se volete mettere un raggio del bordo alle vostre immagini, ad esempio dieci potremmo fare a otto.

Diciamo che lo stile del sito è stato um configurato con questi bordi tondeggianti, quindi potrebbe starci sicuramente il il bordo leggermente tondeggiante.

Sovrapposizione elemento andiamo a vedere il colore.

Come vedete, cambia.

Mi piace molto questo effetto, chiaramente anche questo lo andrete a personalizzare in base alle vostre preferenze, se volete, se volete dentro le mentore, c'è anche la possibilità ogni volta che inserite un colore di inserire una leggera trasparenza, infatti c'è questo controller sotto che vi consente di modificare la trasparenza.

Io avevo impostato all'inizio un il mio colore blu in risalto, però se volete mostrare um mi sono perso eccoci qua se volete mostrare la un'analisi della trasparenza l'importante è ridurre questa voce e come vedete si vede anche l'immagine sottostante.

È molto, molto interessante anche questo risultato.

Magari potremmo portarlo a questa percentuale in modo tale da avere un effetto vedo non vedo con l'immagine sottostante.

Poi ovviamente il colore del del titolo lo lascerei sicuramente bianco, però magari lo potrei fare un po' più grande sicuramente aumenterei un po' il peso magari potremmo farlo a settecento e anche più grande, magari non cinquanta però magari quaranta okay, possiamo uscire da qui e ci sono anche delle impostazioni per modificare la barra del filtro, come ad esempio il colore.

Potremmo lasciarlo blu oppure anche nero no, lasciamolo nero.

Colore di default che abbiamo usato per i testi.

Ma quando è attivo, lo mettiamo blu.

Infatti, come vedete, ogni volta che è attiva una categoria si colora di blu.

Ovviamente anche qui possiamo modificare la categoria.

Forse lo farei leggermente più grande.

No, diciamo venti pixel ci può stare.

Per quanto riguarda il peso, direi di lasciarlo su un regular.

Quattrocento.

E va più che bene.

Poi possiamo modificare la spazzatura, quindi magari aumentandola e del resto ci siamo, più o meno.

Aggiorniamo la pagina e andiamo a vedere in front end come si comporta il mio nuovo portafoglio L'ultima.

Cosa? Um ho lasciato la la voce del portfoglio di default.

Però ovviamente, come abbiamo visto in altre lezioni andando alla voce impostazioni nascondi titolo Sì, potete tranquillamente eliminarla.

Ripeto qui chiaramente voi in base alle vostre impostazioni di wireframe di design, potete inserire sopra o sotto tutto quello che volete.

Questo è per mostrarvi come aggiungere e gestire questo.

Quindi l'importante l'obiettivo di questa lezione era mostrare all'interno della pagina portfoglio i singoli progetti di portfoglio.

Poi tutto quello che potete personalizzare sopra lo vedrete voi nel dettaglio, quindi potete aggiungere una reception personalizzata un'immagine dei pulsanti delle line.

Insomma, tutto quello che volete il funzionamento molto, molto interessante funziona bene.

Quindi anche questa cosa, questa di filtro, che tra le altre cose è stata introdotta da poco da elemento, consente di filtrare, specialmente nel caso in cui ci siano molti molti progetti nel portfoglio.

Controlliamo se funziona il singolo progetto.

In questo caso apriamo questo nome cliente X.

Come vedete viene riportato il nome del cliente.

Abbiamo inserito il logo.

Questa è tutta la sezione customizzata all'interno delle mentore e poi viene riportata la, ovvero presente all'interno di ogni singolo del portfolio.