Come visualizzare le immagini in WordPress con Elementor: i modi creativi

Non è un segreto che le immagini siano una componente importante di qualsiasi sito web. Migliora l’attrattiva visiva del sito Web e il coinvolgimento. In WordPress, inserire immagini nei tuoi post e nelle tue pagine è abbastanza semplice. 

Un modo per mostrare le immagini è semplicemente aggiungere contenuti multimediali nell'editor classico. Un altro modo è utilizzare i blocchi Immagine nell'editor Gutenberg. In entrambi i casi, gli stili sono predefiniti nel tema.

Tuttavia, Elementor offre flessibilità nella visualizzazione delle immagini in WordPress. Offre una varietà di modi creativi per visualizzare le immagini sul tuo sito web. Ancora più importante, ogni elemento dell'immagine è personalizzabile individualmente.

Utilizzando elementi come Scatole di immagini, Gallerie di immagini, Mascheramento delle immagini
puoi creare sezioni di immagini dall'aspetto straordinario.

Con un po' di creatività e attenzione ai dettagli, puoi far risaltare il tuo sito web dalla massa utilizzando questi elementi.

Questo articolo ti guiderà su come visualizzare le immagini in WordPress con Elementor per progettare un'interfaccia intuitiva e facile da usare per la visualizzazione delle immagini sul tuo sito web.

Perché le immagini sono importanti per i tuoi contenuti web

Quando vediamo un'immagine, il cervello umano inizia automaticamente ad analizzare e classificare le informazioni visive che riceve, senza uno sforzo cosciente. Questo processo rende il contenuto più facile da ricordare e richiamare.

Inoltre, le immagini possono rendere i tuoi contenuti più coinvolgenti e accattivanti per i visitatori migliorando l'attrattiva visiva di un sito web. 

Ecco alcuni motivi per cui le immagini sono importanti per i contenuti web:

• Cattura facilmente l'attenzione: Le immagini possono essere utilizzate per attirare l'attenzione di un visitatore e attirarlo nei tuoi contenuti. Ciò è particolarmente importante per i siti Web che mirano a vendere prodotti o servizi.
• Trasmetti rapidamente le informazioni: A volte un'immagine può comunicare informazioni in modo più rapido ed efficace rispetto al testo. Ad esempio, un’infografica può trasmettere in modo semplice informazioni complesse.
• Rompe la monotonia: Grandi blocchi di testo possono essere noiosi e monotoni da leggere. Le immagini possono aiutare a suddividere il testo lungo e riportare l'attenzione sui tuoi contenuti.
• Lascia un segno indelebile nella memoria: Il cervello umano può elaborare le informazioni visive molto più velocemente delle informazioni testuali o verbali e può conservarle per un lungo periodo.
• Rende i tuoi contenuti più condivisibili: Le piattaforme di social media come Facebook e Instagram sono altamente visive e le foto sono spesso più condivisibili del solo testo. Includendo immagini di alta qualità sul tuo sito web, puoi aumentare le probabilità che i visitatori condividano i tuoi contenuti sui social media.
• Consapevolezza del marchio: Le immagini possono aiutarti a migliorare il tuo marchio presentando il tuo logo o altri elementi visivi associati al tuo marchio.

Come aggiungere immagini in WordPress (metodo base)

Il modo più semplice per mostrare le immagini su WordPress è aggiungere un'immagine alla libreria multimediale e visualizzarla con stili predefiniti.

Per aggiungere un'immagine alla libreria multimediale di WordPress:

Accedi al tuo WordPress, vai a Multimedia > Aggiungi nuovoe seleziona l'immagine dal tuo computer per caricarla nel catalogo multimediale.

Ora, la visualizzazione delle immagini su WordPress dipende dall'editor predefinito che stai utilizzando.

Redattore di Gutenberg:

Nell'impostazione predefinita di WordPress Gutenberg alias editor di blocchi, puoi mostrare le immagini utilizzando i blocchi immagine. Per questo, apri l'editor e aggiungi il blocco immagine nella posizione desiderata per visualizzare l'immagine. Quindi carica o seleziona un'immagine dal catalogo multimediale.

Redattore classico:

Se utilizzi un vecchio editor classico, apri una pagina o un post nell'editor, quindi posiziona il cursore del mouse sul post/pagina in cui desideri visualizzare l'immagine. Successivamente fai clic sul pulsante Aggiungi media e seleziona un'immagine dal catalogo multimediale.

Come visualizzare le immagini in WordPress utilizzando Elementor (metodi avanzati)

Ora, se desideri modi più avanzati per visualizzare gli elementi visivi, puoi passare al generatore di pagine Elementor. Con Elementor puoi utilizzare i widget di immagini per mostrare le immagini del sito Web in modo creativo. 

Portando le cose al livello successivo, il componente aggiuntivo ElementsKit Elementor viene fornito con una serie di widget che ti consentono di visualizzare immagini con stile con le funzionalità più personalizzabili. ElementsKit viene fornito con widget come Elementor Image Box, Galleria immagini, Scambio immagini e così via. Questi widget ti offrono diverse opzioni per esporre le immagini con stile. 

Di seguito è riportata una dimostrazione di come utilizzare questi widget per visualizzare immagini su WordPress e rendere il tuo sito più vivace.

Installa ElementsKit

Per utilizzare le funzionalità avanzate delle immagini, devi installare i plugin ElementsKit Lite ed ElementsKit Pro sul tuo sito WordPress.

Ecco la documentazione per installare i plugin ElementsKit

Dopo aver installato i plugin, puoi procedere con i widget per visualizzare le immagini su WordPress.

Metodo 1: mostra le immagini in un'elegante casella di immagini

Utilizzando il widget ElementsKit Image Box, puoi evidenziare una sezione con una combinazione di immagine e testo. Ti consente di mostrare un'immagine con testo come un titolo e una descrizione. Questi stili vengono spesso utilizzati per evidenziare un prodotto, un servizio o una funzionalità di punta.

Per utilizzare la funzione: abilita il widget Image Box da ElementsKit > Widget

Ecco come utilizzare il widget ElementsKit Image Box per Elementor:

Immagine

Nella sezione immagine, puoi personalizzare l'immagine e il suo aspetto.

1. Scegli l'immagine: Seleziona un'immagine dal catalogo multimediale o caricane una.
2. Dimensione dell'immagine: Imposta la dimensione dell'immagine.
3. Area del contenuto: Puoi scegliere lo stile dell'area del contenuto tra le opzioni fornite.
4. Uguale altezza: Abilita o disabilita la stessa altezza per l'immagine e l'area del contenuto.
5. Abilita collegamento: Puoi utilizzare l'immagine come sezione di ancoraggio abilitando il collegamento. Quando abilitato, aggiungi il collegamento all'immagine.

Corpo

Nella sezione del corpo, puoi aggiungere tutto il testo alla casella dell'immagine di Elementor. Ciò include un'intestazione, una descrizione, un tag HTML del titolo e un allineamento del testo.

1. Titolo: Aggiungi il testo dell'intestazione in questo campo.
2. Tag HTML del titolo: Seleziona il tag HTML che desideri per l'intestazione (H1, H2, H3, div, span, paragrafo, ecc.)
3. Descrizione: In questo campo aggiungi una breve descrizione del contenuto.
4. Allineamento: Imposta l'allineamento del testo per l'immagine, l'intestazione, la descrizione e il pulsante.

Pulsante

Hai la possibilità di aggiungere un pulsante CTA nella casella dell'immagine di Elementor. Per quello,

1. Pulsante Abilita: Per aggiungere un pulsante alla casella dell'immagine, abilita questa opzione.
2. Etichetta: Aggiungi un'etichetta del pulsante (testo) che indichi lo scopo della CTA.
3. URL: Inserisci il collegamento alla pagina a cui desideri reindirizzare il visitatore dopo aver fatto clic.
4. Aggiungi icona: Se vuoi mostrare un'icona con l'etichetta del pulsante, abilita questa funzione.
5. Icona: Scegli un'icona dalla libreria di icone di Elementor.
6. Posizione dell'icona: Seleziona se l'icona sarà prima o dopo il testo del pulsante.

Successivamente, nella scheda Stile, puoi personalizzare l'aspetto della casella immagine Elementor inclusi i colori, lo sfondo, la tipografia e così via.

Nel Curve classiche sezione, è possibile regolare la larghezza e il margine dell'area del contenuto. Quindi modella l'immagine modificando il riempimento e l'opacità. 

Inoltre, puoi personalizzare l'aspetto del testo dell'intestazione e della descrizione modificando il colore, la tipografia, il colore dello sfondo e così via. Inoltre, personalizza gli stili dei pulsanti e la relativa icona con i loro attributi.

Guarda il video per avere una conoscenza più dettagliata del widget ElementsKit Image Box.

Metodo 2: visualizza due immagini con animazioni di scambio

Lo scambio di immagini è un modo elegante per mostrare due immagini alternative in un unico posto che si scambiano quando i visitatori passano il mouse o fanno clic sull'immagine. Il widget ElementsKit Image Swap include un paio di dozzine di effetti sorprendenti che rendono il tuo sito web ancora più accattivante dal punto di vista visivo.

Puoi utilizzare questa funzionalità ad esempio utilizzando la prima immagine come immagine di copertina che attira l'attenzione e la seconda immagine per fornire le informazioni necessarie.

Per utilizzare la funzione: abilita il widget Scambio immagini da ElementsKit > Widget

Ecco come utilizzare il widget ElementsKit Image Swap per Elementor:

1. Immagine frontale: Questa è l'immagine che appare per impostazione predefinita quando la pagina viene caricata nel browser web.
2. Immagine posteriore: questa è l'immagine che appare quando viene eseguita l'azione, ovvero un visitatore passa il mouse o fa clic sull'immagine.
3. Dimensione dell'immagine: Imposta la dimensione dell'immagine per entrambe le immagini.
4. Stile di scambio: Hai 21 diversi effetti di scambio disponibili con il widget ElementsKit Image Swap, che può aiutarti a rendere il tuo web design più attraente per i visitatori.

5. Tigro: Qui puoi scegliere tra l'azione Passa il mouse o Fai clic per attivare le immagini di scambio.
6. Indicatori: Funziona come un navigatore, che indica quale immagine è nello show e quale è lo sfondo.
7. Collegamento: Se lo desideri, puoi collegare le immagini a una pagina.

Nella scheda Stile, puoi regolare l'altezza dell'immagine e la durata dell'animazione di scambio. E se abiliti l'indicatore, puoi cambiare la loro posizione e personalizzarne dimensioni e colori.

Metodo 3: dai forme uniche alle immagini del sito web con il mascheramento delle immagini

Questo è un modo unico per rendere vivace il tuo sito web con immagini dalla forma unica. Le funzionalità di mascheramento delle immagini trasformano le immagini dalla forma tradizionale in immagini più accattivanti. In WordPress, il mascheramento è abbastanza semplice con Elementor.

ElementsKit per Elementor viene fornito con un modulo di mascheramento per le immagini. Il modulo è disponibile per qualsiasi elemento di Elementor che coinvolga un'immagine. Nell'editor di Elementor, abilitare il mascheramento ElementsKit e seleziona una forma tra quelle precaricate. Puoi anche aggiungere una forma personalizzata alle immagini.

Metodo 4: mostra le immagini in una galleria

Elementor offre un ottimo modo per mostrare più immagini in un'elegante galleria. Il widget Galleria di base di Elemntor funziona con un approccio tradizionale in cui puoi aggiungere immagini, impostare la dimensione dell'immagine e personalizzare elementi di base come la spaziatura e i bordi dell'immagine.

Tuttavia, il widget Galleria immagini ElementsKit include opzioni più flessibili. Con il widget puoi personalizzare il layout con descrizioni, aggiungere filtri alla galleria e individualmente ogni aspetto della miniatura, della sovrapposizione, dell'immagine e dei filtri.

Scopri di più sul widget Galleria immagini e su come può migliorare il design del tuo sito web dal nostro blog.

Incartare

Nel complesso, Elementor offre diversi modi per visualizzare le immagini in WordPress. Per ottenere il massimo dalle capacità di Elementor, ElementsKit può essere un'ottima aggiunta.

ElementsKit ha diversi modi e stili: casella immagine per mostrare un'immagine con un titolo e una descrizione; Scambio immagine per visualizzare alternativamente due immagini; Inoltre, ci sono i widget Galleria immagini e Mascheratura immagini per darti più opzioni.

Ciascuno di questi elementi offre funzionalità uniche e opzioni di personalizzazione, consentendoti di creare contenuti accattivanti e visivamente accattivanti per il tuo sito web.

Se lo trovi utile, ce ne sono altri per te con ElementsKit. Questo Componenti aggiuntivi di Elementor viene fornito con decine di elementi in più che possono aiutarti a creare e progettare un sito Web con il maggior numero di funzionalità e opzioni.