Mit dem Icon-Box-Block können Sie ein Font Awesome-Symbol mit einer Überschrift und einem beschreibenden Text in einem einzigen, einheitlichen Layout kombinieren. Dieser Block eignet sich ideal, um Funktionen, Vorteile, Dienstleistungen oder andere Inhalte hervorzuheben, die von einem visuellen Symbol in Verbindung mit einer kurzen Erklärung profitieren.
Mit vollständiger Kontrolle über die Größe, Farbe, Ausrichtung, Abstände und Typografie der Symbole ist der Icon Box-Block einer der vielseitigsten Blöcke für die Erstellung von Funktionsbereichen und Layouts für Wertversprechen.
Hinzufügen des Icon-Box-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Icon-Box-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Symbolfeld“ per Drag & Drop in den gewünschten Abschnitt Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Block „Icon Box“, um dessen Einstellungen zu öffnen. Die Registerkarte „Inhalt“ ist in zwei Abschnitte unterteilt: „Symbol/Bild“ und „Text“.
Symbol:
- Symbol: Klicken Sie auf die Symbolauswahl, um aus Tausenden von verfügbaren Font Awesome-Symbolen zu suchen und auszuwählen.
- 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.
- Icon Gap: Leg den Abstand zwischen dem Icon und dem Textinhalt auf 10 bis 150 Pixel fest.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des gesamten Icon-Feldes innerhalb seines Abschnitts fest – links, mittig oder rechts. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Vertikale Ausrichtung: Legen Sie fest, wie das Symbol vertikal relativ zur Überschrift und zum Text ausgerichtet werden soll – oben, in der Mitte oder unten.
Text:
- Kopfzeilentext: Geben Sie die Überschrift für Ihre Icon-Box mithilfe des Rich-Text-Editors ein. Unterstützt Fettdruck, Kursivschrift, Unterstreichung, Durchstreichung und Inline-Links.
- Ebene: Wählen Sie das HTML-Überschriften-Tag für die Kopfzeile – H1, H2, H3 oder H4 –, um die korrekte Dokumentstruktur beizubehalten.
- Text: Geben Sie den Beschreibungstext für Ihre Icon-Box ein. Unterstützt grundlegende Rich-Text-Formatierungen wie Fettdruck, Kursivschrift, Unterstreichung, Durchstreichung und Links.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie die Typografie, Farben und Abstände Ihres Icon-Box-Blocks anpassen.
Stile:
- Überschrift-Typografie: Optimieren Sie die Schriftartfamilie, Schriftstärke, Zeilenhöhe, Buchstabenabstand und Textumwandlung der Überschriften. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Header-Farbe: Legen Sie die Textfarbe der Überschrift mithilfe der Farbauswahl fest.
- Typografie: Optimieren Sie die Schriftartfamilie, Schriftstärke, Zeilenhöhe, Buchstabenabstand und Textumwandlung des Fließtextes. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Farbe: Legen Sie die Textfarbe der Beschreibung mit dem Farbwähler fest.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Icon Box-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 Box-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 Box-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 Icon-Box-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Icon-Box-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Icon-Box-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie einen Animationseffekt aus, der abgespielt wird, wenn der Icon-Box-Block in den Blickbereich scrollt, z. B. „Hüpfen“, „Einblenden“, „Vergrößern“, „Drehen“ und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Icon-Box-Blocks und die Anpassung seines Aussehens abgeschlossen haben, müssen Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Icon-Box-Block zu Ihrer Seite hinzugefügt! Icon-Boxen sind eine der effektivsten Möglichkeiten, um Funktionen, Vorteile und Dienstleistungen in einem übersichtlichen, visuell ansprechenden Format zu präsentieren. Experimentieren Sie mit der Auswahl der Symbole, den Überschriftenebenen und den Typografieeinstellungen, um Icon-Boxen zu erstellen, die zu Ihrer Marke passen und Ihren Wert klar kommunizieren.