Перайсці да асноўнага змесціва

Дызайнер дня

Убудуйце Дызайнер дня на свой вэб-сайт

Дызайнер дня публікуе новы матэрыял кожны дзень. Адрас выявы не мяняецца, але малюнак за ім абнаўляецца, таму вы дадаяце код адзін раз — і вашы наведвальнікі аўтаматычна бачаць сённяшні матэрыял.

Як гэта працуе

Кожны дзень новы малюнак публікуецца па адным нязменным адрасе. Ваша старонка загружае гэты адрас, таму заўсёды паказвае бягучы матэрыял, а клік вядзе наведвальнікаў на Дызайнер дня, дзе расказана ўся гісторыя.

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

Варыянт A: толькі выява

Сённяшні малюнак са спасылкай на Дызайнер дня. Самы лёгкі варыянт.

Жывы прагляд

<a href="https://designeroftheday.com/be/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/designer-of-the-day/today.png" alt="Партрэт Дызайнера дня — сённяшняга ўшанаванага творчага візіянера" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designeroftheday.com" data-dotd-variant="image"></div>
<script async src="https://designeroftheday.com/feature.js?lang=be"></script>

Варыянт B: выява і заклік да дзеяння

Сённяшні малюнак з заклікам да дзеяння ніжэй.

Жывы прагляд

<a href="https://designeroftheday.com/be/" target="_blank" rel="noopener" style="display:block;max-width:100%;color:inherit;text-decoration:none;text-align:center">
  <img src="https://competition.adesignaward.com/designer-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="designeroftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designeroftheday.com/feature.js?lang=be"></script>

Варыянт C: картка Bootstrap

Картка Bootstrap з малюнкам, назвай матэрыялу, кароткім абзацам і кнопкай закліку да дзеяння. Вашай старонцы патрэбны Bootstrap.

Жывы прагляд

<div class="card" style="max-width:24rem">
  <a href="https://designeroftheday.com/be/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/designer-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://designeroftheday.com/be/" class="btn btn-danger" target="_blank" rel="noopener">Адкрыйце Дызайнера дня</a>
  </div>
</div>
<div data-dotd="designeroftheday.com" data-dotd-variant="card"></div>
<script async src="https://designeroftheday.com/feature.js?lang=be"></script>

Варыянт 3: JSON

Для распрацоўшчыкаў, праграм і аўтаматызацыі. JSON змяшчае назву, апісанне, адрас выявы, спасылкі і дату. Крос-даменныя запыты дазволены.

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

Прыклад адказу

{
    "domain": "designeroftheday.com",
    "name": "Дызайнер дня",
    "feature": "Дызайнер дня",
    "paragraph": "A' Design Award штодня знаёміць з вельмі таленавітым дызайнерам або архітэктарам сусветнага ўзроўню ў якасці Дызайнера дня, прадстаўляючы людзей за выбітнай творчай працай, іх дызайнерскую філасофію, значныя праекты і дасягненні.",
    "description": "Дызайнер дня штодня знаёміць з вельмі таленавітым дызайнерам або архітэктарам сусветнага ўзроўню, прадстаўляючы выдатных людзей за выбітнай творчай працай, іх прафесійны шлях, дызайнерскую філасофію, значныя праекты і дасягненні, адзначаныя высокапрэстыжнай прэміяй A' Design Award and Competition.",
    "call_to_action": "Адкрыйце Дызайнера дня",
    "date": "2026-11-08",
    "language": "be",
    "image": "https://competition.adesignaward.com/designer-of-the-day/today.png",
    "image_alt": "Партрэт Дызайнера дня — сённяшняга ўшанаванага творчага візіянера",
    "url": "https://designeroftheday.com/be/",
    "feature_url": "https://competition.adesignaward.com/designer-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/designers-of-the-days.php",
    "embed_url": "https://designeroftheday.com/be/publikatsyya/"
}

Карысна ведаць

  • Захоўвайце спасылку вакол выявы, каб вашы наведвальнікі маглі адкрыць поўны матэрыял.
  • Заўсёды выкарыстоўвайце адрас выявы, паказаны вышэй, і не захоўвайце копію, каб ваша старонка заставалася актуальнай.
  • Выява адаптыўная: яна ніколі не становіцца шырэй за свой кантэйнер.
  • Патрэбна дапамога або нестандартны фармат? Калі ласка, звяжыцеся з намі.

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

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

DesignAdage