A nap dizájnja
A napi A nap dizájnja beágyazása a weboldalára
A nap dizájnja minden nap új kiemelt tartalmat tesz közzé. A kép címe soha nem változik, de a mögötte lévő kép igen – így a kódot csak egyszer kell beillesztenie, és látogatói automatikusan mindig az aznapi tartalmat látják.
Hogyan működik
Minden nap egy új kép jelenik meg egyetlen állandó címen. Az Ön oldala ezt a címet tölti be, így mindig az aktuális tartalom jelenik meg, a kattintás pedig a A nap dizájnja oldalra viszi a látogatókat, ahol a teljes történetet elolvashatják.
Szkriptet szeretne? Adjon hozzá egy tárolóelemet és egy szkriptet: a widget a data-dotd-variant attribútummal kiválasztott stílust rajzolja meg (image, cta vagy card), a szkript címében megadott nyelven, ha az elérhető. Ha nem tud szkriptet futtatni, használja ugyanazon változat HTML-verzióját.
A változat: csak kép
A napi kép, a A nap dizájnja oldalra hivatkozva. A legkönnyebb megoldás.
Élő előnézet
<a href="https://designoftheday.org/hu/" target="_blank" rel="noopener">
<img src="https://competition.adesignaward.com/design-of-the-day/today.png" alt="A nap kiemelt dizájnja, amely díjnyertes kreatív kiválóságot mutat be" loading="lazy" style="max-width:100%;height:auto">
</a><div data-dotd="designoftheday.org" data-dotd-variant="image"></div>
<script async src="https://designoftheday.org/feature.js?lang=hu"></script>B változat: kép és cselekvésre ösztönzés
A napi kép, alatta cselekvésre ösztönző elemmel.
Élő előnézet
<a href="https://designoftheday.org/hu/" target="_blank" rel="noopener" style="display:block;max-width:100%;color:inherit;text-decoration:none;text-align:center">
<img src="https://competition.adesignaward.com/design-of-the-day/today.png" alt="A nap kiemelt dizájnja, amely díjnyertes kreatív kiválóságot mutat be" 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">Fedezze fel a nap dizájnját</span>
</a><div data-dotd="designoftheday.org" data-dotd-variant="cta"></div>
<script async src="https://designoftheday.org/feature.js?lang=hu"></script>C változat: Bootstrap kártya
Egy Bootstrap kártya a képpel, a tartalom címével, egy rövid bekezdéssel és egy cselekvésre ösztönző gombbal. Az oldalához szükség van a Bootstrap keretrendszerre.
Élő előnézet
<div class="card" style="max-width:24rem">
<a href="https://designoftheday.org/hu/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-of-the-day/today.png" class="card-img-top" alt="A nap kiemelt dizájnja, amely díjnyertes kreatív kiválóságot mutat be" loading="lazy"></a>
<div class="card-body">
<h5 class="card-title">A nap dizájnja</h5>
<p class="card-text">Az A' Design Award minden nap bemutat egy kiemelkedő dizájnalkotást, egy rendkívül innovatív terméket vagy egy igen kreatív projektet a nap dizájnjaként, a kreativitás és a jó dizájn figyelemre méltó példáit felvillantva.</p>
<a href="https://designoftheday.org/hu/" class="btn btn-danger" target="_blank" rel="noopener">Fedezze fel a nap dizájnját</a>
</div>
</div><div data-dotd="designoftheday.org" data-dotd-variant="card"></div>
<script async src="https://designoftheday.org/feature.js?lang=hu"></script>3. lehetőség: JSON
Fejlesztőknek, alkalmazásokhoz és automatizáláshoz. A JSON tartalmazza a nevet, a leírást, a kép címét, a hivatkozásokat és a dátumot. A cross-origin kérések engedélyezettek.
fetch("https://designoftheday.org/feature.json?lang=hu")
.then(function (r) { return r.json(); })
.then(function (d) {
// d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
});Példa válasz
{
"domain": "designoftheday.org",
"name": "A nap dizájnja",
"feature": "A nap dizájnja",
"paragraph": "Az A' Design Award minden nap bemutat egy kiemelkedő dizájnalkotást, egy rendkívül innovatív terméket vagy egy igen kreatív projektet a nap dizájnjaként, a kreativitás és a jó dizájn figyelemre méltó példáit felvillantva.",
"description": "A nap dizájnja minden nap bemutat egy kiemelkedő dizájnalkotást, egy rendkívül innovatív terméket vagy egy igen kreatív projektet, a kreativitás és a jó dizájn figyelemre méltó példáit felvillantva, a rendkívül rangos A' Design Award and Competition elismerése alapján.",
"call_to_action": "Fedezze fel a nap dizájnját",
"date": "2026-11-08",
"language": "hu",
"image": "https://competition.adesignaward.com/design-of-the-day/today.png",
"image_alt": "A nap kiemelt dizájnja, amely díjnyertes kreatív kiválóságot mutat be",
"url": "https://designoftheday.org/hu/",
"feature_url": "https://competition.adesignaward.com/design-of-the-day.html",
"registry_url": "https://competition.adesignaward.com/designs-of-the-days.php",
"embed_url": "https://designoftheday.org/hu/beagyazas/"
}Jó tudni
- Hagyja meg a hivatkozást a kép körül, hogy látogatói felfedezhessék a teljes tartalmat.
- Mindig a fent látható képcímet használja, és ne mentsen el másolatot, így oldala mindig naprakész marad.
- A kép reszponzív: soha nem lesz szélesebb a tárolóeleménél.
- Segítségre van szüksége, vagy egyedi formátumot szeretne? Kérjük, lépjen kapcsolatba velünk.