--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/elemente/social-links' title: 'Ein Social-Links-Element hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:55:04+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Sie erhalten eine Reihe von Marken-Icons, die auf Ihre Social-Media-Profile verlinken. Nutzen Sie sie in einem Footer, einer Sidebar oder einem Kontaktbereich, damit Besucher Sie finden und Ihnen folgen können.' tags: - Marketing image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ein Social-Links-Element hinzufügen' description: 'Sie erhalten eine Reihe von Marken-Icons, die auf Ihre Social-Media-Profile verlinken. Nutzen Sie sie in einem Footer, einer Sidebar oder einem Kontaktbereich, damit Besucher Sie finden und Ihnen folgen können.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:55:04+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/elemente/social-links' articleSection: Marketing - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/elemente/social-links' description: 'Sie erhalten eine Reihe von Marken-Icons, die auf Ihre Social-Media-Profile verlinken. Nutzen Sie sie in einem Footer, einer Sidebar oder einem Kontaktbereich, damit Besucher Sie finden und Ihnen folgen können.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Inhalte hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements) /[Marketing](/de/hc/documentation/learn-dxpr-builder/elements/marketing) # Ein Social-Links-Element hinzufügen. DXPR Builder lernenSeiten erstellenInhalte hinzufügenMarketing ## In diesem Leitfaden Verwandte Leitfäden - [Das Aussehen eines Elements im Style-Tab ändern](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/style-tab) Sie erhalten eine Reihe von Marken-Icons, die auf Ihre Social-Media-Profile verlinken. Nutzen Sie sie in einem Footer, einer Sidebar oder einem Kontaktbereich, damit Besucher Sie finden und Ihnen folgen können. ## Ein Social-Links-Element hinzufügen Öffnen Sie Ihre Seite im angemeldeten Zustand: Wenn Sie mit der Maus über den Inhaltsbereich fahren, erscheinen die Steuerelemente des Builders. [Ihre erste Seite](/de/hc/dokumentation/dxpr-builder-lernen/erste-schritte/erste-seite) zeigt die Grundlagen. 1. Fahren Sie mit der Maus über die Spalte und klicken Sie in ihrer Steuerleiste auf **+**; klicken Sie auf einer leeren Seite auf **Add Elements**. Öffnen Sie den **Content**-Tab und klicken Sie auf **Social links**. Die Social Links landen oben in der Spalte und ihr Einstellungsdialog öffnet sich. 2. Ersetzen Sie unter **Social links** die beiden Beispielzeilen durch Ihre Konten. Klicken Sie auf **Add link** für jedes weitere Konto. Beginnen Sie mit der Eingabe der Marke, wählen Sie sie aus den Vorschlägen und geben Sie die URL ein, zum Beispiel `https://github.com/dxpr`. 3. Wählen Sie einen **Style** für die Icon-Form. Dies ist das Feld oben im Dialog, nicht der Style-Tab weiter unten. Hier ist es **Circle**. 4. Wählen Sie eine **Size** für die Icons. Hier ist es **3x**. 5. Klicken Sie auf die Überschrift **Icon colors**, um sie aufzuklappen, und stellen Sie **Background color** auf **Brand color**. 6. Wählen Sie unter **Color** ein Farbfeld aus der Palette. Die Palette erscheint, weil **Color** standardmäßig auf **Custom** steht. Hier ist es fast weiß. 7. Klicken Sie im Dialog auf **Speichern**. Klicken Sie dann in der Symbolleiste oben im Inhaltsbereich auf **Speichern**, um die Seite zu speichern. ## Was Sie sehen Die von Ihnen hinzugefügten Konten erscheinen als Icon-Reihe und jedes Icon öffnet sein Profil. Im Video erscheinen LinkedIn, GitHub und Drupal als große Kreise in ihren Markenfarben mit weißen Logos. Besucher sehen sie, sobald Sie die Seite speichern und sie veröffentlicht ist. ## Ihre Social Links einrichten Fahren Sie mit der Maus über das Element und öffnen Sie in seiner Steuerleiste **More > Settings**. Optionen: - **Social links:** eine Zeile pro Icon, mit Markennamen und Profil-URL. Klicken Sie auf Add link für eine weitere Zeile und nutzen Sie die Pfeile, um die Reihenfolge zu ändern. - **Layout:** Inline stellt die Icons in einer Reihe dar. Stacked stellt jedes Icon in eine eigene Zeile. - **Style:** die Icon-Form: None, Rounded, Circle oder Square. - **Size:** Small, Large oder 2x bis 5x. - **CSS3 hover effects:** None, Disc oder Pulse. Jeder Effekt macht das Icon zu einem Kreis. - **Color:** die Logofarbe: Brand color, Custom oder Inherit. Custom zeigt eine Palette und Inherit übernimmt die Farbe des umgebenden Texts. - **Background color:** die Füllung der Form, mit denselben drei Auswahlmöglichkeiten. **Color** und **Background color** stehen unter der Überschrift **Icon colors**. Klicken Sie darauf, um sie zu öffnen. ## Wenn Sie es nicht sehen - **Social Links ist nicht im Content-Tab.** Ihr Benutzerprofil blendet es aus. Bitten Sie die Administration, es unter [User Profiles](/de/hc/dokumentation/dxpr-builder-lernen/verwaltung/benutzerprofile-verwaltung) zu aktivieren. - **Es ist nach dem Neuladen verschwunden.** Die Seite wurde nicht gespeichert. Fügen Sie es erneut hinzu und klicken Sie in der Symbolleiste oben im Inhaltsbereich auf **Speichern**. - **Ein Icon fehlt.** Seine Zeile hat keine Marke oder keine URL, daher überspringt das Element sie. Füllen Sie beide Felder dieser Zeile aus. - **Eine Form erscheint ohne Logo.** Der Markenname hat kein passendes Icon und die Zeile meldet „No matching brand icon found“. Wählen Sie die Marke beim Tippen aus den Vorschlägen. - **Ein Icon öffnet die falsche Seite.** Die URL in dieser Zeile ist falsch oder unvollständig. Fahren Sie mit der Maus über das Element und öffnen Sie **More > Settings**, und prüfen Sie dann, ob jede URL mit `https://` beginnt. ## Wie geht es weiter? [Style-Tab](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/style-tab), um Abstände und Hintergrund Ihrer Social Links zu ändern.