Mit dem Icon-Block können Sie ein einzelnes skalierbares Symbol zu jeder SeedProd-Seite hinzufügen. Dank Zugriff auf Tausende von Font Awesome-Symbolen können Sie schnell visuelle Symbole einfügen, die Ihren Inhalt unterstützen – egal, ob es sich dabei um ein Social-Media-Symbol, einen Richtungspfeil, eine Funktionsanzeige oder einen dekorativen Akzent handelt.
Jedes Symbol kann in Größe und Farbe angepasst, ausgerichtet und optional mit einer beliebigen URL verknüpft werden, wodurch es zu einem vielseitigen Baustein für Schaltflächen, Funktionslisten, Handlungsaufforderungen und vieles mehr wird.
Hinzufügen des Symbolblocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Icon-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Symbolblock per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Icon-Block, um dessen Einstellungen zu öffnen. Konfigurieren Sie auf der Registerkarte „Inhalt“ das Aussehen und den Link des Icons.
Symbol:
- Symbol: Klicken Sie auf die Symbolauswahl, um aus Tausenden von verfügbaren Font Awesome-Symbolen zu suchen und auszuwählen. Suchen Sie nach Stichwörtern, um das gewünschte Symbol schnell zu finden.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Symbols innerhalb seines Abschnitts fest – links, mittig oder rechts. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Farbe: Legen Sie die Farbe des Symbols mithilfe der Farbauswahl fest.
- Größe: Stellen Sie die Größe des Symbols mit dem Schieberegler auf einen Wert zwischen 10 und 150 Pixel ein.
- Link: Geben Sie optional eine URL ein, um das Symbol zu einem anklickbaren Link zu machen. Klicken Sie auf das Einstellungssymbol neben dem Linkfeld, um weitere Linkoptionen anzuzeigen.
- In neuem Fenster öffnen: Aktivieren Sie diese Option, um die verlinkte URL in einem neuen Browser-Tab zu öffnen.
- No Follow: Aktivieren Sie diese Option, um ein
rel="nofollow"Attribut zum Link hinzufügen, das Suchmaschinen anweist, keine Link-Autorität an das Ziel weiterzugeben.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Schatten-Styling und den Abstand Ihres Icon-Blocks anpassen.
Stile:
- Textschatten: Fügen Sie dem Symbol einen Schatteneffekt hinzu. Wählen Sie zwischen „Keine“, „Haarfein“, „Klein“, „Mittel“, „Groß“, „X Groß“ oder „2X Groß“, um dem Symbol Tiefe und visuelle Betonung zu verleihen.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Icon-Block (oben, rechts, unten, links). Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Icon-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 Icon-Block an, die von SeedProd automatisch für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt wurde.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Block-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert.
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Blendet den Symbolblock auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Symbolblock auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Icon-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie einen Animationseffekt, der abgespielt wird, wenn der Icon-Block in den Blickwinkel scrollt, z. B. „Bounce“, „Fade In“, „Zoom In“, „Rotate In“ und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Icon-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Icon-Block zu Ihrer Seite hinzugefügt! Icons sind eine einfache, aber wirkungsvolle Möglichkeit, Ihren Inhalten mehr visuelle Klarheit zu verleihen – sie lenken den Blick, verstärken die Bedeutung und lassen Seiten professioneller wirken. Probieren Sie verschiedene Icons, Größen und Farben aus, um die Kombination zu finden, die am besten zu Ihrem Design passt.