Titel mit Icon
Titel mit Icon kombiniert aussagekräftige Überschriften mit passenden Symbolen. Dieser Baustein eignet sich perfekt, um Vorteile, Leistungen oder wichtige Punkte hervorzuheben. Die Symbole werden groß dargestellt und ziehen die Aufmerksamkeit auf sich.
Voraussetzungen
Überlege dir, welche Punkte du hervorheben möchtest und welche Symbole dazu passen. Bereite kurze, prägnante Titel vor.
Aufbau der Seite
Titel-Icon-Paare: Liste der Elemente mit:
- Symbol: Feather-Icon, das über dem Titel angezeigt wird
- Titel: Die Überschrift unter dem Symbol
- Animation: Einblendeffekt für jedes Element
So arbeitest du mit dieser Seite
Elemente hinzufügen:
- Klicke auf "Neues Element hinzufügen"
- Symbol: Wähle ein passendes Feather-Icon aus der Liste
- Titel: Gib eine kurze, aussagekräftige Überschrift ein
Passende Symbole wählen:
- Vorteile: Häkchen, Stern, Daumen hoch
- Leistungen: Werkzeuge, Zahnrad, Briefcase
- Eigenschaften: Herz, Schild, Zielscheibe
- Kontakt: Telefon, Mail, Standort
Titel formulieren:
- Halte Titel kurz und prägnant (1-4 Wörter)
- Verwende aktive, positive Sprache
- Beispiele: "Schnelle Lieferung", "24/7 Support", "Kostenlose Beratung"
Layout optimieren:
- Die Anzahl der Elemente bestimmt automatisch die Spaltenaufteilung
- Bei gerader Anzahl: 2 Spalten auf Tablets
- Bei ungerader Anzahl: Vollbreite auf Tablets
- Auf Mobilgeräten: Immer untereinander
Animationen festlegen:
- Wähle für jedes Element einen Einblendeffekt
- Verschiedene Animationen sorgen für Lebendigkeit
Tipps und Hinweise
- Große Symbole: Icons werden mit 48x48 Pixeln sehr prominent dargestellt
- Zentrierte Ausrichtung: Alle Elemente werden mittig ausgerichtet
- Responsive Design: Automatische Anpassung an verschiedene Bildschirmgrößen
- Konsistente Titel: Verwende ähnliche Längen und Formulierungen
- Passende Symbole: Das Icon sollte den Titel visuell unterstützen
- Nicht überladen: 3-6 Elemente sind meist optimal
- Hierarchie beachten: Wichtigste Punkte zuerst
- Mobile Optimierung: Auf Smartphones werden alle Elemente untereinander angezeigt
Symbol-Kategorien
Business: Briefcase, Users, TrendingUp, Target Kommunikation: Phone, Mail, MessageCircle, Headphones Qualität: Award, Star, Shield, CheckCircle Service: Clock, Settings, Tool, Zap Vorteile: ThumbsUp, Heart, Smile, Gift