Statische Website / eigenes Theme
Snippet kopieren und direkt vor dem schließenden </footer> in die HTML-Datei einfügen. Fertig – es braucht keine CSS-Datei und kein Skript.
Signatur
Made with ♥ by MG WEB & SYSTEMS.
Das Herz ist aus meiner Marke gebaut: die drei Ebenen – Infrastruktur, Anwendung, Web – in Herzform. Zum Einbinden in Projekte, die ich gebaut habe.
Vorschau · dunkler Footer
Vorschau · heller Footer
<!-- MG WEB & SYSTEMS · Signatur -->
<a href="https://mgws.cloud" target="_blank" rel="noopener"
style="display:inline-flex;align-items:center;gap:6px;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:currentColor;text-decoration:none">
<span style="opacity:.75">Made with</span>
<svg width="17" height="16" viewBox="0 0 24 22" aria-hidden="true" style="flex:none">
<clipPath id="mgws-heart"><path d="M12 21.4S1.2 14.9 1.2 7.6A6.4 6.4 0 0 1 12 3.4 6.4 6.4 0 0 1 22.8 7.6c0 7.3-10.8 13.8-10.8 13.8Z"/></clipPath>
<g clip-path="url(#mgws-heart)">
<rect width="24" height="5.6" y="0" fill="#0085CA"/>
<rect width="24" height="5.6" y="7.4" fill="currentColor" opacity=".75"/>
<rect width="24" height="5.6" y="14.8" fill="currentColor" opacity=".75"/>
</g>
</svg>
<span style="opacity:.75;color:inherit">by <strong style="font-weight:600;color:inherit">MG WEB & SYSTEMS</strong></span>
<svg width="15" height="16" viewBox="0 0 20 22" aria-hidden="true" style="flex:none">
<rect x="4" y="8" width="12" height="10" rx="2" fill="currentColor" opacity=".2"/>
<rect x="4" y="8" width="12" height="2.6" rx="1.3" fill="#0085CA"/>
<rect x="6" y="2" width="8" height="5.4" rx="1.8" fill="currentColor" opacity=".2"/>
<rect x="7.4" y="4" width="3.4" height="1.8" rx=".9" fill="#0085CA"/>
<path d="M10 2V.6" stroke="currentColor" stroke-width="1" opacity=".45"/>
<circle cx="10" cy=".4" r=".9" fill="#0085CA"/>
<circle cx="6.5" cy="19.4" r="1.4" fill="currentColor" opacity=".3"/>
<circle cx="10" cy="19.4" r="1.4" fill="currentColor" opacity=".3"/>
<circle cx="13.5" cy="19.4" r="1.4" fill="currentColor" opacity=".3"/>
</svg>
</a>Eigenständiges HTML: Inline-SVG, keine externe CSS-Datei, keine Skripte, keine Webfonts. Das Herz übernimmt die Textfarbe des Footers, nur die obere Ebene bleibt im Markenblau. Einfach vor dem schließenden </footer> einfügen.
So baust du es ein
WordPress
Ohne Code: Design → Widgets → Footer-Bereich → Block „Eigenes HTML" einfügen und Snippet einsetzen.
Mit Child-Theme: ins footer.php vorwp_footer().
Baukästen (Wix, Jimdo, Webflow, Shopify)
Element „HTML einbetten" / „Custom Code" in den Footer ziehen und das Snippet einfügen. In Webflow: Embed-Element, in Shopify ins Footer-Section-Template.
Astro, React, Vue & Co.
Als eigene Komponente ablegen (z. B. MadeBy.astro) und im Footer-Layout einbinden. In React die style-Attribute in Objekt-Schreibweise übersetzen – oder das SVG in eine Datei auslagern.
Farben: Text und die unteren zwei Herz-Ebenen übernehmen automatisch die Schriftfarbe des Footers – es passt sich also hellen wie dunklen Seiten an. Nur das Markenblau #0085CA steht fest. Auf sehr hellen Hintergründen darfst du es gern auf #00679F abdunkeln, das gibt etwas mehr Kontrast.
Kontakt
Signatur für den eigenen Footer?
Dann zuerst das eigentliche Projekt. Beschreibe kurz dein Vorhaben.