> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/social-media-icons-im-webseiten-editor-gestalten.md).

# Social-Media-Icons im Webseiten-Editor gestalten

Füge Social-Media-Icons in eine Website oder einen Funnel ein, hinterlege passende Zieladressen und gestalte Reihenfolge, Darstellung, Ausrichtung und Größe verständlich für Besucher.

Social-Media-Icons sind kleine Verknüpfungen zu deinen öffentlichen Profilen. Sie helfen Besuchern, dein Unternehmen auf den Kanälen zu finden, die du tatsächlich pflegst. Das Element gehört häufig in die Fußzeile, kann aber auch im Kontaktbereich oder auf einer Teamseite sinnvoll sein.

Die Icons sind nicht automatisch mit deinen Profilen verbunden. Jede Zieladresse muss von dir bewusst eingetragen und danach getestet werden.

## Was Besucher sehen und tun können

Du entscheidest, welche Plattformen gezeigt werden und wie sie aussehen. Besucher können dann ein Icon auswählen und direkt zu dem hinterlegten Ziel wechseln.

Das Element unterstützt laut Quelle unter anderem Facebook, Instagram, X, LinkedIn, YouTube, TikTok, WhatsApp, E-Mail, Website und Pinterest. Es enthält außerdem Einträge für Google Plus. Zeige nur Kanäle, die für deine Besucher sinnvoll und aktuell sind.

Die Originalansichten zeigen das Element in der Kategorie **Social** sowie den Einstellungsbereich mit der Liste der vorhandenen Icons, einer Schaltfläche zum Hinzufügen und den Bearbeitungs- und Löschsymbolen.

## Vor dem Einrichten planen

Kläre zuerst drei Fragen:

1. **Welche Kanäle pflegst du wirklich?** Drei aktuelle Profile sind hilfreicher als zehn tote Links.
2. **Welches Ziel erwartet ein Besucher?** Ein Instagram-Icon sollte zum passenden Profil führen, nicht zu einer allgemeinen Startseite.
3. **Wo passt das Element hin?** In der Fußzeile ist es dauerhaft erreichbar. Im Kontaktbereich kann es Teil der nächsten Aktion sein.

Eine Zieladresse ist nur dann gut, wenn sie vollständig ist und direkt zur richtigen Seite führt. Öffne jedes Ziel zunächst selbst im Browser und kopiere anschließend die vollständige Adresse in das Icon.

## Icons einfügen

1. Öffne die gewünschte Website- oder Funnel-Seite im Editor.
2. Wähle **Element hinzufügen**.
3. Öffne die Kategorie **Social**.
4. Suche das Element **Social-Media-Icons**.
5. Ziehe es an die gewünschte Stelle auf der Seite.
6. Wähle das neue Element aus, damit rechts seine Einstellungen erscheinen.
7. Speichere die Seite erst einmal als Zwischenstand.

Die Originalansicht zeigt den Weg über **Element hinzufügen** und die Kategorie **Social**. Das Element wird per Ziehen in den gewählten Seitenbereich platziert.

## Für jedes Icon das richtige Ziel hinterlegen

Jedes Icon hat eine eigene Zieladresse.

1. Wähle das betreffende Icon in der Liste aus.
2. Öffne die Bearbeitung über das Stift-Symbol.
3. Trage die vollständige Adresse zum konkreten Profil oder Ziel ein.
4. Speichere die Änderung.
5. Wiederhole das für jedes weitere Icon.
6. Öffne die veröffentlichte Seite und teste jeden Link einzeln.

Ein Icon kann auch zu einer E-Mail-Adresse oder zu einer anderen Website führen, wenn du den passenden Eintrag wählst. Verwende ein Symbol nie als bloße Dekoration: Ohne richtiges Ziel erzeugt es eine falsche Erwartung.

## Reihenfolge, Auswahl und Darstellung steuern

| Einstellung           | Wirkung                                                                                                              | Gute Entscheidung im Alltag                                                                           |
| --------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| **Reihenfolge**       | Legt fest, in welcher Folge die Icons erscheinen. Die Quelle zeigt dafür ein Symbol mit drei Linien zum Verschieben. | Stelle die Kanäle zuerst, die für neue Besucher am wichtigsten sind.                                  |
| **Bearbeiten**        | Öffnet die Zieladresse eines einzelnen Icons über das Stift-Symbol.                                                  | Prüfe nach jeder Änderung das echte Ziel im Browser.                                                  |
| **Löschen**           | Entfernt ein Icon über das Papierkorb-Symbol.                                                                        | Entferne ungenutzte oder nicht gepflegte Kanäle statt sie sichtbar zu lassen.                         |
| **Social hinzufügen** | Ergänzt ein weiteres Icon oder stellt einen entfernten Eintrag wieder her.                                           | Füge nur einen Kanal hinzu, wenn du dort ein passendes, erreichbares Profil hast.                     |
| **Darstellung**       | Zeigt **nur Icon**, **nur Text** oder **Icon und Text**.                                                             | Nur Icons wirken kompakt; Text hilft, wenn Besucher die Symbole nicht sicher erkennen.                |
| **Ausrichtung**       | Richtet die Reihe links, mittig oder rechts aus.                                                                     | Orientiere dich an der Ausrichtung des restlichen Abschnitts.                                         |
| **Größe**             | Stellt Breite und Höhe der Icons in Pixeln ein.                                                                      | Wähle eine Größe, die auf Smartphone und Desktop gut antippbar bleibt, ohne den Inhalt zu dominieren. |

Die Quelle zeigt die Einstellungen im Bereich **Social Icons**. Dort werden die vorhandenen Einträge als Liste angezeigt. Das macht es leichter, jeden Kanal einzeln zu prüfen statt nur die gesamte Reihe anzusehen.

## Passende Darstellung auswählen

* **Nur Icon:** Gut für eine ruhige Fußzeile, wenn die meisten Besucher die Symbole kennen.
* **Nur Text:** Nützlich, wenn die Namen wichtiger als das Design sind oder eine Erklärung gebraucht wird.
* **Icon und Text:** Hilfreich bei einem neuen oder weniger bekannten Kanal, weil Symbol und Name zusammen klarer sind.

Entscheide nicht nur nach der Desktop-Vorschau. Auf einem Smartphone können kleine Symbole schwer zu treffen sein; lange Beschriftungen können dagegen zu viel Platz einnehmen. Prüfe deshalb beide Ansichten.

## Vollständiger Test vor der Veröffentlichung

1. Speichere die Seite und öffne die Vorschau.
2. Kontrolliere, ob alle gewünschten Icons vorhanden und sinnvoll sortiert sind.
3. Klicke jedes Icon an.
4. Prüfe, dass es genau zum beabsichtigten Profil, zur E-Mail-Adresse oder zur Website führt.
5. Kontrolliere, ob entfernte Kanäle wirklich nicht mehr sichtbar sind.
6. Sieh dir die Reihe auf einem großen Bildschirm an: Abstand, Ausrichtung und Größe müssen zur Seite passen.
7. Öffne die Seite auf einem Smartphone und tippe jedes Icon an.
8. Veröffentliche erst, wenn alle Ziele erreichbar und gut bedienbar sind.

Die Quelle bestätigt, dass das Element auf mobile Ansichten reagiert. Das ersetzt nicht deinen eigenen Test: Entscheidend ist, ob Besucher die Icons in deinem konkreten Layout gut erkennen und auswählen können.

## Typische Probleme und ihre Lösung

| Beobachtung                              | Wahrscheinliche Ursache                                                                          | Nächster Schritt                                                                   |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- |
| Ein Icon führt zur falschen Seite.       | Die Zieladresse wurde beim Bearbeiten am falschen Eintrag gespeichert oder enthält einen Fehler. | Öffne den Stift beim konkreten Icon, korrigiere die Adresse und teste erneut.      |
| Ein nicht gepflegter Kanal ist sichtbar. | Der Eintrag blieb nach einer Änderung in der Liste.                                              | Entferne ihn über das Papierkorb-Symbol und prüfe die veröffentlichte Seite.       |
| Die Reihe wirkt unruhig.                 | Zu viele Icons, eine zufällige Reihenfolge oder uneinheitliche Darstellung.                      | Behalte nur wichtige Kanäle, ordne sie bewusst und wähle eine Darstellungsart.     |
| Icons sind mobil schwer anzutippen.      | Die Größe ist zu klein oder die Reihe steht zu dicht.                                            | Erhöhe Breite und Höhe behutsam und prüfe die mobile Ansicht erneut.               |
| Besucher erkennen ein Symbol nicht.      | Es wird nur ein Icon ohne Text gezeigt.                                                          | Teste **Icon und Text** oder reduziere die Auswahl auf bekannte, relevante Kanäle. |

## Grenzen, die du kennen solltest

* Das Element erstellt keine Profile und füllt keine Zieladressen automatisch aus.
* Die Verfügbarkeit eines Icons bedeutet nicht, dass dieser Kanal für dein Unternehmen sinnvoll ist.
* Die mobile Anpassung muss in deinem eigenen Seitenlayout geprüft werden.
* Originalansichten aus der Quelle werden nicht in die eigene Dokumentation oder Website übernommen.
* Social-Media-Icons ersetzen keine klare Kontaktmöglichkeit, wenn Besucher direkt anfragen sollen.

## Praxisbeispiel: Drei gepflegte Kanäle in der Fußzeile

Ein lokales Studio möchte sein Instagram-Profil, seinen YouTube-Kanal und eine WhatsApp-Kontaktmöglichkeit sichtbar machen.

1. Das Team platziert Social-Media-Icons in der Fußzeile.
2. Es fügt genau diese drei Einträge über **Social hinzufügen** zur Liste hinzu.
3. Für jeden Eintrag wird die vollständige Zieladresse über das Stift-Symbol hinterlegt.
4. Instagram steht an erster Stelle, weil dort die aktuellen Arbeiten gezeigt werden.
5. Das Team wählt **nur Icon**, richtet die Reihe mittig aus und prüft die Größe auf dem Smartphone.
6. Ein nicht genutzter Eintrag wird über das Papierkorb-Symbol entfernt.
7. Nach dem Veröffentlichen klickt das Team jeden Link auf Desktop und Smartphone an.

Das Ergebnis: Besucher finden drei tatsächlich gepflegte Ziele schnell, ohne von einer langen, unklaren Symbolreihe abgelenkt zu werden.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/social-media-icons-im-webseiten-editor-gestalten.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.