Block: Social Icons

Mit dem Social-Icons-Block kannst du ganz unkompliziert Links zu deinen Profilen in den sozialen Netzwerken setzen oder andere Websites verlinken.

Die Block-Werkzeugleiste

Screenshot des Social-Icons-Block, nachdem er zum Inhalt hinzugefügt wurde.

Der Social-Icons-Block ist ein verschachtelter Block, d. h. neben dem Eltern-Element ist jedes Icon für sich ein Kind-Element innerhalb des Social-Icons-Blocks. Im obigen Screenshot ist die Block-Werkzeugleiste für das Eltern-Element zu sehen.

Als erstes kannst du einstellen, wie die Kind-Elemente ausgerichtet werden sollen: linksbündig, zentriert, rechtsbündig oder mit Abstand dazwischen. Als zweite Einstellung kannst du den Block selbst linksbündig, zentriert und rechtsbündig ausrichten.

Über Größe kannst du die Größe der Icons einstellen. Dabei kannst du zwischen Klein, Normal, Groß und Riesig wählen.

Screenshot eines ausgewähten, vorgeschlagenen Icons. Unterhalb der Icons erscheint das Feld für die Eingabe der URL.

Wenn du ein einzelnes Icon auswählst, ändert sich die Block-Werkzeugleiste ein wenig. Statt den gesamten Block nach oben oder unten zu verschieben, erscheinen Pfeile für nach links und rechts, um die Reihenfolge der einzelnen Icons zu ändern. Unterhalb der Icons erscheint dann das Feld zur Eingabe deiner URL für das jeweilige Netzwerk oder die Website.

Die Einstellungen im weiterführenden Menü hinter den drei Punkten am Ende erklären wir dir auf der Übersichtsseite der Blöcke unter Die Block-Werkzeugleiste.

Die Einstellungen in der Seitenleiste

Screenshot des Eltern-Elements des Social-Icons-Block.
Screenshot des Eltern-Elements des Social-Icons-Block.

Beim Eltern-Element des Social-Icons-Block kannst du zwischen drei verschiedenen Stilen wählen: Standard (kreisrunde Form), nur Logos (farbige Logos ohne Hintergrundfarbe) und Pillenform (mit Hintergrundfarbe). Außerdem kannst du einen Standard-Stil setzen, wenn du diesen Block häufiger verwenden möchtest und nicht die kreisrunde Form nutzen möchtest.

Unter Layout kannst du wie an der Werkzeugleiste die Ausrichtung der Elemente anpassen. Zusätzlich kannst du zwischen der horizontalen und der vertikalen Ausrichtung wechseln. Standardmäßig ist “Erlaube Umbrechen auf mehrere Zeilen” aktiviert, um eine ordentliche mobile Darstellung zu gewährleisten.

Bei den Link-Einstellungen kannst du global für alle Links einstellen, dass diese in einem neuen Tab geöffnet werden sollen.

Bei Farbe kannst du die Icon-Farbe sowie die Hintergrundfarbe wählen, wenn der entsprechende Stil gewählt ist. Dabei werden die Standard-Farben der Netzwerke mit deiner gewählten Farbe überschrieben. Wie bei allen Farbwählern kannst du zwischen einer eigenen Farbe oder den vorgegebenen Farbpaletten wählen.

Unter Größe kannst du den oberen und unteren Außenabstand sowie den Block-Abstand, also den Abstand zwischen den einzelnen Kind-Elementen, definieren.

Unter Erweitert kannst du einen HTML-Anker und zusätzliche CSS-Klassen definieren.

Screenshot eines Kind-Elements des Social-Icons-Block, hier Twitter.

Bei den Einstellungen für ein einzelnes Icon kannst du nur ein Link-Label setzen. Dieses erscheint nicht als Text, ist aber für die Barrierefreiheit hilfreich und ermöglicht es z. B. Screenreadern, zu diesem Link eine Beschreibung auszugeben.

Am einzelnen Icon-Block kannst du keinen Anker, sondern lediglich zusätzliche CSS-Klassen setzen.

Umwandeln in andere Blöcke

Du kannst einen Social-Icons-Block nicht in einen anderen Block umwandeln. Die Umwandlung in die Blöcke Spalten und Gruppe bewirkt, dass der Social-Icons-Block in den entsprechenden Block verschoben wird.