Iframe er hovedsageligt en del af den samme HTML-struktur, som kører en hjemmeside. Det giver dig mulighed for at tilføje eller integrere indhold fra andre hjemmesider på din hjemmeside.
Af mange grunde kan du have brug for at oprette en iframe-widget på din webside. Det omfatter billeder, videoer, en anden webside osv.
Generelt er ideen at indlæse målelementet hurtigere fra en ekstern kilde og reducere belastningen på dit websted.
Når det gælder indlejring, er der to måder at oprette en iframe-widget på i Elementor:
- Brug rå shortcode
- Brug et Elelemntor Iframe-plugin
I denne blog fortæller vi dig præcis, hvordan du kan oprette en iframe-widget i Elementor.
Metode 1: Opret Elementor iframe-widget med kortkode
Som en del af open source-softwaren WordPress har Elementor mange integrationer. En af dem er Shortcode. Selv til operationer som en iframe er der kortkoder til rådighed.
For at sige det enkelt kan du åbne en hvilken som helst side med WordPress Gutenberg-editor eller Elementor-editor, indsætte kortkoder og indkalde en iframe. Så nemt som ingenting!
Du skal blot oprette en HTML-editorblok på din side og tilføje ovenstående kode. Dette vil simpelthen indkalde det ønskede indhold/websted i en boks med 400px højde.
Oprettelse af en iframe-widget har nogle attributter, som du kan bruge til at tilpasse indholdets udseende.
- Src - Link til kilde. (https://) kan være nødvendigt for at undgå blokering fra webstedets sikkerhedsprotokol.
- Bredde/højde - Pixelværdier, der definerer indholdets størrelsesområde.
- Juster - Definerer iframe-justeringen på siden.
- Rammebredde - Tilføjer kant rundt om iframe, hvis værdien er større/lig med 1. Viser ingen kant ved værdien 0.
- Rulning - Tillad rulning af indhold i iframe ved at definere 'ja', 'nej' og 'auto'.
Ud over HTML-koden understøtter iframe også CSS-attributter. Så du kan tilføje flere funktioner til den.
En ting, du skal huske, er, at ikke alle hjemmesider er iframe-understøttede. Det betyder, at dit websted måske afviser et iframe-websted eller omvendt.
Metode 2: Opret iframe-widget i Elementor med plugins
Hvis du leder efter en iFrame-widget til at skabe iframe, så er den bedste mulighed Elementor addon-elementpakke. Dette plugin kommer med dedikeret widget til Elementor iframe.
Den Iframe-widget fra Element Pack giver dig mulighed for at integrere enhver ekstern hjemmeside, Google Maps, kryptostatistik eller app direkte i dit Elementor-design. Følg disse enkle trin for at sætte det op.
Trin 1: Indsæt Iframe Widget i Elementor
- Åbn din side i Elementor Redaktør.
- Skriv i widgetsøgefeltet "Iframe".
- Vælg widgetten med Element Pack Pro-logo.
- Træk og slip den ind på din sidesektion.
- Som standard vil du se en pladsholder, indtil du tilføjer en URL.
Trin 2: Tilføj en URL og konfigurer iframe-layoutet
- Gå til Indhold → Layout.
- I URL til indholdskilde indsæt det link, du vil integrere.
- Et eksempel:
- Link til Google Maps → Viser placering.
- URL til kryptostatistik → Viser live kryptodata.
- Hjemmeside-URL → Viser hele hjemmesiden.
- Et eksempel:
- Juster layoutindstillingerne:
- Automatisk højde → Justerer automatisk iframe-højden.
- Iframe-højde → Indstil en brugerdefineret fast højde.
- Iframe-containerens bredde → Juster beholderens bredde.
- Responsivt forhold → Bevar proportionerne mellem bredde og højde.
- Tilpasning → Placer irammen (venstre, midt, højre).
Bemærk: Hvis den Iframe Widget overtager hele skærmen i Elementorer problemet normalt med indstillingerne for højde/bredde eller responsivt forhold. For at løse dette skal du deaktivere Automatisk højde og indstille en brugerdefineret Iframe-højde (f.eks. 400-600 px), og juster Iframe-containerens bredde i stedet for at lade den stå på 100%. Tjek også, om Responsivt forhold er aktiveret, da det kan tvinge iframen til at strække sig. Så slå det fra, eller indstil et korrekt forhold som 16:9.
4. Konfigurer Lazyload-indstillinger og Yderligere indstillinger for bedre ydeevne og muligheder for fuld skærm/rullelinje. Og du skal aktivere Doven indlæsning når du bruger flere iframes for hurtigere indlæsning.
Trin 3: Vis Iframe i Device Mockups
- Gå til Indhold → Iframe-enheder.
- Gør det muligt Vis Iframe-enhed.
- Vælg mellem præfabrikerede enhedsrammer: Chrome, Firefox, Safari, Edge, tablet, mobil eller brugerdefineret.
- Hvis du vælger Brugerdefineretkan du indstille en brugerdefineret Bredde × højde, anvende en Indhak, tilføj Knappereller justere Ramme.
Trin 4: Tilpas og stil iframen
- Gå til Stil → Enhed.
- Tilpas iramens udseende:
- Farve på ramme (Farve1) → Juster den ydre rammefarve.
- Farve på indhak (Farve2) → Skift farve på notch-stilen.
- Styling af knapper → Tilpas knapfarver, -bredde og -forskydninger.
- Anvend afrundede kanter eller juster rammetykkelsen for at få et poleret look.
Trin 5: Forhåndsvisning og udgivelse
- Brug Elementor's Responsiv tilstand for at kontrollere iframes udseende på tværs af enheder.
- Finjuster højden, bredden eller den dovne belastning for at opnå en god ydeevne.
- Når alt ser perfekt ud, klikker du på Opdatering/udgivelse.
Tip: Nogle hjemmesider blokerer for iframe-indlejring. I så fald skal du bruge deres officielle indlejringskode eller delingslink.
Du kan tilføje forskellige typer indhold, det være sig video, lyd, tekst, billeder eller hjemmesider, ved hjælp af denne widget.
Se denne video for at finde ud af, hvordan du bruger iframe-widget korrekt i Elementor.
Bemærk, at iframe-widget'en fra Element Pack giver dig en integreret Lazyload-funktion. Så du vil forbedre din hjemmesides ydeevne ved hjælp af dette værktøj. Tjek dette Demoside for elementpakke for eksempel.
Konklusion
IFrame, som er en meget brugt funktion, er blevet lavet til en widget for at gøre den mere dynamisk og nem at bruge.
Hjemmesider med strenge sikkerhedspolitikker tillader måske ikke, at en iframe indlejrer indhold. Men antallet af understøttende hjemmesider er større. Så det er en hurtig løsning til at tilføje indhold i flere lag til dit website. Jeg håber, du har lært metoden til at skabe en iframe-widget i dag.
Tak, fordi du blev oppe!
