رفتن به محتوای اصلی

روند طراحی روز

جاسازی روند طراحی روز در وب‌سایت شما

روند طراحی روز هر روز یک ویژگی جدید منتشر می‌کند. آدرس تصویر هیچ‌گاه تغییر نمی‌کند، اما تصویر پشت آن عوض می‌شود؛ بنابراین کافی است کد را یک‌بار اضافه کنید و بازدیدکنندگان شما به‌صورت خودکار ویژگی امروز را خواهند دید.

نحوه کار

هر روز یک تصویر جدید در یک آدرس ثابت منتشر می‌شود. صفحه شما آن آدرس را بارگذاری می‌کند و همیشه ویژگی روز را نشان می‌دهد و با کلیک، بازدیدکنندگان شما به روند طراحی روز هدایت می‌شوند تا داستان کامل را بخوانند.

اسکریپت را ترجیح می‌دهید؟ یک کانتینر و یک اسکریپت اضافه کنید: ویجت سبکی را که با data-dotd-variant انتخاب می‌کنید ترسیم می‌کند (image، cta یا card)، به زبان آدرس اسکریپت در صورتی که آن زبان موجود باشد. اگر امکان اجرای اسکریپت ندارید، از نسخه HTML همان نوع استفاده کنید.

نوع A: فقط تصویر

تصویر امروز، لینک‌شده به روند طراحی روز. سبک‌ترین گزینه.

پیش‌نمایش زنده

<a href="https://designtrendoftheday.com/fa/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-trend-of-the-day/today.png" alt="روند طراحی روز با تصویرسازی الگوهای نوظهوری که آینده طراحی را شکل می‌دهند" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designtrendoftheday.com" data-dotd-variant="image"></div>
<script async src="https://designtrendoftheday.com/feature.js?lang=fa"></script>

نوع B: تصویر و فراخوان عمل

تصویر امروز با یک فراخوان عمل در زیر آن.

پیش‌نمایش زنده

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

نوع C: کارت Bootstrap

یک کارت Bootstrap با تصویر، عنوان ویژگی، یک پاراگراف کوتاه و یک دکمه فراخوان عمل. صفحه شما به Bootstrap نیاز دارد.

پیش‌نمایش زنده

<div class="card" style="max-width:24rem">
  <a href="https://designtrendoftheday.com/fa/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-trend-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' هر روز یک روند اصیل طراحی را بررسی می‌کند و سبک‌های نوظهور، زیبایی‌شناسی در حال تغییر و مسیرهای خلاقانه جدیدی را که بر نحوه طراحی محصولات، پروژه‌ها و تجربه‌ها تأثیر می‌گذارند، به عنوان روند طراحی روز معرفی می‌کند.</p>
    <a href="https://designtrendoftheday.com/fa/" class="btn btn-danger" target="_blank" rel="noopener">کشف روند طراحی روز</a>
  </div>
</div>
<div data-dotd="designtrendoftheday.com" data-dotd-variant="card"></div>
<script async src="https://designtrendoftheday.com/feature.js?lang=fa"></script>

گزینه ۳: JSON

برای توسعه‌دهندگان، اپلیکیشن‌ها و اتوماسیون. JSON شامل نام، توضیحات، آدرس تصویر، لینک‌ها و تاریخ است. درخواست‌های بین‌دامنه‌ای مجاز هستند.

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

نمونه پاسخ

{
    "domain": "designtrendoftheday.com",
    "name": "روند طراحی روز",
    "feature": "روند طراحی روز",
    "paragraph": "جایزه طراحی A' هر روز یک روند اصیل طراحی را بررسی می‌کند و سبک‌های نوظهور، زیبایی‌شناسی در حال تغییر و مسیرهای خلاقانه جدیدی را که بر نحوه طراحی محصولات، پروژه‌ها و تجربه‌ها تأثیر می‌گذارند، به عنوان روند طراحی روز معرفی می‌کند.",
    "description": "روند طراحی روز هر روز یک روند اصیل طراحی را بررسی می‌کند و سبک‌های نوظهور، زیبایی‌شناسی در حال تغییر، مسیرهای خلاقانه جدید و رویکردهای نوآورانه‌ای را معرفی می‌کند که بر نحوه طراحی محصولات، پروژه‌ها و تجربه‌ها تأثیر می‌گذارند؛ همان‌گونه که توسط جایزه و رقابت بسیار معتبر طراحی A' به رسمیت شناخته شده است.",
    "call_to_action": "کشف روند طراحی روز",
    "date": "2026-11-08",
    "language": "fa",
    "image": "https://competition.adesignaward.com/design-trend-of-the-day/today.png",
    "image_alt": "روند طراحی روز با تصویرسازی الگوهای نوظهوری که آینده طراحی را شکل می‌دهند",
    "url": "https://designtrendoftheday.com/fa/",
    "feature_url": "https://competition.adesignaward.com/design-trend-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/design-trends-of-the-days.php",
    "embed_url": "https://designtrendoftheday.com/fa/vizhegi/"
}

نکات مفید

  • لینک دور تصویر را حفظ کنید تا بازدیدکنندگان بتوانند ویژگی کامل را کشف کنند.
  • همیشه از آدرس تصویر نشان‌داده‌شده در بالا استفاده کنید و کپی ذخیره نکنید تا صفحه شما همیشه به‌روز بماند.
  • تصویر واکنش‌گرا است: هرگز از عرض کانتینر خود بزرگ‌تر نمی‌شود.
  • به کمک یا قالب سفارشی نیاز دارید؟ لطفاً با ما تماس بگیرید.

حمایت‌شده

طراحی‌های برنده جایزه را کشف کنید

نقل‌قول طراحی روز

نقل‌قول طراحی روز

DesignAdage