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.

Slider Builder

Når Slider Builderen er åben, vil du se muligheden for indsættelse af slides/billeder i venstre side. I højre side er der et område til forhåndsvisning og redigering af billederne.

Nederst er nogle vigtige knapper. Det er her du gemmer, hvad du har lavet indtil nu.
Du kan også fortryde og gentage handlinger.

Ved klik på Forhåndsvisning, vil du se, hvis du har flere billeder, hvordan de skifter.

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.

Slider størrelse/Standard indstillinger

Du kan ændre størrelsen på slideren, så den kommer til at passe med dine billeder, samt sætte dine standardindstillinger, så du ikke skal ændre dem hele tiden pr. billede.

Det gør du ved, inde i Slider builder elementet, i øverste venstre hjørne at vælge ‘Indstillinger’. 

Slider

Herinde har du muligheden for at tilpasse slideren, så det passer med det område du gerne vil have den udfylder på din webshop og din billedstørrelse.

Under ‘Slider størrelse’ har du nogle forhåndsindstillinger, derudover kan du selv skrive et forhold fx. ratio 5 : 3 eller pixel størrelse 700 : 300 (bredde : højde). Denne indstilling har betydning for billedets komprimering. Jo større billede, jo mere vil det også fylde. Komprimeringen af billederne er lav, så kvaliteten forbliver høj. Så jo flere pixels, jo mere diskplads vil billedet optage.

Har kan du også angive sekund intervallet hvormed dine billeder skal skifte, hvis du har mere end et billede. Standard er 5 sekunder.

Uendelig afspilning – Slideren starter forfra når den kommer til slutningen.
Pause når der peges med musen – Skal slideren stoppe med at skifte billed, hvis kunden holder musen over, så skal denne afkrydses.
Pile – Skal der vises ‘bladre-pile’ i højre og venstre side.
Pager – Skal antallet af slides/billeder vises ved små prikker i bunden.

Baggrund

Størrelse: Her kan standard indstillingen for billedernes tilpasning til slider elementet indstilles. Se længere oppe for en forklaring.
Farve: Her kan standard baggrundsfarven indstilles, for de billeder der ikke udfylder hele slider elementet.

Tekst

Tekst farve: Her indstilles standard tekst farven.
Baggrundsfarveknap: Her er standard indstillingen for baggrundsfarven på knapper.
Skrifttype: Her kan du indstille standard skrifttypen der skal bruges. Standard er RALEWAY.
Skriftstørrelse: Her angives standard skriftstørrelsen. Standard er 24px.
Skalering for alle tekstlag: Angiv størrelses forholdet på teksten. Standard er 1.

Alle disse ting kan ændres individuelt, pr. billede, læs højere oppe hvordan.