Blöcke

Blöcke » Block für Social Icons

Mit dem Block für Social Icons kannst du Seiten und Beiträgen Social-Media-Icons hinzufügen und Besucher zu deinen Profilen in den sozialen Medien leiten.

Ein Beispiel:

Inhaltsverzeichnis

Block für Social Icons einfügen

Du kannst den Block für Social Icons hinzufügen, indem du ihn über den Button „Block hinzufügen“ auswählst. Alternativ kannst du auch in einer neuen Zeile /social eingeben und die Eingabetaste drücken. Wenn du den Block zum ersten Mal hinzufügst, siehst du auch eine Größeneinstellung, mit der du die Größe deiner Icons festlegen kannst:

Ein leerer Block für Social Icons, bei dem die Option „Größe“ in der Block-Toolbar erweitert ist, um die verschiedenen Icon-Größen anzuzeigen.

Eine detaillierte Anleitung zum Hinzufügen von Blöcken findest du hier.


Dein Social-Media-Profil hinzufügen

Wenn du den Block zum ersten Mal hinzufügst, wird ein Button + angezeigt. Klicke auf den Button +, um dein erstes Icon hinzuzufügen.

Der Block für Social Icons ohne Social Icons und mit einem Plus-Icon, um dein erstes Icon hinzuzufügen.

Eine Liste aller verfügbaren Icons wird angezeigt. Du kannst das gewünschte Icon aus der Liste auswählen oder mithilfe der Suchfunktion beispielsweise mit „Facebook“ nach einem Icon suchen. Auf diese Weise kannst du die Icons für alle deine sozialen Netzwerke hinzufügen.

Das Plus-Icon erweitert, um die verschiedenen Icons anzuzeigen, die hinzugefügt werden können, sowie eine Suchoption.
„Facebook“ in das Suchfeld eingegeben, um das Social-Media-Icon für Facebook zu finden.

Anschließend kannst du das Icon mit deinem Social-Media-Profil verknüpfen. Klicke hierzu einmal auf das Icon. Dann wird ein Feld geöffnet, in das du deine Adresse eingeben kannst. Gib den Link zu deinem Social-Media-Profil ein oder füge ihn ein und klicke dann auf das Pfeil-Icon, um die Eingabe zu bestätigen.

GIF, das das Klicken auf das Social Icon und das Hinzufügen des Links zu deinem Social-Media-Profil zeigt.
So verknüpfst du dein Social Icon

⚠️

Wenn du keinen Link zum Icon hinzufügst, wirst du das Icon weder in der Vorschau noch auf der Live-Website sehen.


Neue Icons hinzufügen

Klicke zum Hinzufügen von Icons auf den +-Button neben den vorhandenen Icons. Daraufhin wird eine Liste aller verfügbaren Icons geöffnet. Du kannst nach dem gewünschten Icon suchen.

Gif: Klicke auf den Button zum Hinzufügen von Icons, um die Liste verfügbarer Social Icons zu öffnen.
Ein neues Icon hinzufügen

Sollte das gewünschte Icon nicht dabei sein, gibt es einen Button für generische Links, der stattdessen genutzt werden kann:

Füge ein neues Icon hinzu und suche nach dem Link, um ein benutzerdefiniertes soziales Netzwerk hinzuzufügen, das nicht in unserer Standardliste enthalten ist.
Das Icon für generische Links

Liste unterstützter Icons

Die folgenden Icons sind verfügbar:

  • 500px
  • Bandcamp
  • Behance
  • CodePen
  • DeviantArt
  • Dribbble
  • Dropbox
  • Etsy
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Goodreads
  • Google
  • Instagram
  • Last.fm
  • LinkedIn
  • E-Mail (mailto: Links)
  • Mastodon
  • Meetup
  • Mittel
  • Patreon
  • Pinterest
  • Pocket
  • Reddit
  • RSS-Feed (URLs mit /feed/)
  • Skype
  • Snapchat
  • Soundcloud
  • Spotify
  • Telegram
  • TikTok
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • VK
  • WordPress
  • Yelp
  • YouTube

Ein Icon entfernen

Wenn du ein Icon entfernen möchtest, klickst du darauf, um seine Toolbar zu öffnen. Klicke auf den Ellipsen-Button (drei Punkte) des Icons und wähle „Block entfernen“:

Gif: Klicke auf die Ellipse (drei Punkte) über einem einzelnen Icon, um die Option „Block entfernen“ für dieses Icon aufzurufen.
Ein Social-Media-Icon entfernen

Block-Einstellungen

Jeder Block weist neben den Optionen in der Toolbar des Blocks auch spezifische Optionen in der Editor-Seitenleiste auf. Wenn die Seitenleiste nicht angezeigt wird, klicke auf das Zahnrad-Icon neben dem Veröffentlichen-Button.

Stile

In den Block-Einstellungen hast du die Wahl zwischen drei verschiedenen Stilen für deine Icons:

  • Standard
  • Nur Logos
  • Pillenform
Die Einstellungen für Social Icons-Block, seitlich im Editor, wo Einstellungen für Stile, Layout und Link angezeigt werden.
Block-Einstellungen
Layout-Ausrichtung

Du kannst die Ausrichtung der Icons linksbündig, zentriert oder rechtsbündig wählen oder den Bereich zwischen den Elementen.

Du kannst die Links auch in einem neuen Tab öffnen, indem du die Option „In einem neuen Tab öffnen“ anklickst. Wenn diese Option aktiviert ist, werden die Links der Social Icons in einem neuen Tab geöffnet.

Farbeinstellungen

Es gibt zwei Optionen in den Farbeinstellungen, die du ändern kannst.

Das Fenster „Farbeinstellungen“ aus den Einstellungen für Social Icons-Block wird angezeigt.
  • Icon color: Changes the color of the icons in the Social Icons block.
  • Icon-Hintergrund color: Changes the background color of all of the icons.

Erweitert

Unter dem Tab „Erweitert“ kannst du eine CSS-Klasse zu deinem Block hinzufügen, sodass du individuelles CSS erstellen und den Block nach deinen Wünschen gestalten kannst. Weitere Informationen.

Im Tab „Erweitert“ kannst du deinem Block eine CSS-Klasse hinzufügen.
Im Tab „Erweitert“ kannst du deinem Block eine CSS-Klasse hinzufügen.

Ein Social-Media-Icon kann auch seine eigene Klasse haben. Füge einem Icon eine Klasse hinzu, indem du es auswählst und das Feld „Zusätzliche CSS-Klasse“ für dieses Icon bearbeitest:

Die Einstellungen für ein einzelnes Social Icon umfassen die Link-Beschriftung (für Screenreader) und die Option „Zusätzliche CSS-Klasse(n)“.
Feld „Zusätzliche CSS-Klasse“ für ein Icon