Forsiden: Slider Builder

Her kan du se, hvordan du tilføjer en slider med billeder til forsiden af din webshop. Dette sker via Layout værktøjet.

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

Der udover 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å.

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ælge 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 dine slider forskellige størrelse, 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:

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.