Ugrás a fő tartalomhoz

A nap dizájnötlete

A napi A nap dizájnötlete beágyazása a weboldalára

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

Élő előnézet

<a href="https://designideaoftheday.com/hu/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-idea-of-the-day/today.png" alt="A nap dizájnötlete, egy innovatív koncepció bemutatása, amely feszegeti a kreativitás határait" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designideaoftheday.com" data-dotd-variant="image"></div>
<script async src="https://designideaoftheday.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://designideaoftheday.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-idea-of-the-day/today.png" alt="A nap dizájnötlete, egy innovatív koncepció bemutatása, amely feszegeti a kreativitás határait" 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ájnötletét</span>
</a>
<div data-dotd="designideaoftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designideaoftheday.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://designideaoftheday.com/hu/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-idea-of-the-day/today.png" class="card-img-top" alt="A nap dizájnötlete, egy innovatív koncepció bemutatása, amely feszegeti a kreativitás határait" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">A nap dizájnötlete</h5>
    <p class="card-text">Az A' Design Award minden nap bemutat egy rendkívül innovatív dizájnötletet vagy egy igen kreatív koncepciót a nap dizájnötleteként, feltárva az eredeti gondolkodást, a praktikus megoldásokat és a dizájnkiválóság inspiráló megközelítéseit.</p>
    <a href="https://designideaoftheday.com/hu/" class="btn btn-danger" target="_blank" rel="noopener">Fedezze fel a nap dizájnötletét</a>
  </div>
</div>
<div data-dotd="designideaoftheday.com" data-dotd-variant="card"></div>
<script async src="https://designideaoftheday.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://designideaoftheday.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": "designideaoftheday.com",
    "name": "A nap dizájnötlete",
    "feature": "A nap dizájnötlete",
    "paragraph": "Az A' Design Award minden nap bemutat egy rendkívül innovatív dizájnötletet vagy egy igen kreatív koncepciót a nap dizájnötleteként, feltárva az eredeti gondolkodást, a praktikus megoldásokat és a dizájnkiválóság inspiráló megközelítéseit.",
    "description": "A nap dizájnötlete minden nap bemutat egy rendkívül innovatív dizájnötletet, egy igen kreatív koncepciót, feltárva az eredeti gondolkodást, a praktikus megoldásokat és a globális dizájnkiválóság inspiráló megközelítéseit, a rendkívül rangos A' Design Award and Competition válogatásában.",
    "call_to_action": "Fedezze fel a nap dizájnötletét",
    "date": "2026-11-08",
    "language": "hu",
    "image": "https://competition.adesignaward.com/design-idea-of-the-day/today.png",
    "image_alt": "A nap dizájnötlete, egy innovatív koncepció bemutatása, amely feszegeti a kreativitás határait",
    "url": "https://designideaoftheday.com/hu/",
    "feature_url": "https://competition.adesignaward.com/design-idea-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/design-ideas-of-the-days.php",
    "embed_url": "https://designideaoftheday.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