Beispiele für Social-Media-Symbole

Dies ist eine der gängigsten Varianten des Widgets. Die Symbole sind Kreise und in einer einzigen horizontalen Linie angeordnet – dank des Inline-Layouts des Widgets. Zwar können Sie jede Hintergrundfarbe wählen, hier bleiben jedoch die Originalfarben des Mediums erhalten und deren Symbole sind weiß. Ideal für den Inhaltsbereich jeder Website.

Wählen Sie das Floating-Layout, dann folgt das Widget beim Scrollen der Seite und bleibt so jederzeit griffbereit. Dieser Layout-Typ kann an jede Seite des Bildschirms ausgerichtet werden und wird horizontal angeordnet, wenn Sie zentriert ausrichten. Die Symbole hier sind quadratisch und im Standardstil gehalten.

Diese Icons wirken dank der Schwarz-Weiß-Lösung absolut einzigartig. Hintergrundfarbe und Mediensymbol wurden in den Einstellungen angepasst. Die Icons sind inline und zentriert ausgerichtet. Beim Hover-Effekt gibt es außerdem eine Fly-Animation.

Um das Widget stilistisch in das Gesamtkonzept des Designs einzubinden, kannst du das Aussehen vollständig anpassen. Die Icons hier haben weißen Hintergrund, und die Mediensymbole behalten die nativen Farben, um Authentizität zu bewahren. Abgerundete Formen und eine individuelle Breite lassen es sauber und minimalistischer wirken.

Dank des Symbol-Stils, der auf dieses Widget angewendet wurde, erscheinen die Symbole ohne Hintergrund. Die Symbole der Medien behalten die nativen Farben und wirken dabei maximal minimalistisch und sauber. Beim Hover erscheint eine Zoom-Animation, und es gibt auch weitere Animationsvarianten, aus denen Sie wählen können.

Sie können beliebig viele Symbole auf der Seite anzeigen, und dieses Beispiel beweist, dass sie unabhängig von der Anzahl großartig aussehen. Es gibt 8 Symbole, die in einer Linie zentriert angeordnet sind. Alle haben native Hintergrund- und Symbolfarben und zeigen eine Bounce-Animation beim Überfahren mit der Maus.

Dieses Beispiel zeigt, wie Sie Benutzer direkt von der Website aus zu Ihren Messenger-Kanälen führen können. Die Icons in diesem Beispiel haben eine moderate Größe von 32 px und sind kreisförmig. Die ursprünglichen Farben der Messenger bleiben im Hintergrund erhalten, und die Symbole selbst sind weiß. Diese Optionen sowie weitere Anpassungsoptionen können im Editor leicht geändert werden.