Lägga till bilder på din webbsida

Lägga till bilder på din webbsida

I denna artikeln kommer vi gå igenom hur man laddar upp bilder/banners till butikens administration och sedan hur man kopplar dessa bilder till butikens startsida. Att ladda upp en bild på en sida fungerar likadant oavsett om det är på din startsida eller på en annan sida, men för detta exempel kommer vi som nämnt tidigare koppla bilden till butikens startsida.

En stor fördel med att arbeta med bildbank och banners är att man kan framhäva butikens produkter, tjänster, mål, nyheter och mycket mer.

Föredrar du att istället kolla på en videoguide kan du istället gå till Videoguide: Layouteditorn del 3 - Lägga till bilder.

Förkunskaper som kan vara bra att ha innan:
  1. Videoguide: Layouteditorn del 1 - Grunderna
  1. Videoguide: Layouteditorn del 2 - Lägga till ett block

Steg 1 - Navigera till Bildbank & banners:
Navigera till Bildbank & banners genom att gå in på Sidor -> Bildbank & Banners (Se bild nedan).


Steg 2 - Skapa en bild/bannergrupp:
Vi börjar med att skapa en bild/bannergrupp för startsidan. Anledningen till att vi skapar bild/bannergrupp är för att det kommer underlätta framtida arbeten. Med detta menar vi att man kommer kunna filtrera ut dessa bild/banner grupper vilket betyder att man snabbt och effektiv kan hitta rätt bild som man vill redigera.

Ni skapar bild/banner grupp via stegen nedanför:
1.Klicka på fliken “Bildgrupp/bannergrupp
2.Klicka på “Skapa ny bildgrupp/bannergrupp
3.Skriv in ett valfritt namn. Exempelvis “Startsida
4. Spara



Steg 3 - Skapa ny bild/banner:
Vi har precis skapat en Bildgrupp/Bannergrupp, för detta exempel skapade vi en med namnet “Startsida”. Nu ska vi ladda upp en bild till bildbanken och ställa in alla inställningar:
Börja med att klicka på fliken Bildbank/Banners -> Klicka sedan på Skapa ny bild.




När du tryckt på Skapa ny bild öppnas ett nytt fönster upp (Se bild ovan). Genom detta fönster kan du ladda upp din bild och fylla i relevant information.
  1. Under Namn fyllter du i namnet på bilden.
  1. Sedan laddar du upp bilden under Välj bild.
  1. Under Text ovanpå bild kan du ange om du vill ha en rubrik ovanpå bilden eller en text ovanpå bilden. Om du klickar på  Avancerat kan du även styla din text.
  1. Om du vill att bilden ska länka någonstans kan du klistra in länken under Länk. Du kan även kryssa i ifall länken ska öppnas i ett nytt fönster. Kryssar du inte i detta alternativ så öppnas länken i fliken du har öppen.
  1. Under ALT-text beskriver du i vad bilden innehåller. Detta används ifall bilden av någon anledning inte skulle dyka upp på sidan.
  1. Under Bannergrupp kan du välja vilket bannergrupp din bild ska innehålla, det kan bland annat ha med storleken att göra eller om du skulle vilja ha en bannergrupp med flera bilder.
  1. Under Datum kan du ställa in om bilden bara ska vara synlig en viss period. Det kan t.ex. vara om du har en kampanjbanner som bara ska vara synlig en period.
  1. Under Välj vilken sida bannern ska visas på kan du slutligen ställa in bannerns synlighet. Genom att använda denna funktion har du stor flexibilitet och kan välja att endast ha specifika banners på specifika sidor eller om du vill ha allmänna banners som visas på alla sidor.  Visa bilden på Alla sidor är rekommenderat och enklast att arbeta med.
  1. När du är färdig med alla inställningar klickar du på knappen Spara och stäng.

Steg 4 - Leta upp bildens namn/banner id:
Om du inte angett något namn på bilden kommer du att behöva leta upp bildens banner id för att kunna länka till rätt bild i nästa steg.

Såhär hittar du lättast din bild om du har många bilder i Bildbank/Banners:
  1. Leta upp bilden genom att filtrera på bild/bannergrupp (1). För detta exempel filtrerade vi på bannergruppen “Startsida”.
  1. Under Kolumnen Namn ser vi att bilden heter “Tygkasse med frukt" och det är detta namn som vi ska använda oss av när vi ska kopplar bilden till en bild-block på startsidan (3). Har bilden inget namn, då kommer bilden använda sig av Banner_id (3).

TIPS!
Om kolumnen Namn inte är synlig kan ni klicka på kugghjulet (2) och aktivera kolumnen “Namn”.  


Steg 5 - Skapa bild/banner-block och koppla till bilden:
Navigera till Sidor -> Layouteditorn i Large (Desktop) trycker du sedan på Content och sedan väljer du Index.html. Då öppnas ett nytt fönster upp med rubriken Redigera Sida (/index.html).

Scrolla längst ner på sidan och tryck på Lägg till block (Se bild nedan).



När du tryckt på Lägg till block så dyker rutan Välj layoutblock upp, leta upp blocket Bild från Bildbank/Banners antingen genom listan i Layoutblockstyp eller med hjälp av sökfunktionen ovanför. Markera sedan blocket och välj bilden du precis laddat upp och tryck på Välj (Se bild nedan).


När vi valt vårt block och tryckt på Välj dyker blocket upp längst nere i Layouteditorn. Genom att hålla musen över blocket kan du sedan flytta blocket upp och ner med hjälp av pilarna (se bild nedan). Brevid pilarna finns även knappar som tillåter dig att kopiera, redigera eller radera blocket. När du har placerat blocket där du vill ha det så trycker du på Spara och aktivera mallar i butiken (Se bild nedan).


Sammanfattning - Resultat i Butiken:


Då vi för detta exempel placerat bilden längst ner på sidan så är det där bilden syns (Se bild ovan). Men beroende på var ni valt att placera bilden är det där ni kommer att se den.

OBS!
Du kan på egen hand placera bilden vart du än önskar på startsidan genom att använda pilarna som nämndes ovan. Du kan även placera bilden på andra sidor som finns skapade i admin.

Lycka till!



    • Related Articles

    • Lägga till bild på en sida

      I denna artikel kommer vi gå igenom hur du lägger till bilder på din sida. Att lägga upp bilder på en sida är ett bra sätt att visa eller klargöra specifik information till kunder, exempelvis information om kampanj eller att göra hemsidan mer ...
    • Videoguide: Layouteditorn del 3 - Lägga till bilder

      Nedan finner du del tre för hur layouteditorn funkar och vad du behöver veta för att lägga in bilder via Layouteditorn. Det kan vara bra att ha kollat på våra videoguider för Layouteditorn del 1 och Layouteditorn del 2 innan du kollar på denna ...
    • Lägga till en bild på startsidan

      I denna artikel kommer vi att gå igenom hur du lägger till en bild på startsidan. Vill du hellre följa stegen via en videoguide så rekommenderar vi att du kollar på vår videoguide Layouteditorn del 3 - Lägga till bilder. Steg 1 - Ladda upp bilden via ...
    • Lägga till en video

      I denna artikel kommer vi gå genom hur man lägger till en video i butiken. Vi kommer skapa nytt block och sedan lägga in en video. Förkunskaper som är bra att ha innan man läser igenom denna artikeln är: Så arbetar du med layouteditorn Steg 1 - Välj ...
    • Lägga till eller ändra produkter på startsidan

      I denna artikel kommer vi gå igenom hur du lägger till produkter på startsidan och hur du kan ändra vilka produkter som är synliga i efterhand. Att lägga upp produkter på startsidan är ett bra sätt att visa för kunder vad hemsidan har att erbjuda. ...