Visualizza il feed di Instagram sul sito Web di Elementor [passo dopo passo]

Vuoi creare un feed Instagram Elementor per il tuo sito Web WordPress?

In questa guida dettagliata imparerai come aggiungere un feed Instagram a Elementor utilizzando un plug-in gratuito e non tecnico chiamato Spotlight .

Non sono richieste conoscenze tecniche o denaro: basta seguire il nostro tutorial e sarai subito operativo.

Guida dettagliata: visualizza il feed di Instagram sul sito web di Elementor

Pronto per iniziare? Ecco la tua guida passo passo su come visualizzare un feed Instagram di Elementor.

Passaggio 1: installa e attiva il plug-in del feed di Instagram

Per iniziare, ti consigliamo di installare e attivare il plug-in del feed Instagram Spotlight.

Ancora una volta, Spotlight è gratuito e compatibile al 100% con Elementor.

Il plug-in Spotlight gratuito è elencato su WordPress.org, quindi puoi installarlo seguendo queste istruzioni:

1. Apri la dashboard di WordPress.
2. Vai su Plugin → Aggiungi nuovo .
3. Cerca "Spotlight".
4. Fare clic sul pulsante Installa ora .
5. Al termine del processo di installazione, fai clic sul pulsante Attiva per attivare il plug-in Spotlight.

Passaggio 2: crea un token di accesso Instagram

Successivamente, devi creare un token di accesso Instagram, che è ciò che consente al tuo sito WordPress di connettersi a Instagram.

Non preoccuparti: anche se suona un po' tecnico, devi solo fare clic su alcuni pulsanti e ci vorranno forse 30 secondi in totale!

Se stai utilizzando il tuo account personale, Spotlight ti consente anche di connettere direttamente il tuo account ( nel qual caso hai la possibilità di saltare al passaggio successivo ). Tuttavia, utilizzeremo il metodo Instagram Access Token perché funzionerà per qualsiasi configurazione, inclusa la connessione dell'account del tuo cliente (se stai costruendo un sito Web del cliente).

Per creare il tuo token di accesso Instagram, vai a questa pagina.

Oppure, se stai costruendo un sito web per un cliente, chiedi al tuo cliente di andare su questa pagina e seguire le stesse istruzioni.

Successivamente, clicca sul relativo pulsante Genera il tuo token di accesso , a seconda che tu voglia collegare un account Instagram personale o un account aziendale.

Questo aprirà una schermata popup da Instagram che ti chiede se vuoi autorizzare Spotlight ad accedere al tuo account.

Fare clic sul pulsante Consenti nel popup:

Dopo aver fatto clic su Consenti , dovresti vedere il tuo token di accesso Instagram apparire sulla pagina originale:

Copia questo token di accesso in un posto sicuro perché ti servirà in un secondo.

Oppure, se stai lavorando con uno sviluppatore che sta creando il tuo sito, dovrai condividere questo token di accesso con il tuo sviluppatore in modo che possa continuare a configurare il plug-in .

Passaggio 3: collega il tuo account Instagram al tuo sito Web Elementor

Ora puoi aggiungere questo token di accesso Instagram nella dashboard di WordPress per connettere il tuo sito Web Elementor a Instagram:

1. Torna alla dashboard di WordPress.
2. Vai a Feed di Instagram → Impostazioni .
3. Incolla il token di accesso Instagram nella casella del token di accesso Instagram/Facebook .
4. Fare clic sul pulsante Connetti .

Se lavori esclusivamente con il tuo account Instagram, puoi anche connetterti direttamente facendo clic sui pulsanti Collega il tuo account personale o Collega il tuo account aziendale .

Dopo aver fatto clic su Connetti , dovresti vedere un messaggio di successo:

Se stai collegando un account personale, vedrai anche un'opzione per aggiungere una foto personalizzata e un testo bio. Puoi fare clic su Sì per farlo ora. Oppure puoi sempre aggiungerlo in un secondo momento dopo aver configurato il tuo feed Instagram di Elementor.

Parlando di…

Passaggio 4: configura il tuo feed Instagram

Ora che hai collegato il tuo account Instagram, sei pronto per impostare il tuo primo feed Instagram di Elementor.

Per farlo, vai su Feed di Instagram → Feed nella dashboard di WordPress.

Scegli il tipo di feed

Innanzitutto, sceglierai il tipo di contenuto che desideri visualizzare.

Con la versione gratuita di Spotlight, puoi visualizzare un feed dei tuoi post su Instagram. Tuttavia, Spotlight Pro aggiunge più opzioni, come un feed basato su hashtag o post che hanno taggato il tuo account.

Se vuoi provare Spotlight Pro, puoi accedere a una prova gratuita di 14 giorni di Spotlight Pro per vedere come funziona (non è richiesta la carta di credito): basta fare clic sul pulsante Prova gratuita di 14 giorni nell'angolo in alto a destra.

Per il nostro tutorial sul feed Instagram di Elementor, utilizzeremo semplicemente l'opzione I miei post su Instagram .

Quindi, fai clic su Passaggio successivo per avanzare.

Scegli un modello

Successivamente, puoi scegliere uno dei modelli di Spotlight, che ti consente di controllare il layout e il design del tuo feed Instagram di Elementor.

La versione gratuita ti offre sei diversi modelli, mentre Spotlight Pro aggiunge altri otto modelli.

Per questo esempio, sceglieremo il modello di feed Classico gratuito, ma sei totalmente libero di sceglierne uno diverso se preferisci.

Una volta effettuata la scelta, fai clic sul pulsante Passaggio successivo per avanzare.

Scegli il tuo account Instagram

Nel passaggio successivo, ti verrà chiesto di collegare e personalizzare . Ma poiché hai già collegato il tuo account Instagram, non devi fare altro qui.

Per avanzare, fai clic sul pulsante Connetti e personalizza .

Personalizza il tuo feed Instagram di Elementor

Ora sarai nello strumento di personalizzazione di Spotlight, che ti consente di personalizzare ulteriormente il modello scelto.

Per iniziare, scegli l'account che hai collegato nel passaggio precedente sotto l'intestazione Mostra i post di questi account .

Questo aggiornerà l'anteprima dal vivo del tuo feed per utilizzare i post effettivi dal tuo account Instagram.

Successivamente, puoi andare alla scheda Design per personalizzare il tuo modello di feed Instagram di Elementor.

Ecco alcune delle scelte che puoi fare qui con la versione gratuita del plugin:

• Scegli quanti post visualizzare e in quante colonne.
• Regola l'ordine dei feed. Per impostazione predefinita, visualizzerà prima i post più recenti, ma puoi modificarlo se lo desideri.
• Scegli come aprire i post quando gli utenti fanno clic su di essi.
• Regola le dimensioni e la spaziatura del tuo feed.
• Personalizza l'intestazione del feed che appare sopra gli elementi del feed.
• Configura lo stile e il testo del pulsante Segui su Instagram .
• Configura lo stile e il testo del pulsante Carica altri post .
• Aggiungi il tuo CSS personalizzato se desideri un controllo ancora maggiore.

Con Spotlight Pro avrai un controllo ancora maggiore su dettagli come didascalie, Mi piace e commenti.

Gli utenti di Spotlight Pro hanno anche accesso alle altre schede per filtrare e moderare il contenuto del feed o impostare promozioni del feed.

Quando sei soddisfatto dell'aspetto del tuo feed, assicurati di fare clic sul pulsante Salva nell'angolo in alto a destra.

Quindi, passiamo a come incorporare il tuo feed Instagram in Elementor.

Passaggio 5: incorpora il tuo feed Instagram in Elementor

Spotlight ti offre due modi per incorporare il tuo feed Instagram di Elementor:

• Spotlight (gratuito) : puoi aggiungere il tuo feed a Elementor utilizzando il normale widget Spotlight WordPress. Sebbene tu possa aggiungere questo widget direttamente dall'interfaccia di Elementor, non sarai in grado di personalizzare le impostazioni del tuo feed da Elementor.
• Spotlight Pro : ottieni un widget Elementor Feed Instagram Spotlight dedicato che ti consente non solo di incorporare il tuo feed, ma anche di configurarne ulteriormente il design e lo stile direttamente dall'interfaccia Elementor.

Valuteremo entrambe le opzioni...

In ogni caso, puoi iniziare aprendo l'editor di Elementor per il contenuto a cui desideri aggiungere il tuo feed Instagram di Elementor.

Riflettore (gratuito)

Se stai utilizzando la versione gratuita di Spotlight, scorri verso il basso fino alla sezione WordPress nella barra laterale di Elementor ed espandi l'elenco delle opzioni.

Quindi, trascina il widget del feed Instagram Spotlight sul tuo design Elementor dove desideri visualizzare il tuo feed.

Una volta aggiunto il widget, dovresti vedere due opzioni nella barra laterale:

1. Aggiungi un titolo (o lascialo vuoto).
2. Scegli il feed di Instagram che hai appena creato nel passaggio precedente.

Quindi, fai clic su Applica .

Puoi anche utilizzare la scheda Avanzate per regolare dettagli come spaziatura e margini.

Potresti non vedere un'anteprima dal vivo del tuo feed nell'editor di Elementor.

Tuttavia, se apri un'anteprima dal vivo o la versione live della pagina, dovresti vedere il tuo feed Instagram di Elementor.

Riflettore Pro

Se utilizzi Spotlight Pro, otterrai un widget Spotlight Instagram Feed Elementor dedicato.

Questo widget non solo ti consente di vedere un'anteprima dal vivo nell'editor di Elementor, ma ti consente anche di personalizzare (e creare) i feed di Instagram direttamente dall'interfaccia di Elementor.

Ancora una volta, se vuoi provarlo, puoi ottenere una prova gratuita di 14 giorni di Spotlight Pro, senza carta di credito richiesta.

Puoi cercare il widget per nome o trovarlo nella sezione Generale dei widget di Elementor.

Quando aggiungi il widget, dovresti vedere immediatamente un'anteprima del tuo feed Instagram di Elementor.

Se necessario, puoi fare clic sul pulsante Modifica per modificare le impostazioni del tuo feed direttamente da Elementor. Oppure puoi persino creare un nuovo feed se desideri visualizzare più feed.

Passaggio 6: mostra il tuo feed Instagram in un pop-up

Quest'ultimo passaggio è facoltativo...

Ma se vuoi visualizzare il tuo feed Instagram in un pop-up in Elementor, hai alcune opzioni.

Prima di tutto, Spotlight include una funzionalità integrata per visualizzare i singoli post in un popup quando i visitatori fanno clic su di essi. Questo è disponibile sia nella versione gratuita che a pagamento.

Ecco un esempio di come appare:

Per abilitare o modificare questa impostazione, imposta l'impostazione Apri post in su Popup casella in Opzioni feed :

Gli utenti di Spotlight Pro possono configurare ulteriormente il popup utilizzando le impostazioni di Popup Lightbox .

Se vuoi visualizzare l'intero feed di Instagram in un pop-up, hai alcune opzioni:

1. Se hai Elementor Pro, puoi aggiungere il widget Spotlight Instagram Feed a un popup che crei con Elementor Popup Builder. Basta seguire gli stessi passaggi del passaggio precedente quando si aggiunge il widget al design del popup.
2. Puoi utilizzare qualsiasi plug-in popup di WordPress, come Popup Maker. Per visualizzare il tuo feed nel popup, puoi utilizzare lo shortcode Spotlight.

Conclusione

Questo conclude la nostra guida su come visualizzare un feed Instagram di Elementor utilizzando il plug-in Spotlight gratuito.

Puoi seguire tutto in questa guida e creare il tuo feed Instagram di Elementor senza spendere soldi.

Se desideri ancora più funzionalità, come un widget feed Instagram Elementor dedicato che puoi utilizzare al posto del normale widget Spotlight WordPress, puoi eseguire l'upgrade a Spotlight Pro.

Spotlight Pro offre una prova gratuita di 14 giorni senza carta di credito richiesta, quindi puoi sempre provare le funzionalità premium prima di impegnarti in qualsiasi cosa.