So kannst du die „USPs“ im Header anpassen oder wiederherstellen

Nach der Installation des Theme findest du im Headerbereich auf der rechten Seite, neben dem Logo, unsere 3 vorgefertigten „USPs“. Da wir in letzter Zeit häufiger die Frage bekommen wie man diese ändert, oder auch wieder „zurücksetzt“ (wenn sie aus versehen gelöscht wurden) gibt es heute mal ein kleines Tutorial zum Umgang mit diesem Punkt. Wir schauen uns genau an wie die Struktur aufgebaut ist und auch wie man verschiedene Icons verwenden kann.

Der Standard-Code zum Wiederherstellen

Im Normalfall sieht der Code wie folgt aus:

<ul class="list-inline list-usp pull-right hidden-xs hidden-sm">
    <li><i class="fa fa-truck"></i> <strong>Kostenlose Lieferung</strong> <br> bereits ab 29 Euro</li>
    <li><i class="fa fa-user"></i> <strong>Echte Reviews</strong> <br> von Usern</li>
    <li><i class="fa fa-shopping-cart"></i> <strong>In Kooperation</strong> <br> mit den besten Shops</li>
</ul>
<div class="clearfix"></div>

Solltest du deine USPs zerschossen haben, kannst du den o.g. Code kopieren und ihn unter Optionen » Design » Header in das Textfeld einfügen.

Analyse des Quellcodes

Nun schauen wir uns den Code einmal genauer an.

<ul class="list-inline list-usp pull-right hidden-xs hidden-sm">

Hier wird ein HTML „unordered list“ Element aufgerufen. Über die Klassen list-inline wird definiert, dass dieses nicht wie üblich untereinander mit Bullet-Points aufgelistet wird sondern in einer Reihe. Die 2. Klasse pull-right sorgt dafür, dass die „Liste“ sich rechts anordnen und die beiden letzten Elemente dienen dazu, dass die Tabelle am Handy (XS) und Tablet (SM) nicht angezeigt wird. Sie steht also nur an kleinen (MD) und großen (LG) Desktopgeräten zur Verfügung. Wer die Liste dennoch am Tablet oder so sehen möchte kann sich in der Bootstrap Dokumentation weitere Informationen zu den Klassen holen.

    <li><i class="fa fa-truck"></i> <strong>Kostenlose Lieferung</strong> <br> bereits ab 29 Euro</li>
    <li><i class="fa fa-user"></i> <strong>Echte Reviews</strong> <br> von Usern</li>
    <li><i class="fa fa-shopping-cart"></i> <strong>In Kooperation</strong> <br> mit den besten Shops</li>

Nun haben wir 3 sogenannte „list-items“, also die einzelnen Einträge innerhalb der Liste. Sie werden mit <li> geöffnet und mit </li> geschlossen. Alles dazwischen wird als Inhalt dargestellt. Als erstes sehen wir ein HTML-i Tag. Die Icon-Font Font Awesome, über die wir alle Icons im Theme laden, gibt diese HTML Struktur vor. Die erste Klasse fa wird via CSS angesprochen, sodass der Browser weiß, dass es sich um ein Font Awesome Icon handelt und die zweite Klasse, z.B. fa-truck, gibt an welches Icon hier ausgegeben wird. Ihr könnt also mit dem Ersetzen eines einzigen Wertes das Icon tauschen. Zur Verfügung stehen hier über 630 Icons für nahezu alle Anwendungsbereiche. Eine komplette Übersicht der Icons findest du hier: fontawesome.io/icons/. Der Name, den du hinter das fa-xxx setzen musst steht auf der Seite direkt hinter dem Icon, alternativ siehst du den kompletten HTML Tag, sobald du auf ein spezielles Icon klickst, z.B.: fontawesome.io/icon/snapchat-ghost/.

Nachfolgend gibt es zuerst ein strong-Tag mit dem oberen Wert, dieser wird per CSS einfach etwas größer / dicker dargestellt und ist gefolgt von einem br-Tag, welches einen Zeilen-Umbruch hervorruft, bevor der kleinere Text darunter ausgegeben wird.

</ul>
<div class="clearfix"></div>

Abschließend wird das ul-Tag wieder geschlossen und da wir oben mit pull-right gearbeitet haben, wodurch dieses Element rechts um andere Inhalte herumfließt (mehr Infos hier: w3schools.com/css/css_float.asp) gibt es noch das div-Tag mit der Klasse clearfix um dieses „Herumfließen“ zu verhindern.

Farbliche Anpassung

Wenn du die Farbe der USPs anpassen möchtest kannst du das über den Customizer machen. Gehe hierzu in deinem Backend auf Design » Anpassen » Header » Schriftfarbe

Eine einzelne Anpassung per Custom CSS (Optionen » Allgemein) ist natürlich auch möglich. Folgende Möglichkeiten hast du hierzu:

Um den kompletten Text anzupassen nutze das folgende CSS Snippet (dieses gilt bei den kommenden Schritten weiterhin für den unteren Text in den USPs, also z.B. „bereits ab 29 Euro„)

#header .list-usp { color: #6f7479; }

Wenn dir alles in einer Farbe nicht reicht kannst du auch noch die „Überschrift“, also den Text im strong-Tag anpassen …

#header .list-usp strong { color: #101820; }

… und natürlich auch das Icon:

#header .list-usp .fa { color: #c01313; }

Das Ergebnis sieht dann zum Beispiel so aus:

Weitere Anwendungsbeispiele

Ein anderes Anwendungsbeispiel wäre z.B. das ganze als Social Media Links zu deinen Profilen zu verwenden. Dabei haben wir nun einfach nur die Icons und Texte ausgetauscht, sowie den Text innerhalb des strong-Elements verlinkt.

<ul class="list-inline list-usp pull-right hidden-xs hidden-sm">
    <li><i class="fa fa-facebook"></i> <strong><a href="http://facebook.com/">Like uns!</a></strong>
auf Facebook</li>
    <li><i class="fa fa-twitter"></i> <strong><a href="http://twitter.com/">Follow uns!</a></strong>
Auf Twitter</li>
    <li><i class="fa fa-snapchat-ghost"></i> <a href="http://twitter.com/"><strong>Let's Snap!</a></strong>
Auf Snapchat</li>
</ul>
<div class="clearfix"></div>

Fazit

Wie du siehst ist es also gar nicht schwer die USPs so anzupassen wie man es möchte. Sollte es dennoch Fragen oder Probleme geben gerne im Forum oder in den Kommentaren melden und wir erweitern die Beitrag dann entsprechend. Auch freuen wir uns über weitere Ideen und Anwendungsbeispiele. Wenn du also mal was gemacht hast, fern ab der „Norm“ immer her damit! 🙂