Billedelement

I denne artikel:


Introduktion

Under Billedelement kan du tilføje ét eller flere billedbannere til din side. Billedelementer fungerer som bannere i toppen af siden, og placeres i en billedkarrusel, som (hvis der er mere end ét billede) roterer med et tidsinterval på den pågældende side:

Billedelementer kan vises på alle indholdssider af typen Tekst, Blog, Formular, Kalender, Kontakt, Mediearkiv og Nyheder (tilgængelige sidetyper afhænger af den valgte abonnementspakke). Når du opretter eller redigerer en side, vil du under Webshop > Sider > Opret side/Rediger > Billedelement kunne tilføje ét eller flere billedbannere, ved enten at uploade et nyt billede, eller benytte en eksisterende billedfil.

 

I praksis

Du finder billedelementet når du opretter eller redigerer sider under Webshop > Sider:

  1. Fold kategorien ud, for at vise de tilknyttede sider
  2. Klik på de tre prikker ud for linjen, og vælg Opret eller Rediger

TIP: Hvis du opretter en side via dialogen på en eksisterende side, vil den nye side blive vist som en underside til den eksisterende side. Du kan læse mere om sider i denne artikel.

 

Når du er inde på den ønskede side skal du scrolle ned til sektionen Billedelement:

I feltet inden for den stiplede linje har du mulighed for at tilføje billedbannere til siden ved at:

  1. Trække billedfiler fra din computer ind i vinduet via drag-and-drop
  2. Vælge eksisterende billeder fra shoppens filhåndterings arkiv
  3. Uploade billedfiler fra din computer via stifinder

Når du har tilføjet de ønskede billeder, har du efterfølgende mulighed for sætte egenskaber for de enkelte billeder i karrusellen:

Klik på redigeringsikonet for at gå til billedindstillinger:

  1. Tilføj en titel. Titlen fungerer som overskrift.
  2. Tilføj en tekst. Teksten fungerer som beskrivelse.
  3. Tilføj en link-tekst, og et link til en side i shoppen. Det kunne f.eks. være til en kampagne mv.
  4. Her kan du sortere rækkefølgen som billedet vises i på den pågældende side (lave værdier vises før højere værdier).
  5. Synlighedsintervallet kan benyttes til at vise banneret i en periode, f.eks. i forbindelse med en kampagne som black friday mv.

Bemærk: Hvis du ønsker at kunden skal kunne klikke på dit banner, skal feltet Link enten indeholde et link til en side, produktkategori eller produkt i shoppen, eller til en ekstern side på nettet. Hvis du linker til en side i shoppen, behøver du ikke indsætte hele URL'en, som vist i eksemplet herover, hvor vi linker til produktkataloget ved at benytte "/shop/", uden domænet foran. Linker du derimod til en side ude på nettet, skal du have hele URL'en med. Du kan lade feltet være tomt, hvis der ikke skal være mulighed for at navigere via banneret.

Alle indstillingerne er valgfrie, og banneret kan derfor også benyttes som et designelement på siden. Vær samtidigt opmærksom på at visningen er forskellig fra tema til tema. Øverst i denne artikel viser vi f.eks. hvordan banneret tager sig ud i vores "Sprout" design, hvorimod dette eksempel er vist i designet "Rooty".

 

Indstillinger for billedelement

Klik på Rediger for at få vist de overordnede indstillinger for billedelementet:

  1. Her sættes den ønskede højde på billedelementet (bredden justeres automatisk ud fra højden, for at bibeholde billedets proportioner).
  2. Her sættes intervallet imellem billedskift. Værdien er angivet i millisekunder, hvilket betyder at f.eks. 3000 svarer til 3 sekunder.
  3. Her kan du bestemme om billedvisningen skal følge sorteringen, eller følge tilfældig (random) visning.

 

Størrelser på billedelement

Billedelementet har forskellige størrelser, alt efter hvilket design man benytter sig af. Herunder har vi udvalgt nogle eksempler du kan gå ud fra. Vi har ligeledes en oversigt hvor du kan læse mere om egenskaberne for de forskellige designs. Du kan finde oversigten her.

 

Rooty, Palette og Ilumina (undertemaer inklusive):

I disse designs er billedelementet som udgangspunkt 1240 x 440px

 

Classic (undertemaer inklusive):

I dette design er billedelementet som udgangspunkt 918 x 390px.

 

Sprout (undertemaer inklusive):

I dette design skal billedstørrelsen skal være 1240 x 440px eller 1920 x 500px hvis du benytter indstillingen for fuld skærmbredde (slider).

Du finder "slider-indstillingen" i sprout under Webshop > Design > Ret design > fanen "Opsætning" > scroll ned til "Slider":

 

Memento (tilkøb):

I Memento er der to mulige indstillinger.

Forsideslider i fuld bredde:

1240 x 440px

Forsideslider med side-billede:

I denne opsætning, skal billedelementet have størrelsen 820 x 340px og billedet skal være 400 x 340px.

 

Galaxy (tilkøb):

Galaxy designet er værdsat for sit store forsidebillede.

Bredden skal være 1500px, højden kan man selv bestemme. Man skal være opmærksom på at kategori-menuen, "skærer" bunden af billedet.

Bemærk: Da Hostedshop benytter responsivt design som skalerer visningen efter skærmstørrelse, vil bannere blive skaleret automatisk. Som udgangspunkt forsøger Hostedshop at vise hele billedet. Dette kan dog være begrænset i nogle formater, da billedet holdes i det korrekte højde/breddeforhold.

 

Design Portal

Du kan læse mere om de forskellige designs egenskaber i deres tilhørende designmanual, som du finder i vores Design Portal.

 

Andre tilpasninger

Hvis du ønsker at ændre grafikken der benyttes til bladre funktionen (højre og venstre pilene), samt punkterne for indikation af billedrotationen (se screenshot herunder), så skal dette gøres ved tilpasning af shoppens designfiler. Og da størrelsen på billedelementet er dikteret af den valgte designtemplate, som reagerer dynamisk i forhold til f.eks. mobilvisning, vil tilretning af bannerstørrelser ligeledes skulle foregå i shoppens designfiler. Du kan læse mere om avanceret tilretning af design her. Bemærk: Vi supporterer ikke tilpasset kode i designfilerne. Vores kundeservice kan dog henvise til en designpartner, hvis du ønsker assistance til evt. tilpasninger af shoppens designfiler.

 

Nyttige links

  • Læs mere om at skabe blikfang med bannere i vores artikel om Black Friday og udsalg generelt
  • Læs mere om billedformater og filstørrelser her
  • Find manualen til din valgte design template her for yderligere information om de forskellige design templates
  • For mere information vedr. avanceret tilpasning af design templates se venligst denne artikel
  • Vi kan også anbefale denne artikel hvis du f.eks. ønsker at ændre farver på bannertekster mv.