Der Icon-Block ermöglicht es Ihnen, ein einzelnes skalierbares Icon zu jeder SeedProd-Seite hinzuzufügen. Mit Zugriff auf Tausende von Font Awesome Icons können Sie schnell visuelle Symbole platzieren, die Ihren Inhalt unterstützen – sei es ein Social-Media-Icon, ein Richtungspfeil, ein Feature-Indikator oder ein dekorativer Akzent.
Jedes Icon kann in Größe, Farbe und Ausrichtung angepasst und optional mit jeder URL verknüpft werden, was es zu einem vielseitigen Baustein für Buttons, Feature-Listen, Handlungsaufforderungen und mehr macht.
Hinzufügen des Icon-Blocks 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 Icon-Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Icon-Block, um seine Einstellungen zu öffnen. Konfigurieren Sie im Tab Inhalt das Aussehen und den Link des Icons.
Symbol:
- Icon: Klicken Sie auf den Icon-Picker, um Tausende von verfügbaren Font Awesome Icons zu durchsuchen und auszuwählen. Suchen Sie nach Schlüsselwörtern, um schnell das benötigte Icon zu finden.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Icons innerhalb seines Bereichs fest – Links, Mitte oder Rechts. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Farbe: Legen Sie die Farbe des Icons mit dem Farbwähler fest.
- Größe: Legen Sie die Größe des Icons von 10 bis 150 Pixel mit dem Schieberegler fest.
- Link: Geben Sie optional eine URL ein, um das Icon zu einem klickbaren Link zu machen. Klicken Sie auf das Einstellungen-Symbol neben dem Linkfeld, um zusätzliche Link-Optionen 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 der Verknüpfung ein
rel="nofollow"-Attribut hinzuzufügen, das Suchmaschinen anweist, keine Link-Autorität an das Ziel weiterzugeben.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie die Schatten- und Abstandsgestaltung Ihres Icon-Blocks anpassen.
Stile:
- Textschatten: Fügen Sie dem Icon einen Schatteneffekt hinzu. Wählen Sie aus Keine, Haarlin, Klein, Mittel, Groß, X Groß oder 2X Groß, um dem Icon Tiefe und visuelle Betonung zu verleihen.
Abstand:
- Abstand (Außen): Steuern Sie 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 (Innen): 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 benutzerdefinierte Stile oder JavaScript-Ziele erstellt wird.
- 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 Block-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Format ein: attribut-name|wert.
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Icon-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Icon-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Icon-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingangs-Animation: Wählen Sie einen Animationseffekt, der abgespielt wird, wenn der Icon-Block ins Sichtfeld scrollt, wie 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 abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Icon-Block zu Ihrer Seite hinzugefügt! Icons sind eine einfache, aber wirkungsvolle Möglichkeit, Ihren Inhalten visuelle Klarheit zu verleihen – sie lenken das Auge, verstärken die Bedeutung und lassen Seiten polierter wirken. Experimentieren Sie mit verschiedenen Icons, Größen und Farben, um die Kombination zu finden, die am besten zu Ihrem Design passt.