Christian Storb @ STORB Consulting - AdCanvas
Eine leichte, modulare Werbe‑ und Content‑Engine für moderne Websites.
Warum AdCanvas?
AdCanvas ist ein framework‑agnostisches Rendering‑System für Anzeigen und Content‑Module. Es ist schnell, modular, leichtgewichtig und funktioniert in jeder Umgebung – von statischen Seiten bis zu komplexen Web‑Apps.
- ⚡ Keine Abhängigkeiten – funktioniert überall
- 🎨 Mehrere Layouts: List, Multiplex, In‑Feed, Sidebar, Hero, Carousel
- 🧩 Themes: Light, Dark, Premium
- 📦 Einfache Integration über CDN
- 🛠️ Entwickelt für Publisher, Blogs und Content‑Plattformen
Installation
CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/chstorb/adcanvas@latest/dist/adcanvas.min.css">
<script type="module" src="https://cdn.jsdelivr.net/gh/chstorb/adcanvas@latest/dist/adcanvas.min.js" defer></script>
Quickstart
Ein Beispiel mit dem Carousel Layout:
<div class="adcanvas-ad-slot" data-layout="carousel" data-count="10" data-autoplay="true" data-interval="3000"></div>
Die Demo‑Seite
Eine vollständige, interaktive Demo findest du hier:
👉 https://codepen.io/editor/chstorb/pen/019d15fb-6659-7aa0-a61b-00233f8df247
Die Demo zeigt das grundlegende Rendering, ein Custom‑Template und das Laden eines echten Travel‑Feeds.
Themes
Custom Theme (CSS Variables)
Passe Layout und Farben nahtlos an, indem du die CSS‑Variablen --adcanvas- überschreibst.
<style>
.my-custom-theme {
--adcanvas-bg: #e1f5fe;
--adcanvas-text: #01579b;
--adcanvas-border: #4fc3f7;
--adcanvas-radius-md: 16px;
--adcanvas-radius-sm: 8px;
--adcanvas-spacing-md: 20px;
}
</style>
<div class="adcanvas-ad-slot my-custom-theme" data-layout="infeed" data-count="2"></div>
Dark Theme
Premium Theme
Layouts
List Layout
Multiplex Layout
In‑Feed Layout
Sidebar Layout
Hero Layout
Weitere Informationen findest du im GitHub‑Repository.