Steg for steg-veiledning

Steg 1

Logg inn i administrasjonspanelet i din nettbutikk. Deretter trykker du på “Butikken” (1) i venstremenyen og så “Tekster” (2).

Steg 2

Trykk på “Vis” (1) og deretter på “Kildekode”(2).

Steg 3

Kopier HTML-koden fra boksen nedenfor og lim inn som vist på bildet (1), trykk deretter på Ok (2).

 

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-4">
<li><a href="www.nettsideadresse.no">Bilde</a></li>
<li><a href="www.nettsideadresse.no">Bilde</a></li>
<li><a href="www.nettsideadresse.no">Bilde</a></li>
<li><a href="www.nettsideadresse.no">Bilde</a></li>
</ul>

Steg 4

Nå skal man markere det første listeelementet for å så erstatte det med et opplastet bilde.

Du har nå lastet opp det første bildet i grid-oppsettet ditt. Repeter steg 4 på de resterende listepunktene og du har satt opp en grid med bilder i. :-)

Steg 5

Nå er det på tide å sette lenker på bildene i griden din.

Dette gjør man enkelt med å markere bildet med musepekeren slik du ville markert tekst på en nettside. 

Gjør det samme for de tre siste bildene og du er ferdig.

Godt jobbet! :-)

Har du spørsmål kan du kontakte vår gratis support mellom 08.30 og 15.30 fra mandag til fredag på tlf. 22 33 66 88 eller via post@24nettbutikk.no.

Ekstra informasjon

Du har sikkert lagt merke til at det står class="small-block-grid-1 medium-block-grid-2 large-block-grid-4" inne i <ul>-taggen.

Dette er det man kaller for en css-klasse. Disse er viktige for at griden skal fungere, og er der for å fortelle hvor mange bilder man vil ha bredden på mobil, nettbrett og dataskjerm.

  • small-block-grid-1 = 1 bilde i bredden på mobilskjermer
  • medium-block-grid-2 = 2 bilder i bredden på nettbrett
  • large-block-grid-4 = 4 bilder i bredden på dataskjermer
Fant du svaret?