Link-Raster
Link Grid ist ein Element, das die visuelle Attraktivität einer Karte mit der Funktionalität eines anklickbaren Elements kombiniert.
Es eignet sich perfekt zum Hervorheben wichtiger Informationen oder zum Präsentieren verwandter Ressourcen.
Wann Sie es verwenden sollten
Wichtige Informationen hervorheben
Erstellen Sie aufmerksamkeitsstarke Karten für wichtige Ankündigungen oder Updates.
Verwandte Inhalte präsentieren Verlinken Sie auf zusätzliche Ressourcen, Artikel oder Produkte.
Ein visuell ansprechendes Verzeichnis erstellen
Organisieren Sie Informationen in anklickbaren Karten für eine einfache Navigation.
Benutzererfahrung verbessern Bieten Sie eine klare und interaktive Möglichkeit, Benutzer durch Ihre Inhalte zu führen.
So erstellen Sie ein Link Grid
Geben Sie / ein, um das Menü Archbee-Block zu öffnen
Suchen Sie nach Link-Raster und klicken Sie, um es einzufügen
Wählen Sie aus, wie Sie es erstellen möchten.
Manuelles vs. automatisches Ausfüllen von Link Grid
Während Sie weiterhin Inhalte manuell im Link Grid schreiben, sind die nächsten Schritte:
Header mit Volltonfarbe
Sie können eine Farbe als Header verwenden, um Ihre Karte sichtbarer zu machen. Sie können sogar Farb-Codes verwenden, damit sie zu Ihren Features passen.
Klicken Sie auf die Dropdown-Schaltfläche Kopfzeilentyp 
und wählen Sie Farbe
Klicken Sie auf Farbe ändern und wählen Sie Ihre bevorzugte Farbe aus. Alle vorgenommenen Änderungen werden automatisch gespeichert.
Bild-Header
Sie können ein Bild als Header verwenden, um den Inhalt innerhalb der Karte zu beschreiben und sie optisch ansprechender zu gestalten.
Klicken Sie auf die Dropdown-Schaltfläche Kopfzeilentyp und wählen Sie Bild
Klicken Sie auf die Schaltfläche Bild hinzufügen
Wählen Sie Ihr Bild aus. Alle vorgenommenen Änderungen werden automatisch gespeichert.
Layout-Optionen
Elemente pro Zeile – steuert, wie viele Elemente in jeder Zeile angezeigt werden:
- 3 Elemente pro Zeile
- 2 Elemente pro Zeile
- 1 Element pro Zeile
Bildleitfaden
Um sicherzustellen, dass Ihre Inhalte korrekt angezeigt werden, empfehlen wir, ein Bild mit einer Höhe von 480px und einer Breite von 1324px zu erstellen. Wenn Sie der untenstehenden Leitfaden für den sichtbaren Bereich folgen, können Sie sicherstellen, dass Ihre Inhalte nicht abgeschnitten werden.
Leitfaden für den sichtbaren Bereich
Das Hauptbild hat Abmessungen von 480px Höhe und 1324px Breite.
Im Fall von 3 Link-Raster pro Zeile beträgt der sichtbare Bereich 480px in der Höhe und 860px in der Breite. Dieser sichtbare Bereich wird innerhalb der Hauptabmessungen zentriert. Bitte sehen Sie sich das folgende Bild für eine visuelle Darstellung an:
Zur Verdeutlichung: Der primäre Inhalt oder das Logo sollte in diesem vorgesehenen Bereich positioniert werden.
Nachfolgend finden Sie eine Live-Demo, wie das Titelbild aussieht und wie es sich verhält.
Markdown
So erstellen Sie mithilfe von Markdown-Code einen Tab in Ihrem Dokument:
Erstellen Sie das Link Grid Beginnen Sie mit der Zeile ::::link-array.
Fügen Sie eine Link-Karte hinzu Jeder Inhalt des Link Grid befindet sich zwischen den Markierungen :::link-array-item und :::.
Wählen Sie den headerType Sie haben zwei Optionen für Ihren Header:
- BILD: Dadurch wird ein Bild als Hintergrund Ihres Headers angezeigt.
- FARBE: Dadurch können Sie eine Vollfarbe für Ihren Header verwenden.
Fügen Sie das entsprechende Attribut hinzu
Für BILD-Header:
- Fügen Sie die Bild-URL als Wert für das Attribut headerImage hinzu.
- Beispiel: headerImage="https://placehold.co/600x400")
Für FARBE-Header:
- Definieren Sie die gewünschte Farbe mithilfe eines Hex-Codes für das Attribut headerColor.
- Beispiel: headerColor="#ff00FF"
Fügen Sie Inhalt innerhalb Ihrer Link-Karte hinzu.
🚨 Achtung!
Wenn Sie die Syntax mit dreifachem Doppelpunkt (:::) verwenden, um ein verschachteltes Markdown-Element zu erstellen, stellen Sie sicher, dass jedes übergeordnete Element darüber ebenfalls einen zusätzlichen Doppelpunkt (:) vor seinem öffnenden dreifachen Doppelpunkt hat.
## Link Array - Example
::::link-array
:::link-array-item{headerType="IMAGE" headerImage="https://placehold.co/600x400"}
- list item 1
- list item 2
:::
:::link-array-item{headerType="COLOR" headerColor="#ff00FF"}
- [ ] unchecked list box
- [x] checked list box
:::
::::Hier ist das Ergebnis:
- Listenelement 1
- Listenelement 2
nicht markiertes Kontrollkästchen
markiertes Kontrollkästchen
Sehen Sie sich die Seite Markdown-Verknüpfungen verwenden an, um weitere Markdown-Verknüpfungen für andere Blöcke zu sehen.
Beispiele
Beispiele? Für ein Link Grid? Das ist, als würde man Wasser im Ozean suchen. Sie können ihnen nicht entgehen. Unsere Dokumentation ist voll davon! Auf dieser Seite gibt es 8 davon, plus Bilder.
Benutzerdefiniertes CSS
Während unserer umfangreichen Erfahrung haben wir uns darauf konzentriert, Kunden dabei zu helfen, ihre Dokumentation entsprechend ihren individuellen Vorlieben zu personalisieren. Darüber hinaus haben wir wertvolle Unterstützung angeboten, von der wir glauben, dass sie Ihnen ebenfalls dabei helfen wird, außergewöhnliche Dokumentation für Ihr Produkt zu erstellen.
Link am unteren Rand fixieren
Fixieren Sie Ihre Links innerhalb des Link Grid am unteren Rand der Karte.
<style>
.ab-link-block-content-wrap .ab-link {
position: absolute;
bottom: 0;
}
</style>
Andere Blöcke finden
Entdecken Sie neue Möglichkeiten und Blöcke, um beeindruckende und funktionale Dokumentationsseiten zu erstellen.
Benötigen Sie Hilfe? ⬇️
Verwenden Sie die blaue Chat-Blase unten rechts.
Oder probieren Sie KI-Chat (über das Suchfeld) für schnelle Antworten aus.
Ihre Meinung ist wichtig
Verwenden Sie das untenstehende Feedback-Formular anonym.
Oder stellen Sie eine Frage im Q&A-Bereich und unser Team oder die AI wird Ihnen eine Lösung geben.