Använd moduler för bildsliders

Du kan använda modulen Image Slider för att visa flera bilder i samma modul. Du kan ställa in bilderna så att de växlar automatiskt, eller så kan du hjälpa besökarna att växla mellan dem manuellt.

Lägga till och redigera bilder i bildslidermoduler

1. Navigera till ditt innehåll:

   • Webbplatssidor: I ditt HubSpot-konto navigerar du till Innehåll > Webbplatssidor.
   • Landningssidor: I ditt HubSpot-konto navigerar du till Innehåll > Landningssidor.
   • Blogg: I ditt HubSpot-konto navigerar du till Innehåll > Blogg.
2. Klicka på namnet på ditt innehåll.
3. I innehållsredigeraren klickar du på ikonen add Lägg till i vänster sidofält.
4. Klicka för att expandera kategorin Media , klicka sedan på modulen Image Slider och dra den till rätt position.
5. Håll muspekaren över en bild i det vänstra sidofältet och klicka på ikonen edit Redigera för att lägga till en bild i den bilden:
   
   • I avsnittet Bild klickar du på Ladda upp för att välja en bild från din dator eller Bläddra bland bilder för att välja en bild från filverktyget. Om du vill generera en bild klickar du på Generera med AI.
   • I fältet Bildtext anger du en bildtext som ska visas under bilden. Om du vill visa bilden utan bildtext tar du bort standardtexten.
   
   • Om du vill lägga till en länk till bilden:
     • Klicka på rullgardinsmenyn Länk till och välj en länktyp.
     • Ange länkens destination i det fält som visas. Läs mer om hur du arbetar med länkar i HubSpot.
     • Om du vill behålla innehållet öppet och låta länken öppnas i ett nytt fönster aktiverar du alternativet Öppna länken i nytt fönster .
     • För att identifiera länkdestinationen som inte en del av dina webbplatser för sökmotorer, markera kryssrutan No follow .
   • Klicka på Apply changes för att spara ändringarna i den här bilden.
6. Klicka på Image slider längst upp i sidofältsredigeraren för att återgå till modulöversikten.

7. Om du vill lägga till fler bilder håller du muspekaren över en annan bild och klickar på ikonen edit Edit .
8. För att slutföra ändringarna klickar du på Apply changes.

Redigera inställningar för bildslidermoduler

1. Navigera till ditt innehåll:

   • Webbplatssidor: I ditt HubSpot-konto navigerar du till Innehåll > Webbplatssidor.
   • Landningssidor: I ditt HubSpot-konto navigerar du till Innehåll > Landningssidor.
   • Blogg: I ditt HubSpot-konto navigerar du till Innehåll > Blogg.
2. Klicka på namnet på ditt innehåll.
3. Klicka på bildslidermodulen i innehållsredigeraren.
4. Klicka på Inställningar i sidofältsredigeraren för att redigera modulens inställningar.
5. Klicka på för att expandera avsnittet Slides för att redigera slide-alternativ:
   • I fältet Bilder per sida anger du antalet bilder som ska visas samtidigt i bildslidern. Du kan visa upp till fem bilder åt gången. När du väljer flera bilder åt gången visas inte bildtexter och miniatyrbilder.
   • I fältet Image Sizing väljer du ett alternativ för bildförhållande. Som standard visas bilderna med det uppladdade bildförhållandet. Om du vill standardisera ett enda bildförhållande för alla bilder väljer du Tvinga bildförhållande. Detta kan leda till att vissa bilder visas förvrängda.
   • Om du vill lägga till eller ta bort bildtexter från bilderna markerar du kryssrutan Visa bildtexter. Som standard är kryssrutan Show captions markerad.
   • I rullgardinsmenyn Bildtextens position väljer du bildtextens position.

6. Klicka för att expandera avsnittet Rörelse för att redigera alternativ för bildövergångar:
   • Om du vill konfigurera hur bilderna övergår väljer du ett övergångsalternativ (t.ex. Fade).
   • Om du vill att bilderna ska upprepas när den sista bilden visas markerar du kryssrutan Loop slides .
   • Om du vill att bilderna ska rulla automatiskt markerar du kryssrutan Autoplay . Om du har färre bilder än inställningen Bilder per sida kan ingen cykling ske.
7. Klicka på för att expandera avsnittet Navigation och redigera navigationsalternativen:
   • Markera kryssrutan Visa navigeringspilar om du vill visa pilar som gör det möjligt för besökare att manuellt växla mellan bilder.
   • Om du vill visa miniatyrbilder under navigeringen markerar du kryssrutan Visa min iatyrbilder.
   • Om du vill visa prickar under bilderna som visar det totala antalet bilder och gör det möjligt för besökare att välja en viss bild markerar du Visa pricknavigering.
8. När du är klar klickar du på Tillämpa ändringar.

Redigera stilar för bildslidermoduler

Du kan redigera stilar för bildslidermoduler, inklusive styling för bilderna, navigeringen och slidern.

1. Navigera till ditt innehåll:

   • Webbplatssidor: I ditt HubSpot-konto navigerar du till Innehåll > Webbplatssidor.
   • Landningssidor: I ditt HubSpot-konto navigerar du till Innehåll > Landningssidor.
   • Blogg: I ditt HubSpot-konto navigerar du till Innehåll > Blogg.
2. Klicka på namnet på ditt innehåll.
3. Klicka på bildskjutmodulen i innehållsredigeraren.
4. I sidofältsredigeraren klickar du på fliken Stilar.
5. Om du vill fortsätta redigera stilar för bildslidermodulen klickar du på Slides, Navigation eller Slider.

Redigera stilar för bilder

Så här redigerar du stilar för hur bilder visas i diabilder:

1. Klicka på Slides.
2. Klicka på för att expandera avsnittet Bilder .
3. Ange pixelvärden i fältet Hörnradie . Ju högre värde, desto mer rundade blir hörnen.
4. När du är klar klickar du på Tillämpa ändringar.

Så här redigerar du stilar för hur bildtexter visas i bilder:

1. Klicka på Bildtexter.
2. Klicka för att expandera avsnittet Bakgrund.
   • Om du vill lägga till marginaler ovanför eller under bildtexterna anger du pixelvärden i fälten Marginal ovanför och Marginal nedanför .
   • Om du vill lägga till utfyllnad i bildtexterna anger du ett pixelvärde i fältet Padding . Om du vill lägga till separata värden för varje sida klickar du på Redigera separat och anger sedan pixelvärden i fälten.
   • Om du vill lägga till en bakgrundsfärg i bildtexterna anger du ett hexvärde i det första fältet i avsnittet Färg eller klickar på färgväljaren och väljer en färg. Anpassade färger kan läggas till från fliken Avancerat .
   • Om du vill ange en bakgrundsfärgs transparens anger du ett procentvärde i det andra fältet i avsnittet Färg . En transparens på 100 % är ogenomskinlig, medan en transparens på 0 % inte är synlig.
3. Klicka för att expandera avsnittet Text.
   • Om du vill ändra typsnitt klickar du på rullgardinsmenyn Välj typsnitt och väljer ett typsnitt.
   • Om du vill ändra teckenstorlek klickar du på rullgardinsmenyn Storlek och väljer en teckenstorlek.
   • Om du vill ändra teckensnittets färg klickar du på färgväljaren och väljer en färg. Anpassade färger kan läggas till på fliken Avancerat .
   • Om du vill ändra teckensnittets vikt klickar du på bold teckensnittets viktikon för fet, italicIcon kursiv eller underlineIcon understruken text.
4. När du är klar klickar du på Tillämpa ändringar.

Redigera stilar för navigering

Du kan redigera stilar för navigering, inklusive skjutreglagets pilar, prickar och autoplay-knapp, och navigering med miniatyrbilder. Vilka stilalternativ som är tillgängliga beror på bildslidermodulens inställningar för navigering.

Skjutreglagets pilar

1. Klicka på Navigation.
2. Klicka för att expandera avsnittet Slider arrows.
3. Ange ett hexvärde i avsnittet Bakgrundsfärg. Du kan också klicka på färgväljaren och välja en färg. Anpassade färger kan läggas till från fliken Avancerat.
4. Om du vill ange bakgrundsfärgens transparens anger du ett procentvärde i det andra fältet i avsnittet Bakgrundsfärg. Till exempel kommer en transparens på 100% att vara ogenomskinlig, medan en transparens på 0% inte kommer att vara synlig.
5. Om du vill ersätta de ikoner som används för vänster- och högerpilarna klickar du på Ersätt ovanför fälten Vänsterikon och Högerikon. Välj en ikon i den högra panelen.
6. Om du vill ställa in färgen på vänster- och högerikonerna anger du ett hexvärde i det första fältet i avsnittet Ikonfärg. Du kan också klicka på färgväljaren och välja en färg. Anpassade färger kan läggas till från fliken Avancerat.
7. Om du vill ställa in transparens för ikonens bakgrundsfärg anger du ett procentvärde i det andra fältet i avsnittet Ikonfärg. Till exempel kommer en transparens på 100% att vara ogenomskinlig, medan en transparens på 0% inte kommer att vara synlig.
8. När du är klar klickar du på Apply changes.

Prickar och autoplay-knapp

1. Klicka för att expandera avsnittet Prickar och autoplay-knapp.
2. Ange ett hexvärde i det första fältet i avsnittet Färg, eller klicka på färgväljaren och välj en färg. Anpassade färger kan läggas till från fliken Avancerat.
3. När du är klar klickar du på Tillämpa ändringar.

Navigering för miniatyrbilder

1. Klicka för att expandera avsnittet Thumbnail navigation.
2. Om du vill redigera bakgrundsfärgen anger du ett hexvärde i det första fältet i avsnittet Arrow background color eller klickar på färgväljaren och väljer en färg. Anpassade färger kan läggas till från fliken Avancerat .
3. För att redigera bakgrundsfärgens transparens anger du ett procentvärde i det andra fältet i avsnittet Pilens bakgrundsfärg. En transparens på 100 % blir ogenomskinlig, medan en transparens på 0 % inte syns.
4. Om du vill ersätta ikonerna som används för vänster- och högerpilarna klickar du på Ersätt ovanför fälten Ikon för vänsterpil och Ikon för högerpil . Välj en ikon i den högra panelen.

5. Om du vill redigera färgen på vänster- och högerpilsikonerna anger du ett hexvärde i det första fältet i avsnittet Fyllningsfärg för pilikoner. Du kan också klicka på färgväljaren och välja en färg. Anpassade färger kan läggas till från fliken Avancerat .
6. För att ställa in pilens transparens anger du ett procentvärde i det andra fältet i avsnittet Ikonfärg . Till exempel kommer en transparens på 100% att vara ogenomskinlig, medan en transparens på 0% inte kommer att vara synlig.
7. För att redigera miniatyrbildernas förhållande, bredd och rundade hörn:
   • Klicka för att expandera avsnittet Thumbnail images (miniatyrbilder).
   • För att ställa in det bildförhållande som ska användas för alla miniatyrbilder klickar du på rullgardinsmenyn Bildförhållande och väljer ett bildförhållande.
   • För att ange bredden som ska användas för alla miniatyrbilder anger du ett pixelvärde i fältet Width (bredd).
   • För att ställa in hur rundade hörnen på miniatyrbilderna ska vara anger du ett pixelvärde i fältet Radius . Ju högre värde, desto mer rundade blir hörnen.
8. När du är klar klickar du på Apply changes.

Redigera stilar för slidern

1. Klicka på Slider.
2. Klicka för att expandera avsnittet Spacing .
3. Om du vill lägga till marginaler ovanför och under skjutreglaget anger du pixelvärden i fälten Marginal ovanför och Marginal nedanför .
4. Om du vill lägga till utfyllnad i skjutreglaget anger du ett pixelvärde i fältet Padding . Om du vill lägga till separata värden för varje sida klickar du på Redigera separat och anger sedan pixelvärden i fälten.
5. När du är klar klickar du på Tillämpa ändringar.