In diesem Artikel zeige ich Ihnen, wie Sie ohne einem zusätzlichen WordPress Plugin einen Werbebanner (oder eine x-beliebige Grafik, ..) auf Ihrer WordPress-Website anzeigen lassen können. Sie können sich ohne Weiteres auch entscheiden, ob der Banner / die Grafik auf einer Seite, oder auf allen Seiten, angezeigt werden soll. Sie können auch entscheiden, ob der Banner / die Grafik verlinkt werden soll, oder ob die Grafik beim Anklicken einfach nur verschwinden soll. Auf dieser Seite sehen Sie rein aus Demonstrationszwecken am unteren Rand des Bildschirmes meinen Testbanner:
Wenn Sie auf diesen Banner klicken, dann verschwindet der Banner einfach um nicht weiter zu stören. Wenn Sie den Banner wieder angezeigt bekommen wollen, dann müssen Sie einfach nur die Seite neu laden. Solange Sie nicht darauf klicken, wird der Banner einfach am unteren Bildschirmrand fixiert angezeigt bleiben. Dass das so ist, habe ich einerseits mit HTML gelöst und andererseits CSS-Code benutzt, um dem Browser die entsprechenden Befehle zu geben.
Nun werde ich Schritt für Schritt erklären, wie man den Werbebanner / die Grafik hochladen kann, wie man HTML im Editor nutzen kann, damit die Grafik angezeigt wird und wie man CSS nutzen kann, damit die Grafik genau so dargestellt wird, wie man es möchte. Eines ist aber unbedingt Voraussetzung: Sie müssen dafür ein gewisses Maß an Vorkenntnissen mitbringen um damit richtig umgehen zu können, soviel sei gleich vorweg gesagt.
Mit WordPress ohne Plugin einen Werbebanner erstellen und einfügen
Als erstes ist es wichtig, dass Sie Ihren Werbebanner / Grafik in der Mediathek hochladen und somit online verfügbar machen. Sobald die Grafik hochgeladen ist, kopieren Sie die URL der Grafik in Ihren lokalen Zwischenspeicher. Nun öffnen Sie die gewünschte Seite, auf welcher der Werbebanner angezeigt werden soll und erstellen einen HTML-Code mit einer entsprechend einzigartigen Klasse.
HTML-Code um Werbebanner einzufügen
Dies ist ein Beispiel, wie Sie mit HTML einen Werbebanner oder eine x-beliebige Grafik anzeigen lassen können:
<div id=“fixierte-grafik“ onclick=“this.style.display=’none'“>
<img src=“hier fügen Sie die URL Ihres Bildes ein“ />
</div>
Der Befehl onclick=“this.style.display=’none‘ sorgt dafür, dass die Grafik beim Draufklicken verschwindet. Die id=“fixierte-grafik“ ist wichtig, um mit CSS eine eindeutige Verbindung zum Inhalt herzustellen, auf welchen sich CSS beziehen kann. Wichtig dabei ist, dass die ID einzigartig auf Ihrer Website ist, damit nicht andere Elemente auf Ihrer Website ebenfalls verändert werden.
Nun können Sie natürlich auch auf anderen Inhaltsseiten und Beiträgen die gleiche ID verwenden um somit mehrere auch unterschiedliche Grafiken genau so anzeigen zu lassen. Wenn Sie aber diese eine Grafik generell auf allen Seiten angezeigt haben wollen, dann empfiehlt es sich, Ihren HTML-Code-Snippet im Customizer (HTML-Widget zB im Footer-Widget-Bereich) zu platzieren.
Hier im Customizer bietet sich unter dem Menüpunkt (linke Seitenleiste in der Regel ganz unten) „Zusätzliches CSS“ gleich die Möglichkeit an, den benötigten CSS-Code einzugeben.
CSS-Code um Werbebanner wie gewünscht anzeigen zu lassen
Mit diesem CSS-Beispiel können Sie die gewünschte Grafik am unteren Bildschirmrand fixieren, ohne dabei einen Rand zum Bildschirmrand zu haben und dafür sorgen, dass die Grafik über allen anderen Elementen liegt (z-index).
#fixierte-grafik {
position: fixed; /* Fixiert die Grafik am Bildschirm */
bottom: 0px; /* Abstand vom unteren Rand */
right: 0px; /* Abstand vom rechten Rand */
width: 100%; /* Breite der Grafik anpassen */
z-index: 9999; /* Grafik immer im Vordergrund */
cursor: pointer; /* Mauszeiger zeigt Hand-Symbol */
transition: opacity 0.3s ease; /* Animation für sanftes Verschwinden */
}
Die Möglichkeiten der Individualisierung sind extrem vielseitig. Ich kann leider daher nicht alle Möglichkeiten anführen, aber wenn Sie eine spezielle Anforderung in diesem Bereich haben, so können Sie mir Ihre Anfrage senden. Gerne helfe ich Ihnen zu leistbaren Konditionen weiter.
