Zum Hauptinhalt springen

Die Designlegende

Einbetten: Designlegende des Tages auf Ihrer Website

Die Designlegende 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 Die Designlegende, 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 Die Designlegende. Die leichteste Option.

Live-Vorschau

<a href="https://thedesignlegend.com/de/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-legend-of-the-day/today.png" alt="Rückblick auf das Lebenswerk der Designlegende des Tages im Bereich Design" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="thedesignlegend.com" data-dotd-variant="image"></div>
<script async src="https://thedesignlegend.com/feature.js?lang=de"></script>

Variante B: Bild und Handlungsaufforderung

Das heutige Bild mit einer Handlungsaufforderung darunter.

Live-Vorschau

<a href="https://thedesignlegend.com/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-legend-of-the-day/today.png" alt="Rückblick auf das Lebenswerk der Designlegende des Tages im Bereich Design" 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">Designlegende des Tages entdecken</span>
</a>
<div data-dotd="thedesignlegend.com" data-dotd-variant="cta"></div>
<script async src="https://thedesignlegend.com/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://thedesignlegend.com/de/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-legend-of-the-day/today.png" class="card-img-top" alt="Rückblick auf das Lebenswerk der Designlegende des Tages im Bereich Design" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">Designlegende des Tages</h5>
    <p class="card-text">A' Design Award würdigt einen einflussreichen Designer oder einen Architekten von Weltrang als Designlegende des Tages, dessen außergewöhnliche Karriere, ikonische Kreationen und wegweisende Ideen die Geschichte und Entwicklung des Designs geprägt haben.</p>
    <a href="https://thedesignlegend.com/de/" class="btn btn-danger" target="_blank" rel="noopener">Designlegende des Tages entdecken</a>
  </div>
</div>
<div data-dotd="thedesignlegend.com" data-dotd-variant="card"></div>
<script async src="https://thedesignlegend.com/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://thedesignlegend.com/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": "thedesignlegend.com",
    "name": "Die Designlegende",
    "feature": "Designlegende des Tages",
    "paragraph": "A' Design Award würdigt einen einflussreichen Designer oder einen Architekten von Weltrang als Designlegende des Tages, dessen außergewöhnliche Karriere, ikonische Kreationen und wegweisende Ideen die Geschichte und Entwicklung des Designs geprägt haben.",
    "description": "Die Designlegende würdigt einflussreiche Designer und Architekten von Weltrang, deren außergewöhnliche Karrieren, ikonische Kreationen, wegweisende Ideen und nachhaltige Beiträge die Geschichte und Entwicklung des Designs geprägt haben, und stellt die kreativen Menschen und Leistungen vor, die vom äußerst renommierten A' Design Award and Competition gewürdigt wurden.",
    "call_to_action": "Designlegende des Tages entdecken",
    "date": "2026-11-08",
    "language": "de",
    "image": "https://competition.adesignaward.com/design-legend-of-the-day/today.png",
    "image_alt": "Rückblick auf das Lebenswerk der Designlegende des Tages im Bereich Design",
    "url": "https://thedesignlegend.com/de/",
    "feature_url": "https://competition.adesignaward.com/design-legend-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/design-legends-of-the-days.php",
    "embed_url": "https://thedesignlegend.com/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.

Design-Zitat des Tages

Design-Zitat des Tages

DesignAdage