Ison kuvan lisääminen etusivulle

Verkkokaupan etusivulla näkyviä laatikoita hallitaan verkkokaupan hallintaliittymän markkinointi / etusivu -kohdan kautta. Laatikoihin voidaan lisätä kuvia, mutta kuvat näkyvät tietenkin ainoastaan laatikoissa. Jos haluat lisätä laatikoiden yläpuolelle koko sivun levyisen kuvan, niin noudata näitä ohjeita.

Tarvittavat ohjelmistot

Tässä työssä tarvitaan

• verkkoselain (esim. Edge)

Toteutusohjeet

• Kirjaudu verkkokaupan hallintaliittymään (demo).
• Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
• Klikkaa Lisää uusi -painiketta.
• Valitse tyypiksi "Kuva".
• Syötä nimeksi "Etusivun iso kuva" tai mitä tahansa.
• Klikkaa Kuva-kohdassa olevaa sinistä kuvaketta.
• Valitse kuva omalta tietokoneeltasi.
• Klikkaa Tallenna-painiketta.
  - Näet kortista kuvatiedoston polun ja nimen, esimerkiksi graphics/codes/testikuva.jpg.
• Klikkaa Lisää uusi -painiketta.
• Valitse tyypiksi "HTML5".
• Syötä nimeksi "Etusivun iso kuva" tai mitä tahansa.
• Valitse Sivu-kohdasta "Etusivu".
• Valitse Sijainti-kohdasta "Verkkokaupassa #content_around jälkeen" tai mitä tahansa.
• Lisää Koodi-kohtaan:
  

  <div class="oma_etusivun_kuva">
  <img src="graphics/codes/testikuva.jpg" alt="Testikuva" />
  </div>
  

  mutta korvaa siinä oleva graphics/codes/testikuva.jpg juuri äsken lisäämäsi kuvatiedoston polulla ja nimellä.
• Klikkaa Tallenna-painiketta.
• Klikkaa Lisää uusi -painiketta.
• Valitse tyypiksi "CSS3".
• Syötä nimeksi "Etusivun iso kuva" tai mitä tahansa.
• Lisää Koodi-kohtaan:
  

  div.oma_etusivun_kuva {
    margin: 15px 0px 15px 0px;
  }
  
  div.oma_etusivun_kuva img {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  

• Klikkaa Tallenna-painiketta.

Katso myös

• Jssor Sliderin lisääminen