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