Hur man visar bilder i WordPress med Elementor: The Creative Ways

Det är ingen hemlighet att bilder är en viktig komponent på alla webbplatser. Det förbättrar webbplatsens visuella attraktionskraft och engagemang. I WordPress är det ganska enkelt att infoga bilder i dina inlägg och sidor. 

Ett sätt att visa bilder är att helt enkelt lägga till media i Classic Editor. Ett annat sätt är att använda bildblocken i Gutenberg-redigeraren. I båda fallen är stilar fördefinierade i temat.

Elementor ger dock flexibilitet i att visa bilder i WordPress. Det erbjuder en mängd olika kreativa sätt att visa bilder på din webbplats. Ännu viktigare är att varje bildelement är individuellt anpassningsbart.

Använda element som Bildrutor, Bildgallerier, Bildmaskering
du kan skapa fantastiska bildavsnitt.

Med lite kreativitet och uppmärksamhet på detaljer kan du få din webbplats att sticka ut från mängden med hjälp av dessa element.

Den här artikeln guidar dig om hur du visar bilder i WordPress med Elementor för att designa ett intuitivt och användarvänligt gränssnitt för att visa bilder på din webbplats.

Varför bilder är viktiga för ditt webbinnehåll

När vi ser en bild börjar den mänskliga hjärnan automatiskt analysera och kategorisera den visuella information den tar emot, utan en medveten ansträngning. Denna process gör innehållet lättare att komma ihåg och återkalla.

Dessutom kan bilder göra ditt innehåll mer engagerande och catchy för besökare genom att förbättra den visuella attraktionskraften på en webbplats. 

Här är några anledningar till varför bilder är viktiga för webbinnehåll:

• Fångar lätt uppmärksamhet: Bilder kan användas för att fånga en besökares uppmärksamhet och dra in dem i ditt innehåll. Detta är särskilt viktigt för webbplatser som syftar till att sälja produkter eller tjänster.
• Förmedla information snabbt: Ibland kan en bild kommunicera information snabbare och mer effektivt än text. Till exempel kan en infografik enkelt förmedla komplex information.
• Bryter monotonin: Stora textblock kan vara tråkiga och monotona att läsa. Bilder kan hjälpa till att bryta upp den långa texten och få tillbaka uppmärksamheten på ditt innehåll.
• Lämnar ett långvarigt märke på minnet: Den mänskliga hjärnan kan bearbeta visuell information mycket snabbare än text eller verbal information och kan behålla den under lång tid.
• Gör ditt innehåll mer delbart: Sociala medieplattformar som Facebook och Instagram är mycket visuella och foton är ofta mer delbara än bara text. Genom att inkludera bilder av hög kvalitet på din webbplats kan du göra det mer sannolikt att besökarna delar ditt innehåll på sociala medier.
• Varumärkeskännedom: Bilder kan hjälpa till att förbättra ditt varumärke genom att visa din logotyp eller andra visuella element som är kopplade till ditt varumärke.

Hur man lägger till bilder i WordPress (grundläggande metod)

Det mycket grundläggande sättet att visa bilder på WordPress är att lägga till en bild i mediebiblioteket och visa den med standardstilar.

Så här lägger du till en bild i WordPress mediebibliotek:

Logga in på din WordPress, gå till Media > Lägg till ny, och välj bilden från din dator för att ladda upp till mediebiblioteket.

Nu beror visningen av bilder på WordPress på vilken standardredigerare du använder.

Gutenberg Redaktör:

I WordPress-standarden Gutenberg aka block editor, kan du visa bilder med bildblock. För det, öppna redigeraren och lägg till bildblocket i önskad position för att visa bilden. Ladda sedan upp eller välj en bild från mediebiblioteket.

Klassisk redigerare:

Om du använder en gammal klassisk editor, öppna en sida eller inlägg i editorn och placera sedan muspekaren på inlägget/sidan där du vill visa bilden. Klicka sedan på knappen Lägg till media och välj en bild från mediebiblioteket.

Hur man visar bilder i WordPress med Elementor (avancerade metoder)

Om du nu vill ha mer avancerade sätt att visa bilder kan du byta till Elementor sidbyggare. Med Elementor kan du använda bildwidgetarna för att visa webbbilder kreativt. 

ElementsKit Elementor-tillägget tar saker till nästa nivå och kommer med ett gäng widgets som kan låta dig elegant visa bilder med de mest anpassningsbara funktionerna. ElementsKit kommer med widgets som Elementor Image Box, Image Gallery, Image Swap och så vidare. Dessa widgets ger dig olika alternativ för att visa bilder stilfullt. 

Följande är en demonstration av hur du kan använda dessa widgets för att visa bilder på WordPress och göra din webbplats mer livlig.

Installera ElementsKit

För att använda de avancerade bildfunktionerna måste du installera ElementsKit Lite och ElementsKit Pro-plugins på din WordPress-webbplats.

Här är dokumentationen för att installera ElementsKit-plugins

Efter att ha installerat plugins kan du gå vidare med widgetarna för att visa bilder på WordPress.

Metod 1: Visa bilder i en snygg bildlåda

Med hjälp av ElementsKit Image Box-widgeten kan du markera ett avsnitt med en kombination av en bild och text. Det låter dig visa en bild med text som en rubrik och en beskrivning. Dessa stilar används ofta för att lyfta fram en flaggskeppsprodukt, tjänst eller funktion.

För att använda funktionen: aktivera Image Box-widgeten från ElementsKit > Widget

Så här använder du ElementsKit Image Box-widgeten för Elementor:

Bild

I bildsektionen kan du anpassa bilden och dess utseende.

1. Välj bild: Välj en bild från mediebiblioteket eller ladda upp en.
2. Bildstorlek: Ställ in storleken på bilden.
3. Innehållsområde: Du kan välja stil för innehållsområdet från de givna alternativen.
4. Lika höjd: Aktivera eller inaktivera samma höjd för bild- och innehållsområdet.
5. Aktivera länk: Du kan använda bilden som en ankarsektion genom att aktivera länken. När det är aktiverat lägg till länken till bilden.

Kropp

I brödsektionen kan du lägga till all text i Elementor-bildrutan. Detta inkluderar en rubrik, beskrivning, titel HTML-tagg och textjustering.

1. Titel: Lägg till rubriktexten i det här fältet.
2. Titel HTML-tagg: Välj vilken HTML-tagg du vill ha för rubriken (H1, H2, H3, div, span, paragraf, etc.)
3. Beskrivning: Lägg till en kort beskrivning av innehållet i det här fältet.
4. Inriktning: Ställ in textjusteringen för bilden, rubriken, beskrivningen och knappen.

Knapp

Du har möjlighet att lägga till en CTA-knapp på Elementor-bildrutan. För det,

1. Aktivera knapp: För att lägga till en knapp på bildrutan, aktivera det här alternativet.
2. Märka: Lägg till en knappetikett (text) som anger syftet med CTA.
3. URL: Ange sidlänken som du vill omdirigera besökaren när de klickar.
4. Lägg till ikon: Om du vill visa en ikon med knappetiketten, aktivera den här funktionen.
5. Ikon: Välj en ikon från Elementors ikonbibliotek.
6. Ikonposition: Välj om ikonen ska vara före eller efter knapptexten.

Nästa upp, under stilfliken, får du anpassa utseendet på Elementor-bildrutan inklusive färger, bakgrund, typografi och så vidare.

I den Klassiska kurvor kan du justera bredden och marginalen på innehållsområdet. Stil sedan bilden genom att ändra stoppning och opacitet. 

Dessutom kan du anpassa rubriken och beskrivningstextens utseende genom att ändra färg, typografi, bakgrundsfärg och så vidare. Dessutom, skräddarsy knappstilar och dess ikon med deras attribut.

Titta på videon för att få mer detaljerad kunskap om ElementsKit Image Box-widgeten.

Metod 2: Visa två bilder med swap-animationer

Bildbyte är ett snyggt sätt att visa två alternativa bilder på ett ställe som byter när besökare svävar eller klickar på bilden. ElementsKit Image Swap-widgeten kommer med ett par dussintals fantastiska effekter som gör din webbplats ännu mer visuellt tilltalande.

Du kan använda den här funktionen som att använda den första bilden som en omslagsbild som fångar uppmärksamheten och den andra bilden för att ge nödvändig information.

För att använda funktionen: aktivera widgeten Image Swap från ElementsKit > Widget

Så här använder du ElementsKit Image Swap-widgeten för Elementor:

1. Främre bild: Det här är bilden som visas som standard när sidan laddas i webbläsaren.
2. Bakre bild: Detta är bilden som visas när åtgärden görs, dvs en besökare svävar eller klickar på bilden.
3. Bildstorlek: Ställ in bildstorleken för båda bilderna.
4. Byt stil: Du har 21 olika växlingseffekter tillgängliga med ElementsKit Image Swap-widget, som kan hjälpa dig att göra din webbdesign mer tilltalande för besökare.

5. Tigger: Här kan du välja mellan Hover eller Click action för att utlösa växlingsbilderna.
6. Indikatorer: Detta fungerar som en navigator, som indikerar vilken bild som är på programmet och vilken som är bakgrunden.
7. Länk: Du kan länka upp bilderna till en sida om du vill.

På stilfliken kan du justera bildhöjden och varaktigheten för swap-animeringens varaktighet. Och om du aktiverar indikatorn kan du ändra deras position och anpassa deras storlek och färger.

Metod 3: Ge webbplatsbilderna unika former med bildmaskering

Detta är ett unikt sätt att göra din webbplats livlig med unikt formade bilder. Bildmaskeringsfunktionerna förvandlar de traditionellt formade bilderna till mer engagerande. I WordPress är maskering ganska enkelt med Elementor.

ElementsKit för Elementor kommer med en maskeringsmodul för bilder. Modulen är tillgänglig för alla element i Elementor som involverar en bild. I Elementor-redigeraren, aktivera ElementsKit-maskering och välj en form bland de förinstallerade. Du kan också lägga till en anpassad form till bilderna.

Metod 4: Visa bilder i ett galleri

Elementor kommer med ett bra sätt att visa upp flera bilder i ett elegant galleri. Basic Gallery-widgeten i Elemntor fungerar med ett traditionellt tillvägagångssätt där du kan lägga till bilder, ställa in bildstorleken och anpassa grunderna som avstånd och kanter på bilden.

Men den ElementsKit Bildgalleri-widget kommer med mer flexibla alternativ. Med widgeten kan du anpassa layouten med beskrivningar, lägga till filter i galleriet och individuellt varje aspekt av miniatyren, översikten, bilden och filtren.

Lär dig mer om bildgalleri-widgeten och hur den kan förbättra din webbdesign från vår blogg.

Sammanfatta

Sammantaget kommer Elementor med flera sätt att visa bilder i WordPress. För att få ut det mesta av Elementors möjligheter kan ElementsKit vara ett bra komplement.

ElementsKit har olika sätt och stilar: Bildruta för att visa en bild med en rubrik och beskrivning; Byt bild för att visa två bilder alternativt; Det finns också widgets för bildgalleri och bildmaskering för att ge dig fler alternativ.

Vart och ett av dessa element erbjuder unika funktioner och anpassningsalternativ, så att du kan skapa engagerande och visuellt tilltalande innehåll för din webbplats.

Om du tycker att detta är användbart finns det mer för dig med ElementsKit. Detta Elementor-tillägg kommer med dussintals fler element som kan hjälpa dig att skapa och designa en webbplats med det högsta antalet funktioner och tillval.