Siirry pääsisältöön

Päivän muotoilijan huippunosto

Upota Päivän muotoilijan huippunostot verkkosivullesi

Päivän muotoilijan huippunosto julkaisee uuden esittelyn joka päivä. Kuvan osoite pysyy samana, mutta sen takana oleva kuva vaihtuu – sinun tarvitsee lisätä koodi vain kerran, ja kävijäsi näkevät aina päivän esittelyn automaattisesti.

Näin se toimii

Joka päivä uusi kuva julkaistaan yhdessä kiinteässä osoitteessa. Sivusi lataa kyseisen osoitteen, joten se näyttää aina ajankohtaisen esittelyn, ja klikkaus vie kävijäsi Päivän muotoilijan huippunosto-sivustolle, jossa koko tarina kerrotaan.

Haluatko käyttää skriptiä? Lisää yksi säiliöelementti ja yksi skripti: widget piirtää valitsemasi tyylin data-dotd-variant-attribuutilla (image, cta tai card) skriptiosoitteen kielellä, kun kyseinen kieli on saatavilla. Jos et voi käyttää skriptejä, käytä saman vaihtoehdon HTML-versiota.

Vaihtoehto A: pelkkä kuva

Päivän kuva, linkitettynä Päivän muotoilijan huippunosto-sivustolle. Kevyin vaihtoehto.

Live-esikatselu

<a href="https://designerhighlightoftheday.com/fi/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/highlight-of-the-day/today.png" alt="Päivän muotoilijan huippunosto esittelee merkittävää muotoilijaa osana kansainvälistä muotoiluyhteisöä" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designerhighlightoftheday.com" data-dotd-variant="image"></div>
<script async src="https://designerhighlightoftheday.com/feature.js?lang=fi"></script>

Vaihtoehto B: kuva ja toimintakehote

Päivän kuva ja sen alla toimintakehote.

Live-esikatselu

<a href="https://designerhighlightoftheday.com/fi/" target="_blank" rel="noopener" style="display:block;max-width:100%;color:inherit;text-decoration:none;text-align:center">
  <img src="https://competition.adesignaward.com/highlight-of-the-day/today.png" alt="Päivän muotoilijan huippunosto esittelee merkittävää muotoilijaa osana kansainvälistä muotoiluyhteisöä" loading="lazy" style="display:block;max-width:100%;height:auto;margin:0 auto">
  <span style="display:block;margin-top:.5em;font:600 15px/1.3 system-ui,sans-serif">Tutustu Päivän muotoilijan huippunostoon</span>
</a>
<div data-dotd="designerhighlightoftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designerhighlightoftheday.com/feature.js?lang=fi"></script>

Vaihtoehto C: Bootstrap-kortti

Bootstrap-kortti, jossa on kuva, esittelyn otsikko, lyhyt kappale ja toimintakehotepainike. Sivullasi on oltava Bootstrap käytössä.

Live-esikatselu

<div class="card" style="max-width:24rem">
  <a href="https://designerhighlightoftheday.com/fi/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/highlight-of-the-day/today.png" class="card-img-top" alt="Päivän muotoilijan huippunosto esittelee merkittävää muotoilijaa osana kansainvälistä muotoiluyhteisöä" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">Päivän muotoilijan huippunostot</h5>
    <p class="card-text">A' Design Award nostaa joka päivä esiin johtavan muotoilijan, tähtisuunnittelijan, huippuluovan tai innovaattorin Päivän muotoilijan huippunostona, esitellen heidän saavutuksiaan, luovaa työtään ja panostaan muotoilun maailmaan.</p>
    <a href="https://designerhighlightoftheday.com/fi/" class="btn btn-danger" target="_blank" rel="noopener">Tutustu Päivän muotoilijan huippunostoon</a>
  </div>
</div>
<div data-dotd="designerhighlightoftheday.com" data-dotd-variant="card"></div>
<script async src="https://designerhighlightoftheday.com/feature.js?lang=fi"></script>

Vaihtoehto 3: JSON

Kehittäjille, sovelluksille ja automaatiolle. JSON sisältää nimen, kuvauksen, kuvan osoitteen, linkit ja päivämäärän. Cross-origin-pyynnöt ovat sallittuja.

fetch("https://designerhighlightoftheday.com/feature.json?lang=fi")
  .then(function (r) { return r.json(); })
  .then(function (d) {
    // d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
  });

Esimerkkivastaus

{
    "domain": "designerhighlightoftheday.com",
    "name": "Päivän muotoilijan huippunosto",
    "feature": "Päivän muotoilijan huippunostot",
    "paragraph": "A' Design Award nostaa joka päivä esiin johtavan muotoilijan, tähtisuunnittelijan, huippuluovan tai innovaattorin Päivän muotoilijan huippunostona, esitellen heidän saavutuksiaan, luovaa työtään ja panostaan muotoilun maailmaan.",
    "description": "Päivän muotoilijan huippunosto esittelee joka päivä johtavan muotoilijan, tähtisuunnittelijan, huippuluovan tai innovaattorin, tuoden esiin heidän saavutuksensa, luovan työnsä ja panoksensa muotoilun maailmaan, arvostetun A' Design Award and Competition -palkinnon tunnustamana.",
    "call_to_action": "Tutustu Päivän muotoilijan huippunostoon",
    "date": "2026-11-08",
    "language": "fi",
    "image": "https://competition.adesignaward.com/highlight-of-the-day/today.png",
    "image_alt": "Päivän muotoilijan huippunosto esittelee merkittävää muotoilijaa osana kansainvälistä muotoiluyhteisöä",
    "url": "https://designerhighlightoftheday.com/fi/",
    "feature_url": "https://competition.adesignaward.com/designer-highlight-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/designer-highlights-of-the-days.php",
    "embed_url": "https://designerhighlightoftheday.com/fi/esittely/"
}

Hyvä tietää

  • Säilytä linkki kuvan ympärillä, jotta kävijäsi voivat tutustua koko esittelyyn.
  • Käytä aina yllä näkyvää kuvan osoitetta äläkä tallenna kopiota, jotta sivusi pysyy ajan tasalla.
  • Kuva on responsiivinen: se ei koskaan kasva säiliötään leveämmäksi.
  • Tarvitsetko apua tai mukautetun muodon? Ota meihin yhteyttä.

Päivän muotoilusitaatti

Päivän muotoilusitaatti

DesignAdage