I denne kategori Design & layout
Design & layoutForsiden af din webshop
Forsiden: Slider Builder
På denne side
Her kan du se, hvordan du tilføjer en slider med billeder til forsiden af din webshop. Dette sker via Layout værktøjet.
Afspil video: Slider Builder (åbner Vimeo)Slider builderen kan bruges både til billeder der slider/skifter OG/ELLER til at lave et fast billede.
Det kan findes via ‘Indhold og Layout’-> ‘Layout værktøj’.
Elementet ‘Slider Builder’ findes i venstre side, og kan indsættes på alle slags sider.
Du kan redigere elementet ved at dobbelt-klikke på det. Hvis du trækker elementet ind på en side, vil det åbne sig automatisk, klar til redigering.
Tilføj billeder til din slider
Når der skal lægges billeder ind, har du to muligheder. Du kan enten ‘trække og slippe’ et billede ind, eller trykke “Add Image” i venstre side. Så vil der åbne sig en mulighed for at søge efter billeder på din computer.
Du kan bruge de fleste billedtyper, men disse virker i de fleste browsere, så det er en god idé at holde sig til dem: .jpg, .jpeg, .png, .gif, .bmp
Hvilken størrelse dine billeder skal have, kommer an på hvor stor din slider builder er. Fylder den fx. fra kant til kant på din forside og er indstillingen forholdet 2.18 x 1, så er den optimale pixel størrelse 1142 x 523 px. Men størrelsen på selve slideren og på billederne kan tilpasses individuelt. Læs mere længere nede i guiden.
Billederne gemmes i en opløsning, der er defineret i ‘Indstillinger’, se længere nede i guiden. Komprimeringen er meget lav, så kvaliteten bliver høj. Billeder af højeste kvalitet er normalt under 50 MB, men hvis størrelsen indstilles til fx. 100000 x 100000, så kan du sikkert gøre et lille billede til et 1 GB billede.
Hvis dine billeder er meget store, kan du evt. komprimere dem via kraken.io (åbner i en ny fane) eller et andet komprimerings værktøj.
Når du har valgt billedet, du vil have ind i din slider, vil du kunne se det i lille format i venstre side samt i stor version i forhåndsvisningen i højre side.
Der kan indsættes alle de billeder du lyster, MEN vær opmærksom på, at jo flere billeder, jo større risiko er der for at det sløver din side.
Derudover vil dine kunder nok ikke sidde og kigge på din forside i lang tid, for at se alle billederne, så en anbefaling er max. 3 billeder, med 5 sekunders interval – og med pager/pile vist. Så kunden hurtigt kan gå videre til næste billede, hvis dette ønskes.
Ved at ‘trække og slippe’ på pilene i venstre side af de billeder du har lagt ind, kan du ændre deres placering.
Tilføj tekst/link/knap
Når du har sat et billede ind, kan du redigere det.
Under forhåndsvisningsbilledet i højre side, har du 3 muligheder: Link, Tekst og Baggrund.
Tilføj link
Der kan sættes et link på, således at kunden ved tryk på billedet kommer til fx. et bestemt produkt eller kategori, på din webshop.
Det gør du ved at trykke på fanen “Link”.
Her kan du ved tryk på ‘Gennemse’ knappen, vælge præcist hvortil linket skal gå.
Links når du har flere sprog
Har du flere sprog i din webshop, kan du lave et link, der følger det sprog, som den besøgende har valgt.
Hvis du har et link til en kategori, der ser sådan her ud:
så skal du skrive linket i slideren med ./ og nummeret til sidst i webadressen. Det vil sige, for eksemplet herover:
Er det et link til et produkt, skal du for eksemplets skyld skrive:
linket sådan her: ./- først, og så p og nummeret på produktet.
Det er vigtigt, at der ikke er en skråstreg til sidst i produktlinks.
Lidt bøvlet, ja – men det virker til gengæld på tværs af alle dine sprog i butikken. Også når der kommer nye til.
Tilføj tekst/knap
Ved tryk på fanen ‘Tekst’ har du mulighed for at sætte en tekst direkte på dine billeder. Fordelen ved dette er, at det er nemt at redigere hvis der kommer en ændring i fx. prisen.
I eksemplet herunder, kan ses nogle af de muligheder der er:
Der er lavet en ‘Overskrift‘ med teksten “Rød overskrift” og i farven rød. Tekstfarven sættes ved at klikke på ringen til højre. Der vil en farvevælger dukke op.
Der er lavet en ‘Underoverskrift‘ med teksten “Blå baggrund underoverskrift”. Baggrundsfarven sættes ved at klikke på ringen til venstre, hvorefter en farvevælger dukker op.
Nederst er der lavet en ‘Knap‘ med teksten “Knap – stor”, her er der ændret tekststørrelsen (70px) længst ude til venstre.
Der er også mulighed for at ændre skrifttypen (Raleway), ved tryk herpå – samt at gøre teksten fed (B), kursiv (I) og/eller understreget (U).
Disse ting kan ændres for begge overskrifter samt for knappen, så du kan få det udtryk der passer bedst til din webshop.
Øverst er der en justerings mulighed for teksten; lodret eller vandret, ved tryk på de 6 knapper.
Tilføj baggrund
Ved tryk på fanen ‘Baggrund’ har du mulighed for at sætte en baggrundsfarve på dine billeder. Har billederne i din slider forskellige størrelser, har du mulighed for at lægge en baggrundsfarve på, således at området bliver fyldt helt ud.
Du kan her tilpasse dine slider billeder enkeltvis, under ‘Indstillinger’ kan der sættes nogle standard indstillinger, således at det ikke behøver rettes pr. slider hvis det hele er ens. Se længere nede i denne guide.
Størrelse
Du kan sætte størrelsen på billedet i slideren, hvor du har disse muligheder:
Samme som forrige – Her bruges den indstilling som du tidligere har brugt.
Cover – Billedet bliver tilpasset til at fylde 100% af sliderens størrelse, dette kan godt skære en god del af billedet.
Contain – Billedet beholder sin oprindelige størrelse, og baggrundsfarven vil udfylde det resterende.
100% – Billedet bliver tilpasset til at fylde 100% af sliderens størrelse, dette kan godt skære en god del af billedet.
75% – Billedet bliver tilpasset til at fylde 75% af sliderens størrelse.
Brugerdefineret – her kan du selv skrive en % som billedet skal udfylde af sliderens størrelse. Der kan også skrives en pixel størrelse fx. 500px.
Farve
Ved tryk på den runde ring, får du en farvevælger frem, og kan vælge en eventuel baggrundsfarve.
Billede
Her kan du også udskifte, slette eller indsætte flere slides/billeder.
Slet/fjern billeder fra slider
Du fjerner billeder ved, at trykke på skraldespanden til højre for det sliderbillede, der skal fjernes.
TIP/Trick: Find størrelsen på billeder
Hvordan får du lavet et billede til din slider så det passer i størrelsen?
Nummer 1 er selvfølgelig at finde ud af målet på billedet. Ofte kan du finde (inspiration) størrelsen ved at se målene på et eksisterende billede.
Billeder til hjemmesider måles i pixels. Længde gange bredde.
Her en video med tips til hvordan du finder størrelsen på et billede med browseren Chrome:
Afspil video: Find størrelse på billede (åbner Vimeo)I videoen er brugt et gratis plugin til Chrome-browseren, som viser størrelsen på billeder – søg fx efter ‘image size info’ i Chrome Web Store.
TIP/Trick: Tilpas størrelsen på billeder
Her kan du se hvordan du tilpasser størrelsen så billedet passer ind i din Slider. Du kan også se hvordan billeder kan skaleres direkte i Slider Builder, så du får en hurtigere side.
Afspil video: Slider skalere og beskære (åbner Vimeo)