Nello scorsa lezione abbiamo visto come procedere per la creazione delle pagine interne di un sito Web utilizzando WordPress ed Elementor. Nella quarta lezione della guida, ci siamo addentrati nel cuore del sito, concentrando l'attenzione sulla realizzazione delle prime pagine.
Dopo aver stabilito una solida base con la Home Page, abbiamo imparato ad arricchire queste pagine con contenuti utilizzando Elementor. Uno strumento di progettazione visiva potente e flessibile.
Abbiamo poi esplorato tecniche per inserire testi, immagini e altri elementi con cui rendere le pagine accattivanti e informative.
Siamo quindi pronti per entrare nel vivo di questa quinta lezione nella quale approfondiremo la pagina "Portfolio" e vedremo come sia possibile creare una galleria dedicata con l'utilizzo di filtri per visualizzare le diverse categorie.
Cos'è un sito Portfolio?
Un sito portfolio può essere utilizzato per mostrare una vasta gamma di lavori e attività, non solo nel campo delle arti e del design ma anche in altri settori professionali come l'architettura, l'ingegneria, lo sviluppo software e così via. Questo tipo di sito Web viene progettato in genere per presentare in modo dettagliato e visivamente accattivante le prestazioni d'opera effettuate, inclusi i dettagli tecnici, le sfide superate e i risultati ottenuti.
Un sito portfolio utilizzato per mostrare ciò su cui si è lavorato può essere particolarmente utile per professionisti freelance, agenzie di consulenza e imprese che cercano di dimostrare la propria esperienza e competenza nel settore di attività.
In questa guida abbiamo realizzato un sito web completo, dedicato non solo al portfolio, daremo quindi a questa nuova sezione il valore che merita. Già all'interno della Home Page avevamo creato una sezione di anteprima collegata alla sezione "Portfolio". In questo modo fin dalla prima pagina del sito i visitatori possono farsi un'idea completa delle nostre capacità.
Una pagina Portfolio con Elementor
Passiamo ora alla creazione della pagina specifica. Raggiungiamo la dashboard di WordPress e modifichiamo la pagina "Portfolio" usando la voce "Modifica con Elementor".
A questo punto possiamo richiamare il template di pagina creato all'interno della scorsa lezione. Clicchiamo sull'icona della cartella per aprire l'elenco dei template.
Infine selezioniamo il nostro template personalizzato così da poter partire dall'impostazione generale che abbiamo creato anche per tutte le altre pagine.
A questo punto non rimane che modificare la pagina inserendo i contenuti inerenti alla nuova sezione
Uno slideshow interattivo
Cambiamo la fotografia di introduzione sostituendola con uno slideshow interattivo. Per fare questo dobbiamo prima di tutto eliminare la fotografia ed in seguito cliccare sopra i tre puntini della sezione che funge da contenitore.
In questo modo potremo accedere alle opzioni della sezione e decidere di inserire una galleria come sfondo della sezione. Andiamo all'interno della sezione "Stile" e selezioniamo come tipo di sfondo la tipologia "Slideshow".
Selezioniamo le immagini ed impostiamo inoltre l'altezza della sezione attraverso le impostazioni della sezione "Layout".
È possibile anche definire la tipologia di scorrimento delle immagini, le dimensioni delle frecce di navigazione e delle anteprime. Avendo aggiunto la galleria di immagini come sfondo della sezione contenitore possiamo inoltre trascinare gli elementi tipografici al suo interno per ottenere un risultato visivo migliore.
Happy Addons for Elementor
Proseguiamo ora creando la vera sezione "Portfolio" e per farlo utilizziamo un plugin aggiuntivo con cui inserire elementi a supporto di quelli già disponibili di default. Andiamo all’interno della sezione "Plugin" ed installiamo l'estensio0ne chiamata "Happy Addons for Elementor".
Happy Addons for Elementor è un plugin progettato per estendere le funzionalità di base di Elementor. Esso offre una serie di nuovi elementi e funzionalità che possono essere utilizzati per arricchire ulteriormente la progettazione e la personalizzazione dei siti Web.
Seguiamo la configurazione guidata ed andiamo all'interno delle impostazioni per attivare l'elemento aggiuntivo del quale abbiamo bisogno per la nostra sezione "Portfolio".
Ora torniamo nella nostra pagina e scorriamo all'interno della sidebar dove scopriremo essere comparsa una nuova sezione dedicata a questo nuovo plugin. Possiamo quindi selezionare ed inserire all'interno del nostro layout di pagina anche l'elemento "Justified Grid" che ha al suo interno diverse funzioni molto interessanti.
Il funzionamento è molto comodo ed intuitivo. Attraverso la sidebar è infatti possibile selezionare le immagini che saranno incluse nel nostro portfolio. Questo procedimento richiede l'inserimento manuale di un item alla volta o di gruppi di item in quanto per ogni immagine è possibile indicare una filter group, ovvero una categoria di appartenenza alla quale associarla.
Potremo quindi inserire un filtro che consentirà ai visitatori di scegliere quale categoria di immagini o progetti visualizzare.
Ovviamente è possibile personalizzare le immagini e i filtri in modo differente con lo scopo di offrire la migliore esperienza utente possibile.
