Bildlista avsnitt

Använd avsnittet Bildlista när du vill visa en uppsättning bilder och relevant text.

Genom att använda den här sektionen kan du enkelt länka olika sidor på webbplatsen eller lägga till länkar där du vill lägga till en bild och beskrivning också för varje länk.

I den här artikeln:

1. Vad är en bildlista?
2. Lägga till en bildlistasektion på sidan
3. Lägg till och redigera listobjekt
4. Sekvensera listobjekt
5. Ta bort listobjekt
6. Ändra sektionslayout
7. Stilalternativ
8. Karusellstilen
9. Live-exempel

Bildlista

• En bildlista är en samling bilder där du kan lägga till en beskrivning av bilden och lägga till en länk eller knapp för att koppla den till vilken annan sida som helst på webbplatsen eller vilken annan länk som helst.

Lägg till bildlista avsnitt

• Ett avsnitt kan läggas till på en sida. Du kan antingen lägga till ett avsnitt på en redan befintlig sida eller skapa en ny sida på din webbplats.
• På din sida, Klicka på blå + ikon att lägga till en Nytt avsnitt till din sida.

• Du kommer nu att se sektionskategorier på vänstra sidan.
• Välj Lista (1) kategori och klicka på Bildlista flik (2) där du kan välja mellan olika layouter i bildlistan (3).

• Välj valfri sektionslayout och klicka på den för att lägga till den på din sida.

Lägg till och redigera listobjekt

Lägg till listobjekt

När du har lagt till avsnittet:

• Klicka på Redigera bildlista (1) för att öppna panelen med listobjekt.

• Klicka på Lägg till objekt (2) för att lägga till ett nytt listobjekt.
• Du kan välja att Dkopiera eller ta bort (3) listobjekten.

Redigera listobjekt

Klicka på listobjektet som du vill redigera. Det kommer att öppna de särskilda redigeringsalternativen för listobjekt.

Härifrån kan du:

• Ladda upp/ta bort bild (1) för listobjektet. Du kan också ställa in Bild Accent Färg härifrån som kommer att visas när du svävar på bilden.
• Lägg till Titel (2), Undertext (3)och Beskrivning (4) i listpunkten.
• Du kanske inte hittar alternativet för undertext och beskrivning i vissa listobjekt beroende på vilken layout du väljer.
  Kontrollera innan du lägger till beskrivningen detta artikel.

• Klicka på Link Builder-ikonen för Titellänk (5) för att öppna länkbyggaren för att länka listobjektets titel till valfri sida. Veta mer handla om Länkbyggare.
• Ställ in länken så att den öppnas i en ny flik eller i samma flik (6).
• Lägg till vilken typ av Länk (7) till listobjektet. Du kan lägga till en knapp/bildlänk/social ikon/textlänk. LÄR DIG MER.
• Save (8) dina ändringar.

Se hur du redigerar ett objekt i bildlistan:

Sekvenslistobjekt

• Du kan enkelt dra och släppa listobjekten för att ändra ordningsföljden.

Se sekvensering av bildlistans objekt i aktion: 

Ta bort ett listobjekt

När du har lagt till ett listobjekt kan du redigera och ta bort det.

• Klicka på Radera ikonen bredvid bildlistan.
• Tne, klicka på Radera knappen i popup-fönstret för bekräftelse.
• Slutligen spara dina förändringar.

Se hur du tar bort ett objekt i bildlistan: 

Sektionslayout

• Klicka på Hantera bildlista (1) -knapp.
• Välj Layout (2) flik.
• Välja (3) layouten för din sektion och Save (4) ändringarna.

Style ditt avsnitt

• Klicka på Hantera bildlista (1) knapp.
• Välj Stil (2) fliken.
• Ändra stilen för sektionselementen och Spara (3) dina förändringar.

Du kommer att ha flera stilalternativ för avsnittet: 

objekt 

1. Välj att Visa objekt in rader och kolumner or Karusellen 
   • Om du har valt rader och kolumner alternativ kommer listobjekten att ordnas i rader och kolumner. I det här fallet måste du ange antalet rader och kolumner.
   • Om du har valt Karusellen alternativ kommer listobjekten att presenteras som ett bildspel. Veta mer.
2. Ställ in Antal kolumner för bildlistan. Du kan välja mellan 1 till 10 kolumner.
3. ange Mellanrum mellan kolumner av listobjekten.
4. ange Mellanslag mellan rader av listobjekten.
5. Välj Innehållsordning dvs bilderna av listobjekten som ska visas först eller tillhörande text.
6. Justera innehållet horisontellt i bildlistan. Du kan ställa in dem att vara vänster-, höger- eller mittjusterade.
7. Justera innehållet vertikalt i bildlistan. Du kan ställa in dem att vara topp-, mitt- och bottenjusterade.

Om karusellalternativet är valt i steg 1, kommer du att se följande ytterligare alternativ:

8. Välj att Slinga karusellen eller inte.
9. I fallet med karusellen, välj Navigationskontroller. Du kan välja mellan Inga kontroller, Pilar – Nedre mitten/Upptill höger/Nedre höger, Chevron eller Prickar.

Mobil display

10. Ställ in antalet Rutnätkolumner för mobila enheter. Du kan ställa in den på maximalt 3 kolumner.
11. Definiera Förband mellan rutnät (i pixlar).

Bilder 

12. Välj Image Crop för listobjekten. Du kan ställa in bilderna som fyrkantig, cirkel, horisontell, stående och original.
13. Välj att ha en gemensam hörnradie eller annan hörnradie för varje sida av listobjekten och ange ett nummer (i px) för Celler radie av listobjektets bilder. Veta mer.

• Om du har valt delade hörn kan du ställa in olika hörnradie för varje hörn.

På Bildhover 

14. Välj Bild Hover Color att vara accentfärg eller att vara specificerade. Om du har valt accentfärg, ange sedan opacitet.
15. Om du har valt ange färg alternativet ställ sedan in Basens svävarfärg och opacitet för listobjekten.
16. Ställ in Elements färg för sektionens listobjekt.
17. Välj att Animera listobjektets bilder vid muspekaren genom att klicka på Ja. Kontrollera den här funktionen på en livesida.
18. Välj en Animation stil för bilder när markören hålls över dem.

Storlek & Utrymme 

19. ange bild~~POS=TRUNC för listobjekt.
20. ange Innehållsbredd för listobjekten.
21. ange Utrymme under avsnittsrubrik i px.
22. ange Utrymme under bilder av listposterna (i %).
23. ange Utrymme under titlarna av listposterna (i %).
24. ange Mellanslag under undertexterna av listposterna (i %).

text 

25. Klicka på Ändra textstil knappen för att besöka Designa avsnitt och hantera dina teckenstorlekar och stilar. 
26. Ställ in Titel teckensnittsstil för listobjekten i avsnittet.
27. Ställ in Texta teckensnittsstil för listobjekten i avsnittet.
28. Ställ in standard Beskrivning teckensnittsstil för listobjekten i avsnittet.

Kort 

29. Se hur att hantera kort.

skugga

30. Visa – Välj att visa skuggan bakom listobjekten alltid eller endast när du håller muspekaren.
31. Stil – Välj bland befintliga förinställningar eller skapa en anpassad skugga.
    Om du har valt alternativet Anpassat, besök detta Box Shadow Generator för att skapa en anpassad skugga. Slutligen, kopiera och klistra in box skugga CSS.
32. Om du har valt förinställningsalternativet, då Välj Shadow Styles från rullgardinsmenyn.

Knappar och länkar

33. Se hur att hantera stylingen av Knappar och länkar.
34. Save alla stilförändringar.

Karusellstilen

Karusellstilen visar listobjekt som ett bildspel, dvs listobjekten växlas efter varandra.

Se hur karusellstilen fungerar: 

Här är en livebildlista: 

Se en livedemosida. 

Se hur hörnradien fungerar: 

Relaterade artiklar:

• Typer av sektioner
• Lägg till mellanlägg/avdelare mellan sektioner
• Bygg din webbplats