Hur man lägger till bildruta i WordPress: 3 enkla steg 

Vill du få dina WordPress-sidor att visa upp sig? Sedan är bildrutor det hemliga elementet.

Du kan visa upp produkter, lyfta fram teammedlemmar eller uppmärksamma din kund på nyckelfunktioner med bildrutan i WordPress. 

Och du gissade rätt!

I den här texten kommer vi att skildra 3-stegsguide om hur du lägger till en bildruta i WordPress.

Låt oss börja!

Vad är en bildlåda i WordPress? 

En bildruta är ett grafiskt element eller en behållare utformad för att visa bilder på en webbsida eller ett inlägg. Du kan kombinera text och länkar med bilder för att presentera information på ett engagerande och visuellt tilltalande sätt. Det är också användbart att förbättra en WordPress-webbplats övergripande design och användarupplevelse.

Bildrutor används ofta på webbsidor för att skapa avsnitt som:

• Markera viktiga funktioner eller tjänster
• Presenterar blogginlägg eller portfolios
• Visar bilder och produktgallerier
• Visa upp teammedlemmar 
• Visa vittnesmål och så vidare.

Nyckelkomponenter i WordPress Image Box

• Bild: Det huvudsakliga visuella elementet, som ofta visar upp en produkt, tjänst, teammedlem eller relaterat koncept.
• Titel: En kort, beskrivande rubrik som fångar essensen av bilden och tillhörande text.
• Text: En kort beskrivning eller informationsutdrag för att ge sammanhang och detaljer.
• Knapp/länk: En klickbar knapp eller länk för att leda användare till en relevant sida, produkt eller andra resurser.

Hur man lägger till bildruta i WordPress: 3-stegsguide 

Bildrutor kan förvandla dina WordPress-sidor till visuellt fantastiska mästerverk. Det fängslar också din publik och lämnar ett bestående intryck.

Låt oss se hur man skapar en bildruta i WordPress på bara 3 enkla steg:

Steg 1: Installera och aktivera nödvändiga plugins

För att lägga till en bildruta på din WordPress-webbplats kan du använda antingen flytande kod eller Elementor-plugins. I så fall är det att använda plugins ett bekvämt sätt att skapa och lägga till bildrutor utan ens kodkunskap. 

Således kan du gå för en allt-i-ett Elementor-tillägg — ElementsKit. Detta fantastiska plugin erbjuder omfattande funktioner och färdiga mallar för att lägga till bilder på din WordPress-webbplats. Dessutom är designen av bildrutan och alla element i ElementsKit-bildrutan helt anpassningsbara.

För att installera ElementsKit image box-plugin, gå till din WordPress-instrumentpanel.

• Navigera till Plugins ➡ Lägg till nytt 
• Söka efter "ElementsKit" 
• Klicka på "Installera nu"
• Eller ladda ner och ladda upp Zip fil
• Aktivera plugin-programmet när det är installerat

Steg 2: Lägg till bildruta på din WordPress-webbplats

Efter att ha installerat och aktiverat WordPress image box-plugin, dvs ElementsKit, kan du använda dess fördesignade mallar. Dessa mallar är lätta att använda med bara ett klick. Dessutom kan du lägga till/ta bort element baserat på dina krav. 

Låt oss se hur man lägger till bilder i wordpress med hjälp av ElementsKit bildruta: 

• Skapa en ny sida/inlägg eller öppna en befintlig 
• Öppna med Elementor 
• Klicka på "ElementsKit"-ikonen 

• Därefter måste du välja bildrutans widget från ElementsKit widgets kategori 
• Klicka på "Bildlåda"

• Här kan du komma åt 11 gratis och, 8 premium design och stil variationer; en summa av 19 olika mallar för att lägga till en bildruta på WordPress-webbplatsen
• Du kan se förhandsvisningar av alla mallar för att förstå designen och de element som matchar din webbplats
• Klicka på plustecken (+) för att se liveförhandsvisningen 

• När du har slutfört designen, klicka på "Föra in"
• Det kommer att läggas till på din sida/inlägg 
• Nu kan du lägga till/ta bort eller ändra bildrutans innehåll, stilar och andra egenskaper
• Efter all anpassning, klicka på "Publicera". Och bildrutan kommer att vara live på din WordPress-webbplats.

Steg 3: Anpassa stilar och inställningar 

ElementsKit, ett utmärkt tillägg för Elementor är ett helt anpassningsbart plugin eftersom användare kan använda dess 85+ widgets och moduler. Liksom andra element är bildbox-widgeten också anpassad efter dina behov. 

Du kan redigera rubriker och brödtexten. Återigen kan du ändra stilen på bilder och uppmaningsknappar. Dessutom kan du styla upp bildrutorna med många effekter och format.

Låt oss se hur man anpassar en bildruta i WordPress: 

Anpassning av layout

Efter att ha infogat ElementsKits förgjorda bildboxmallar i WordPress kan du justera dess layout. 

• Öka eller minska bildrutans bredd
• Ställ in kolumnavståndet som smalt, utökat, brett, anpassat eller inget mellanrum
• Justera bildrutans höjd och justering 
• Behåll överflödesstandarden eller dold 
• Använd HTML-taggar t.ex. sidhuvud, sidfot, huvud, artikel, etc.

Innehållsanpassning

Bildrutan i WordPress innehåller olika innehåll för olika element som t.ex rubriker, bilder, knappar, etc. Du kan ändra texten och ändra deras egenskaper.

Låt oss se hur du anpassar innehållet i ElementsKit-bildrutorna i WordPress. 

✨ Titel 

• Ändra rubriker och underrubriker 
• Infoga länkar med rubriken
• Dölj/visa ram med start/slutposition 
• Lägg till/visa eller dölj titelbeskrivning 
• Lägg till separatorer med olika stilar och positioner 

✨ Bild 

• Ändra bilden eller lägga till AI-genererade bilder
• Justera bildstorleken t.ex. full, medium, large, custom, etc
• Ställ in innehållsområdet som en enkel, klassisk, skugglinje, etc
• Aktivera/avaktivera lika höjd 
• Infoga URL för att länka en annan resurs 

✨ Kroppen 

• Lägg till/ta bort eller redigera titeltexten
• Ändra titeln HTML-tagg
• Justera titeljusteringen till vänster, höger eller mitten 

✨ Knapp

• Aktivera eller inaktivera kreativ knapp
• Lägg till anpassad knappetikettstext 
• Lägg till anpassad URL
• Lägg till/ta bort ikonen och ställ in kolven 

Stilanpassning 

Med layout och innehåll kan du också ändra deras stilar. Som ett resultat kan du skapa olika typer av bildrutor som passar din WordPress-webbplats användargränssnitt och andra egenskaper. 

✨ Shadow Line 

• Välj skugglinjen för vänster eller höger
• Ställ in anpassad bredd efter behov
• Anpassa skuggbakgrundstyp och färg 
• Ställ in anpassad bakgrundsbild 

✨ Bild 

• Lägg till anpassad kantradie och stoppning 
• Justera bildens opacitet för normal eller svävningseffekt 

✨ Kroppen 

• Välj kanttyp med kantradie
• Ställ in anpassad bakgrundsbild, typ och färg 
• Justera lådans stoppning och lådans skuggfärg 
• Justera titeltypografi, färg och avstånd

✨ Knapp 

• Anpassa utfyllnadsvärdet och ikonens teckenstorlek 
• Ändra knapptexten och bakgrundsfärgen 
• Ställ in normala egenskaper eller hovra egenskaper 
• Ställ in kanttyp, kantradie och box-skugga 

Avancerad anpassning 

ElementsKit image box är flexibel för att använda avancerade anpassningsfunktioner. Det hjälper till att göra din bildruta mer elegant och engagerande. Du kan också integrera olika rörelseeffekter samt anpassade koder för att matcha bildrutan med den specifika webbsidan på din webbplats.

Du hittar anpassningsalternativen i de avancerade inställningarna:

• Ändra bildrutelayoutens utfyllnad, marginal, bredd, position och z-index
• Lägg till rörelseeffekter för element (t.ex. tona in, tona ut, studsa in, zooma in uppåt, glida in till vänster, etc.)
• Anpassa bildrutans lyhördhet efter enheter som PC, flik och mobil 
• Ställ in attribut och egenskaper för att dölja/visa i olika enheter 
• Inkludera anpassad CSS för ytterligare funktionsändringar 

Fördelar med att lägga till bildruta i WordPress

• Förbättra visuella tilltal: En tilltalande bildruta bryter upp texttungt innehåll. Dessutom gör det sidor mer visuellt engagerande och lättare att skanna.
• Markera kärninformation: Du kan markera viktiga meddelanden, funktioner eller uppmaningar.
• Förbättra användarengagemang: Med hjälp av bildboxelement i WordPress kan du också skapa visuellt övertygande upplevelser. Det kan hålla användarna intresserade och utforska ditt innehåll.
• Öka klickfrekvenser: Bildrutor med tydliga uppmaningar (CTA) kan uppmuntra användare att klicka och lära sig mer.
• Strukturinformation: Du kan organisera innehåll i logiska avsnitt och förbättra läsbarheten med navigering.

5 tips för att lägga till bildruta i WordPress 

Att lägga till en bildruta på din WordPress-webbplats gör ditt innehåll mer engagerande och informativt. 

Låt oss utforska 5 tips för att göra det mer effektivt och iögonfallande element på din webbplats:

1. Optimera bildstorlekar

Använd verktyg som TinyPNG eller plugins för bildoptimering för att minska bildfilstorlekarna utan att kompromissa med kvaliteten. Detta förbättrar sidladdningshastigheterna avsevärt.

2. Upprätthåll konsekvens

Använd bilder med en konsekvent stil, färgpalett och proportioner för att skapa en sammanhållen visuell upplevelse. Se också till att bildrutor är i linje med andra element på sidan för ett polerat utseende.

3. Använd beskrivande alternativ text

Ge beskrivande alt-text för varje bild. Detta hjälper skärmläsare att beskriva bilder för synskadade användare och förbättrar sökmotorns synlighet.

4. Tänk på mobil lyhördhet

Kontrollera att bildrutor visas korrekt på olika skärmstorlekar, särskilt mobila enheter. Använd responsiva designtekniker eller plugins för att säkerställa sömlös anpassning.

5. Länka strategiskt (om tillämpligt)

Länka bildrutor till relevant innehåll eller målsidor för att vägleda användare och uppmuntra önskade åtgärder.

Bra att veta 👉 Hur man applicerar Elementor Image Masking i 4 enkla steg med ElementsKit

Vanliga frågor

Linda upp den

För att dekorera dina WordPress-webbplatser med bilder kan ingenting vara mer fängslande och informativt än ElementsKit-bildrutan.

Här har vi tillhandahållit en steg-för-steg-guide om hur man gör lägg till en bildruta till din WordPress-webbplats utan ansträngning. Vi har också visat hur man använder ElementsKit Elementor-plugin för mer effekt och experimentera med olika bildrutastilar och layouter. 

Så, kraften i det visuella är till hands nu – använd det effektivt och få ditt innehåll att verkligen glänsa! 🥳