Sådan viser du billeder i WordPress med Elementor: De kreative måder

Det er ingen hemmelighed, at billeder er en vigtig del af enhver hjemmeside. Det forbedrer hjemmesidens visuelle tiltrækningskraft såvel som engagement. I WordPress er det ret nemt at indsætte billeder i dine indlæg og sider. 

En måde at vise billeder på er ved blot at tilføje medier i Classic Editor. En anden måde er at bruge billedblokkene i Gutenberg-editoren. I begge tilfælde er stilarter foruddefinerede i temaet.

Elementor giver dog fleksibilitet til at vise billeder i WordPress. Det tilbyder en række kreative måder at vise billeder på din hjemmeside. Endnu vigtigere er, at hvert billedelement kan tilpasses individuelt.

Brug af elementer som Billedbokse, Billedgallerier, Billedmaskering
du kan oprette betagende billedsektioner.

Med lidt kreativitet og sans for detaljer kan du få dit websted til at skille sig ud fra mængden ved hjælp af disse elementer.

Denne artikel vil guide dig til, hvordan du viser billeder i WordPress med Elementor for at designe en intuitiv og brugervenlig grænseflade til visning af billeder på din hjemmeside.

Hvorfor billeder er vigtige for dit webindhold

Når vi ser et billede, begynder den menneskelige hjerne automatisk at analysere og kategorisere den visuelle information, den modtager, uden en bevidst indsats. Denne proces gør indholdet nemmere at huske og genkalde.

Desuden kan billeder gøre dit indhold mere engagerende og fængende for besøgende ved at forbedre den visuelle tiltrækningskraft på et websted. 

Her er et par grunde til, at billeder er vigtige for webindhold:

• Fanger let opmærksomhed: Billeder kan bruges til at fange en besøgendes opmærksomhed og trække dem ind i dit indhold. Dette er især vigtigt for websteder, der har til formål at sælge produkter eller tjenester.
• Formidle information hurtigt: Nogle gange kan et billede kommunikere information hurtigere og mere effektivt end tekst. For eksempel kan en infografik blot formidle kompleks information.
• Bryder monotonien: Store tekstblokke kan være kedelige og monotone at læse. Billeder kan hjælpe med at bryde den lange tekst op og bringe opmærksomheden tilbage til dit indhold.
• Efterlader et langvarigt præg på hukommelsen: Den menneskelige hjerne kan behandle visuel information meget hurtigere end tekst eller verbal information og kan beholde den i lang tid.
• Gør dit indhold mere delbart: Sociale medieplatforme som Facebook og Instagram er meget visuelle, og billeder er ofte mere delbare end tekst alene. Ved at inkludere billeder af høj kvalitet på din hjemmeside, kan du gøre det mere sandsynligt, at besøgende deler dit indhold på sociale medier.
• Brandkendskab: Billeder kan hjælpe med at forbedre din branding ved at vise dit logo eller andre visuelle elementer forbundet med dit brand.

Sådan tilføjes billeder i WordPress (grundlæggende metode)

Den helt grundlæggende måde at vise billeder på WordPress er ved at tilføje et billede til mediebiblioteket og vise det med standardstile.

Sådan tilføjer du et billede til WordPress mediebibliotek:

Log ind på din WordPress, gå til Medier > Tilføj ny, og vælg billedet fra din computer for at uploade til mediebiblioteket.

Nu afhænger visning af billeder på WordPress af, hvilken standardeditor du bruger.

Gutenberg Redaktør:

I WordPress standard Gutenberg aka blokredaktør, kan du vise billeder ved hjælp af billedblokke. For det skal du åbne editoren og tilføje billedblokken i den ønskede position til visning af billedet. Upload eller vælg derefter et billede fra mediebiblioteket.

Klassisk redaktør:

Hvis du bruger en gammel klassisk editor, skal du åbne en side eller et indlæg på editoren, og placere derefter musemarkøren på det indlæg/siden, hvor du vil vise billedet. Klik derefter på knappen Tilføj medie og vælg et billede fra mediebiblioteket.

Sådan viser du billeder i WordPress ved hjælp af Elementor (avancerede metoder)

Hvis du nu vil have mere avancerede måder at vise billeder på, kan du skifte til Elementor sidebygger. Med Elementor kan du bruge billedwidgets til at fremvise hjemmesidebilleder kreativt. 

For at tage tingene til næste niveau, kommer ElementsKit Elementor-tilføjelsen med en masse widgets, der kan lade dig stilfuldt vise billeder med de mest tilpasselige funktioner. ElementsKit kommer med widgets som Elementor Image Box, Image Gallery, Image Swap og så videre. Disse widgets giver dig forskellige muligheder for at udstille billeder stilfuldt. 

Følgende er en demonstration af, hvordan du kan bruge disse widgets til at vise billeder på WordPress og gøre dit websted mere livligt.

Installer ElementsKit

For at bruge de avancerede billedfunktioner skal du installere ElementsKit Lite og ElementsKit Pro plugins på dit WordPress-websted.

Her er dokumentationen til installation af ElementsKit-plugins

Efter installation af plugins kan du gå videre med widgets for at vise billeder på WordPress.

Metode 1: Vis billeder i en stilfuld billedboks

Ved hjælp af ElementsKit Image Box-widgetten kan du fremhæve en sektion med en kombination af et billede og tekst. Det lader dig vise et billede med tekst som en overskrift og en beskrivelse. Disse stilarter bruges ofte til at fremhæve et flagskibsprodukt, -tjeneste eller -funktion.

For at bruge funktionen: aktiver Image Box-widgetten fra ElementsKit > Widget

Sådan bruger du ElementsKit Image Box-widgetten til Elementor:

Billede

I billedsektionen kan du tilpasse billedet og dets udseende.

1. Vælg billede: Vælg et billede fra mediebiblioteket, eller upload et.
2. Billedestørrelse: Indstil størrelsen på billedet.
3. Indholdsområde: Du kan vælge stilen for indholdsområdet fra de givne muligheder.
4. Lige høj: Aktiver eller deaktiver den samme højde for billedet og indholdsområdet.
5. Aktiver link: Du kan bruge billedet som et ankerafsnit ved at aktivere linket. Når det er aktiveret, skal du tilføje linket til billedet.

Legeme

I brødtekstsektionen kan du tilføje al teksten til Elementor-billedboksen. Dette inkluderer en overskrift, beskrivelse, titel HTML-tag og tekstjustering.

1. Titel: Tilføj overskriftsteksten i dette felt.
2. Titel HTML-tag: Vælg hvilket HTML-tag du vil have til overskriften (H1, H2, H3, div, span, afsnit osv.)
3. Beskrivelse: Tilføj en kort beskrivelse af indholdet i dette felt.
4. Justering: Indstil tekstjusteringen for billedet, overskriften, beskrivelsen og knappen.

Knap

Du har mulighed for at tilføje en CTA-knap på Elementor-billedboksen. For det,

1. Aktiver knap: Aktiver denne mulighed for at tilføje en knap på billedboksen.
2. Etiket: Tilføj en knaplabel (tekst), der angiver formålet med CTA'en.
3. URL: Indtast sidelinket, som du vil omdirigere den besøgende, når de klikker.
4. Tilføj ikon: Hvis du vil vise et ikon med knapetiketten, skal du aktivere denne funktion.
5. Ikon: Vælg et ikon fra Elementor-ikonbiblioteket.
6. Ikonposition: Vælg, om ikonet skal være før eller efter knapteksten.

Dernæst, under stilfanen, kan du tilpasse udseendet af Elementor-billedboksen inklusive farver, baggrund, typografi og så videre.

I den Klassiske kurver sektion, kan du justere bredden og margenen af indholdsområdet. Stil derefter billedet ved at ændre polstring og opacitet. 

Desuden kan du tilpasse overskriften og beskrivelsestekstens udseende ved at ændre farve, typografi, baggrundsfarve og så videre. Desuden skræddersy knapstile og dets ikon med deres egenskaber.

Se videoen for at få mere detaljeret viden om ElementsKit Image Box-widgetten.

Metode 2: Vis to billeder med swap-animationer

Billedbytning er en stilfuld måde at vise to alternative billeder på ét sted, som skifter, når besøgende svæver eller klikker på billedet. ElementsKit Image Swap-widgetten kommer med et par snesevis af fantastiske effekter, der gør dit websted endnu mere visuelt tiltalende.

Du kan bruge denne funktion, såsom at bruge det første billede som et forsidebillede, der fanger opmærksomheden, og det andet billede til at give de nødvendige oplysninger.

For at bruge funktionen: aktiver Image Swap-widgetten fra ElementsKit > Widget

Sådan bruger du ElementsKit Image Swap-widget til Elementor:

1. Forside billede: Dette er det billede, der vises som standard, når siden indlæses i webbrowseren.
2. Bagsidebillede: Dette er det billede, der vises, når handlingen udføres, dvs. en besøgende svæver eller klikker på billedet.
3. Billedestørrelse: Indstil billedstørrelsen for begge billeder.
4. Byt stil: Du har 21 forskellige swap-effekter tilgængelige med ElementsKit Image Swap-widget, som kan hjælpe dig med at gøre dit webdesign mere attraktivt for besøgende.

5. Tigger: Her kan du vælge mellem Hover eller Click-handling for at udløse swap-billederne.
6. Indikatorer: Dette fungerer som en navigator, der angiver, hvilket billede der er på showet, og hvilket der er baggrunden.
7. Link: Du kan linke billederne til en side, hvis du vil.

På stilfanen kan du justere billedhøjden og varigheden af swap-animationens varighed. Og hvis du aktiverer indikatoren, kan du ændre deres position og tilpasse deres størrelse og farver.

Metode 3: Giv hjemmesidebillederne unikke former med billedmaskering

Dette er en unik måde at gøre din hjemmeside livlig med unikt formede billeder. Billedmaskeringsfunktionerne forvandler de traditionelt formede billeder til mere engagerende. I WordPress er maskering ret nemt med Elementor.

ElementsKit til Elementor leveres med et maskeringsmodul til billeder. Modulet er tilgængeligt for alle elementer i Elementor, der involverer et billede. I Elementor-editoren, aktiver ElementsKit Masking og vælg en form blandt de forudindlæste. Du kan også tilføje en brugerdefineret form til billederne.

Metode 4: Vis billeder i et galleri

Elementor kommer med en fantastisk måde at fremvise flere billeder i et elegant galleri. Basic Gallery-widgetten i Elemntor arbejder med en traditionel tilgang, hvor du kan tilføje billeder, indstille billedstørrelsen og tilpasse grundlæggende funktioner som afstand og kanter på billedet.

ElementsKit Image Gallery-widgetten kommer dog med mere fleksible muligheder. Med widgetten kan du tilpasse layoutet med beskrivelser, tilføje filtre til galleriet og individuelt hvert aspekt af miniaturebilledet, overskriften, billedet og filtrene.

Lær mere om billedgalleri-widgetten, og hvordan den kan forbedre dit webstedsdesign fra vores blog.

Afslut

Generelt kommer Elementor med flere måder at vise billeder i WordPress. For at få mest muligt ud af Elementors muligheder kan ElementsKit være en fantastisk tilføjelse.

ElementsKit har forskellige måder og stilarter: Billedboks til at vise et billede med en overskrift og beskrivelse; Billedskift for at vise to billeder alternativt; Der er også billedgalleri og billedmaskeringswidgets for at give dig flere muligheder.

Hvert af disse elementer tilbyder unikke funktioner og tilpasningsmuligheder, så du kan skabe engagerende og visuelt tiltalende indhold til dit websted.

Hvis du finder dette nyttigt, er der mere til dig med ElementsKit. Det her Elementor tilføjelser kommer med snesevis flere elementer, der kan hjælpe dig med at oprette og designe et websted med det højeste antal funktioner og valgmuligheder.