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