Come creare un'anteprima del collegamento visivo in WordPress

Arricchire le tue pagine e i tuoi post WordPress con contenuti come risorse utili, prodotti correlati, CTA promozionali o pezzi curati di intrattenimento può aiutare te o il tuo marchio a offrire più valore al tuo pubblico. Tuttavia, un semplice collegamento non lo taglierà sempre: a meno che il testo di ancoraggio e il sentimento circostante non siano abbastanza convincenti, quei collegamenti potrebbero essere sfiorati. Creando collegamenti visivi per il tuo sito web, come quelli migliorati che vedi su Facebook, puoi aggiungere contenuti coinvolgenti e interattivi a cui i tuoi visitatori presteranno attenzione. Il plug-in Visual Link Preview per WordPress è un modo semplice per aggiungere più brio ai tuoi link.

Ecco alcuni modi in cui puoi utilizzare questo plugin:

• Aggiungi un CTA a un link di affiliazione.
• Eseguire il backup di affermazioni, fatti e statistiche.
• Cura i contenuti di altri siti.
• Includi risorse utili per i lettori per saperne di più.
• Promuovi i prodotti del tuo negozio di e-commerce.

Inoltre, nella sua forma più semplice, il plug-in Visual Link Preview è un modo più attraente per collegarsi a post correlati e far rimanere le persone sul tuo sito più a lungo.

Il plug-in ti consente di creare un'anteprima visiva per qualsiasi collegamento interno o esterno e puoi anche creare un modello personalizzato con uno stile che corrisponda al tuo marchio o sito. Quindi, posiziona una casella di anteprima semplificata in qualsiasi punto del tuo post o della tua pagina. Esaminiamo come aggiungere una casella di anteprima a WordPress sia in Gutenberg che nell'editor classico.

Trovare e installare il plug-in di anteprima del collegamento visivo

Probabilmente sai già come farlo, ma per ogni evenienza, ecco una guida velocissima su come installare un nuovo plugin per WordPress:

• Accedi alla dashboard di WordPress.
• Seleziona Plugin dalla barra laterale di sinistra.
• Seleziona Aggiungi nuovo nel sottomenu che verrà visualizzato sotto Plugin.
• Digita "Anteprima collegamento visivo" nella barra di ricerca in alto a destra della pagina.
• Fare clic su Installa ora in alto a destra nella casella di anteprima del plug-in.
• Una volta installato, fai clic su Attiva.

Una volta attivato il plug-in, verrai reindirizzato alla pagina del tuo plug-in e vedrai questo avviso in alto. (La documentazione introduttiva ti porta a questa pagina.)

Iniziare con le impostazioni e le personalizzazioni

Una volta attivato il plug-in, scorri verso il basso l'elenco dei plug-in per trovarlo. Sotto il nome del plug-in, fai clic sul collegamento Impostazioni: verrai indirizzato a questa pagina:

Per impostazione predefinita, l'interruttore Usa stile personalizzato sarà disattivato. Se lo attivi, vengono visualizzate un sacco di opzioni.

Sono disponibili personalizzazioni per quanto segue:

• Larghezza del contenitore, colore di sfondo e riempimento.
• Raggio, larghezza, stile (solido, tratteggiato, punteggiato, ecc.) e colore del bordo.
• Posizione dell'immagine (sinistra, destra, in alto o in basso), dimensione e raggio del bordo.
• Dimensioni e colore per il titolo e i caratteri di riepilogo.

La maggior parte di questi sono piuttosto autoesplicativi, ma ci sono alcune cose da sapere sulla dimensione dell'immagine. Puoi impostare una dimensione della miniatura o una dimensione personalizzata. Per una miniatura, le dimensioni standard sono "miniatura", "media" e "grande", quindi devi semplicemente digitare quello che vuoi nel campo. In alternativa, puoi impostare una dimensione personalizzata in questo formato: larghezzaxaltezza (150×150, ad esempio).

Per ora, lascerò tutto così com'è per vedere come appare la casella di collegamento predefinita. Poi, tornerò dentro per apportare modifiche.

Utilizzo del plugin con l'editor di blocchi Gutenberg

Sono entrato in una bozza di un post sul blog e ho aggiunto un blocco sotto un paragrafo. Troverai il blocco Anteprima collegamento visivo sotto Widget, oppure puoi semplicemente cercarlo nella parte superiore del selettore di blocchi.

Ecco come appare il blocco Anteprima collegamento visivo:

Quando fai clic sulla casella Seleziona un articolo o una pagina, non vedrai un menu a discesa dei tuoi contenuti; dovrai cercare quello che vuoi. Puoi anche aggiungere un collegamento a un URL esterno (ne parlerò tra poco).

Ho scelto un post pubblicato sul blog. Ecco come appare senza che io faccia alcuna personalizzazione allo stile:

Impostazioni dei blocchi di Visual Link Preview in Gutenberg

Se fai clic sulla pila di tre punti nella parte superiore del blocco, vedrai un menu a discesa. Seleziona Mostra impostazioni blocco per visualizzare una barra laterale destra con le opzioni. Da qui, puoi apportare diverse modifiche:

Cambia il collegamento. Nota che se fai clic su Cambia collegamento, il collegamento che hai verrà immediatamente rimosso, quindi assicurati di non fare clic su di esso per sbaglio.

Modificare o rimuovere l'immagine visualizzata. Se rimuovi l'immagine visualizzata, ecco come appare il collegamento visivo:

Se non ti piace come appare senza un'immagine, puoi fare clic su Scegli immagine per aggiungerne una di nuovo. Tuttavia, dovrai passare attraverso la tua libreria multimediale o caricare un'immagine: non avrai l'opzione di auto -aggiungendo di nuovo l'immagine in primo piano, come ha fatto quando hai aggiunto il link per la prima volta.

Potresti, ovviamente, trovare l'immagine in primo piano nella tua libreria multimediale, ma potrebbe essere sepolta. Puoi anche semplicemente aggiungere nuovamente il link in modo che aggiunga automaticamente il contenuto originale.

Attiva e disattiva le impostazioni del collegamento. Puoi scegliere di aprire il link in una nuova scheda e puoi anche trasformare il link in un link nofollow.

Aggiungere un collegamento esterno con Gutenberg

Questa volta, aggiungo un collegamento esterno. L'ho copiato e incollato nel campo corretto:

Quando fai clic su Usa questo URL, accade la stessa cosa di quando aggiungi un collegamento interno. Un'immagine, un titolo e un estratto verranno compilati automaticamente e potrai apportare modifiche nella barra laterale destra. Puoi anche fare clic su Salva immagine localmente nella sezione Contenuto e l'immagine di visualizzazione che il plug-in ha acquisito dalla sorgente dell'URL verrà aggiunta alla tua libreria multimediale di WordPress.

Salvataggio di blocchi riutilizzabili

Se hai una pagina, un post di blog o un link esterno che utilizzerai spesso, puoi crearlo una volta, quindi salvarlo come blocco riutilizzabile per aggiungerlo facilmente in futuro. Funziona solo nell'editor Gutenberg, FYI.

Quando hai finito di creare il tuo blocco, fai clic sull'icona a tre punti in alto, la stessa che hai usato per accedere alla barra laterale delle opzioni. Quindi, scegli Aggiungi a blocchi riutilizzabili. Puoi intitolare il blocco e sarà nella tua libreria di blocchi per un uso futuro.

Utilizzo del plugin con l'editor classico

Utilizzando l'editor classico, accedi al tuo post o pagina e vai al punto in cui desideri aggiungere il collegamento visivo. Fare clic sul pulsante Anteprima collegamento visivo nella parte superiore della pagina:

Apparirà questa scatola:

Dal menu a discesa Tipo, puoi scegliere di aggiungere il tuo collegamento o uno esterno. Per prima cosa, aggiungo il mio collegamento. Una volta scelto il contenuto a cui collegarsi, i campi verranno compilati automaticamente, come con Gutenberg. Qui è dove apporterai eventuali modifiche. Puoi rimuovere l'immagine e scegliere di aggiungerne una nuova, modificare il titolo e aggiornare il riepilogo da questa finestra. Puoi anche utilizzare le impostazioni predefinite del plugin o il tuo modello personalizzato qui, proprio come con Gutenberg.

Aggiunta di un collegamento esterno con l'editor classico

Questa volta aggiungerò un collegamento esterno. Questi sono i campi per un collegamento esterno:

Quando aggiungi l'URL, i campi si aggiorneranno automaticamente, come con un collegamento interno. Puoi quindi apportare le modifiche che desideri prima di inserirlo nella tua pagina o nel tuo post. Hai anche l'opzione Salva immagine localmente nell'editor classico.

Personalizzazione del modello e della casella di anteprima del collegamento visivo

La barra delle impostazioni del blocco include anche una sezione Stile nella parte inferiore in cui è possibile scegliere tra il modello Usa predefinito dalle impostazioni o il modello Semplice. È confuso, però, perché in realtà sono la stessa cosa. Ti spiegherò di più tra un po'. Per prima cosa, vediamo come personalizzare la casella di anteprima del collegamento.

Da quella sezione Stile, fai clic sul collegamento Modifica stile modello. Si aprirà una nuova pagina in cui puoi creare un modello personalizzato (puoi arrivarci anche attraverso le impostazioni del plugin). Ancora una volta, le personalizzazioni sono semplici, esplicative e dirette, quindi dovresti divertirti a orientarti. Ecco come appare il modello dopo aver giocato con alcune personalizzazioni:

Non buono. Parte del problema è che il testo di anteprima è troppo lungo. Tornando al tuo post o pagina, se fai clic sul blocco, l'editor dovrebbe apparire nella barra laterale destra. Puoi quindi andare alla sezione Contenuto e fare clic sui campi del titolo e dell'estratto per apportare modifiche.

Invece di usare una miniatura, sono tornato alla pagina di personalizzazione del modello e ho inserito una dimensione personalizzata per l'immagine, che l'ha trasformata in un quadrato (e, fortunatamente, perfettamente ritagliato). Ho giocato con il titolo e la copia dell'estratto ancora un po' in modo che fosse dimensionato meglio nel blocco e accanto all'immagine. Questo è meglio:

Potresti dedicare molto tempo a capire le giuste personalizzazioni e dovresti, soprattutto perché puoi creare solo un modello personalizzato.

Anteprima delle personalizzazioni del modello

Non puoi vedere un'anteprima dal vivo quando personalizzi il modello. Devi aprire il tuo post o la tua pagina in una nuova finestra, apportare le modifiche nella pagina di personalizzazione del modello e quindi fare clic di nuovo sul post o sulla pagina. Passa avanti e indietro tra le due opzioni del modello a discesa (ricorda, in realtà non sono diverse l'una dall'altra): questo aggiorna la casella in modo da poter vedere le ultime modifiche.

Come recuperare lo stile predefinito?

Diciamo che fai un sacco di modifiche e poi ti rendi conto che preferisci lo stile predefinito. Se lasci attivato l'interruttore Usa stile personalizzato nelle impostazioni del modello, le tue impostazioni personalizzate verranno applicate quando torni sulla tua pagina o sul tuo post, indipendentemente dal fatto che selezioni Usa predefinito da Impostazioni o Semplice dal menu a discesa Modello (come ho detto, confusione).

Se vuoi ripristinare le impostazioni predefinite del plug-in, puoi andare alla pagina delle impostazioni del modello e disattivare il pulsante Usa stile personalizzato. Tutte le tue personalizzazioni saranno presenti se desideri riattivarle alla fine, ma questo ti consentirà di utilizzare le impostazioni predefinite del plug-in se preferisci il loro aspetto.

Svantaggi del plug-in di anteprima del collegamento visivo

Il plug-in Visual Link Preview è un plug-in semplice e diretto che fa quello che dice che farà ed è semplicissimo da imparare a usare. Tuttavia, poiché è così semplice, manca anche in alcune aree che potrebbero essere migliorate.

Non c'è un menu a discesa con tutti i tuoi contenuti. Volevo questa opzione invece di dover ricordare il nome di un post del blog o di una pagina da aggiungere come collegamento.

Non puoi vedere un'anteprima dal vivo del modello personalizzato. È piuttosto goffo andare avanti e indietro tra il post e la pagina delle impostazioni del modello ogni volta che vuoi vedere se è la quantità perfetta di padding o quale tipo di bordo usare.

Puoi creare un solo modello personalizzato. Questo è il più grande svantaggio del plugin. Non puoi creare diversi modelli e poi scegliere quello che usi per abbinare una pagina specifica, un post del blog o un tipo di link. Inoltre, non puoi impostare alcune caselle di anteprima per utilizzare il tuo modello personalizzato e altre per utilizzare le impostazioni predefinite del plug-in: l'una o l'altra.

Avvolgendo

Tutto sommato, nonostante i suoi svantaggi, mi è piaciuto il plug-in Visual Link Preview. È un gioco da ragazzi da configurare e utilizzare, indipendentemente dall'editor con cui preferisci lavorare: Gutenberg o classico. E questo è sicuramente un modo esteticamente più gradevole e accattivante per aggiungere link, che può andare lontano se sei coinvolto nel marketing di affiliazione o vuoi collegarti alle tue pagine di destinazione. In questo momento, dal momento che non puoi creare più di un modello, è meglio per i siti Web con un aspetto standardizzato in tutti i post e le pagine. Quindi, se disponi di un numero di pagine di destinazione diverse in una varietà di stili, avrai difficoltà a creare un modello di casella di anteprima che si adatti ovunque sia posizionato. Altrimenti, però, questo è un plugin leggero che fa bene il suo lavoro.

Potrebbe piacerti anche questo articolo con cinque cose interessanti che puoi fare in Divi con i link di ancoraggio.