പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക

ഇന്നത്തെ ഡിസൈൻ

ഇന്നത്തെ ഡിസൈൻ നിങ്ങളുടെ വെബ്‌സൈറ്റിൽ ഉൾച്ചേർക്കുക

ഇന്നത്തെ ഡിസൈൻ എല്ലാ ദിവസവും ഒരു പുതിയ ഫീച്ചർ പ്രസിദ്ധീകരിക്കുന്നു. ചിത്രത്തിന്റെ വിലാസം ഒരിക്കലും മാറില്ല, പക്ഷേ അതിന് പിന്നിലെ ചിത്രം മാറുന്നു, അതിനാൽ നിങ്ങൾ കോഡ് ഒരു തവണ ചേർത്താൽ മതി — നിങ്ങളുടെ സന്ദർശകർ ഇന്നത്തെ ഫീച്ചർ സ്വയമേവ കാണും.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

എല്ലാ ദിവസവും ഒരു നിശ്ചിത വിലാസത്തിൽ ഒരു പുതിയ ചിത്രം പ്രസിദ്ധീകരിക്കപ്പെടുന്നു. നിങ്ങളുടെ പേജ് ആ വിലാസം ലോഡ് ചെയ്യുന്നു, അതിനാൽ അത് എപ്പോഴും നിലവിലെ ഫീച്ചർ കാണിക്കുന്നു, ഒരു ക്ലിക്കിലൂടെ നിങ്ങളുടെ സന്ദർശകരെ ഇന്നത്തെ ഡിസൈൻ-ലേക്ക് കൊണ്ടുപോകുന്നു, അവിടെ മുഴുവൻ വിവരണവും ലഭ്യമാണ്.

സ്ക്രിപ്റ്റ് ഇഷ്ടപ്പെടുന്നുണ്ടോ? ഒരു കണ്ടെയ്‌നറും ഒരു സ്ക്രിപ്റ്റും ചേർക്കുക: data-dotd-variant (image, cta അല്ലെങ്കിൽ card) ഉപയോഗിച്ച് നിങ്ങൾ തിരഞ്ഞെടുക്കുന്ന ശൈലിയിൽ വിജറ്റ് വരയ്ക്കുന്നു, സ്ക്രിപ്റ്റ് വിലാസത്തിന്റെ ഭാഷ ലഭ്യമാണെങ്കിൽ ആ ഭാഷയിൽ. സ്ക്രിപ്റ്റുകൾ പ്രവർത്തിപ്പിക്കാൻ കഴിയുന്നില്ലെങ്കിൽ, അതേ വേരിയന്റിന്റെ HTML പതിപ്പ് ഉപയോഗിക്കുക.

വേരിയന്റ് A: ചിത്രം മാത്രം

ഇന്നത്തെ ചിത്രം, ഇന്നത്തെ ഡിസൈൻ-ലേക്ക് ലിങ്ക് ചെയ്‌തത്. ഏറ്റവും ലഘുവായ ഓപ്ഷൻ.

തത്സമയ പ്രിവ്യൂ

<a href="https://designoftheday.org/ml/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-of-the-day/today.png" alt="അവാർഡ് നേടിയ സർഗ്ഗാത്മക മികവ് പ്രദർശിപ്പിക്കുന്ന ഇന്നത്തെ ഫീച്ചർ ചെയ്ത ഡിസൈൻ" 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=ml"></script>

വേരിയന്റ് B: ചിത്രവും കോൾ ടു ആക്ഷനും

ഇന്നത്തെ ചിത്രം, താഴെ ഒരു കോൾ ടു ആക്ഷനോടൊപ്പം.

തത്സമയ പ്രിവ്യൂ

<a href="https://designoftheday.org/ml/" 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="അവാർഡ് നേടിയ സർഗ്ഗാത്മക മികവ് പ്രദർശിപ്പിക്കുന്ന ഇന്നത്തെ ഫീച്ചർ ചെയ്ത ഡിസൈൻ" 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">ഇന്നത്തെ ഡിസൈൻ കണ്ടെത്തുക</span>
</a>
<div data-dotd="designoftheday.org" data-dotd-variant="cta"></div>
<script async src="https://designoftheday.org/feature.js?lang=ml"></script>

വേരിയന്റ് C: Bootstrap കാർഡ്

ചിത്രം, ഫീച്ചറിന്റെ ശീർഷകം, ഒരു ഹ്രസ്വ ഖണ്ഡിക, ഒരു കോൾ ടു ആക്ഷൻ ബട്ടൺ എന്നിവയുള്ള ഒരു Bootstrap കാർഡ്. നിങ്ങളുടെ പേജിന് Bootstrap ആവശ്യമാണ്.

തത്സമയ പ്രിവ്യൂ

<div class="card" style="max-width:24rem">
  <a href="https://designoftheday.org/ml/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-of-the-day/today.png" class="card-img-top" alt="അവാർഡ് നേടിയ സർഗ്ഗാത്മക മികവ് പ്രദർശിപ്പിക്കുന്ന ഇന്നത്തെ ഫീച്ചർ ചെയ്ത ഡിസൈൻ" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">ഇന്നത്തെ ഡിസൈൻ</h5>
    <p class="card-text">A' Design Award ഓരോ ദിവസവും ഒരു മികച്ച ഡിസൈൻ സൃഷ്ടിയോ, അത്യന്തം നൂതനമായ ഉൽപ്പന്നമോ, അല്ലെങ്കിൽ അതീവ സർഗ്ഗാത്മകമായ പ്രോജക്ടോ ഇന്നത്തെ ഡിസൈൻ ആയി അവതരിപ്പിക്കുന്നു — സർഗ്ഗാത്മകതയുടെയും മികച്ച ഡിസൈനിന്റെയും ശ്രദ്ധേയമായ ഉദാഹരണങ്ങൾ പ്രദർശിപ്പിച്ചുകൊണ്ട്.</p>
    <a href="https://designoftheday.org/ml/" class="btn btn-danger" target="_blank" rel="noopener">ഇന്നത്തെ ഡിസൈൻ കണ്ടെത്തുക</a>
  </div>
</div>
<div data-dotd="designoftheday.org" data-dotd-variant="card"></div>
<script async src="https://designoftheday.org/feature.js?lang=ml"></script>

ഓപ്ഷൻ 3: JSON

ഡെവലപ്പർമാർക്കും ആപ്പുകൾക്കും ഓട്ടോമേഷനും വേണ്ടി. JSON-ൽ പേര്, വിവരണം, ചിത്ര വിലാസം, ലിങ്കുകൾ, തീയതി എന്നിവ അടങ്ങിയിരിക്കുന്നു. ക്രോസ്-ഒറിജിൻ അഭ്യർത്ഥനകൾ അനുവദിച്ചിരിക്കുന്നു.

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

ഉദാഹരണ പ്രതികരണം

{
    "domain": "designoftheday.org",
    "name": "ഇന്നത്തെ ഡിസൈൻ",
    "feature": "ഇന്നത്തെ ഡിസൈൻ",
    "paragraph": "A' Design Award ഓരോ ദിവസവും ഒരു മികച്ച ഡിസൈൻ സൃഷ്ടിയോ, അത്യന്തം നൂതനമായ ഉൽപ്പന്നമോ, അല്ലെങ്കിൽ അതീവ സർഗ്ഗാത്മകമായ പ്രോജക്ടോ ഇന്നത്തെ ഡിസൈൻ ആയി അവതരിപ്പിക്കുന്നു — സർഗ്ഗാത്മകതയുടെയും മികച്ച ഡിസൈനിന്റെയും ശ്രദ്ധേയമായ ഉദാഹരണങ്ങൾ പ്രദർശിപ്പിച്ചുകൊണ്ട്.",
    "description": "ഇന്നത്തെ ഡിസൈൻ ഓരോ ദിവസവും ഒരു മികച്ച ഡിസൈൻ സൃഷ്ടിയോ, അത്യന്തം നൂതനമായ ഉൽപ്പന്നമോ, അതീവ സർഗ്ഗാത്മകമായ പ്രോജക്ടോ പ്രദർശിപ്പിക്കുന്നു — അതീവ പ്രശസ്തമായ A' Design Award and Competition അംഗീകരിച്ച സർഗ്ഗാത്മകതയുടെയും മികച്ച ഡിസൈനിന്റെയും ശ്രദ്ധേയ ഉദാഹരണങ്ങൾ അവതരിപ്പിച്ചുകൊണ്ട്.",
    "call_to_action": "ഇന്നത്തെ ഡിസൈൻ കണ്ടെത്തുക",
    "date": "2026-11-08",
    "language": "ml",
    "image": "https://competition.adesignaward.com/design-of-the-day/today.png",
    "image_alt": "അവാർഡ് നേടിയ സർഗ്ഗാത്മക മികവ് പ്രദർശിപ്പിക്കുന്ന ഇന്നത്തെ ഫീച്ചർ ചെയ്ത ഡിസൈൻ",
    "url": "https://designoftheday.org/ml/",
    "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/ml/fichar/"
}

അറിഞ്ഞിരിക്കേണ്ടവ

  • ചിത്രത്തിന് ചുറ്റുമുള്ള ലിങ്ക് നിലനിർത്തുക, അതുവഴി നിങ്ങളുടെ സന്ദർശകർക്ക് മുഴുവൻ ഫീച്ചറും കണ്ടെത്താനാകും.
  • മുകളിൽ കാണിച്ചിരിക്കുന്ന ചിത്ര വിലാസം എപ്പോഴും ഉപയോഗിക്കുക, ഒരു പകർപ്പ് സൂക്ഷിക്കരുത്, അങ്ങനെ നിങ്ങളുടെ പേജ് എപ്പോഴും പുതുക്കിയതായിരിക്കും.
  • ചിത്രം റെസ്‌പോൺസീവ് ആണ്: അതിന്റെ കണ്ടെയ്‌നറിനേക്കാൾ വിശാലമാകില്ല.
  • സഹായം വേണോ അല്ലെങ്കിൽ ഒരു ഇഷ്ടാനുസൃത ഫോർമാറ്റ് ആവശ്യമുണ്ടോ? ദയവായി ഞങ്ങളെ ബന്ധപ്പെടുക.

സ്പോൺസേഡ്

അവാർഡ് നേടിയ ഡിസൈനുകൾ കണ്ടെത്തുക

ഇന്നത്തെ ഡിസൈൻ ഉദ്ധരണി

ഇന്നത്തെ ഡിസൈൻ ഉദ്ധരണി

DesignAdage