Werbung (Standard vom WSC) richtig einbinden

Ich möchte für mein Projekt zum ersten Mal "Werbung" einbinden. Hierbei stellen sich mehrere Problemchen die sicherlich gut lösbar sind.

Das erste Problem ist, das ein Standard-Banner in der Größe von "468x60" auf dem Desktop noch so aussieht wie es soll. Also Mittig.

Per Smartphone jedoch, wird das Banner abgeschnitten.

Zur Einbindung verwende ich diesen Code:

<p class="text-right"><span style="font-size: 8pt"><span style="color: #000000">Partnerwerbung</span></span></p>
<p><a href="https://www.woltnet.com" title="WoltNet"><img src="https://woltnet.com/images/banner/banner-1.png" alt="WoltNet"></a></p>

Wie bekomme ich das Banner entsprechend vollständig angezeigt?

Das nächste Problem wäre, das ich den Werbungshinweis "Partnerwerbung" gerne mit einem "Ausrufezeichen" am Ende anzeigen möchte und beim Hover, über das Icon ein Link zum FAQ erscheinen soll. Ähnlich wie es z.B. Google macht.

h3.png

An dieser Stelle auch mal der Hinweis an die Kollegen die ebenso Werbung einbinden: Ihr müsst die Werbung auch als Werbung deklarieren.

Soviel zu diesen beiden Problemen.

Allgemein würde ich lieber eine individueller, also auf das Ziel ausgerichtete Werbung anzeigen, wie du Tom es mit dem Square - Banner (200x200 / 250x250) von WBB-Elite bereits nutzt. Diese Abmaße sind aber für Werbungen zwischen Themen bzw. Beiträgen nichts. Ließe sich nach der gleichen Art auch eine Werbung individuell auf z.B. 468x60 (Breiter und flacher) erstellen?

Hi Tom, du hast mir wieder einmal sehr geholfen. Die beiden Oben genannten Probleme sind nun keine mehr. Nun gehe ich mehr auf eine individuelle Werbung zu, die z.Zt. wie folgt aussieht:

Desktop-Ansicht (jeweils nach dem ersten Beitrag eines Themas):

SmartPhone-Ansicht:

Beim Hover über das Icon erfolgt der Link zum FAQ, wie von mir auch beabsichtigt. Der HTML-Code für die Werbung sieht wie folgt aus:

<div class="wnPartner">
<div class="wnPartnerFaq"><p class="text-right">Partnerwerbung<a href="https://woltnet.com/faq/#entry-13" class="jsTooltip" title="Wie werde ich Partner?"><span class="icon icon16 fa-question-circle"></span></a></p></div>

<p><span style="font-size: 18pt"><span style="color: #FFFFFF"><strong>CLS-DESIGN</strong></span></span><br>
<p><span style="font-size: 12pt"><span style="color: #FFFFFF"><strong>Premiumprodukte für WoltLab Suite™</strong></p></span></span><p><span style="color: #FFFFFF">Wir sind der größte Anbieter von Premiumprodukten für WoltLab Suite™.<br>Zu unserem Angebot gehört eine Vielzahl an hochwertigen Stilen und Erweiterungen.</span></p>
<br>
<div class="externalContentLink"><a href="https://www.cls-design.com" target="_blank">CLS-DESIGN besuchen</a></div>
</div>

Der CSS-Code sieht dazu wie folgt aus:

.wnPartner {
    padding: 0;
    margin-top: 10px;
    position: relative;
    padding: 20px 20px 20px 88px !important;
    border-radius: 4px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 2px solid #80BC68;
    background-color: #80BC68;
}
.wnPartner::before {
    font-size: 32px;
    width: 58px;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-family: 'FontAwesome' !important;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    background-color: #80BC68;
    content: url("https://woltnet.com/images/woltnet/woltnet1-41.png");
}
.wnPartner img {
    max-width: 100%;
}
.wnPartner .externalContentLink > a {
        background-color: #fff;
        border-radius: 3px;
        padding: 7px 12px;
        color: #000;
    }
.wnPartner .externalContentLink > a:hover {
        box-shadow: 0 0 10px rgba(0,0,0,0.15);
        color: #000;
    }    
.wnPartner .contentWarpper .icon {
        color: #fff;
    }

Ich weiß natürlich das die Farbgebung immer sehr vom Geschmack des Betrachters abhängt, dennoch möchte ich mit dieser Werbung eine Vorlage erstellen. Die Vorlage kann man dann individuell an den jeweiligen Hersteller anpassen. Sowohl vom Text als auch von den Farben. Gibt es zu meinem o.g. Beispiel deiner Meinung nach etwas zu verbessern, oder hast du konkrete Vorschläge wie so eine (z.B. deine) Werbung optisch angepasst werden könnte?

Grundsätzlich sei einmal gesagt, das ich nicht vorhabe WoltNet mit Werbung zu zuklatschen, sondern Werbung nur an zwei Stellen und im dynamischen Wechsel zu platzieren. Das bedeutet, das sich ggf. 10/20 Hersteller die jeweiligen Stellen abwechselnd teilen. In den vielen Jahren, in denen ich nun schon die WoltLab-Software einsetze habe ich mich immer gegen Werbung entschieden. Da allerdings immer wieder und gefühlt mehr Fragen zu "Hersteller X und Y" gestellt werden, möchte ich allgemein mehr auf Hersteller hinweisen. Auch wenn ich an der Werbung nichts verdiene (es ist ja ein Hobby), möchte ich die Werbungen schon optisch ansehnlich gestalten.