Billedelement

Introduktion

På den enkelte side I sektionen Billedelement kan du tilføje ét eller flere billedbannere, også kaldet billedelementer, til din side. Billedelementer vises i toppen af siden, i en billedkarrusel, som (hvis der er mere end ét billede) roterer med et tidsinterval, som kan indstilles:

Billedelementer kan vises på alle indholdssider af typen tekst, blog, formular, kalender, kontakt, mediearkiv og nyheder. Billedelementer kan tilføjes links så der kan klikkes på dem og navigeres til andre sider, produkter og produktkategorier. På denne måde kan billedbanneret f.eks. fungere som en reklamesøjle for tilbud og andre aktiviteter på din webshop. Læs mere om sidetyper her.

Sådan gør du

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

1. Fold menupunktet ud for, at vise de indeholdte sider.
2. Klik på de tre prikker ud for linjen, og vælg Ny side eller Rediger.

TIP: Hvis du opretter en side via dialogen på en eksisterende side frem for direkte på menupunktet 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 finder du sektionen Billedelement:

1. Træk billeder ind her: I feltet inden for den stiplede linje har du mulighed for, at tilføje billedfiler ved, at trække billeder ind fra en mappe på din computer med musen.
2. Gennemse: Du kan også gennemse og vælge billeder i shoppens filhåndtering.
3. Importér: Her kan du importere billeder fra din computer. Billeder vil efter tilføjelse ligge i shoppens filhåndtering.
4. Indstillinger: De overordnede indstillinger for billedelementet finder du under Indstillinger:
   
   

   

   A. Her kan du justere højden på billedet. Bredden er fastsat af det pågældende design, hvilket vi beskriver nærmere længere nede i artiklen.
   B. Her sættes hastigheden, hvormed billederne skifter, hvis du har flere tilføjet. Skiftet er sat til 3 sekunder som standard (svarende til 3000 millisekunder).
   C. Her bestemmes rækkefølgen af billederne: Følg listesortering følger den rækkefølge du selv fastsætter ved, at sortere billederne i listen. Tilfældig viser billederne i tilfældig rækkefølge.

5. Grid/List: Her kan du skifte visningen af tilføjede billeder mellem listevisning og gittervisning.
6. Sortering: Så snart du har tilføjet billeder til billedelementet vil de vises her, hvorefter du kan ændre rækkefølgen på billederne ved, at trække elementerne rundt med musen:
   
   

   

7. Rediger: Redigering af de enkelte billedelementer giver mulighed for, at tilføje tekst og link til dit billedbanner:
   
   

   

   A. Her kan du udskifte billedet ved, at gennemse filarkivet eller importere et nyt fra din computer.
   B. Tilføj en titel, som skal vises på banneret (kan benyttes, hvis du f.eks. ikke allerede har en tekst på det billede du lægger op).
   C. Tilføj en undertekst til din titel.
   D. Tilføj en knaptekst (se en forhåndsvisning til højre på siden).
   E. Indsæt et link til den produktkategori, produkt eller side som banneret skal linke til.
   F. Her kan du bestemme om banneret skal være synligt i en bestemt periode f.eks. i forbindelse med et udsalg, event eller anden begivenhed.
   G. Her kan du se en forhåndsvisning af de ændringer du foretager på banneret.

8. Slet: Her sletter du billeder tilføjet billedelementet. Du skal dog være opmærksom på, at denne knap ikke sletter billederne fra shoppens filhåndtering men kun fra visningen på den pågældende side.

Størrelser på billeder

Den anbefalede størrelse på de billeder du benytter i billedelementet afhænger af, hvilket design du har valgt. Derfor vil vi i denne sektion se nærmere på de forskellige billedstørrelser.

Flydende billedelementer

Galaxy er værdsat for sit store forsidebillede. Du skal dog være opmærksom på, at billedet zoomes automatisk på forskellige enheder og, at evt. tekst og vigtige elementer i billedet derfor skal placeres centralt på banneret med en smule margin, hvis det altid skal være synligt. Denne opførsel er et bevidst designvalg for både Galaxy og Terrarium da banneret fungerer som et stemningsbillede på de to designs.

Hvis størrelsen på billedet er 1500 x 650 pixel skal du sørge for, at have ca. 200 pixel margin i højre og venstre side, og ca. 70 pixel i top og bund til de vigtigste elementer på dit billede. Husk, at du altid kan prøve dig frem på en kopi af dit design, hvis din shop er åben for kunder.

Hvis du ønsker en mere kontrolleret visning af banneret kan du tilføje ekstra CSS-koder, der sørger for, at holde en større portion af billedet synlig ved flere skærmstørrelser:

@media (min-width: 1501px) { .frontpage-fullwidthslider .w-slider-img { max-height: 80vh; width: 100%; margin: auto; margin-bottom: 6vh; } .site-categories { bottom: 4vh; } .frontpage-banner-USP { bottom: 0vh; }}
@media (max-width: 1500px) { .frontpage-fullwidthslider .w-slider-img { max-height: 50vh; width: 100%; margin: auto; margin-bottom: 6vh; } .site-categories { bottom: 4vh; } .frontpage-banner-USP { bottom: 0vh; }}
@media (max-width: 1199px) { .frontpage-fullwidthslider .w-slider-img { max-height: 40vh; width: 100%; margin: auto; margin-bottom: 6vh; } .site-categories { bottom: 4vh; } .frontpage-banner-USP { bottom: 0vh; }}
@media (max-width: 960px) { .frontpage-fullwidthslider .w-slider-img { max-width: 100vw; max-height: 25vh; margin: auto; } /* partners */ .site-content>.brand-slider { width: 100% !important; height: 10vh; min-height: 0; } .brand-slider .owl-item { max-width: 35vw !important; height: 10vh !important; margin: 0 25px !important; } .brand-slider .owl-item:nth-of-type(2) { margin: 0 -25px !important; } .container.with-xlarge .col-xl-12 p{ width: 100%; }}

Koden indsættes på designet under Webshop > Design via funktionen Handlinger > Indsæt CSS. Du kan læse mere om indsættelse af CSS her. Husk, at egentilpasset koden som udgangspunkt ikke er omfattet af supporten på shopsystemet. Hvis du ønsker, at arbejde med billedfiler kan kan du f.eks. benytter software som Affinity Photo og Canva.

Design Portal

Se en oversigt over alle designs og deres indbyggede temaer i vores Design Portal.

Andre tilpasninger

Hvis du f.eks. ønsker, at ændre grafikken til pilene i bladre-funktionen eller prikkerne i bunden af billedrotationen, som vises på nogle designs, skal dette gøres med CSS eller ved tilpasning af shoppens designfiler. Begge dele kræver kodeerfaring og er som udgangspunkt ikke omfattet af den normale support på shoppen.

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.