Перейти до основного вмісту

Дизайн-бренд дня

Вбудуйте Дизайн-бренд дня на свій вебсайт

Дизайн-бренд дня публікує нову добірку щодня. Адреса зображення не змінюється, але картинка за нею оновлюється, тож ви додаєте код один раз — і ваші відвідувачі автоматично бачать сьогоднішню добірку.

Як це працює

Щодня за однією незмінною адресою публікується нове зображення. Ваша сторінка завантажує цю адресу, тож завжди показує поточну добірку, а натискання переносить відвідувачів на Дизайн-бренд дня, де розміщено повну історію.

Віддаєте перевагу скрипту? Додайте один контейнер і один скрипт: віджет відобразить стиль, обраний за допомогою data-dotd-variant (image, cta або card), мовою адреси скрипта, якщо ця мова доступна. Якщо скрипти недоступні, скористайтеся HTML-версією того самого варіанта.

Варіант A: лише зображення

Сьогоднішнє зображення з посиланням на Дизайн-бренд дня. Найлегший варіант.

Попередній перегляд

<a href="https://designbrandoftheday.com/uk/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-brand-of-the-day/today.png" alt="Дизайн-бренд дня — бренд, орієнтований на дизайн, що вирізняється досконалістю у дизайні" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designbrandoftheday.com" data-dotd-variant="image"></div>
<script async src="https://designbrandoftheday.com/feature.js?lang=uk"></script>

Варіант B: зображення та заклик до дії

Сьогоднішнє зображення із закликом до дії під ним.

Попередній перегляд

<a href="https://designbrandoftheday.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-brand-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="designbrandoftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designbrandoftheday.com/feature.js?lang=uk"></script>

Варіант C: картка Bootstrap

Картка Bootstrap із зображенням, назвою добірки, коротким абзацом та кнопкою заклику до дії. На вашій сторінці має бути підключений Bootstrap.

Попередній перегляд

<div class="card" style="max-width:24rem">
  <a href="https://designbrandoftheday.com/uk/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-brand-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://designbrandoftheday.com/uk/" class="btn btn-danger" target="_blank" rel="noopener">Відкрийте Дизайн-бренд дня</a>
  </div>
</div>
<div data-dotd="designbrandoftheday.com" data-dotd-variant="card"></div>
<script async src="https://designbrandoftheday.com/feature.js?lang=uk"></script>

Варіант 3: JSON

Для розробників, застосунків та автоматизації. JSON містить назву, опис, адресу зображення, посилання та дату. Міждоменні запити дозволені.

fetch("https://designbrandoftheday.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": "designbrandoftheday.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-brand-of-the-day/today.png",
    "image_alt": "Дизайн-бренд дня — бренд, орієнтований на дизайн, що вирізняється досконалістю у дизайні",
    "url": "https://designbrandoftheday.com/uk/",
    "feature_url": "https://competition.adesignaward.com/design-brand-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/design-brands-of-the-days.php",
    "embed_url": "https://designbrandoftheday.com/uk/vbudovuvannia/"
}

Корисно знати

  • Зберігайте посилання навколо зображення, щоб відвідувачі могли переглянути повну добірку.
  • Завжди використовуйте адресу зображення, вказану вище, і не зберігайте копію — так ваша сторінка завжди буде актуальною.
  • Зображення адаптивне: воно ніколи не стає ширшим за свій контейнер.
  • Потрібна допомога або індивідуальний формат? Будь ласка, зв'яжіться з нами.

Дизайнерська цитата дня

Дизайнерська цитата дня

DesignAdage