Ein Social-Links-Element hinzufügen.

Learn DXPR BuilderBuild pagesAdd contentMarketing

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.

Social-Links-Element mit LinkedIn-, GitHub- und Drupal-Icons im Kreis-Stil mit Markenfarben

Öffnen Sie Ihre Seite im angemeldeten Zustand: Wenn Sie mit der Maus über den Inhaltsbereich fahren, erscheinen die Steuerelemente des Builders. Ihre 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.

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 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, um Abstände und Hintergrund Ihrer Social Links zu ändern.