Monstroid. Wie man Icons «Folgen Sie uns in sozialen Netzwerken» zum Header hinzufügt

Das jeweilige Tutorial zeigt, wie man Icons Folgen Sie uns in sozialen Netzwerken (Follow Us) zum Header in der Monstroid Vorlage hinzufügt.

Indem Sie die Monstroid Vorlage nutzen, können Sie die Icons der sozialen Netzwerken zum Hauptmenü unbegrenzt hinzufügen. Standardmäßig ist der Bereich Seitenleiste vom Header (Header Sidebar) nicht aktiv, deswegen sehen Sie nichts unter dem Hauptmenü. Wir zeigen, wie man diesen Bereich nutzen kann:

Um die Icons «Folgen Sie uns in sozialen Netzwerken» zum Header hinzuzufügen, machen Sie das Folgende:

1. Loggen Sie sich ins Control Panel (Dashboard) ein. Finden Sie den Tab Cherry -> Designer der statischen Bereiche (Cherry -> Static Area Builder). Fügen Sie Seitenleiste vom Header (Header Sidebar) zur Position Top vom Header (Header Top) hinzu:

   

2. Scrollen Sie nach unten und drücken Sie auf den Button Statische Blöcke speichern (Save statics):

   

3. Finden Sie den Tab Aussehen -> Widgets (Appearance -> Widgets). Fügen Sie widget Cherry – Folgen Sie uns in sozialen Netzwerken (Cherry Follow US) zum Bereich Seitenleiste vom Header (Header Sidebar) hinzu:

   

4. Wählen Sie soziale Netzwerke (networks), die Sie im Header anzeigen möchten. Drücken Sie auf den Button Speichern (Save):

   

5. Aktualisieren Sie die Startseite Ihrer Website. Sie sehen, dass die ausgewählten Icons direkt unter dem Logo hinzugefügt wurden:

   

6. Sie können einfach die Gestaltung von hinzugefügten Icons ändern. Sie sollen nur einige CSS Regeln kopieren.

7. Finden Sie den Tab Cherry -> Einstellungen -> Allgemeines -> Benutzerdefiniertes CSS (Cherry -> Options -> General -> User CSS). Nutzen Sie die folgenden CSS Regeln, um die Gestaltung von den Icons Folgen Sie uns in sozialen Netzwerken (Follow US) zu ändern:

   • Reduzieren der Symbolgröße FontAwesome:

     					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item a i:before {
     					font-size: 20px;
     					}
     				

   • Änderung der Größe der Hintergrundfarbe (man ändert die Einrückung):

     					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item a {
     					padding: 10px 0px;
     					}
     				

   • Reduzieren der Breite der Hintergrundfarbe und Verschieben nach rechts:

     					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item {
     					width: 200px;
     					float: right;
     					}
     				

   • Um die Schriftgröße des Icons Soziale Netzwerke zu ändern:

     					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item a:after {
     					font-size: 14px;
     					}
     				

     

8. Scrollen Sie nach unten und drücken Sie auf den Button Einstellungen speichern (Save Options):

   

9. Bitte laden Sie die Seite erneut. Die Icons sind kleiner und befinden sich an der richtigen Stelle:

   

Sie können auch das ausführliche Video-Tutorial nutzen: