När man publicerar bilder på sin webbplats finns det en del grejer man behöver ha i åtanke. I denna artikel går vi igenom vad du bör tänka på när du laddar upp bilder, dels kring storlek men också filformat. Vi kommer även kika på hur du laddar upp filer i mediabiblioteket och hur du ändrar dina bilder på din sida.
Hur bör jag tänka med bilderna?
När du laddar upp bilder på din webbplats är det viktigt att noga överväga bildernas användningsområde, storlek, kvalitet och format för att optimera webbplatsens prestanda samtidigt som du upprätthåller en hög visuell kvalitet. Bilder spelar en avgörande roll i att göra din webbplats attraktiv och engagerande, men de kan också avsevärt påverka laddningstider och användarupplevelsen om de inte hanteras korrekt.
Användningsområde och storlek
– Bakgrundsbilder:
För bilder som ska täcka stora sektioner, såsom bakgrundsbilder, är det viktigt att de är av hög kvalitet för att undvika pixlighet på stora skärmar. En rekommenderad bredd är minst 2500px. Detta säkerställer att bilden ser skarp ut även på större skärmar.
– Innehållsbilder:
För bilder som används i artiklar eller som illustrativa element på din webbplats, är 1200px i bredd ofta tillräckligt. Detta balanserar bildkvalitet med filstorlek för att hålla webbplatsens prestanda hög.
Filformat
– JPG:
Detta är ett populärt format för fotografier och bilder med många färger eftersom det stöder komprimering som effektivt minskar filstorleken utan att offra för mycket av bildkvaliteten. För de flesta webbplatser är JPG det ideala valet för att balansera kvalitet och laddningstider.
– PNG: Används bäst för bilder som kräver transparens, som logotyper eller grafiska element. PNG-filer är ofta större än JPG, men de är optimala för bilder där skarp kantdefinition är viktig.
Enklaste sättet att ladda upp
Du kan ladda upp bilder under fliken ”Media” i WordPress administrationssidan. Men du kan också ladda upp dem direkt i Elementor under tiden som du redigerar sidan. Du kan ladda upp både en och flera bilder samtidigt. Vi brukar själva användas oss av det sistnämnda eftersom det helt enkelt sparar tid.
Ändra Bakgrundsbild
När du öppnar Elementor händer det att en hel sektion innefattar en bakgrundsbild. I detta avsnitt går vi igenom hur du ställer in och laddar upp bilder för att få dem som en bakgrund i en sektion.
För att komma åt en hel sektion kan du använda ”navigatorn” eller dem sex prickarna du ser över varje sektion. För att få upp navigatorn bläddrar du längst ner på sidan i Elementor och höger klickar i fältet ”Dra widget hit”, då står det ”Navigator” i fältet, klicka på den för att få fram navigatorn. På bilden nedan kan du se att vi har markerat den sektionen som är högst upp. När vi gjort detta kommer vi få upp alternativ i vänster fältet.
Vi kommer hoppa direkt över på fliken ”Stil” i denna artikel eftersom den fokuserar på att redigera just bakgrunder. Vi har en artikel HÄR som visar hur du ändrar uppbyggnaden på en sektion och hur du lägger till nya kolumner.
Men för att ändra din bakgrund i en sektion gör du på följande vis.
Bakgrundstyp
Här styr du vilken bakgrundstyp du vill ha. Du kan välja färg eller en bild som ovan. Penseln ska du klicka på om du vill ha en bild. Du kan också välja att lägga exempelvis en video eller ett bildspel om du tycker det passar bättre på din sida.
För att välja en bild klickar du på bilden, då kommer du in i mediabiblioteket. Här kan du ladda upp filer eller välja fliken ”Mediabibliotek” för att se redan uppladdade bilder. Klicka på bilden du vill ha och klicka sedan på knappen ”Välj”. Då kommer din bild synas i sektionen.
Bildupplösning
Under denna sektion kan du välja storlek. Om det är en bakgrundsbild du har och göra mer bör den stå kvar på ”Fullstor”.
Position
Här väljer du hur bilden ska positioneras i rutan. Vi brukar oftast använda ”Centrerat mitten” men ibland kan man behöva andra inställningar och dem hittar du här.
Fixering
Det går att välja att ha bilden fixerad, det betyder att bilden är klistrad i skärmen och det endast är sektionen som rör sig. Testa funktionen så förstår du bättre hur den fungerar. Normalt sätt är bilden inte fixerad.
Repetera
Om du vill att din bild ska repeteras kan du ställa in det här, det kan vara fördelaktigt om du har ett sömlöst mönster som bild exempelvis.
Visningsstorlek
Här väljer du hur din bild ska visas. Det finns en hel del alternativ at välja mellan. Oftast passar ”Omsalg” bäst, då justerar bilden sig efter skärmen, men prova gärna de olika alternativen för att hitta det som passar dig bäst.
Bakgrundsöverlägg
Här kan du ställa in om du vill ha ett överlägg på din sektion. Ibland kan man ha text i sektionen och bilden kanske blir för ljus eller mörk för att ha text på. Då kan du lägga en färg över den. Expandera fliken och välj färg och dra sedan in opaciteten för att få lite eller stor genomskinlighet.
Ändra och redigera bilder
Du kan också ändra vanliga bilder på din webbplats. Här går vi igenom hur du ändrar bilder som ligger direkt på din webbplats. Håll musen över den bild du vill ändra och klicka på pennan till höger. Då kommer du få upp alternativ enligt nedan:
Genom att klicka ”Välj Bild” använder du enkelt biblioteket enligt vad vi beskrivit ovan. Du kommer sedan kunna justera bilden ytterligare under fliken ”Stil” men först går vi igenom dem grundläggande möjligheterna på denna sidan.
Bildupplösning
Här kan du ändra upplösning på din bild, försök att justera upplösningen till den du behöver. Om bilden exempelvis är väldigt liten så behöver den inte vara ”Large” utan då räcker kanske ”Medium” eller ”Small”. Testa dig fram och se vad som passar, du ser enkelt hur bilden ter sig i Elementor.
Bildtext
Om du vill ha en bildtext under din bild kan du skriva in den här. Det kan vara fördelaktigt om du vill förklara vad bilden innehåller.
Länk
Här har du möjlighet att göra den valda bilden till en länk. När du väljer ”Anpassad URL” kan du enkelt länka till en annan sida eller till en sida på din webbplats. Tänk på att göra det tydligt att bilden är en länk så att dina besökare förstår att man kan klicka på den.
Om du klickar över till fliken ”Stil” får du flera alternativ för att justera din bild.
Justering
Välj hur din bild ska vara justerad. Du kan vänster-, center- och högerställa den i dessa alternativen.
Bredd
Här kan du justera bredden på din bild. Vi brukar rekommendera att använda fast bredd istället för ”maxbredd”, maxbredd kan vara bra om du har en sektion som rör sig efter skärmen men det är sällan man behöver använda detta
Höjd
Här kan du justera höjden på bilden. Tänk på att proportionerna på bilden kommer förändras med detta alternativet så håll koll så att din bild fortfarande ser bra ut i Elementor när du justerar.
Normal/Hovra
Om du vill att din bild förändras när man håller musen över den kan du använda funktionen ”Hovra”. Då kan du enkelt justera in vad som ska hända när besökaren håller musen över den. Det kan vara en animation, att den blir ljus/mörk och om du ger dig på CSS filter kan du även göra den svartvitt, väldigt effektfullt om du frågar oss.
Ramtyp
Om du vill ha en ram runt bilden kan du lägga in det här.
Ramradie
Här kan du justera om din bild ska ha rundade kanter. Ju högre tal du skriver in ju rundare kanter får du på bilden. Du kan justera så pass högt att hela bilden blir rund om du önskar.
Skugga på ruta
I detta alternativ lägger du en skugga på din bild. Klicka på pennan och justera utefter önskemål.
Spara och uppdatera sidan
Nu har vi gått igenom hur du redigerar och ställer in dem vanligaste elementen på din sida och det är dags att spara och uppdatera din sida. Du klickar enkelt på den rosa knappen längst ner ”Uppdatera” för att spara och publicera dina ändringar. Om du inte vill publicera direkt utåt kan du klicka på knappen uppåt och ”Spara som utkast” istället.
När du sparat allting så klickar du på de tre linjerna allra högst upp till vänster i ditt fönster. Då får du möjlighet att exempelvis visa sidan eller gå tillbaka genom att klicka ”Avsluta”.
Här nedan kan du läsa fler artiklar om hur du redigerar ditt innehåll: