Дизайн дня
Вбудуйте Дизайн дня на свій вебсайт
Дизайн дня публікує нову добірку щодня. Адреса зображення не змінюється, але картинка за нею оновлюється, тож ви додаєте код один раз — і ваші відвідувачі автоматично бачать сьогоднішню добірку.
Як це працює
Щодня за однією незмінною адресою публікується нове зображення. Ваша сторінка завантажує цю адресу, тож завжди показує поточну добірку, а натискання переносить відвідувачів на Дизайн дня, де розміщено повну історію.
Віддаєте перевагу скрипту? Додайте один контейнер і один скрипт: віджет відобразить стиль, обраний за допомогою data-dotd-variant (image, cta або card), мовою адреси скрипта, якщо ця мова доступна. Якщо скрипти недоступні, скористайтеся HTML-версією того самого варіанта.
Варіант A: лише зображення
Сьогоднішнє зображення з посиланням на Дизайн дня. Найлегший варіант.
Попередній перегляд
<a href="https://designoftheday.org/uk/" 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=uk"></script>Варіант B: зображення та заклик до дії
Сьогоднішнє зображення із закликом до дії під ним.
Попередній перегляд
<a href="https://designoftheday.org/uk/" 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=uk"></script>Варіант C: картка Bootstrap
Картка Bootstrap із зображенням, назвою добірки, коротким абзацом та кнопкою заклику до дії. На вашій сторінці має бути підключений Bootstrap.
Попередній перегляд
<div class="card" style="max-width:24rem">
<a href="https://designoftheday.org/uk/" 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/uk/" 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=uk"></script>Варіант 3: JSON
Для розробників, застосунків та автоматизації. JSON містить назву, опис, адресу зображення, посилання та дату. Міждоменні запити дозволені.
fetch("https://designoftheday.org/feature.json?lang=uk")
.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": "uk",
"image": "https://competition.adesignaward.com/design-of-the-day/today.png",
"image_alt": "Обраний Дизайн дня, що демонструє нагороджену творчу досконалість",
"url": "https://designoftheday.org/uk/",
"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/uk/vbudovuvannia/"
}Корисно знати
- Зберігайте посилання навколо зображення, щоб відвідувачі могли переглянути повну добірку.
- Завжди використовуйте адресу зображення, вказану вище, і не зберігайте копію — так ваша сторінка завжди буде актуальною.
- Зображення адаптивне: воно ніколи не стає ширшим за свій контейнер.
- Потрібна допомога або індивідуальний формат? Будь ласка, зв'яжіться з нами.