Hai mai desiderato scorrere un'immagine lunga da un portfolio sul tuo sito web WordPress con Elementor ?

Bene, in questo articolo ti diremo come farlo occupando un piccolo spazio. Insomma nel video qui sotto scoprite questo concetto.

Come scorrere un'immagine lunga in un portfolio

Nota che per seguire questo tutorial dovrai catturare un'intera pagina web e per farlo puoi usare Estensione cromata GoFullPage e per la selezione dei colori sugli oggetti della pagina installatore Estensione ColorZilla.

Nota: La sezione CSS personalizzato è disponibile solo su Elementor Pro. Aggiorna la tua versione di Elementor alla versione Pro o per saperne di più scopri le differenze tra Elementor Free ed Elementor Pro.

Ora creiamo una nuova pagina e poi modifichiamola con Elementor Costruttore. Scegliamo un layout a tre colonne. Selezionare Nessuna deviazione sull'opzione Spazio tra le colonne e poi imposta l'opzione Hauteur su Altezza minima e lascialo acceso 400px

Come scorrere un'immagine lunga in un portfolio

Fare clic sul pulsante più nella colonna centrale e nell'elenco dei widget seleziona il widget Sezione interna e rilascialo in questa colonna

Come scorrere un'immagine lunga in un portfolio

Elimina una delle sezioni interne per lasciarne solo una.

Come scorrere un'immagine lunga in un portfolio

Fai di nuovo clic sul pulsante Plus e seleziona il file Widget immagine che inserirai nella sezione interna.

Leggi anche la nostra guida su Come ottimizzare il layout del tuo sito web con Elementor

In opzione dimensione immagine selezionare Totale e Inserisci un'immagine che hai precedentemente caricato. Quest'ultimo apparirà interamente nell'area di editing di Elementor

Come scorrere un'immagine lunga di un portfolio con Elementor
La prima fase di questo tutorial è completa. Per continuare con questa seconda fase, devi avere la versione pro di Elementor perché inseriremo CSS personalizzati qui.

Useremo 2 frammenti di CSS

Il primo CSS ci permette di nascondere l'overflow

selettore {
altezza: 400px;
overflow-y: scroll!importante;
overflow-x: nascosto!importante;
}

Il secondo CSS ti permette di personalizzare la barra di scorrimento

selettore :: - webkit-scrollbar {
larghezza: 4px;
sfondo: # 777777;
}
selettore :: - webkit-scrollbar-thumb {
fondo: giallo;
}

Seleziona il widget Sezione interna della colonna centrale e fare clic sulla scheda avanzato quindi inserisci il primo CSS nel menu CSS personalizzato

Come scorrere un'immagine lunga in un portfolio

Va notato che abbiamo richiamato l'ispettore solo per selezionare facilmente la sezione interna.

Spiegheremo ogni riga di questo frammento CSS

  • selettore {: Consente di selezionare l'area espositiva della nostra sezione interna
  • altezza: 400px; : Definisce l'altezza della sezione interna
  • overflow-y: scroll!importante; : Visualizza la barra di scorrimento verticale
  • overflow-x: nascosto!importante; : Nasconde la barra di scorrimento orizzontale

Ma vedrai che la barra di scorrimento che appare non è abbastanza intuitiva, quindi useremo il secondo CSS per personalizzarlo.

Dai un'occhiata anche al nostro tutorial su Come creare un corso online con Tutor LMS ed Elementor

Copiamo il secondo frammento dal CSS e incolliamo sotto il primo codice in CSS doganale

Come scorrere un'immagine lunga in un portfolio

In questo momento, il nostro sidebar sembra più carino e si fonde bene con il design della pagina.

Spiegheremo questo codice.

  • /*Personalizza l'aspetto della barra di scorrimento*/
  • selettore :: - barra di scorrimento webkit : consente di selezionare la barra di scorrimento visualizzata di default.
  • larghezza: 4px; : permette di dare una larghezza alla tua barra laterale puoi modificare questo valore a tuo piacimento
  • sfondo: # 777777; : ti permette di dare un colore di sfondo alla tua barra laterale. il codice #777777 corrisponde al colore grigio
  • selettore :: - webkit-scrollbar-thumb : seleziona l'area di scorrimento
  • fondo: giallo; : Visualizza questa area di scorrimento in giallo; colore che è possibile modificare in modo che corrisponda al colore dell'accento della pagina.

Leggi anche: Come visualizzare la data dell'ultimo aggiornamento in Elementor

Ora duplichiamo questa sezione interna copiando e incollando questa sezione nelle altre colonne

Come scorrere un'immagine lunga in un portfolio

Ora che la nostra immagine è stata duplicata su tutte e 3 le colonne. Quello che resta da fare è cambiare le immagini delle altre 2 colonne.

Come scorrere un'immagine lunga in un portfolio

Cambiamo il colore della barra di navigazione. Per farlo basta cambiare il colore Giallo nel secondo CSS nel colore che vuoi - verde, blu, rosso, #878888, ecc….

E se visualizzi in anteprima il tuo lavoro, dovresti ottenere qualcosa che assomiglia a questo:

scorri una lunga immagine di un portfolio Elementor

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo tutorial che ti mostra come scorrere un'immagine lunga di un portfolio in Elementor. Se hai dubbi su come arrivarci, faccelo sapere nel commentaires.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...