Перейти к основному содержимому

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

Встройте Дизайн-идея дня на свой сайт

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

Как это работает

Каждый день новое изображение публикуется по одному и тому же адресу. Ваша страница загружает этот адрес, поэтому на ней всегда отображается текущий материал, а по клику посетители переходят на Дизайн-идея дня, где представлена полная история.

Предпочитаете скрипт? Добавьте один контейнер и один скрипт: виджет отрисует стиль, указанный в data-dotd-variant (image, cta или card), на языке адреса скрипта, если этот язык доступен. Если вы не можете использовать скрипты, воспользуйтесь HTML-версией того же варианта.

Вариант A: только изображение

Сегодняшнее изображение со ссылкой на Дизайн-идея дня. Самый лёгкий вариант.

Предпросмотр в реальном времени

<a href="https://designideaoftheday.com/ru/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-idea-of-the-day/today.png" alt="Дизайн-идея дня — инновационная концепция, раздвигающая границы творчества" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designideaoftheday.com" data-dotd-variant="image"></div>
<script async src="https://designideaoftheday.com/feature.js?lang=ru"></script>

Вариант B: изображение и призыв к действию

Сегодняшнее изображение с призывом к действию под ним.

Предпросмотр в реальном времени

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

Вариант C: карточка Bootstrap

Карточка Bootstrap с изображением, заголовком материала, коротким описанием и кнопкой призыва к действию. На вашей странице должен быть подключён Bootstrap.

Предпросмотр в реальном времени

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

Вариант 3: JSON

Для разработчиков, приложений и автоматизации. JSON содержит название, описание, адрес изображения, ссылки и дату. Кросс-доменные запросы разрешены.

fetch("https://designideaoftheday.com/feature.json?lang=ru")
  .then(function (r) { return r.json(); })
  .then(function (d) {
    // d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
  });

Пример ответа

{
    "domain": "designideaoftheday.com",
    "name": "Дизайн-идея дня",
    "feature": "Дизайн-идея дня",
    "paragraph": "Премия A' Design Award ежедневно представляет высокоинновационную дизайн-идею или исключительно креативную концепцию в качестве Дизайн-идеи дня, исследуя оригинальное мышление, практические решения и вдохновляющие подходы к совершенству в дизайне.",
    "description": "Дизайн-идея дня ежедневно представляет высокоинновационную дизайнерскую идею или исключительно креативную концепцию, исследуя оригинальное мышление, практические решения и вдохновляющие подходы к мировому совершенству в дизайне, отобранные престижной премией A' Design Award and Competition.",
    "call_to_action": "Откройте Дизайн-идею дня",
    "date": "2026-11-08",
    "language": "ru",
    "image": "https://competition.adesignaward.com/design-idea-of-the-day/today.png",
    "image_alt": "Дизайн-идея дня — инновационная концепция, раздвигающая границы творчества",
    "url": "https://designideaoftheday.com/ru/",
    "feature_url": "https://competition.adesignaward.com/design-idea-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/design-ideas-of-the-days.php",
    "embed_url": "https://designideaoftheday.com/ru/vstraivaniye/"
}

Полезно знать

  • Сохраняйте ссылку вокруг изображения, чтобы ваши посетители могли перейти к полному материалу.
  • Всегда используйте адрес изображения, указанный выше, и не сохраняйте копию, чтобы ваша страница оставалась актуальной.
  • Изображение адаптивное: оно никогда не становится шире своего контейнера.
  • Нужна помощь или особый формат? Пожалуйста, свяжитесь с нами.

Цитата о дизайне дня

Цитата о дизайне дня

DesignAdage