Design des Tages

Einbetten: Design des Tages auf Ihrer Website

Design des Tages veröffentlicht jeden Tag einen neuen Beitrag. Die Bildadresse bleibt immer gleich, doch das Bild dahinter wechselt – Sie fügen den Code einmal ein, und Ihre Besucher sehen automatisch den aktuellen Beitrag.

So funktioniert es

Jeden Tag wird ein neues Bild unter einer festen Adresse veröffentlicht. Ihre Seite lädt diese Adresse, zeigt also immer den aktuellen Beitrag, und ein Klick führt Ihre Besucher zu Design des Tages, wo die vollständige Geschichte erzählt wird.

Lieber ein Skript? Fügen Sie einen Container und ein Skript hinzu: Das Widget zeichnet die Variante, die Sie mit data-dotd-variant wählen (image, cta oder card), in der Sprache der Skriptadresse, sofern diese Sprache verfügbar ist. Falls Sie keine Skripte ausführen können, verwenden Sie die HTML-Version derselben Variante.

Variante A: nur Bild

Das heutige Bild, verlinkt mit Design des Tages. Die leichteste Option.

Live-Vorschau

<a href="https://designoftheday.org/de/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-of-the-day/today.png" alt="Vorgestelltes Design des Tages als Beispiel für preisgekrönte kreative Exzellenz" 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=de"></script>

Variante B: Bild und Handlungsaufforderung

Das heutige Bild mit einer Handlungsaufforderung darunter.

Live-Vorschau

<a href="https://designoftheday.org/de/" 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="Vorgestelltes Design des Tages als Beispiel für preisgekrönte kreative Exzellenz" 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">Design des Tages entdecken</span>
</a>

<div data-dotd="designoftheday.org" data-dotd-variant="cta"></div>
<script async src="https://designoftheday.org/feature.js?lang=de"></script>

Variante C: Bootstrap-Karte

Eine Bootstrap-Karte mit dem Bild, dem Titel des Beitrags, einem kurzen Absatz und einem Aktionsbutton. Ihre Seite benötigt Bootstrap.

Live-Vorschau

<div class="card" style="max-width:24rem">
  <a href="https://designoftheday.org/de/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-of-the-day/today.png" class="card-img-top" alt="Vorgestelltes Design des Tages als Beispiel für preisgekrönte kreative Exzellenz" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">Design des Tages</h5>
    <p class="card-text">A' Design Award präsentiert jeden Tag eine herausragende Designkreation, ein höchst innovatives Produkt oder ein besonders kreatives Projekt als Design des Tages und zeigt damit bemerkenswerte Beispiele für Kreativität und gutes Design.</p>
    <a href="https://designoftheday.org/de/" class="btn btn-danger" target="_blank" rel="noopener">Design des Tages entdecken</a>
  </div>
</div>

<div data-dotd="designoftheday.org" data-dotd-variant="card"></div>
<script async src="https://designoftheday.org/feature.js?lang=de"></script>

Option 3: JSON

Für Entwickler, Apps und Automatisierung. Das JSON enthält den Namen, die Beschreibung, die Bildadresse, die Links und das Datum. Cross-Origin-Anfragen sind erlaubt.

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

Beispielantwort

{
    "domain": "designoftheday.org",
    "name": "Design des Tages",
    "feature": "Design des Tages",
    "paragraph": "A' Design Award präsentiert jeden Tag eine herausragende Designkreation, ein höchst innovatives Produkt oder ein besonders kreatives Projekt als Design des Tages und zeigt damit bemerkenswerte Beispiele für Kreativität und gutes Design.",
    "description": "Design des Tages präsentiert jeden Tag eine herausragende Designkreation, ein höchst innovatives Produkt oder ein besonders kreatives Projekt und zeigt bemerkenswerte Beispiele für Kreativität und gutes Design, die vom äußerst renommierten A' Design Award and Competition gewürdigt wurden.",
    "call_to_action": "Design des Tages entdecken",
    "date": "2026-11-08",
    "language": "de",
    "image": "https://competition.adesignaward.com/design-of-the-day/today.png",
    "image_alt": "Vorgestelltes Design des Tages als Beispiel für preisgekrönte kreative Exzellenz",
    "url": "https://designoftheday.org/de/",
    "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/de/einbetten/"
}

Gut zu wissen

Behalten Sie den Link um das Bild bei, damit Ihre Besucher den vollständigen Beitrag entdecken können.
Verwenden Sie immer die oben gezeigte Bildadresse und speichern Sie keine Kopie, damit Ihre Seite aktuell bleibt.
Das Bild ist responsiv: Es wird nie breiter als sein Container.
Brauchen Sie Hilfe oder ein individuelles Format? Bitte kontaktieren Sie uns.

Gesponsert

Preisgekrönte Designs entdecken