Come aggiungere un bordo attorno a un'immagine in WordPress

Vuoi aggiungere un bordo attorno alle tue immagini in WordPress? Recentemente, uno dei nostri utenti ci ha chiesto un modo semplice per aggiungere un bordo attorno a un'immagine in WordPress. Mentre puoi usare i CSS, è confuso per i principianti. In questo articolo, ti mostreremo un modo semplice per aggiungere il bordo dell'immagine in WordPress senza modificare alcun codice HTML o CSS.

Video Tutorial

Se il video non ti piace o hai bisogno di ulteriori istruzioni, continua a leggere.

Metodo 1: Utilizzare un plugin per aggiungere un bordo immagine in WordPress

Questo metodo è per i principianti che non desiderano modificare HTML o CSS. La prima cosa che devi fare è installare e attivare il plugin WP Image Borders. Dopo l'attivazione, è necessario visitare Impostazioni »Bordi immagine WP per configurare le impostazioni del plugin.

La prima sezione nelle impostazioni del plugin ti consente di scegliere come target le immagini. Puoi aggiungere bordi a tutte le immagini nei tuoi post WordPress selezionando la casella accanto a "Aggiungi bordi a tutte le immagini nei post del blog" opzione.

In alternativa, puoi scegliere come target specifiche classi CSS per avere i bordi. Ti mostreremo come aggiungere una classe CSS a un'immagine specifica più avanti in questo articolo. In questo momento puoi mettere qualsiasi cosa nella classe CSS come .border-immagine.

La seconda sezione nelle impostazioni del plugin consente di personalizzare le impostazioni dei bordi. Puoi scegliere uno stile, una larghezza, un raggio e un colore del bordo.

L'ultima sezione della pagina delle impostazioni consente di aggiungere ombre esterne alle immagini. È possibile inserire una distanza orizzontale e verticale, sfocare e diffondere il raggio, nonché il colore dell'ombra del riquadro. Se non vuoi aggiungere ombre esterne alle tue immagini, puoi semplicemente lasciare questi campi vuoti.

Non dimenticare di fare clic sul pulsante Salva modifiche per memorizzare le impostazioni del plug-in.

Se hai selezionato la prima opzione "Aggiungi bordi a tutte le immagini nei post del blog", allora non devi fare nient'altro.

Dovresti vedere i bordi dell'immagine su tutte le immagini del tuo blog.

Tuttavia, se hai selezionato la seconda opzione per mostrare solo il bordo per immagini specifiche, devi seguire il passaggio successivo.

Aggiunta della classe CSS a un'immagine in WordPress

Se desideri solo aggiungere bordi attorno alle immagini selezionate, dovrai dire a WordPress quali immagini devono avere bordi. Puoi farlo aggiungendo una classe CSS alle immagini che hanno bisogno di bordi.

Basta caricare la tua immagine e aggiungerla al tuo post. Dopo aver aggiunto l'immagine, fare clic su di esso nell'editor visivo e quindi fare clic sul pulsante modifica nella barra degli strumenti.

Questo mostrerà popup di modifica delle immagini che mostrano i dettagli dell'immagine. Devi fare clic su Opzioni avanzate per espanderlo e quindi inserire la classe CSS della tua immagine.

Suggerimento: questo è .border-immagine perché l'abbiamo selezionato nelle impostazioni del nostro plug-in.

Quindi, fare clic sul pulsante di aggiornamento per salvare e aggiornare le impostazioni dell'immagine. Questo è tutto, la tua immagine ora avrà una classe aggiuntiva. Poiché utilizzi il plug-in WP Image Borders, un bordo verrà visualizzato su questa immagine.

Metodo 2: utilizzo di HTML e CSS per aggiungere i bordi immagine in WordPress

Aggiungere bordi immagine usando CSS / HTML è un modo più rapido e veloce per ottenere bordi attorno alle immagini in WordPress. Ci sono molti modi in cui puoi farlo e noi ti mostreremo tutti loro. Puoi scegliere qualunque cosa funzioni meglio per te.

Aggiunta di bordi mediante stili in linea in WordPress

Dopo aver caricato e inserito la tua immagine in un post WordPress, passa all'editor di testo. Vedrai il codice HTML per la tua immagine. Sembrerà qualcosa del genere:

Puoi facilmente aggiungere lo stile CSS nel codice HTML come questo:

Sentiti libero di modificare larghezza, colore, spaziatura e margine del bordo in base alle tue esigenze.

Aggiunta di un bordo immagine nel tema WordPress o tema figlio

Se desideri aggiungere definitivamente i bordi a tutte le immagini nei tuoi post e pagine del blog WordPress, puoi aggiungere CSS direttamente nel tuo tema WordPress o tema secondario.

Molti temi WordPress hanno già queste regole di stile definite nel foglio di stile del tema che di solito è il file style.css. È possibile modificare il CSS esistente o aggiungere il proprio CSS in un tema secondario.

WordPress aggiunge classi di immagini predefinite a tutte le immagini. Per assicurarti che le immagini nei tuoi post / pagine abbiano un bordo immagine, devi scegliere come target tutte queste classi. Ecco un semplice snippet CSS per iniziare:

 img.alignright float: right; margine: 0 0 1em 1em; border: 3px solid #EEEEEE;  img.alignleft float: left; margine: 0 1em 1em 0; border: 3px solid #EEEEEE;  img.aligncenter display: block; margin-left: auto; margin-right: auto; border: 3px solid #EEEEEE;  img.alignnone border: 3px solid #EEE;  

Se vuoi usare solo i bordi dell'immagine quando ne hai bisogno, puoi aggiungere una classe CSS alle tue immagini (vedi sopra). Aggiungi regole di stile per questa classe CSS nel tuo tema o tema figlio.

 img.border-image border: 3px solid #eee; padding: 3px; margin: 3px;  

Speriamo che questo articolo ti abbia aiutato ad aggiungere un bordo immagine attorno alle immagini del tuo blog WordPress. Potresti anche voler vedere la nostra guida su come salvare immagini ottimizzate per il web per velocizzare il tuo sito WordPress.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.