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:


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

    Skärmavbild 2022-06-16 kl. 10.17.17.png

    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/bannergruppp”
    3.Skriv in ett valfritt namn. Exempelvis “Startsida”
    4.Spara

    Skärmavbild 2022-06-16 kl. 10.21.26.png

    Steg 3 - Skapa ny bild/banner:
    Vi har precis skapat en Bildgrupp/Bannergrupp, för detta exempel skpade 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.

    Skärmavbild 2022-06-16 kl. 10.55.08.png

    Skärmavbild 2022-06-16 kl. 11.01.44.png

    Skärmavbild 2022-06-16 kl. 11.39.51.png

    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. 

    • Under Namn fyllter du i namnet på bilden.
    • Sedan laddar du upp bilden under Välj bild.
    • 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 Avancerat kan du även styla din text. 
    • 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. 
    • Under ALT-text du i vad bilden innehåller. Detta används ifall bilden av någon anledning inte skulle dyka upp på sidan. 
    • 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.
    • 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.
    • 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.

    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:

    • Leta upp bilden genom att filtrera på bild/bannergrupp (1). För detta exempel filtrerade vi på bannergruppen “Startsida”.
    • 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”.  
    Skärmavbild 2022-06-16 kl. 13.16.15.png

    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).


    Skärmavbild 2022-06-16 kl. 13.29.40.png

    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).
    Skärmavbild 2022-06-16 kl. 13.35.04.png

    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).

    Skärmavbild 2022-06-16 kl. 14.22.23.png

    Sammanfattning - Resultat i Butiken:

    Skärmavbild 2022-06-16 kl. 15.01.34.png

    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!

  • Fick du svar på din fråga?

      

    Vilken information saknar du?