Skip to main content

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.

header-usp-original

 

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.

Achtung
Dieses Feld erscheint nur wenn der Aufbau des Headers auf „Logo oben, Navigation unten“ steht, da sonst natürlich kein Platz zur Verfügung steht.

 

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:

header-usp-custom-color

 

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>

header-usp-social-icons

 

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! 🙂


Ähnliche Beiträge


Kommentare

Aaron 3. August 2017 um 11:02

Hallo
Könnt ihr mir bitte noch sagen wie man die Grösse anpassen kann? 🙂

Antworten

André 3. August 2017 um 12:10

Das geht mit folgendem Code: <code>#header .list-usp .fa { font-size: 2.2rem; }</code>

Default ist 2.2rem; wobei 1rem = 16px ist und dann quasi prozentual gerechnet wird. Also 2rem wären 32px usw. 🙂

Antworten

Thomas Schrattenecker 24. August 2017 um 20:48

Sorry, aber ich habe nichts gefunden wie man im Header Bereich die Schrift links oben wegbekommt? Oder generell den Header Deaktiviert das nur das Menü vorhanden ist

lg

Antworten

André 25. August 2017 um 10:05

Die Schrift links symbolisiert das Logo. Sobald du ein Logo hochlädst, wird dieser Text entfern.

Damit der Header weg ist, könntest du ihn entweder via CSS ausblenden <code>#header { display: none; }</code>, oder du bearbeitest die <code>header.php</code> über das Child Theme, oder du stellst den Header unter <code>Optionen / Design</code> auf Logo links / Navi rechts und hast das Logo somit direkt in der Navigation.

Antworten

Simon 4. September 2017 um 13:25

Habt ihr noch weitere sinnvolle Anwendungsbeispiele für die Verwendung der USPs? Oder noch ganz andere Ideen wie man den Platz sinnvoll für seine Nischenseite nutzen kann?

Grüße Simon

Antworten

Franz J. Fahr 15. September 2017 um 22:16

Wie kann ich eine Standard Amazon Suchzeile im Header einbinden?
Liebe Grüße, Franz

Antworten

André 19. September 2017 um 11:01

Was meinst du mit Amazon-Suchzeile?

Antworten

Tom B 18. November 2017 um 3:23

Hallo André,
wie schaffe ich es den Header schmäler zu gestalten? Also von oben nach unten gesehen 🙂
LG, Tom

Antworten

André 20. November 2017 um 10:48

Das ginge via <code>#header .brand { margin: 15px 0; }</code> – Support aber bitte über das Forum 🙂

Antworten

Robert Plöhn 29. Mai 2018 um 21:32

Die Fonts werden nicht mehr automatisch geladen. Was ist zu tun?

Antworten

André 30. Mai 2018 um 7:03

Für Support bitte im Forum melden. 🙂

Antworten

Alex Waconser 15. November 2018 um 21:21

Wow, vielen Dank für diese Info. Das hat mir sehr geholfen und war sehr ausführlich. Beste Grüße Alex Waconser

Antworten

Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*
*

Choose your currency:

Close
Converted prices are for reference only - all orders are charged in € Euro (€) EUR.
  • USDUS Dollar ($)
  • EUREuro (€)
  • GBPPfund Sterling (£)
  • AUDAustralische Dollar ($)
  • BRLBrasilianischer Real (R$)
  • CADKanadischer Dollar ($)
  • CZKTschechische Krone
  • DKKDänische Krone
  • HKDHongkong Dollar ($)
  • HUFUngarischer Forint
  • ILSIsraelischer Schekel (₪)
  • JPYJapanischer Yen (¥)
  • MYRMalaysischer Ringgits
  • MXNMexikanischer Peso ($)
  • NZDNeuseeland Dollar ($)
  • NOKNorwegische Krone
  • PHPPhilipinischer Pesos
  • PLNPolnischer Zloty
  • SGDSingapur Dollar ($)
  • SEKSchwedische Krone
  • CHFSchweizer Franken
  • TWDTaiwan New Dollar
  • THBThai Baht (฿)
  • INRIndische Rupie (₹)
  • TRYTürkische Lira (₺)
  • RUBRussischer Rubel