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