Preskoči na glavni sadržaj

Dizajn dana

Ugradite Dizajn dana na svoju web stranicu

Dizajn dana svaki dan objavljuje novi istaknuti sadržaj. Adresa slike se nikada ne mijenja, ali slika iza nje se mijenja, pa kod dodate samo jednom, a vaši posjetitelji automatski vide današnji istaknuti sadržaj.

Kako funkcionira

Svaki dan nova slika objavljuje se na jednoj fiksnoj adresi. Vaša stranica učitava tu adresu pa uvijek prikazuje trenutni istaknuti sadržaj, a klikom se vaši posjetitelji vode na Dizajn dana gdje mogu pročitati cijelu priču.

Preferirate skriptu? Dodajte jedan kontejner i jednu skriptu: widget iscrtava stil koji odaberete pomoću data-dotd-variant (image, cta ili card), na jeziku adrese skripte kada je taj jezik dostupan. Ako ne možete pokretati skripte, koristite HTML verziju iste varijante.

Varijanta A: samo slika

Današnja slika, povezana na Dizajn dana. Najlakša opcija.

Pregled uživo

<a href="https://designoftheday.org/hr/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-of-the-day/today.png" alt="Istaknuti Dizajn dana koji prikazuje nagrađivanu kreativnu izvrsnost" 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=hr"></script>

Varijanta B: slika i poziv na akciju

Današnja slika s pozivom na akciju ispod.

Pregled uživo

<a href="https://designoftheday.org/hr/" 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="Istaknuti Dizajn dana koji prikazuje nagrađivanu kreativnu izvrsnost" 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">Otkrijte Dizajn dana</span>
</a>
<div data-dotd="designoftheday.org" data-dotd-variant="cta"></div>
<script async src="https://designoftheday.org/feature.js?lang=hr"></script>

Varijanta C: Bootstrap kartica

Bootstrap kartica sa slikom, naslovom istaknutog sadržaja, kratkim odlomkom i gumbom za poziv na akciju. Vaša stranica treba Bootstrap.

Pregled uživo

<div class="card" style="max-width:24rem">
  <a href="https://designoftheday.org/hr/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-of-the-day/today.png" class="card-img-top" alt="Istaknuti Dizajn dana koji prikazuje nagrađivanu kreativnu izvrsnost" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">Dizajn dana</h5>
    <p class="card-text">A' Design Award svaki dan predstavlja izvanredno dizajnersko djelo, visoko inovativan proizvod ili vrlo kreativan projekt kao Dizajn dana, ističući izuzetne primjere kreativnosti i dobrog dizajna.</p>
    <a href="https://designoftheday.org/hr/" class="btn btn-danger" target="_blank" rel="noopener">Otkrijte Dizajn dana</a>
  </div>
</div>
<div data-dotd="designoftheday.org" data-dotd-variant="card"></div>
<script async src="https://designoftheday.org/feature.js?lang=hr"></script>

Opcija 3: JSON

Za programere, aplikacije i automatizaciju. JSON sadrži naziv, opis, adresu slike, poveznice i datum. Zahtjevi s drugih domena su dopušteni.

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

Primjer odgovora

{
    "domain": "designoftheday.org",
    "name": "Dizajn dana",
    "feature": "Dizajn dana",
    "paragraph": "A' Design Award svaki dan predstavlja izvanredno dizajnersko djelo, visoko inovativan proizvod ili vrlo kreativan projekt kao Dizajn dana, ističući izuzetne primjere kreativnosti i dobrog dizajna.",
    "description": "Dizajn dana svaki dan predstavlja izvanredno dizajnersko djelo, visoko inovativan proizvod ili vrlo kreativan projekt, ističući izuzetne primjere kreativnosti i dobrog dizajna priznatog od strane iznimno prestižnog natjecanja A' Design Award and Competition.",
    "call_to_action": "Otkrijte Dizajn dana",
    "date": "2026-11-08",
    "language": "hr",
    "image": "https://competition.adesignaward.com/design-of-the-day/today.png",
    "image_alt": "Istaknuti Dizajn dana koji prikazuje nagrađivanu kreativnu izvrsnost",
    "url": "https://designoftheday.org/hr/",
    "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/hr/znacajka/"
}

Dobro je znati

  • Zadržite poveznicu oko slike kako bi vaši posjetitelji mogli otkriti cijeli istaknuti sadržaj.
  • Uvijek koristite gore prikazanu adresu slike i nemojte pohranjivati kopiju, kako bi vaša stranica bila ažurna.
  • Slika je responzivna: nikada ne postaje šira od svog kontejnera.
  • Trebate pomoć ili prilagođeni format? Kontaktirajte nas.

Dizajnerski citat dana

Dizajnerski citat dana

DesignAdage