Der Social Profiles Block ermöglicht es Ihnen, eine Reihe von verknüpften Social-Media-Icons auf jeder SeedProd-Seite anzuzeigen. Jede Ikone verlinkt direkt zu Ihrem Profil auf einer unterstützten Plattform und gibt Besuchern eine schnelle Möglichkeit, Ihnen im Web zu folgen oder sich mit Ihnen zu verbinden. Der Block verfügt über 12 vorgefertigte Stilvorlagen und unterstützt über 20 Plattformen, darunter Facebook, X (Twitter), Instagram, LinkedIn, YouTube, TikTok, Pinterest, Discord, WhatsApp und mehr.
Über die fertigen Vorlagen hinaus haben Sie die volle Kontrolle über Icon-Stil, Größe, Farbe, Abstand und abgerundete Ecken. Jeder Social-Profile-Eintrag kann per Drag & Drop neu angeordnet, dupliziert oder unabhängig voneinander entfernt werden, sodass Sie die Plattformen, die Sie hervorheben möchten, einfach verwalten können. Eine benutzerdefinierte Option ermöglicht es Ihnen auch, jedes Icon aus der Icon-Bibliothek von SeedProd mit eigener Farbe und URL für Plattformen hinzuzufügen, die nicht auf der integrierten Liste stehen.
Hinzufügen des Social Profiles Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Social Profiles Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Social Profiles Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Social Profiles Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie im Abschnitt Icon Ihre Social-Profile-Liste verwalten und die Anzeigeoptionen konfigurieren.
Verwaltung von Social Profiles:
- Profiltyp: Verwenden Sie das Dropdown-Menü neben jedem Eintrag, um die Social-Media-Plattform auszuwählen. Unterstützte Plattformen sind Discord, E-Mail, Facebook, Facebook Messenger, GitHub, IMDb, Instagram, LinkedIn, Medium, Telefon, Pinterest, RSS, Slack, Snapchat, SoundCloud, Telegram, TikTok, X (Twitter), Vimeo, Weibo, WhatsApp, WordPress, YouTube und Benutzerdefiniert.
- URL: Klicken Sie auf das Zahnrad-Symbol bei jedem Eintrag, um das URL-Feld zu erweitern. Geben Sie den vollständigen Link zu Ihrer Profilseite ein (einschließlich
https://). Für E-Mail-Einträge geben Sie Ihre E-Mail-Adresse ein. Für benutzerdefinierte Einträge können Sie auch ein beliebiges Icon aus der Icon-Bibliothek auswählen und eine benutzerdefinierte Farbe festlegen. - Reihenfolge ändern: Ziehen Sie Einträge mit dem Ziehpunkt (Pfeil-Symbol) nach oben oder unten, um die Anzeigereihenfolge der Icons zu ändern.
- Duplizieren / Löschen: Fahren Sie mit der Maus über einen Eintrag, um die Schaltflächen Duplizieren und Löschen für eine schnelle Verwaltung anzuzeigen.
- Neuen Share hinzufügen: Klicken Sie am unteren Rand der Liste auf die Schaltfläche + Neuen Share hinzufügen, um einen weiteren Social-Profile-Eintrag hinzuzufügen.
Anzeigeoptionen:
- Stil: Wählen Sie zwischen Standard (nur Icon, kein Hintergrund) und Gestapelt (Icon auf einem farbigen quadratischen Hintergrund).
- Größe: Legen Sie die Gesamtgröße der Icons fest – Klein, Mittel oder Groß.
- Ausrichtung: Legen Sie die horizontale Ausrichtung der Icon-Reihe fest – Links, Mitte oder Rechts. Unterstützt gerätespezifische Ausrichtung für Desktop, Tablet und Mobilgeräte.
Schritt 2a: Wählen Sie einen Vorlagenstil
Im Tab Vorlagen können Sie Ihrem Social Profiles-Block mit einem einzigen Klick einen vordefinierten Icon-Stil zuweisen. Es stehen 12 Stilvorlagen zur Verfügung, von flachen quadratischen Icons bis hin zu abgerundeten, pillenförmigen und dunkel thematisierten Varianten. Die Auswahl einer Vorlage aktualisiert sofort den Icon-Stil, die Größe, den Randradius und die Farbeinstellungen des Blocks, um dem gewählten Design zu entsprechen.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Social Profiles-Blocks feinabstimmen.
Stile:
- Stil: Wechseln Sie zwischen den Icon-Stilen Standard und Gestapelt (wie in den Einstellungen des Inhalts-Tabs).
- Icon-Farbe: Legen Sie eine einzelne Farbe fest, die auf alle Icons im Block angewendet wird und die Standard-Markenfarbe jeder Plattform überschreibt.
- Icon-Größe: Passen Sie die Icon-Größe in Pixeln mit dem Schieberegler an (0–100px).
- Randradius: Wenn Sie den Gestapelt-Stil verwenden, passen Sie den Eckradius der Hintergrundquadrate der Icons an, um quadratische, abgerundete oder vollständig kreisförmige Formen zu erstellen (0–100px).
- Icon-Abstand: Wenn Sie den Gestapelt-Stil verwenden, steuern Sie den Abstand zwischen dem Icon und dem Rand seines Hintergrundbehälters (0–100px).
- Abstand dazwischen: Legen Sie den horizontalen Abstand zwischen den einzelnen Icons in der Zeile fest (0–100px).
- Schatten: Fügen Sie den Icon-Elementen einen Schatteneffekt hinzu. Wählen Sie aus vordefinierten Größen – Keine, Haarlin, Klein, Mittel, Groß, X-Groß und 2X-Groß.
Abstand:
- Abstand außen: Steuern Sie den äußeren Abstand um Ihren Social Profiles-Block (Oben, Rechts, Unten, Links). Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Abstand innen: Passen Sie den inneren Abstand innerhalb Ihres Social Profiles-Blocks an (Oben, Rechts, Unten, Links). Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Social Profiles-Block an. Diese ID wird automatisch von SeedProd erstellt und kann für benutzerdefinierte Stile oder JavaScript-Zielgruppen verwendet werden.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um spezifische Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Wrapper-Element des Blocks beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Format ein: attribut-name|wert (z. B. data-section|social).
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Social Profiles-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Social Profiles-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Social Profiles-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Social Profiles-Block ins Sichtfeld scrollt. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Social Profiles-Blocks abgeschlossen und sein Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Social Profiles-Block zu Ihrer Seite hinzugefügt! Mit Unterstützung für über 20 Plattformen, 12 fertigen Stilvorlagen und voller Kontrolle über Symbolgröße, Farbe, Abstand und Eckradius macht dieser Block es einfach, einen professionellen Social-Media-Streifen zu erstellen, der zu jedem Design passt. Experimentieren Sie mit den Stilen „Standard“ und „Gestapelt“, erkunden Sie die Vorlagen-Presets und verwenden Sie die Drag-and-Drop-Neuanordnung, um Ihre Profile genau so anzuordnen, wie Sie sie möchten.