Iframe är huvudsakligen en del av samma HTML-struktur som driver en webbplats. Med den kan du lägga till eller bädda in innehåll från andra webbplatser på din webbplats.
Av många olika skäl kan du behöva skapa en iframe-widget på din webbsida. Det inkluderar bilder, videor, en annan webbsida etc.
I allmänhet är tanken att snabbladda målobjektet från en extern källa och minska belastningen på din webbplats.
När det gäller hur du bäddar in den har du två sätt att skapa iframe-widget i Elementor:
- Använd rå kortkod
- Använd en Elelemntor Iframe plugin
I den här bloggen kommer vi att berätta exakt hur du kan skapa en iframe-widget i Elementor.
Metod 1: Skapa Elementor iframe Widget med kortkod
Elementor är en del av öppen källkodsprogramvaran WordPress och har många integrationer. En av dem är Shortcode. Även för operationer som en iframe finns det kortkoder tillgängliga.
För att uttrycka det enkelt kan du öppna vilken sida som helst med WordPress Gutenberg-redigeraren eller Elementor-redigeraren, infoga kortkoder och kalla in en iframe. Lätt som en plätt!
Skaffa bara ett HTML-redigeringsblock på din sida och lägg till ovanstående kod. Detta kommer helt enkelt att sammanfatta önskat innehåll / webbplats i en ruta med 400px höjd.
Att skapa en iframe-widget har vissa attribut som du kan använda för att anpassa utseendet på innehållet.
- Src - Källa länk. (https://) kan vara nödvändigt för att undvika blockering från webbplatsens säkerhetsprotokoll.
- Bredd/Höjd - Pixelvärden som definierar innehållets storleksområde.
- Rikta in - Definierar iramens inriktning på sidan.
- Inramad kant - Lägger till en kant runt iframe om värdet är större än/likvärdigt med 1. Visar ingen kant vid värdet 0.
- Rullning - Tillåt rullning av innehåll i iframe genom att definiera "yes", "no" och "auto".
Förutom HTML-koden stöder iframe även CSS-attribut. Så du kan lägga till fler funktioner till den.
En sak du måste komma ihåg är att inte alla webbplatser har stöd för iframe. Det betyder att din webbplats kan vägra en webbplats iframe eller vice versa.
Methos 2: Skapa iframe-widget i Elementor med plugins
Om du letar efter en iFrame-widget för att skapa iframe, är det bästa alternativet Elementor addon-Element pack. Detta plugin levereras med dedikerad widget för Elementor iframe.
Den Iframe Widget från Element Pack gör att du kan bädda in en extern webbplats, Google Maps, kryptostatistik eller app direkt i din Elementor-design. Följ dessa enkla steg för att ställa in det.
Steg 1: Infoga Iframe Widget i Elementor
- Öppna din sida i Elementor Redaktör.
- I widgetens sökfält skriver du "Iframe".
- Välj widget med hjälp av Element Pack Pro logotyp.
- Dra och släpp den i ditt sidavsnitt.
- Som standard visas en platshållare tills du lägger till en webbadress.
Steg 2: Lägg till en URL och konfigurera iframe-layouten
- Gå till Innehåll → Layout.
- I URL för innehållskälla klistra in den länk som du vill bädda in.
- Exempel:
- Länk till Google Maps → Visar plats.
- Kryptostatistik URL → Visar kryptodata i realtid.
- URL till webbplats → Visar hela webbplatsen.
- Exempel:
- Justera layoutalternativen:
- Auto höjd → Justerar automatiskt höjden på iframe.
- Iframe höjd → Ange en anpassad fast höjd.
- Iframe Container Bredd → Justera bredden på behållaren.
- Responsivt förhållande → Behåll proportionerna mellan bredd och höjd.
- Inriktning → Placera iramen (vänster, mitt, höger).
Obs! Om Iframe Widget tar över hela skärmen i Elementorär problemet vanligtvis med inställningarna för höjd/bredd eller responsivt förhållande. För att åtgärda detta, inaktivera Auto höjd och ställa in en anpassad Iframe höjd (t.ex. 400-600 pixlar) och justera Iframe Container Bredd istället för att låta den vara 100%. Kontrollera också om Responsivt förhållande är aktiverad, eftersom det kan tvinga iframe att sträcka sig. Så inaktivera det eller ställ in ett korrekt förhållande som 16:9.
4. Konfigurera Inställningar för lazyload och Ytterligare inställningar för bättre prestanda och alternativ för fullskärm/rullningsfält. Och, måste aktivera Lat belastning när du använder flera iframes för snabbare laddning.
Steg 3: Visa Iframe i enhetsmockuper
- Gå till Innehåll → Iframe-enheter.
- Aktivera Visa Iframe-enhet.
- Välj bland förbyggda enhetsramar: Chrome, Firefox, Safari, Edge, surfplatta, mobil eller anpassad.
- Om du väljer Anpassadkan du ställa in en anpassad Bredd × höjd, tillämpa en Notch, tillägg Knappar, eller justera Bezel.
Steg 4: Anpassa och utforma iframe
- Gå till Stil → Enhet.
- Anpassa iframens utseende:
- Färg på infattning (Färg1) → Justera färgen på den yttre ramen.
- Färg på skåran (Färg2) → Ändra färg på notch-stilen.
- Styling av knappar → Anpassa knapparnas färg, bredd och förskjutning.
- Applicera rundade kanter eller justera ramens tjocklek för ett polerat utseende.
Steg 5: Förhandsgranska och publicera
- Använd Elementor:s Responsivt läge för att kontrollera iframens utseende på olika enheter.
- Finjustera höjd, bredd eller belastning för bättre prestanda.
- När allt ser perfekt ut klickar du på Uppdatera / Publicera.
Tips: Vissa webbplatser blockerar iframe-inbäddning. I så fall använder du deras officiella inbäddningskod eller delningslänk.
Med den här widgeten kan du lägga till olika typer av innehåll, t.ex. video, ljud, text, bilder eller webbplatser.
Titta på den här videon för att veta hur du använder iframe-widgeten korrekt i Elementor.
Observera att iframe-widgeten av Element Pack ger dig en integrerad Lazyload-funktion. Så du kommer att förbättra din webbplats prestanda med hjälp av detta verktyg. Kontrollera detta Demosida för elementpaket till exempel.
Slutsats
IFrame som är en brett använd funktion har gjorts till en widget för att göra den mer dynamisk och enkel att använda.
Webbplatser med strikta säkerhetspolicyer kanske inte tillåter en iframe för att bädda in innehåll. Men antalet stödjande webbplatser är större. Så det är en snabb lösning för att lägga till flerskiktat innehåll på din webbplats.det är det. Hoppas att du har lärt dig metoden för att skapa iframe-widget idag.
Tack för att du håller dig vaken!
