Sidebar-Icons

Sidebar-Icons sind verlinkte, feststehende Icons auf der rechten oder linken Bildschirmseite einer Webseite. Fährt man mit der Maus über ein Icon, wird der Icon-Text animiert angezeigt.

Widget einfügen

Gehen Sie auf die Seite, auf der die Sidebar-Icons angezeigt werden sollen.

Fügen Sie nun das Widget "Sidebar-Icons" über einen Plus-Button oder über die rechte Sidebar ein.

Bearbeiten Sie die Optionen des Widgets und klicken anschließend auf "OK".

Hinweis: Mit Hilfe von Verknüpfungen können Sie die Sidebar-Icons auch auf weiteren Seiten anzeigen lassen.


Widget bearbeiten

Nach dem Einfügen des Widgets, wird an der eingefügten Position im Inhaltsbereich eine grüne Hinweisbox angezeigt.

Durch Doppelklick oder Klick auf das Stift-Symbol, können Sie das Widget zum Bearbeiten öffnen.

Hinweis: Natürlich können Sie das Widget auch über den Wireframe-Ansicht oder die Spaltenansicht bearbeiten.


Optionen bearbeiten

Icons 1-5

Für ein neues Icon steht Ihnen das Icon-Set von Font Awesome 4 zur Verfügung. Klicken Sie hier einfach das gewünscht Icon an. Auf der Detailseite des Icons kopieren Sie nun den fa-Name und fügen diesen in das entsprechende Feld im Widget ein.

Beispiel: Möchten Sie beispielsweise das Facebook-Icon verwenden, dann suchen Sie im Icon-Set von Font Awesome 4 nach "facebook". Klicken Sie nun auf das Icon "facebook-official". Kopieren Sie nun den fa-Namen fa-facebook-official und fügen diesen in eines der Icon-Felder des Widgets ein.

In den Icon-Optionen können Sie des Weiteren einen Link und den Icon-Text festlegen.

Ausrichtung

Sie können die Sidebar-Icons auf der rechten oder linken Seite des Website-Fensters platzieren. Außerdem können Sie den Abstand von oben oder unten festlegen.

Hinweis: Bitte geben Sie entweder den Abstand von oben oder von unten an und lassen das entsprechend andere Feld leer, da es ansonsten zu ungewollten Darstellungen kommen kann.

Icon-Optionen

Wählen Sie hier die Breite und Höhe des Icons, den Eckradius, die Rahmenstärke, den Abstand der Icons zueinander und die Schriftgröße.

Text-Optionen

Möchten Sie keinen Text bei Mouseover anzeigen, können Sie diese Option hier deaktivieren. Außerdem können Sie hier die Breite und Schriftgröße des Textfeldes definieren.

Farben inaktiv und hover

Hier legen Sie die Farben für Icon und Text, für den Hintergrund, den Rahmen und den Schatten fest.

Mobil

Für die Ausgabe auf mobilen Geräten können Sie genau festlegen, ab welcher Bildschirmbreite (Breakpoint) die Icons verkleinert dargestellt oder ausgeblendet werden sollen.