L'iframe è principalmente una parte della stessa struttura HTML che gestisce un sito web. Consente di aggiungere o incorporare contenuti da altri siti web nel proprio sito.
Per molte ragioni, potrebbe essere necessario creare un widget iframe sulla propria pagina web. Si tratta di immagini, video, un'altra pagina web, ecc.
In generale, l'idea è quella di velocizzare il caricamento dell'elemento di destinazione da una fonte esterna e ridurre il carico sul vostro sito.
Per quanto riguarda il modo in cui incorporarlo, esistono due modi per creare un widget iframe in Elementor:
- Utilizzare uno shortcode grezzo
- Utilizzare un plugin Elelemntor Iframe
In questo blog vi spiegheremo esattamente come potete creare un widget iframe in Elementor.
Metodo 1: Creare il widget iframe Elementor con lo shortcode
Essendo parte del software open-source WordPress, Elementor ha molte integrazioni. Una di queste è Shortcode. Anche per operazioni come un iframe, sono disponibili degli shortcode.
In parole povere, è possibile aprire qualsiasi pagina utilizzando l'editor Gutenberg di WordPress o l'editor Elementor, inserire gli shortcode ed evocare un iframe. Facile come bere un bicchier d'acqua!
È sufficiente inserire un blocco di editor HTML nella pagina e aggiungere il codice sopra riportato. In questo modo, il contenuto/sito web desiderato verrà semplicemente convocato in un riquadro di 400px di altezza.
La creazione di un widget iframe ha alcuni attributi che si possono usare per personalizzare l'aspetto del contenuto.
- Src - Collegamento alla fonte. (https://) può essere necessario per evitare il blocco del protocollo di sicurezza del sito.
- Larghezza/Altezza - Valori in pixel che definiscono l'area delle dimensioni del contenuto.
- Allineare - Definisce l'allineamento dell'iframe all'interno della pagina.
- Cornice di confine - Aggiunge un bordo attorno all'iframe se il valore è maggiore/uguale a 1. Non mostra alcun bordo se il valore è 0.
- Scorrimento - Consentire l'opzione di scorrimento del contenuto dell'iframe definendo 'sì', 'no' e 'auto'.
Oltre al codice HTML, iframe supporta anche gli attributi CSS. È quindi possibile aggiungere altre funzionalità.
Una cosa da ricordare è che non tutti i siti web supportano gli iframe. Ciò significa che il vostro sito web potrebbe rifiutare un sito iframe o viceversa.
Methos 2: Creare widget iframe in Elementor con i plugin
Se si sta cercando un widget iFrame per la creazione di iframe, l'opzione migliore sarà Pacchetto di elementi aggiuntivi Elementor. Questo plugin è dotato di un sistema di widget per l'iframe Elementor.
Il Widget Iframe di Element Pack consente di incorporare qualsiasi sito web esterno, Google Maps, statistiche di criptovaluta o app direttamente nel progetto di Elementor. Seguite questi semplici passaggi per configurarlo.
Passo 1: inserire il widget Iframe in Elementor
- Aprite la vostra pagina in Elementor Editore.
- Nella barra di ricerca del widget, digitare "Iframe".
- Selezionate il widget con il tasto Logo Element Pack Pro.
- Trascinarlo e rilasciarlo nella sezione della pagina.
- Per impostazione predefinita, viene visualizzato un segnaposto finché non si aggiunge un URL.
Passo 2: Aggiungere un URL e configurare il layout dell'iframe
- Vai a Contenuto → Layout.
- Nel URL di origine del contenuto incollare il link che si desidera incorporare.
- Esempio:
- Collegamento a Google Maps → Visualizza la posizione.
- URL delle statistiche di crittografia → Mostra i dati di crittografia in tempo reale.
- URL del sito web → Visualizza il sito web completo.
- Esempio:
- Regolare le opzioni di layout:
- Altezza automatica → Regola automaticamente l'altezza dell'iframe.
- Altezza del telaio → Impostare un'altezza fissa personalizzata.
- Larghezza del contenitore Iframe → Regolare la larghezza del contenitore.
- Rapporto reattivo → Mantenere le proporzioni tra larghezza e altezza.
- Allineamento → Posizionare l'iframe (sinistra, centro, destra).
Nota: Se il Il widget Iframe occupa l'intero schermo in ElementorIl problema è solitamente legato alle impostazioni di altezza/larghezza o al rapporto di reattività. Per risolvere il problema, disabilitare Altezza automatica e impostare un'opzione personalizzata Altezza del telaio (ad esempio, 400-600px) e regolare il valore di Larghezza del contenitore Iframe invece di lasciarlo a 100%. Controllare anche se Rapporto reattivo è abilitato, in quanto può costringere l'iframe ad allungarsi. Quindi, disabilitarlo o impostare un rapporto corretto, come 16:9.
4. Configurare Impostazioni di Lazyload e Impostazioni aggiuntive per migliorare le prestazioni e le opzioni a schermo intero/barra di scorrimento. Inoltre, è necessario abilitare Carico pigro quando si utilizzano più iframe per velocizzare il caricamento.
Passo 3: Visualizzazione dell'Iframe nei Mockup dei dispositivi
- Vai a Contenuto → Dispositivi Iframe.
- Abilitazione Mostra dispositivo Iframe.
- Scegliete tra le cornici dei dispositivi precostituiti: Chrome, Firefox, Safari, Edge, Tablet, Mobile o Personalizzato.
- Se si seleziona Personalizzatoè possibile impostare un valore personalizzato Larghezza × Altezza, applicare un Tacca, aggiungere Pulsanti, oppure regolare il Lunetta.
Passo 4: Personalizzazione e stile dell'iframe
- Vai a Stile → Dispositivo.
- Personalizzare l'aspetto dell'iframe:
- Colore della lunetta (Colore1) → Regolare il colore della cornice esterna.
- Colore della tacca (Colore2) → Cambiare il colore dello stile della tacca.
- Stile dei pulsanti → Personalizzare i colori, la larghezza e gli offset dei pulsanti.
- Applicate bordi arrotondati o regolate lo spessore della cornice per ottenere un look raffinato.
Fase 5: Anteprima e pubblicazione
- Usare Elementor Modalità reattiva per verificare l'aspetto dell'iframe sui vari dispositivi.
- Regolate con precisione l'altezza, la larghezza o il carico di pigrizia per ottenere prestazioni.
- Una volta che tutto appare perfetto, fare clic su Aggiornamento / Pubblicazione.
Suggerimento: Alcuni siti web bloccano l'incorporazione di iframe. In tal caso, utilizzare il loro codice di incorporamento ufficiale o il link di condivisione.
Con questo widget è possibile aggiungere vari tipi di contenuti, siano essi video, audio, testo, immagini, siti web.
Guardate questo video per sapere come utilizzare correttamente il widget iframe in Elementor.
Si noti che il widget iframe di Element Pack offre una funzione Lazyload integrata. Quindi, utilizzando questo strumento, migliorerete le prestazioni del vostro sito web. Controllate questo Pagina demo del pacchetto di elementi per esempio.
Conclusione
L'IFrame, una funzione molto utilizzata, è stato trasformato in un widget per renderlo più dinamico e facile da usare.
I siti web che hanno politiche di sicurezza rigorose potrebbero non consentire l'incorporazione di contenuti in un iframe. Ma il numero di siti web che li supportano è maggiore. Si tratta quindi di una soluzione rapida per aggiungere contenuti a più livelli al vostro sito web. Spero che oggi abbiate imparato il metodo per creare widget iframe.
Grazie per essere rimasti svegli!
