Funktionskarte und Funktionsübersicht
Erstellen Sie Funktionskarten mit Symbolen oder Bildern in einem responsiven Funktionsraster – nutzen Sie die in Attr integrierte Bildauswahl aus der Medienbibliothek und die Vektor-Symbolauswahl, um Ausrüstung, Auszeichnungen, Dienstleistungen oder Lehrplanblöcke hervorzuheben, ohne den Seiteneditor verlassen zu müssen.
Die Blöcke „Feature-Karte“ und „Feature-Raster“ verwandeln eine Reihe strukturierter Highlights auf jeder Seite in ein ansprechendes, übersichtliches Layout. Jede Karte kann mit einem klaren Vektor-Symbol, einem Foto oder einem Badge aus Ihrer Medien-Bibliothek oder beidem beginnen – ein optionales Symbol kann als Badge oben links auf der Karte platziert werden, wenn Sie zusätzlich ein Bild verwenden.
Verwenden Sie ein Feature-Raster, wenn Sie mehrere Karten in einem responsiven Spaltenlayout anordnen möchten (Dienstleistungen, Ausrüstung, Auszeichnungen). Fügen Sie eine einzelne Feature-Karte ein, wenn Sie nur ein Highlight innerhalb einer Spalte benötigen.
Informationen dazu, wie Blöcke innerhalb von Abschnitten und Zeilen angeordnet werden, findest du unter Seitenlayout und Inhalt. Grundlagen zur Seitenleiste findest du unter Seitenleiste und Symbolleiste im Seiteneditor.
Voraussetzungen
- Eine Seite, die unter Seiten → Bearbeiten → Seiteneditor geöffnet ist
- Optional: bereits in Medien hochgeladene Bilder (Logos, Produktfotos, Auszeichnungssiegel, Modul-Miniaturansichten)
- Optional: eine Abschnitt → Zeile → Spalte-Vorlage – oder lassen Sie den Editor den Block umbrechen, wenn Sie ihn auf die Arbeitsfläche ziehen
Ein „Features“-Raster hinzufügen
- Klicken Sie in der rechten Seitenleiste auf Blöcke (Plus-Symbol).
- Ziehe unter Produkte & Formulare (oder Erweitert, je nach deiner Blockpalette) Funktionen-Raster in eine Spalte.
- Das Raster enthält vorgefertigte Karten, die du bearbeiten oder ersetzen kannst.
- Wählen Sie das Raster auf der Arbeitsfläche aus → Bearbeiten → Eigenschaften, um Spalten, Abstände und den Hintergrund des Abschnitts festzulegen.
- Wählen Sie eine einzelne Karte innerhalb des Rasters aus, um deren Stil anzupassen – oder verwenden Sie Karte hinzufügen im Raster, um das Set zu erweitern.
- Seite speichern und veröffentlichen, wenn Sie fertig sind.
Eine einzelne „Feature“-Karte hinzufügen
- Öffne Blöcke und ziehe „Feature-Karte“ in eine Spalte (oft innerhalb einer mehrspaltigen Zeile).
- Wähle die Karte aus → Bearbeiten → Attr, um Symbol, Bild, Farben und Kartenstil auszuwählen.
- Klicken Sie auf die Überschrift und die Beschreibung auf der Arbeitsfläche, um den Text direkt zu bearbeiten (WYSIWYG).
Die meisten Studios beginnen mit einem Funktionsraster für Seiten wie „Über uns“, „Dienstleistungen“, „Ausrüstung“ oder „Auszeichnungen“; verwenden Sie eine einzelne Funktionskarte für einen Hinweis in der Seitenleiste oder ein einzelnes Argument.
Aufbau einer Feature-Karte
Jede Feature-Karte ist eine kleine Fläche mit bis zu vier Ebenen, die Besucher sofort erkennen:
| Ebene | Was Besucher sehen | Wo Sie es bearbeiten |
|---|---|---|
| Visuelles Element | Symbol, Bild oder Bild mit optionalem Symbol-Badge | Attr → Bild und Symbol |
| Titel | Kurze Überschrift (Name der Auszeichnung, Ausrüstungsmodell, Leistungsstufe) | Klicken Sie auf die Überschrift auf der Arbeitsfläche |
| Beschreibung | Erläuterung (Jahr, Spezifikationen, Ein-Satz-Pitch) | Klicken Sie auf den Absatz auf der Arbeitsfläche |
| Link (optional) | Anklickbares Bild, das eine Presseseite, eine Partner-URL oder eine Galerie öffnet | Attr → Bild → Bildlink |
Karten übernehmen die Theme-Tokens Ihrer Website für Oberflächenfarbe und Schatten, sodass sie sowohl in hellen als auch in dunklen Farbpaletten gut lesbar bleiben – siehe Website-Theme und Branding.
Kartenmodi: Symbol, Bild und Overlay
Sie wählen keinen separaten „Modus“ aus einem Dropdown-Menü aus – die Karte passt sich an die Einstellungen an, die Sie unter Attr vornehmen:
Symbolmodus (Standard)
Lassen Sie das Feld Bildquelle leer. Wählen Sie unter Symbol → Symbol auswählen ein Symbol aus. Das Symbol erscheint in einem abgerundeten Rahmen über dem Titel – ideal für Aufzählungspunkte von Diensten, Workflow-Schritte oder Kategorien, bei denen kein Foto benötigt wird.
Neue Karten, die mit Karte hinzufügen in einem Raster hinzugefügt werden, starten im Symbolmodus.
Bildmodus
Legen Sie Bildquelle aus Ihrer Medien-Bibliothek fest (oder fügen Sie eine URL ein). Das Bild wird über dem Titel angezeigt. Löschen Sie den Eintrag unter Bildquelle, um zum reinen Symbol-Layout zurückzukehren.
PNG-Badges und Logos mit Transparenz eignen sich besonders gut für Auszeichnungssiegel und Markenzeichen.
Überlagerungsmodus (Bild + optionales Symbol)
Wenn eine Karte ein Bild enthält und Sie ein Symbol auswählen, wird das Symbol als kleines Abzeichen in der oberen linken Ecke der Karte fixiert – nützlich, wenn Sie ein Kategoriezeichen (Video, Landschaft, Drohne) über einem Verlagslogo oder Produktfoto anzeigen möchten.
Verwenden Sie „Symbol entfernen“ unter „Symbol“, wenn Sie ein klares Abzeichen nur mit Bild wünschen (üblich bei Auszeichnungswänden).
Nur Symbol Nur Bild Bild + Symbol-Überlagerung
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ [Symbol] │ │ [Foto] │ │[i] [Foto] │
│ Titel │ │ Titel │ │ Titel │
│ Beschreibung │ │ Beschreibung │ │ Beschreibung │
└─────────────┘ └─────────────┘ └─────────────┘
Integrierte Asset-Auswahl (kein Wechseln zwischen Registerkarten)
Um Ihren Studio-Workflow zu optimieren, verwenden Feature-Karten native Auswahltools direkt im Attr-Bedienfeld – Sie bleiben während der Auswahl der visuellen Elemente auf der Seiten-Arbeitsfläche.
Bildauswahl aus der Medienbibliothek
Öffnen Sie unter Bild → Bildquelle über die Bildschaltfläche Ihre Medien-Bibliothek. Wählen Sie ein beliebiges Bild aus, das Sie bereits hochgeladen haben; die Auswahl eines anderen Assets überschreibt das aktuelle (genau wie beim eigenständigen Bild-Block).
- Verwenden Sie optimierte Web-Assets aus der Medien-Bibliothek, anstatt große Originaldateien per Hotlink einzubinden.
- PNG-Dateien mit Transparenz eignen sich besonders gut für Auszeichnungssiegel, Sponsorenlogos und Ausschnitte von Ausrüstung.
- Du kannst weiterhin eine externe URL in Bildquelle einfügen, wenn du ein einmaliges Element benötigst, und das Feld anschließend verwischen, um es anzuwenden.
Lade neue Dateien zunächst unter Medien hoch, falls sie noch nicht in der Bibliothek vorhanden sind – siehe Deine ersten Fotos hochladen.
Vektor-Symbolauswahl
Öffnen Sie unter Symbol → Symbol auswählen die durchsuchbare Symbolbibliothek. Tausende gestochen scharfe Vektorsymbole lassen sich nahtlos an die Typografie und die Designfarben Ihrer Website anpassen.
- Suchen Sie nach Stichwörtern – Kamera, Drohne, Auszeichnung, Uhr, Benutzer –, um passende Symbole für Ihren Text zu finden.
- Passen Sie Symbolgröße, Icon-Farbe, Icon-Hintergrund und Abrundung des Icon-Containers an, ohne das Bedienfeld zu verlassen.
- Mit Icon entfernen wird das Symbol gelöscht, während Ihr Bild oder Ihr Text erhalten bleibt.
Icons werden auf der veröffentlichten Seite als Vektorgrafiken dargestellt, sodass sie auf Retina-Displays und Mobilgeräten scharf bleiben.
Eine einzelne Feature-Karte (Attr) konfigurieren
Wählen Sie eine Feature-Karte auf der Arbeitsfläche aus → Bearbeiten → Attr.
Bild
| Steuerelement | Funktion |
|---|---|
| Bildquelle | URL-Feld sowie Medien-Auswahlschaltfläche; bei reinen Symbolkarten leer lassen |
| Bildlink | Optionale URL, die geöffnet wird, wenn ein Besucher auf das Bild klickt (nicht auf die gesamte Karte); nützlich für Pressemitteilungen, Affiliate-Seiten oder Gewinnerfotos |
Der Link umfasst nur das Bild, ähnlich wie es bei Auszeichnungsabzeichen und Zahnrad-Miniaturansichten üblicherweise der Fall ist.
Symbol
| Steuerelement | Funktion |
|---|---|
| Symbol auswählen | Öffnet die Auswahl für Vektorsymbole |
| Symbol entfernen | Blendet den Symbolcontainer aus (Hervorhebung nur durch Bild oder nur durch Text) |
| Symbolgröße | Klein bis extragroß |
| Symbolfarbe | Konturfarbe für das Vektorsymbol |
| Symbolhintergrund | Füllung hinter dem Symbol |
| Abrundung des Symbolcontainers | Eckenradius des Symbolchips |
| Ausrichtung | Links, zentriert oder rechts für Symbol und Text als Gruppe |
Kartenstil
| Steuerung | Funktion |
|---|---|
| Kartenhintergrund | Flächenfüllung (Standardeinstellungen richten sich nach Ihrem Design) |
| Randradius | Abgerundete Ecken der Karte |
| Schatten | Voreingestellte Tiefe von „keiner“ bis „extra groß“ |
| Rahmen anzeigen | Optionaler hauchdünner Rahmen |
| Hover-Effekt | Dezenter Anhebeeffekt beim Darüberfahren, sofern aktiviert |
Verwenden Sie Stil in derselben Seitenleiste, wenn Sie einmalige Anpassungen der Abstände vornehmen möchten; die meisten Feinabstimmungen für Karten finden Sie unter Attr.
Ein „Features“-Raster konfigurieren (Attr)
Wählen Sie den „Features“-Raster-Wrapper (keine innere Karte) → Bearbeiten → Attr.
Layout
| Steuerung | Funktion |
|---|---|
| Spalten | 1–6 Spalten auf dem Desktop; Karten werden auf Tablets und Mobilgeräten neu angeordnet |
| Karte hinzufügen | Fügt am Ende des Rasters eine weitere Starterkarte ein |
| Abstand | Abstand zwischen den Karten (Schieberegler) |
| Abschnittshintergrund | Band hinter dem gesamten Raster (standardmäßig transparent) |
Das Ändern der Spalten passt nur das Layout an – es werden keine Karten gelöscht. Entfernen Sie überzählige Karten, indem Sie sie auf der Arbeitsfläche auswählen und löschen, oder verwenden Sie Ebenen.
Stil für alle Karten
Diese Einstellungen wenden denselben Icon- und Kartenstil auf jede Karte im Raster an – ideal, wenn Sie eine einheitliche Auszeichnungswand oder einen einheitlichen Ausrüstungskatalog erstellen möchten.
| Steuerung | Funktion |
|---|---|
| Symbolgröße / Symbolfarbe / Symbolhintergrund | Stil der Symbole einheitlich festlegen |
| Ausrichtung | Ausrichtung von Text und Symbolen einheitlich festlegen |
| Kartenradius / Kartenschatten | Einheitsgestaltung der Kartenelemente |
Wählen Sie anschließend eine einzelne Karte aus, um eine Zeile zu überschreiben (z. B. eine andere Akzentfarbe für einen „hervorgehobenen“ Service).
Bearbeiten von Titeln und Fließtext
Überschriften und Beschreibungen sind direkt auf der Arbeitsfläche bearbeitbar – klicken Sie wie in einem Textverarbeitungsprogramm in den Text. Sie benötigen keinen separaten Rich-Text-Block für den Kartentext.
Halten Sie Titel kurz (Name der Auszeichnung, Produktname, Servicestufe). Verwenden Sie die Beschreibung für das Jahr, die Kategorie, technische Angaben oder einen ergänzenden Satz.
Praktische Anwendungsbeispiele
Das „Features“-Raster ist einer der flexibelsten Nicht-Medien-Blöcke im Editor. Über die generischen „drei Spalten mit Aufzählungspunkten“ hinaus tauchen diese Layouts regelmäßig auf professionellen, kreativen Websites auf.
Auszeichnungen, Ehrungen und Lob
Präsentieren Sie Branchenauszeichnungen, ohne dass die Seite durch eine überladene Collage überfüllt wirkt.
- Bild: Veröffentlichungssiegel oder Gewinner-Badge (PNG aus Medien).
- Titel: Name der Auszeichnung und Platzierung (2. Preis, Bildende Kunst – Video).
- Beschreibung: Organisation und Jahr.
- Bildlink: Gewinnerbild, Pressemitteilung oder Wettbewerbsgalerie.
- Overlay (optional): Kleines Kategorie-Symbol (Video, Landschaft) oben links, wenn das Abzeichen allein das Medium nicht verdeutlicht.
Dies ist dasselbe Muster, das Studios für Seiten mit den Titeln Auszeichnungen und Ehrungen oder Anerkennung verwenden.
Kameraausrüstung und Produktionsausrüstung
Kunden aus den Bereichen Werbung, Astrofotografie und Landschaftsfotografie wollen den Nachweis, dass Sie technisch anspruchsvolle Arbeiten umsetzen können. Widmen Sie auf der Seite „Über uns“ oder „Ausrüstung“ einen Bereich Ihrer Ausrüstung vor Ort:
- Bild: Klares Produktfoto – Kameragehäuse, Drohne, Filterhalter, Tracker.
- Titel: Modellname oder Funktion des Sets.
- Beschreibung: Eine technische Angabe (Phase One IQ4 150 MP – Großformat-Rückteil).
- Bildlink: Partnerprogramm, Herstellerseite oder Ihr ausführlicher Testbericht zur Ausrüstung.
Der Symbolmodus eignet sich für Kategorien (Beleuchtung, Stative, Filter), wenn Sie Symbole gegenüber Fotos bevorzugen.
Studio-Dienstleistungen und Rahmenverträge
Gliedern Sie die Auftragsabläufe in übersichtliche Ebenen – auf dem Desktop oft in drei Spalten:
- Karte 1 – Produktion vor Ort – Hero-Bild oder BTS-Standbild; Link zur Fallstudie im Portfolio.
- Karte 2 – Lieferung und Archivierung der Bilddaten – Grafik mit Speichermedium oder Galerie; Link zur Übersicht des Kundenportals.
- Karte 3 – Nachbearbeitung und Druck — Farb- oder Druckdetail; Link zur Seite mit den Druckprodukten.
Kombinieren Sie das Raster mit den Kundenstimmen darunter, um soziale Bestätigung zu schaffen – siehe Referenz zu Editor-Blöcken und Layout.
Workshops und Schulungsmodule
Skizzieren Sie Lehrplanblöcke für Feldsafaris, Online-Mentoring oder Kurs-Upsells:
- Titel: Modulname (Planung von Nachthimmelaufnahmen, Bearbeitung komplexer RAW-Stacks).
- Bild: Repräsentatives Bild oder Diagramm.
- Bildlink: Seite für den Checkout, die Warteliste oder den Lehrplan.
Verwenden Sie Ereignisse im Abschnitt, wenn die Module beim Scrollen einblenden sollen – Ereignisse und Interaktionen im Seiteneditor.
Layout und Verhalten auf Mobilgeräten
Platzieren Sie das Raster innerhalb eines Abschnitts mit ausreichendem vertikalem Abstand. Bei schmalen Ansichtsfenstern werden mehrspaltige Raster automatisch zu einer einzigen Spalte gestapelt – sehen Sie sich vor der Veröffentlichung die Vorschau unter „Mobil“ in der Editor-Symbolleiste an.
Informationen zur maximalen Zeilenbreite und zur Spaltenausgleichung finden Sie unter Seitenlayout und Inhalt.
Tipps für ein professionelles Raster
- Einheitliche Bildproportionen – Ähnliche Seitenverhältnisse bei allen Karten wirken durchdacht; schneiden Sie die Bilder vor der Auswahl unter Medien zu.
- Eine Idee pro Karte — Besucher überfliegen den Inhalt; vermeiden Sie lange Absätze im Beschreibungsfeld.
- Themenbezogene Farben — Verwenden Sie vorzugsweise Theme-Surface-Tokens anstelle von fest codierten Hex-Werten, damit die Lesbarkeit im Dunkelmodus gewährleistet bleibt.
- Aussagekräftige Links — Bildlinks sollten zu Inhalten führen, die den Klick lohnen (Galerie, Artikel, Produkt) – nicht zu generischen Startseiten.
- Medien wiederverwenden — Speichere Siegel und Symbole einmalig in Medien; verwende sie seiten- und blogbeitragübergreifend.
Fehlerbehebung
| Symptom | Was zu überprüfen ist |
|---|---|
| Das Symbol ändert sich in Attr, aber die Arbeitsfläche sieht unverändert aus | Die Karte besteht möglicherweise nur aus einem Bild und hat noch kein Symbol – wählen Sie ein Symbol aus oder verwenden Sie Symbol entfernen und wählen Sie es dann erneut aus; speichern Sie und aktualisieren Sie die Vorschau |
| Das Symbol befindet sich zwischen Bild und Text statt oben links | Wählen Sie das Symbol erneut aus oder ersetzen Sie das Bild einmal – die Platzierung synchronisiert das Symbol mit der Kartenecke, sobald ein Bild vorhanden ist |
| Die Bildauswahl ist leer | Laden Sie zunächst Assets unter Medien hoch |
| Bildlink ist deaktiviert | Legen Sie zuerst die Bildquelle fest |
| Die Spalten im Raster wirken auf Mobilgeräten überfüllt | Reduzieren Sie die Spaltenanzahl oder kürzen Sie die Titel; Vorschau unter Mobil |
| Die Stile unterscheiden sich zwischen Editor und Live-Website | Seite speichern, veröffentlichen, hart aktualisieren; siehe Fehlerbehebung bei Veröffentlichungsproblemen |
| Die migrierte WordPress-Seite zeigt gestrichelte Platzhalterfelder an | Importiere die Seite erneut oder erstelle sie mit den aktuellen Migrationswerkzeugen neu – wende dich an den Support, wenn du einen älteren Import verwaltest |
Verwandte Artikel
- Referenz zu Editorblöcken und Layouts – vollständiger Blockkatalog
- Medien zu Seiten hinzufügen – Einbinden von Bibliotheksinhalten in Blöcke
- Ereignisse und Interaktionen im Seiteneditor – Bewegungen in Rasterabschnitten
- Website-Design und Branding – Farben und Oberflächen, die von Karten übernommen werden
Überprüfen Ihrer Einrichtung
- Fügen Sie einem Seitenentwurf ein Funktionen-Raster mit drei Karten hinzu.
- Legen Sie auf einer Karte ein Bild aus Medien und einen Bildlink fest.
- Verwenden Sie auf einer anderen Karte ausschließlich Icon mit einer eindeutigen Farbe.
- Kombinieren Sie auf der dritten Karte Bild und Icon-Overlay.
- Seite speichern, Vorschau auf Desktop und Mobilgeräten anzeigen, veröffentlichen und überprüfen Sie, ob die öffentliche URL mit der im Editor angezeigten übereinstimmt.