Дизайн-команда дня
Вбудуйте Дизайн-команда дня на свій вебсайт
Дизайн-команда дня публікує нову добірку щодня. Адреса зображення не змінюється, але картинка за нею оновлюється, тож ви додаєте код один раз — і ваші відвідувачі автоматично бачать сьогоднішню добірку.
Як це працює
Щодня за однією незмінною адресою публікується нове зображення. Ваша сторінка завантажує цю адресу, тож завжди показує поточну добірку, а натискання переносить відвідувачів на Дизайн-команда дня, де розміщено повну історію.
Віддаєте перевагу скрипту? Додайте один контейнер і один скрипт: віджет відобразить стиль, обраний за допомогою data-dotd-variant (image, cta або card), мовою адреси скрипта, якщо ця мова доступна. Якщо скрипти недоступні, скористайтеся HTML-версією того самого варіанта.
Варіант A: лише зображення
Сьогоднішнє зображення з посиланням на Дизайн-команда дня. Найлегший варіант.
Попередній перегляд
<a href="https://designteamoftheday.org/uk/" target="_blank" rel="noopener">
<img src="https://competition.adesignaward.com/design-team-of-the-day/today.png" alt="Нагороджена Дизайн-команда дня, що спільно працює над інноваційними проєктами" loading="lazy" style="max-width:100%;height:auto">
</a><div data-dotd="designteamoftheday.org" data-dotd-variant="image"></div>
<script async src="https://designteamoftheday.org/feature.js?lang=uk"></script>Варіант B: зображення та заклик до дії
Сьогоднішнє зображення із закликом до дії під ним.
Попередній перегляд
<a href="https://designteamoftheday.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-team-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="designteamoftheday.org" data-dotd-variant="cta"></div>
<script async src="https://designteamoftheday.org/feature.js?lang=uk"></script>Варіант C: картка Bootstrap
Картка Bootstrap із зображенням, назвою добірки, коротким абзацом та кнопкою заклику до дії. На вашій сторінці має бути підключений Bootstrap.
Попередній перегляд
<div class="card" style="max-width:24rem">
<a href="https://designteamoftheday.org/uk/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-team-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://designteamoftheday.org/uk/" class="btn btn-danger" target="_blank" rel="noopener">Відкрийте Дизайн-команду дня</a>
</div>
</div><div data-dotd="designteamoftheday.org" data-dotd-variant="card"></div>
<script async src="https://designteamoftheday.org/feature.js?lang=uk"></script>Варіант 3: JSON
Для розробників, застосунків та автоматизації. JSON містить назву, опис, адресу зображення, посилання та дату. Міждоменні запити дозволені.
fetch("https://designteamoftheday.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": "designteamoftheday.org",
"name": "Дизайн-команда дня",
"feature": "Дизайн-команда дня",
"paragraph": "A' Design Award відзначає творчі команди, що стоять за винятковими проєктами в галузі дизайну, архітектури та інновацій, як Дизайн-команду дня, представляючи провідні студії, чия співпраця, спільне бачення та експертиза вирізняються.",
"description": "Дизайн-команда дня щодня висвітлює провідну творчу команду, що формує сучасний дизайн, представляючи креативних людей, колективи, процеси, спільні ідеї та професійну експертизу, що стоять за видатними проєктами, відзначеними високопрестижним конкурсом A' Design Award and Competition.",
"call_to_action": "Відкрийте Дизайн-команду дня",
"date": "2026-11-15",
"language": "uk",
"image": "https://competition.adesignaward.com/design-team-of-the-day/today.png",
"image_alt": "Нагороджена Дизайн-команда дня, що спільно працює над інноваційними проєктами",
"url": "https://designteamoftheday.org/uk/",
"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.org/uk/vbudovuvannia/"
}Корисно знати
- Зберігайте посилання навколо зображення, щоб відвідувачі могли переглянути повну добірку.
- Завжди використовуйте адресу зображення, вказану вище, і не зберігайте копію — так ваша сторінка завжди буде актуальною.
- Зображення адаптивне: воно ніколи не стає ширшим за свій контейнер.
- Потрібна допомога або індивідуальний формат? Будь ласка, зв'яжіться з нами.