Products
1. februar 2022
Indsæt Products
Find Products i venstre side, og hiv det over i din row.
Toolbox
- Move: Her kan du holde fast og flytte elementet ved at trække det hen til den ønskede placering og slippe.
- Settings: Her kan du indstille dine produkter (det bliver gennemgået nedenfor).
- Hide/show: Her kan du skjule/vise dit element, hvis du ikke ønsker, det skal slettes.
- Duplicate: Her kan du duplikere hele dit element nedenfor.
- Remove: Her kan du slette dit element.
Appearance
- Product Grid: Viser produkterne i et grid, der viser 5 produkter pr. række som default. Det tilpasser sig antal rækker alt efter, hvor mange produkter der er defineret i Number of Products to Display-indstillingen.
- Product Carousel: Viser produkterne i en slider. Den viser som default 5 produkter pr. slide. Det er vigtigt for responsiviteten, at du tilføjer slideren i en af mulighederne fra Layout (Row, Columns eller Tabs). Det gør, at den viser færre produkter pr. slide på mindre skærme. Indsæt ikke slides i smalle kolonner, da Page Builderen definerer antal produkter ud fra sidens bredde og ikke kolonnens bredde.
- Select Products By: Her kan du vælge, hvorfra produkterne skal vises fra. Du har 3 valgmuligheder, som ikke kan blandes. Fx kan du ikke vælge Category og derefter sætte en Condition:
- Category: Når du bruger denne valgmulighed, kan du vælge en kategori eller underkategori via en dropdown. Der vil derefter blive vist alle produkter fra den pågældende kategori.
- SKU: Her kan du vise produkter fra en eller flere SKU-numre. Hvis du vil tilføje flere SKU-numre, skal du separere dem med et komma (uden mellemrum).
- Condition: Her kan du indsætte produkter ud fra nogle kriterier, du vælger. Når Conditions er valgt, er der nogle værktøjer tilgængelige i din produktvælger. Fx kan du vælge produkter ud fra et køn og så sætte den til kvinde.
- Sort by: Her kan du vælge, hvilke kriterier den skal sortere dine produkter efter.
- Number of Products to Display: Her kan du vælge, hvor mange produkter der skal vises. Du kan vælge fra 1 til 999. Standarden er 5 for grid og 20 for carousel.
Carousel Settings
- Carousel mode: Her har du 2 muligheder:
- Default: Her viser den 5 produkter pr. slide som standard og tilpasser antallet alt efter skærmens bredde.
- Continuous: Her viser den 5 produkter pr. slide som standard og viser et halvt produkt både til højre og venstre side af slideren, hvor det midterste produkt fremhæves, og slideren bliver vist i et uendeligt loop.
- Autoplay: Hvis denne står til Yes, begynder slideren selv at scrolle, når siden loades. Hvis den står til No, skal brugeren selv klikke på slider-navigationen for at få vist næste slide. Hvis du sætter den til Yes, får du mulighed for at indstille, hvor mange millisekunder der skal gå, inden den skifter til næste slide.
- Infinite Loop: Hvis denne står til Yes, vil slideren starte forfra hver gang, den når til enden, mens siden er åben. Hvis den står til No, stopper slideren, når den har vist alle produkterne, der er tilføjet slideren.
- Show Arrows: Her kan du vælge, om der skal vises pile som navigation til næste slide.
- Show Dots: Her kan du vælge, om der skal vises prikker som navigation til næste slide.
Advanced
- Alignment: Her kan du styre, hvor indholdet i produkter skal placeres.
- Border: Her kan du vælge, om der skal være en kant rundt om dine produkter. Der er forskellige valgmuligheder, fx prikket osv.
- Border Color: Her kan du vælge farve på kanten.
- Border Width: Her kan du vælge, hvor tyk kanten skal være i pixels.
- Border Radius: Her kan du vælge, om og hvor meget afrundede hjørner kanten skal have (jo højere antal pixels, jo mere afrundet bliver hjørnerne).
- CSS Classes: Her kan du tilføje en CSS-klasse fra dit style sheet til dine produkter.
- Margins: Hvor meget luft, der skal være udenfor dit element.
- Padding: Hvor meget luft, der skal være inden i dit element.
Underviser
Agnes Madsen
Agnes er Graphic- & Webdesigner i Salecto.
Hun er også en del af produktudviklings teamet.