Come utilizzare il widget Immagine in Elementor

Hai bisogno di sapere come utilizzare il widget Immagine in Elementor?

Come dice il proverbio. " Un'immagine vale più di mille parole ". A volte è molto più facile trasmettere un messaggio tramite un'immagine.

Vale anche per il web design. È quasi impossibile progettare una pagina web senza coinvolgere un elemento immagine. Essendo uno strumento che enfatizza il design, Elementor ti consente di aggiungere facilmente un'immagine al tuo design fornendo il widget Immagine. Puoi semplicemente trascinare il widget Immagine nella casella di modifica per aggiungere un elemento immagine.

Non solo puoi aggiungere un'immagine statica, ma puoi anche aggiungere un'immagine dinamica in Elementor. Questa funzione (la possibilità di aggiungere un'immagine dinamica) è particolarmente utile per creare un modello personalizzato come un messaggio unico personalizzato, una pagina di categoria personalizzata, un'intestazione personalizzata, ecc... - utilizzando il generatore di temi di Elementor.

Il widget Immagine stesso è disponibile su entrambe le versioni di Elementor, ma per aggiungere un'immagine dinamica è necessario utilizzare la versione pro.

Come aggiungere un'immagine in Elementor

Prima di andare oltre, supponiamo che tu lo sappia già come usare Elementor. 

Nell'editor di Elementor, trascina semplicemente il widget Immagine dal pannello di sinistra alla casella di modifica, quindi fai clic sul selettore di immagini per selezionare l'immagine che desideri utilizzare.

Aggiunta di un'immagine dinamica

Per aggiungere un'immagine dinamica, puoi passare il mouse sul selettore di immagini, fare clic sull'icona del database e selezionare il tipo di immagine dinamica che desideri aggiungere dalle opzioni disponibili.

È quindi possibile fare clic sull'icona della chiave inglese per selezionare il salvataggio. Il fallback stesso è il contenuto predefinito da visualizzare quando il contenuto dinamico non è disponibile. In questo caso, Fallback è l'immagine predefinita da visualizzare quando Elementor non riesce a trovare l'immagine dinamica.

Personalizzazione dell'immagine

Per personalizzare l'immagine, puoi accedere la scheda Stile dal pannello delle impostazioni (pannello a sinistra). Prima di andare a la scheda Stile, puoi impostare la dimensione dell'immagine, l'allineamento dell'immagine e aggiungere un collegamento all'immagine nel blocco Immagine sotto la scheda Soddisfare. 

Leggi anche: Come gestire l'invio di moduli in Elementor

Sotto la scheda Stile, puoi impostare il raggio del bordo, applicare filtri CSS, impostare dimensioni personalizzate, opacità e applicare l'ombra dell'area.

• Definizione di dimensione personalizzata

Nel blocco Immagine sotto la scheda Soddisfare, puoi impostare la dimensione della tua immagine. Se vuoi impostare le dimensioni personalizzate, puoi semplicemente impostare il valore della larghezza e il valore dell'altezza sul blocco Immagine sous la scheda Stile. È possibile utilizzare l'unità percentuale, il pixel o la larghezza della finestra di visualizzazione (VW).

• Impostazione dell'opacità dell'immagine

Per impostare il livello di opacità dell'immagine, puoi semplicemente trascinare il cursore da Opzione opacità sotto la scheda Stile. Puoi inserire il livello di opacità da 0 a 1.

• Applicazione di filtri CSS

Se lo desideri, puoi applicare filtri CSS alla tua immagine per aggiungere alcuni effetti all'immagine. Ci sono 5 opzioni di filtro che puoi applicare: Sfocatura, Luminosità, Contrasto, Saturazione e Tonalità. Basta fare clic sull'icona della matita nell'opzione Filtri CSS e imposta i valori del filtro CSS desiderati trascinando i cursori.

• Definizione di confine

Per rendere la tua immagine più avvincente, puoi anche impostare i bordi. Per aggiungere il bordo, seleziona prima il tipo di bordo nell'opzione Tipo di confine. È quindi possibile impostare la larghezza del bordo, il colore del bordo e il raggio del bordo.

A proposito, il raggio del bordo è il livello di inclinazione degli angoli laterali dell'immagine (in alto a destra, in alto a sinistra, in basso a destra, in basso a sinistra). Più alto è il valore del raggio del bordo, più arrotondata sarà l'immagine.

 

• Applicare un'ombra a scatola

Per applicare un'ombra di scatola, puoi semplicemente fare clic sull'icona della matita nell'opzione Ombra di scatola. Seleziona il colore dell'ombra e imposta il valore di orientamento orizzontale, orientamento verticale, livello di sfocatura e livello di diffusione.

impostazioni avanzate

Per eseguire alcune impostazioni avanzate sull'immagine, è necessario aprire la scheda avanzato nel pannello delle impostazioni. Da esso, puoi definire cose come margine e padding, animazione di input, CSS personalizzato, ecc.

• Definire il margine e il padding

Per impostare il margine e il riempimento dell'immagine, è necessario aprire il blocco Avanzate.

• Applicazione di un'animazione di ingresso

Per rendere la tua immagine più convincente, puoi applicare l'animazione di input. Per farlo, puoi aprire il blocco Effetti di movimento. Da questo blocco puoi impostare gli effetti di scorrimento, l'effetto del mouse e l'opzione adesiva.

Per applicare un'animazione di input, tutto ciò che serve è lo stile di animazione di input nell'opzione Animazione d'ingresso.

• Aggiunta di CSS personalizzati

Se hai conoscenze CSS, puoi anche aggiungere CSS personalizzati al widget Immagine. Per aggiungere CSS personalizzati puoi semplicemente aprire il blocco CSS personalizzato e incolla il tuo codice CSS nel campo disponibile.

• Nascondi l'immagine su un certo tipo di dispositivo

In Elementor, puoi utilizzare un'impostazione diversa su un determinato widget per diversi tipi di dispositivi. Inoltre, puoi impostare la disattivazione di un widget su un determinato tipo di dispositivo.

Ad esempio, puoi disattivare il widget Immagine sul tablet. Per farlo, puoi aprire il blocco Responsive. Trascina i pulsanti per nascondere il widget su un determinato dispositivo.

• Definizione della posizione personalizzata

Quando aggiungi un'immagine in Elementor, la posizione predefinita è impostata su statica (Par défaut). Ci sono altre due opzioni di posizione che puoi impostare: fisso et assoluto.

- fisso: Se selezioni questa opzione, l'immagine verrà posizionata rispetto alla finestra di visualizzazione dell'utente

- assoluto : Se si seleziona questa opzione, l'immagine verrà posizionata assolutamente al primo genitore posizionato.

Per impostare la posizione personalizzata, puoi aprire il blocco posizionamento sotto la scheda Avanzate. Seleziona la posizione personalizzata che desideri impostare nell'opzione Posizione e impostare l'offset dell'orientamento orizzontale e dell'orientamento verticale.

In breve

L'immagine è una parte importante di un design. Puoi certamente progettare una pagina senza un'immagine, ma il tuo design sarà insipido. Puoi utilizzare il widget Immagine per aggiungere un elemento immagine al tuo design Elementor, che si tratti di un modello di design della pagina o di un tema.

Elementor ti consente di aggiungere sia un'immagine statica che dinamica (solo versione pro). Oltre al widget Immagine, c'è anche il widget Image Box per aggiungere un elemento immagine con il contenuto del testo. Quest'ultimo widget è più adatto per una determinata esigenza come la creazione di una sezione per i membri del team, una sezione dell'elenco delle funzionalità e altre sezioni che coinvolgono immagini e contenuti di testo.

Ottieni Elementor Pro ora!

2. Pan Zoom Image

Questo plugin ti consente di aggiungere facilmente la funzione di zoom pan per le immagini sul tuo blog WordPress tramite uno shortcode. Ad esempio, puoi integrarlo nel tuo articolo o nella tua pagina.

Come funzionalità, avrai tra le altre: lo zoom panoramico su una singola immagine o una galleria con immagini illimitate, la posizione della barra di controllo può essere in alto, a destra, in basso e a sinistra, il fondo del contenitore può essere scuro, chiaro e niente di tutto ciò; l'anteprima dal vivo nella dashboard, l'esempio di zoom panoramico multiplo sulla stessa pagina, ecc.

Scopri anche il nostro 5 utilizza shortcode per i plugin WordPress premium

Download | Demo | Web hosting

3. Automazione del marketing

Ce WordPress Plugin premium fornisce un'interfaccia utente semplice e flessibile, il cui scopo sarà quello di aiutarti a creare facilmente una potente newsletter sul tuo sito web. La sua flessibilità ti consentirà di gestire un'ampia gamma di eventi, condizioni e azioni, in modo da poter configurare facilmente la tua strategia di email marketing per inviarla, monitorarla e trarne profitto.

Le sue principali funzionalità sono: la possibilità di applicare logiche condizionali basate sulla reazione e sul comportamento dei visitatori, il tracciamento delle azioni dei visitatori del sito web, perfetto per tutti i programmi fedeltà, ottimo per strategie di marketing che puntano sulle ricompense, un cruscotto intuitivo, la segmentazione dei visitatori del sito web, la possibilità di fare sondaggi, notifiche sms e via e-mail, pop-up basati sul comportamento dei visitatori, banner pubblicitari basati sul comportamento dei visitatori e molto altro.

Download | Demo | Web hosting

• 10 WooCommerce plugin per creare una dinamica dei prezzi
• Come moderare i commenti in WordPress
• 6 plugin di WordPress per aggiungere Authorize.Net al tuo sito web
• Alcuni plugin WordPress per coinvolgere i visitatori