Come aggiungere un bordo intorno a un’immagine in WordPress (3 metodi semplici)

L’aggiunta di un bordo alle immagini in WordPress può fare una grande differenza nell’aspetto del blog.

Ad esempio, in WPBeginner usiamo spesso i bordi per separare le immagini dallo sfondo bianco, facendole risaltare.

Per fortuna, non è necessario essere un mago della tecnologia per disegnare bordi eleganti intorno alle immagini.

In questa guida vi mostreremo alcuni modi semplici per aggiungere bordi alle immagini di WordPress.

Perché aggiungere un bordo intorno a un’immagine in WordPress?

Le immagini sono strumenti potenti per la comunicazione. Possono condividere rapidamente le informazioni e rendere più accattivanti le pagine con testo pesante.

Tuttavia, a volte le immagini possono confondersi con lo sfondo del sito web. Ciò è più probabile se si utilizza un’immagine di sfondo o se i colori del sito sono simili a quelli delle immagini.

Anche le persone con problemi di vista o daltonismo possono trovare difficile distinguere le immagini dallo sfondo. Per saperne di più, abbiamo una guida su come migliorare l’accessibilità dei siti web WordPress.

L’aggiunta di un bordo intorno a un’immagine in WordPress permette di distinguerla chiaramente dallo sfondo del sito. È anche un ottimo modo per attirare l’attenzione sulle immagini più importanti.

A questo proposito, vi spiegheremo come aggiungere un bordo intorno a un’immagine nel vostro blog WordPress. Ecco una rapida panoramica di tutti i metodi che metteremo in copertina in questo articolo:

Pronti? Iniziamo.

Metodo 1: usare le classi CSS personalizzate per aggiungere un bordo intorno a un’immagine in WordPress

La creazione di una classe CSS personalizzata è un modo semplice e intelligente per aggiungere bordi alle immagini. Questo metodo consente di definire le impostazioni dei bordi delle immagini in un unico punto.

Una volta creata la classe, è possibile applicarla facilmente a qualsiasi immagine. Questo è perfetto se si intende aggiungere bordi a più immagini sul sito.

Esistono diversi modi per creare una classe CSS personalizzata. Si può usare il personalizzatore del tema, l’editor completo del sito o il plugin WPCode.

Per istruzioni dettagliate, potete consultare la nostra guida sull’aggiunta di CSS personalizzati a WordPress.

Quando si crea la classe CSS, è necessario specificare il colore e lo spessore del bordo.

Ad esempio, è possibile impostare dei pixel (px) per la larghezza e un codice colore esadecimale per il colore. Non preoccupatevi: è più semplice di quanto sembri!

Ad esempio, nel seguente frammento di codice, si crea un bordo nero largo 5 pixel:

.border-black {
    border: #000 solid 5px;
}

Nel codice di esempio qui sopra, border-black è il nome della classe CSS.

È possibile utilizzare qualsiasi nome, ma sarà necessario digitare il nome della classe CSS ogni volta che si desidera creare un bordo. Per questo motivo, è bene che il nome della classe CSS sia breve e facile da ricordare.

È possibile aggiungere tutte le classi CSS desiderate. Ad esempio, si possono creare bordi di colori diversi.

L’aggiunta di un bordo a un’immagine è piuttosto semplice.

Per iniziare, fate clic sull’immagine della vostra pagina o pubblica di WordPress. Successivamente, si dovrà guardare la scheda “Blocco” sul lato destro della schermata e individuare l’opzione “Avanzate”.

Fare clic per espandere la sezione.

Nel campo ‘CLASSE CSS AGGIUNTIVA’ si può digitare il nome della classe CSS che si desidera aggiungere all’immagine.

Si noti che, come si può vedere nell’immagine seguente, il bordo non apparirà nell’editor delle pagine di WordPress.

Per vedere come apparirà il bordo ai vostri visitatori, fate clic sul pulsante “Anteprima”.

Ora si vedrà l’immagine con il bordo applicato.

Se si è soddisfatti dell’aspetto del bordo, è sufficiente pubblicare o aggiornare la pagina.

Metodo 2: usare un builder di pagina per aggiungere un bordo intorno a un’immagine in WordPress

Un altro metodo è quello di utilizzare un plugin per la creazione di pagine.

I builder di pagine trascina e rilascia permettono di progettare e personalizzare facilmente pagine web, come pagine di accesso e di destinazione. È possibile aggiungere testo, immagini e altri elementi senza bisogno di competenze di codifica.

Questi strumenti consentono anche di creare facilmente bordi unici per ogni immagine. È possibile progettarli utilizzando un editor visuale, il che è più facile per molte persone.

Consigliamo SeedProd, il miglior builder di landing page per WordPress. È facile da usare e consente di creare facilmente pagine dall’aspetto professionale.

SeedProd dispone di uno speciale blocco Immagine con opzioni integrate per i bordi. È inoltre possibile aggiungere facilmente ombre e regolare la spaziatura.

Per prima cosa, è necessario installare e attivare il plugin. Se avete bisogno di aiuto, consultate la nostra guida su come installare un plugin di WordPress.

Dopo l’attivazione, andiamo su SeedProd ” Landing Pages dalla vostra dashboard di WordPress.

SeedProd dispone di centinaia di template progettati professionalmente e raggruppati in categorie. In alto nella schermata si trovano le categorie che si possono utilizzare per:

• Creare una pagina 404
• Creare una pagina di accesso personalizzata
• Progettare una bellissima pagina coming soon
• E altro ancora.

Per dare un’occhiata a un design, basta fare il passaggio del mouse su un template e cliccare sull’icona della lente d’ingrandimento quando appare. In questo modo si vedrà l’anteprima del template.

Se il template vi piace, fate clic su “Scegli questo template”.

Nel campo “Nome pagina”, digitare un nome per la pagina. Come predefinito, SeedProd utilizzerà questo nome come URL della pagina.

Se si desidera modificare questo URL creato automaticamente, è sufficiente modificare il testo nel campo “URL della pagina”.

Una volta inserite le informazioni, si può fare clic sul pulsante “Salva e inizia a modificare la pagina”. In questo modo si aprirà il template scelto nell’editor di SeedProd per la trascina e il rilascio.

Nel menu di sinistra sono visualizzati tutti i blocchi che è possibile aggiungere alla pagina di WordPress tramite trascinamento e rilascio.

È sufficiente trovare il blocco “Immagine” e trascinarlo sul design della pagina.

Una volta fatto questo, basta fare clic sul blocco “Immagine” per vedere tutte le impostazioni che si possono usare per personalizzare il blocco.

Nel menu di sinistra, fare clic su “Usa la tua immagine”.

Ora è possibile scegliere qualsiasi immagine dalla libreria dei media di WordPress.

A questo punto, fare clic sulla scheda “Avanzate” nel menu di sinistra.

Quindi, fare clic per espandere la sezione “Bordo immagine”.

Per impostazione predefinita, tutte le impostazioni di SeedProd relative alla larghezza del bordo sono pari a 0, il che significa che l’immagine non ha un bordo.

La prima cosa da fare è aumentare questi valori a 1 o più. In questo modo si aggiungerà un bordo visibile all’immagine.

Per iniziare, cliccate su ciascuno dei campi “Larghezza del bordo” e digitate un numero più alto o utilizzate i pulsanti a forma di freccia che appaiono.

Quando si è soddisfatti dello spessore del bordo, si può iniziare a disegnarlo.

Un’opzione è quella di cambiare il colore del bordo facendo clic sul campo accanto a “Colore del bordo”. Si aprirà una finestra a comparsa in cui si potrà scegliere un nuovo colore per il bordo.

SeedProd offre tre semplici stili di bordo: solido, punteggiato e tratteggiato. È possibile scegliere quello che si adatta meglio alla propria immagine.

Per provare questi diversi stili di bordo, basta aprire il menu a discesa ‘Stile bordo’ e scegliere un’opzione dall’elenco.

Ecco fatto! Se si desidera aggiungere un bordo ad altre immagini, basta seguire lo stesso procedimento descritto sopra.

Una volta soddisfatti del design della pagina, si può fare clic sul pulsante “Salva” e poi scegliere “Pubblica” per renderla attiva.

Metodo 3: usare HTML e CSS per aggiungere un bordo intorno a un’immagine in WordPress

È anche possibile aggiungere bordi utilizzando HTML e CSS. Questo metodo non richiede un plugin richiesto, il che può essere utile.

Tuttavia, personalizzare l’aspetto del bordo significa scrivere del codice, quindi potrebbe non essere la scelta migliore per i principianti. Tuttavia, se vi sentite a vostro agio con un po’ di codice, questo metodo offre una grande flessibilità.

Per iniziare, aggiungiamo un’immagine a una pagina o a una pubblica.

Una volta fatto questo, si può fare clic sull’icona con i tre puntini nell’angolo in alto a destra e poi su “Editor del codice”.

WordPress mostrerà ora tutto il codice che compone la pagina o la pubblicazione.

Ora è possibile trovare la sezione di codice che aggiunge l’immagine alla pagina. Il codice inizierà con wp:image.

Se la pagina ha più immagini, verificare il valore img src=. Si tratta dell’URL dell’immagine nella libreria dei media di WordPress e sarà diverso per ogni immagine.

Una volta trovata la sezione di codice giusta, il passo successivo è la scrittura di una riga di codice che aggiunge il bordo e ne controlla lo stile.

Ad esempio, nel seguente frammento di codice, il bordo ha una larghezza di 3 pixel. Si aggiungono anche 3 pixel di spaziatura interna e di margine:

style="border:3px solid #000000; padding:3px; margin:3px;" />

Nel codice di esempio qui sopra, il solido #000000 imposta il colore del bordo. Il valore #000000 è il codice esadecimale del colore nero.

Se non si desidera creare un bordo nero, è possibile sostituire il valore con qualsiasi altro codice esadecimale.

Se non si desidera creare un bordo nero, è possibile sostituire il valore con qualsiasi altro codice esadecimale.

Una volta deciso il codice del bordo, è necessario trovare la sezione /></figure> e add-on il codice direttamente prima del primo carattere / .

Vediamo un esempio:

<!-- wp:image {"id":1450,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10003/wp-content/uploads/2022/06/logo.jpeg" alt="" class="wp-image-1450" style="border:3px solid #000000; padding:3px; margin:3px;" /></figure>
<!-- /wp:image -->

Quando si è soddisfatti del codice, uscire dall’editor del codice facendo clic su “Esci dall’editor del codice”.

Ora si dovrebbe vedere un bordo intorno all’immagine. Non preoccupatevi se vi appare un’attenzione per l’HTML non valido. È normale e non influisce sulla visualizzazione dell’immagine.

Se l’aspetto è soddisfacente, si può procedere ad aggiornare o pubblicare la pagina come di consueto.

Ora, se visitate il vostro sito web, vedrete un bordo intorno alla vostra immagine.

Suggerimento bonus: Usare uno strumento di progettazione grafica per aggiungere un bordo intorno a un’immagine

Sebbene WordPress offra diversi metodi per aggiungere bordi, queste opzioni possono talvolta essere limitate nello stile e nel personalizzato. Quindi, perché non modificare prima l’immagine e poi caricarla su WordPress?

È qui che gli strumenti di progettazione grafica si rivelano utili.

Adobe Photoshop è il grande protagonista in questo campo, con tonnellate di caratteristiche sofisticate per i professionisti. Se non volete spendere una fortuna, Affinity Photo è una scelta valida: ha trucchi simili, ma si paga una sola volta.

E se siete attenti al portafoglio, GIMP (GNU Image Manipulation Program) può essere il vostro strumento preferito. È totalmente gratuito, open-source e può fare molto di quello che fanno gli strumenti a pagamento.

GIMP è un’opzione ideale sia per i principianti che per gli utenti esperti. È possibile utilizzarlo su Mac e Windows.

In questa esercitazione verrà mostrato come aggiungere un bordo attorno a un’immagine utilizzando GIMP.

Dopo l’installazione, è necessario aprire l’applicazione desktop di GIMP. Quindi, si può fare clic su File “ Apri e scegliere un’immagine da modificare dal disco locale. In alternativa, è possibile trascina e rilascia un’immagine nell’editor di GIMP.

Una volta caricata l’immagine sull’editor di GIMP, disegniamo un bordo intorno all’immagine usando lo strumento ‘Seleziona rettangolo’. Questo strumento si trova sulla barra degli strumenti in alto a sinistra.

Successivamente, si consiglia di verificare le impostazioni dei colori di primo piano e di sfondo.

Questo perché GIMP usa il colore di primo piano per tracciare le linee. Quindi, se si desidera utilizzare un colore specifico per il bordo, è possibile fare clic sul colore di primo piano per regolarlo.

Si aprirà il selettore colore, dove è possibile spostare il mouse sull’area di selezione del colore o inserire il codice esadecimale del colore.

Una volta fatto questo, si può fare clic su “OK”.

Dopo aver impostato il colore del bordo, è ora di applicarlo. È possibile navigare in Modifica “ Selezione tratto, per aprire il popup ‘Selezione tratto’.

Qui è possibile regolare lo stile del tratto, la larghezza della linea e altro ancora. Ad esempio, abbiamo impostato la larghezza della linea a 5 px.

Una volta fatto ciò, fare clic su ‘Colpo’ e il bordo dovrebbe essere aggiunto all’immagine.

Prima di caricare il sito su WordPress, si consiglia di ottimizzare l’immagine per mantenere un’ottima velocità e prestazioni del sito. Le immagini grezze sono spesso di grandi dimensioni, quindi questo passaggio può essere di grande aiuto.

In GIMP è possibile ottimizzare l’immagine ridimensionandola.

Per iniziare, è necessario navigare in Immagine ” Scala immagine. Si aprirà il popup “Scala immagine”, dove è possibile regolare le “Dimensioni immagine” come segue:

Dopo aver regolato le dimensioni dell’immagine, è possibile fare clic sul pulsante ‘Scala’.

GIMP ridimensiona l’immagine e visualizza la nuova versione nell’editor.

Una volta fatto, è possibile salvare l’immagine andando su File “ Esporta con nome.

A questo punto, si può seguire la richiesta di scegliere una posizione e un nome per il file. Una volta impostato tutto, fare clic su “Esporta”.

Ora è possibile caricare l’immagine nella pagina o nel post di WordPress. Ecco come potrebbe apparire nell’editor a blocchi:

Ecco fatto: avete imparato come aggiungere un bordo intorno a un’immagine utilizzando uno strumento di progettazione grafica!

È possibile utilizzare questo metodo ogni volta che si desidera caricare un’immagine su WordPress.

Speriamo che questo articolo vi abbia aiutato a imparare come aggiungere un bordo intorno a un’immagine in WordPress. A seguire, potete consultare la nostra guida su come fare l’editing di base delle immagini in WordPress o la nostra selezione dei migliori plugin e strumenti per le immagini in evidenza per WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.