Ugrás a fő tartalomhoz

A nap dizájncsapata

A napi A nap dizájncsapata beágyazása a weboldalára

A nap dizájncsapata 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ájncsapata 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ájncsapata oldalra hivatkozva. A legkönnyebb megoldás.

Élő előnézet

<a href="https://designteamoftheday.com/hu/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-team-of-the-day/today.png" alt="A nap díjnyertes dizájncsapata, amely innovatív projekteken dolgozik együtt" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designteamoftheday.com" data-dotd-variant="image"></div>
<script async src="https://designteamoftheday.com/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://designteamoftheday.com/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-team-of-the-day/today.png" alt="A nap díjnyertes dizájncsapata, amely innovatív projekteken dolgozik együtt" 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ájncsapatát</span>
</a>
<div data-dotd="designteamoftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designteamoftheday.com/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://designteamoftheday.com/hu/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-team-of-the-day/today.png" class="card-img-top" alt="A nap díjnyertes dizájncsapata, amely innovatív projekteken dolgozik együtt" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">A nap dizájncsapata</h5>
    <p class="card-text">Az A' Design Award minden nap ünnepli a kivételes dizájn-, építészeti és innovációs projektek mögött álló kreatív csapatokat a nap dizájncsapataként, bemutatva azokat a vezető stúdiókat, amelyek együttműködése, közös víziója és szakértelme kiemelkedik.</p>
    <a href="https://designteamoftheday.com/hu/" class="btn btn-danger" target="_blank" rel="noopener">Fedezze fel a nap dizájncsapatát</a>
  </div>
</div>
<div data-dotd="designteamoftheday.com" data-dotd-variant="card"></div>
<script async src="https://designteamoftheday.com/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://designteamoftheday.com/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": "designteamoftheday.com",
    "name": "A nap dizájncsapata",
    "feature": "A nap dizájncsapata",
    "paragraph": "Az A' Design Award minden nap ünnepli a kivételes dizájn-, építészeti és innovációs projektek mögött álló kreatív csapatokat a nap dizájncsapataként, bemutatva azokat a vezető stúdiókat, amelyek együttműködése, közös víziója és szakértelme kiemelkedik.",
    "description": "A nap dizájncsapata ünnepli a kivételes dizájn-, építészeti és innovációs projektek mögött álló kreatív csapatokat, bemutatva a világszínvonalú tervezőket, sztárépítészeket és vezető dizájncsapatokat, amelyek együttműködését, közös vízióját és szakértelmét a rendkívül rangos A' Design Award and Competition elismerte.",
    "call_to_action": "Fedezze fel a nap dizájncsapatát",
    "date": "2026-11-08",
    "language": "hu",
    "image": "https://competition.adesignaward.com/design-team-of-the-day/today.png",
    "image_alt": "A nap díjnyertes dizájncsapata, amely innovatív projekteken dolgozik együtt",
    "url": "https://designteamoftheday.com/hu/",
    "feature_url": "https://competition.adesignaward.com/design-team-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/design-teams-of-the-days.php",
    "embed_url": "https://designteamoftheday.com/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.

A nap design idézete

A nap design idézete

DesignAdage