Come aggiungere una casella immagine in WordPress: 3 semplici passaggi 

Vuoi far risaltare visivamente le tue pagine WordPress? Quindi, le caselle di immagine sono l'elemento segreto.

Puoi mostrare prodotti, evidenziare i membri del team o attirare l'attenzione del cliente sulle funzionalità chiave con la casella immagine in WordPress. 

E hai indovinato!

In questo articolo, descriveremo il Guida in 3 passaggi su come aggiungere una casella immagine in WordPress.

Cominciamo!

Cos'è una Image Box in WordPress? 

Una casella immagine è un elemento grafico o un contenitore progettato per visualizzare immagini all'interno di una pagina Web o di un post. Puoi combinare testo e collegamenti con foto per presentare le informazioni in modo accattivante e visivamente accattivante. È anche utile migliorare il design complessivo e l'esperienza utente di un sito Web WordPress.

I riquadri immagine sono comunemente utilizzati nelle pagine Web per creare sezioni come:

• Evidenziare le caratteristiche o i servizi principali
• Presentazione di post di blog o portfolio
• Visualizzazione delle immagini e gallerie di prodotti
• Mettere in mostra i membri del team 
• Visualizzazione di testimonianze e così via.

Componenti chiave dell'Image Box di WordPress

• Immagine: L'elemento visivo principale, che spesso mostra un prodotto, un servizio, un membro del team o un concetto correlato.
• Titolo: Un'intestazione breve e descrittiva che cattura l'essenza dell'immagine e del testo di accompagnamento.
• Testo: Una breve descrizione o un frammento di informazioni per fornire contesto e dettagli.
• Pulsante/Link: Un pulsante o un collegamento cliccabile per indirizzare gli utenti verso una pagina, un prodotto o altre risorse pertinenti.

Come aggiungere una casella immagine in WordPress: guida in 3 passaggi 

Le caselle di immagine possono trasformare le tue pagine WordPress in capolavori visivamente sbalorditivi. Inoltre affascina il tuo pubblico e lascia un'impressione duratura.

Vediamo come creare una casella immagine in WordPress in soli 3 semplici passaggi:

Passaggio 1: installa e attiva i plugin necessari

Per aggiungere una casella immagine al tuo sito WordPress, puoi utilizzare il codice liquido o i plugin Elementor. In tal caso, l'utilizzo dei plug-in è un modo conveniente per creare e aggiungere riquadri di immagini senza nemmeno conoscere la codifica. 

Quindi, puoi fare un Componente aggiuntivo Elementor tutto in uno: ElementsKit. Questo fantastico plugin offre funzionalità estese e modelli già pronti per aggiungere immagini al tuo sito Web WordPress. Inoltre, il design della casella immagine e tutti gli elementi della casella immagine ElementsKit sono completamente personalizzabili.

Per installare il plug-in della casella immagine ElementsKit, vai alla dashboard di WordPress.

• Navigare verso Plugin ➡ Aggiungi nuovo 
• Cercare “Kit Elementi” 
• Clicca su "Installa ora"
• Oppure scarica e carica il file file zip
• Attiva il plugin una volta installato

Passaggio 2: aggiungi la casella immagine al tuo sito WordPress

Dopo aver installato e attivato il plug-in Image Box di WordPress, ad esempio ElementsKit, puoi utilizzarlo modelli predefiniti. Questi modelli sono facili da usare con un solo clic. Inoltre, puoi aggiungere/rimuovere elementi in base alle tue esigenze. 

Vediamo come aggiungere immagini in wordpress utilizzando il file Casella immagine ElementsKit: 

• Crea una nuova pagina/post o aprine uno esistente 
• Apri con Elementor 
• Clicca sul Icona “ElementsKit”. 

• Successivamente, devi selezionare il widget della casella immagine dal file Categoria widget ElementsKit 
• Clicca su “Riquadro immagine”

• Qui puoi accedere 11 gratuiti e 8 di design e stile premium variazioni; un totale di 19 modelli diversi per aggiungere una casella immagine al sito WordPress
• Puoi vedere il anteprime di tutti i modelli per comprendere il design e gli elementi che corrispondono al tuo sito web
• Clicca sul segno più (+) per vedere l'anteprima dal vivo 

• Dopo aver finalizzato il progetto, fare clic su "Inserire"
• Verrà aggiunto alla tua pagina/post 
• Ora puoi aggiungere/rimuovere o modificare il contenuto, gli stili e altre proprietà della casella immagine
• Dopo tutta la personalizzazione, fare clic su "Pubblicare". E la casella dell'immagine sarà attiva sul tuo sito Web WordPress.

Passaggio 3: personalizza gli stili e le impostazioni 

ElementsKit, un eccellente componente aggiuntivo per Elementor è un plugin completamente personalizzabile in quanto gli utenti possono utilizzarlo Oltre 85 widget e moduli. Come altri elementi, anche il widget della casella immagine è personalizzato in base alle tue esigenze. 

Puoi modificare i titoli e il contenuto del corpo. Ancora una volta, puoi modificare gli stili delle immagini e dei pulsanti di invito all'azione. Inoltre, puoi personalizzare le caselle immagine con numerosi effetti e formati.

Vediamo come personalizzare una casella immagine in WordPress: 

Personalizzazione del layout

Dopo aver inserito i modelli di caselle di immagini predefinite di ElementsKit in WordPress, puoi modificarne il layout. 

• Aumenta o diminuisci la larghezza della casella immagine
• Imposta lo spazio tra le colonne come stretto, esteso, largo, personalizzato o senza spazio
• Regola l'altezza e l'allineamento della casella dell'immagine 
• Mantieni l'overflow predefinito o nascosto 
• Utilizza tag HTML, ad esempio intestazione, piè di pagina, principale, articolo, ecc.

Personalizzazione dei contenuti

La casella Immagine in WordPress contiene contenuti diversi per diversi elementi come intestazioni, immagini, pulsanti, ecc. È possibile modificare il testo e modificarne le proprietà.

Vediamo come personalizzare il contenuto della casella immagine ElementsKit in WordPress. 

✨ Titolo 

• Modificare i titoli del titolo e dei sottotitoli 
• Inserisci collegamenti con il titolo
• Nascondi/mostra il bordo con la posizione iniziale/finale 
• Aggiungi/mostra o nascondi la descrizione del titolo 
• Aggiungi separatori con vari stili e posizioni 

✨ Immagine 

• Cambia l'immagine o aggiungi immagini generate dall'intelligenza artificiale
• Regola la dimensione dell'immagine, ad esempio intera, media, grande, personalizzata, ecc
• Imposta l'area del contenuto come una linea d'ombra semplice, classica, ecc
• Abilita/disabilita la stessa altezza 
• Inserisci l'URL per collegare un'altra risorsa 

✨Corpo 

• Aggiungi/rimuovi o modifica il testo del titolo
• Modifica il tag HTML del titolo
• Regola l'allineamento del titolo a sinistra, a destra o al centro 

✨Pulsante

• Abilita o disabilita il pulsante creativo
• Aggiungi testo personalizzato all'etichetta del pulsante 
• Aggiungi URL personalizzato
• Aggiungi/rimuovi l'icona e imposta il pistone 

Personalizzazione dello stile 

Con layout e contenuto, puoi anche modificare i loro stili. Di conseguenza, puoi creare diversi tipi di riquadri immagine adatti all’interfaccia utente del tuo sito WordPress e ad altre proprietà. 

✨Linea d'ombra 

• Scegli la linea d'ombra per sinistra o destra
• Imposta la larghezza personalizzata secondo necessità
• Personalizza il tipo e il colore dello sfondo dell'ombra 
• Imposta un'immagine di sfondo personalizzata 

✨ Immagine 

• Aggiungi raggio del bordo e imbottitura personalizzati 
• Regola l'opacità dell'immagine su normale o effetto passaggio del mouse 

✨Corpo 

• Scegli il tipo di bordo con border-radius
• Imposta immagine, tipo e colore di sfondo personalizzati 
• Regola l'imbottitura della casella e il colore dell'ombra della casella 
• Regola la tipografia, il colore e la spaziatura del titolo

✨Pulsante 

• Personalizza il valore di riempimento e la dimensione del carattere dell'icona 
• Cambia il testo del pulsante e il colore dello sfondo 
• Imposta le proprietà normali o al passaggio del mouse 
• Imposta il tipo di bordo, il raggio del bordo e l'ombra del riquadro 

Personalizzazione avanzata 

La casella immagine ElementsKit è flessibile per utilizzare funzionalità di personalizzazione avanzate. Aiuta a rendere la tua casella di immagine più elegante e accattivante. Puoi anche integrarne vari effetti di movimento e codici personalizzati per abbinare la casella dell'immagine alla particolare pagina web del tuo sito web.

Troverai le opzioni di personalizzazione nelle impostazioni avanzate:

• Modifica il riempimento, il margine, la larghezza, la posizione e l'indice z del layout della casella immagine
• Aggiungi effetti di movimento per gli elementi (ad esempio dissolvenza in apertura, dissolvenza in chiusura, rimbalzo, zoom in alto, scorrimento a sinistra, ecc.)
• Personalizza la reattività della casella immagine in base a dispositivi come PC, tablet e dispositivi mobili 
• Imposta attributi e proprietà da nascondere/mostrare in vari dispositivi 
• Includi CSS personalizzati per ulteriori modifiche alle funzionalità 

Vantaggi dell'aggiunta di Image Box in WordPress

• Migliora l'attrattiva visiva: Una casella di immagine accattivante suddivide i contenuti ricchi di testo. Inoltre, rende le pagine visivamente più accattivanti e più facili da scansionare.
• Evidenzia le informazioni principali: Puoi evidenziare messaggi, funzionalità o inviti all'azione importanti.
• Migliora il coinvolgimento degli utenti: Utilizzando gli elementi della casella di immagine in WordPress, puoi anche creare esperienze visivamente accattivanti. Può mantenere gli utenti interessati ed esplorare i tuoi contenuti.
• Aumentare la percentuale di clic: Riquadri di immagini con inviti all'azione (CTA) chiari possono incoraggiare gli utenti a fare clic e saperne di più.
• Informazioni sulla struttura: Puoi organizzare i contenuti in sezioni logiche e migliorare la leggibilità con la navigazione.

5 suggerimenti per aggiungere una casella immagine in WordPress 

L'aggiunta di una casella immagine al tuo sito Web WordPress rende efficacemente i tuoi contenuti più coinvolgenti e informativi. 

Esploriamo 5 consigli per renderlo più efficiente e accattivante elemento sul tuo sito:

1. Ottimizza le dimensioni delle immagini

Utilizza strumenti come TinyPNG o plugin di ottimizzazione delle immagini per ridurre le dimensioni dei file immagine senza compromettere la qualità. Ciò migliora significativamente la velocità di caricamento della pagina.

2. Mantenere la coerenza

Utilizza immagini con uno stile, una tavolozza di colori e proporzioni coerenti per creare un'esperienza visiva coerente. Inoltre, assicurati che le caselle delle immagini siano allineate con gli altri elementi della pagina per un aspetto raffinato.

3. Utilizza testo alternativo descrittivo

Fornisci un testo alternativo descrittivo per ogni immagine. Ciò aiuta gli screen reader a descrivere le immagini per gli utenti ipovedenti e migliora la visibilità sui motori di ricerca.

4. Considera la reattività mobile

Controlla che le caselle delle immagini vengano visualizzate correttamente su schermi di varie dimensioni, in particolare sui dispositivi mobili. Utilizza tecniche o plug-in di progettazione reattiva per garantire un adattamento senza interruzioni.

5. Collegamento strategico (se applicabile)

Collega le caselle di immagini a contenuti pertinenti o pagine di destinazione per guidare gli utenti e incoraggiare le azioni desiderate.

Buono a sapersi 👉 Come applicare il mascheramento delle immagini Elementor in 4 semplici passaggi con ElementsKit

Domande frequenti

Avvolgetelo

Per decorare i tuoi siti Web WordPress con immagini, niente può essere più accattivante e informativo della casella di immagini ElementsKit.

Qui abbiamo fornito una guida passo passo su come farlo aggiungi una casella immagine al tuo sito WordPress senza sforzo. Inoltre, abbiamo mostrato come utilizzare il file Plug-in ElementsKit Elementor per un maggiore impatto e sperimenta diversi stili e layout di caselle di immagine. 

Quindi, il potere delle immagini è ora a portata di mano: usalo in modo efficiente e fai brillare davvero i tuoi contenuti! 🥳