Ein Pagepeel, auch als dynamisches Eselsohr, Magic Corner oder Peel Ad bekannt, ist eine aufmerksamkeitsstarke Werbeform für Webseiten. Dabei wird in einer Ecke Deiner Website – meist oben rechts oder oben links – ein animiertes Seiteneckenelement eingeblendet, das durch dezente Bewegung die Neugier Deiner Besucher weckt.
Fährt ein Nutzer mit der Maus über das Pagepeel, klappt sich das virtuelle Eselsohr auf und gibt eine größere Werbe- oder Informationsfläche frei. Verlässt der Mauszeiger den Bereich wieder, zieht sich das Pagepeel unauffällig in seine Ausgangsposition zurück. So wird Werbung sichtbar, ohne den Besucherfluss so stark zu unterbrechen wie bei Pop-ups oder Interstitials.
Hier ein Pagepeel als Showcase eingebaut:
Pagepeel Demo: Fahre mit der Maus über die Ecke oder tippe darauf.
Hier der passende Code dazu:
<!-- Minimal Pagepeel (Eselsohr) – korrigiert
Lizenz: MIT – frei nutzbar, änderbar, weiterverteilbar
-->
<div id="pagepeel-showcase">
<p><strong>Pagepeel Demo:</strong> Fahre mit der Maus über die Ecke oder tippe darauf.</p>
</div>
<style>
/* Showcase */
#pagepeel-showcase{
position: relative;
min-height: 240px;
padding: 20px;
border: 1px dashed #ccc;
font-family: Arial, Helvetica, sans-serif;
background: #fafafa;
overflow: hidden; /* verhindert horizontales “Rauslaufen” im Demo-Container */
}
/* PAGEPEEL: Wrapper hat jetzt die volle offene Größe */
#pagepeel{
position: absolute; /* für Demo – für Live-Seite: fixed */
top: 0;
right: 0;
width: 220px;
height: 160px;
z-index: 9999;
}
/* Klick-/Hover-Fläche: nur die Ecke (100x100) */
#pagepeel a{
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
display: block;
text-decoration: none;
}
/* Inhalt hinter der Ecke (liegt innerhalb des Wrappers, kein Overflow nach rechts) */
#pagepeel-content{
position: absolute;
top: 0;
right: 0;
width: 220px;
height: 160px;
background: #111;
color: #fff;
padding: 12px;
font-size: 14px;
box-sizing: border-box;
opacity: 0;
transform: scale(0.3);
transform-origin: 100% 0%;
transition: all 0.4s ease;
pointer-events: none; /* Klick soll in geschlossenem Zustand nur über die Ecke gehen */
}
/* Ecke */
#pagepeel-corner{
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: linear-gradient(135deg, #f2f2f2 0%, #d6d6d6 100%);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
transform-origin: 100% 0%;
transition: transform 0.4s ease;
}
#pagepeel.open #pagepeel-corner{
transform: rotateY(160deg);
}
#pagepeel.open #pagepeel-content{
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
</style>
<script>
(function(){
var showcase = document.getElementById("pagepeel-showcase");
var peel = document.createElement("div");
peel.id = "pagepeel";
peel.innerHTML = `
<div id="pagepeel-content">
<strong>Meine erste Homepage</strong><br><br>
Tutorials & Tipps für Deine eigene Website.
</div>
<a href="https://meine-erste-homepage.com/" target="_self" rel="noopener">
<div id="pagepeel-corner"></div>
</a>
`;
showcase.appendChild(peel);
peel.addEventListener("mouseenter", function(){ peel.classList.add("open"); });
peel.addEventListener("mouseleave", function(){ peel.classList.remove("open"); });
peel.addEventListener("click", function(){ peel.classList.toggle("open"); });
})();
</script>
Für den Live-Betrieb auf Deiner Website musst Du nur einen kleinen Teil im CSS-Code ändern:
#pagepeel{ position: fixed; }
Warum ein Pagepeel einsetzen?
Ein Pagepeel bietet Dir mehrere Vorteile gegenüber klassischen Online-Werbeformaten:
- Hohe Aufmerksamkeit durch Bewegung und Interaktion
- Platzsparende Integration ohne vollständige Überlagerung des Inhalts
- Deutlich mehr Informationsfläche als bei klassischen Bannern
- Gute Eignung für Aktionen, Hinweise, Newsletter oder Produkt-Highlights
- Kontrollierbar und weniger aufdringlich als Pop-ups
Gerade bei gut strukturierten Webseiten kann ein Pagepeel gezielt eingesetzt werden, um wichtige Inhalte hervorzuheben, ohne das Nutzererlebnis massiv zu stören.
Umsetzung für HTML-Webseiten und WordPress
Für HTML- und statische Webseiten
Wenn Du Deine Website klassisch mit HTML, CSS und JavaScript umsetzt, kannst Du Pagepeels direkt per Script oder CSS-Animation integrieren. Dabei solltest Du auf folgende Punkte achten:
- Sauberer, performanter Code ohne unnötige Abhängigkeiten
- CSS-Animationen bevorzugen, um Ladezeiten gering zu halten
- Fallback-Lösungen für Touch-Geräte, da Hover-Effekte dort nicht greifen
Für WordPress-Webseiten
Für WordPress stehen spezielle Plugins zur Verfügung, mit denen sich Pagepeels ohne Programmierkenntnisse einbinden lassen. Diese Plugins bieten meist:
- Einfache Konfiguration über das WordPress-Backend
- Auswahl der Ecke (links oder rechts)
- Austausch von Bildern und Ziel-Links
- Aktivierung oder Deaktivierung pro Seite oder Beitrag
Damit eignen sich Pagepeels auch für Webmaster, die ohne direkten Code-Zugriff arbeiten.
Quellen für Pagepeel-Informationen und Scripts
Die folgenden Anbieter und Ressourcen helfen Dir bei der technischen Umsetzung eines Pagepeels. Die Übersicht ist alphabetisch sortiert.
| Link zum Anbieter | Beschreibung des Angebots |
|---|---|
| https://codepen.io/JoostKiens/pen/AaNzOm | CSS-basiertes Pagepeel-Beispiel zur Inspiration und Anpassung |
| https://media-products.de/pagepeel-script-das-original-p-714.html | Kommerzielles Pagepeel-Script, auch bekannt als Magic Corner oder Peel Ad |
| https://wordpress.com/de/plugins/page-peel | WordPress-Plugin zur einfachen Realisierung eines Pagepeels |
Best Practices für den Einsatz von Pagepeels
- Setze Pagepeels sparsam ein, um Ablenkung zu vermeiden
- Nutze klare Botschaften und einen eindeutigen Call-to-Action
- Vermeide zu aggressive Animationen
- Teste die Darstellung auf verschiedenen Bildschirmgrößen
- Berücksichtige Datenschutz und Tracking-Hinweise, falls Klicks gemessen werden
Fazit
Ein Pagepeel ist eine effektive Möglichkeit, gezielt Aufmerksamkeit auf wichtige Inhalte oder Angebote zu lenken. Richtig eingesetzt, bietet es mehr Platz und Interaktion als klassische Werbemittel, ohne den Nutzerfluss stark zu beeinträchtigen. Sowohl für HTML-Webmaster als auch für WordPress-Nutzer stehen passende Lösungen zur Verfügung – von schlanken CSS-Demos bis hin zu komfortablen Plugins.