Linkraster
Link Grid ist ein Element, das die visuelle Attraktivität einer Karte mit der Funktionalität eines anklickbaren Elements kombiniert.
Es ist perfekt, um wichtige Informationen hervorzuheben oder zugehörige Ressourcen zu präsentieren.
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 optisch ansprechendes Verzeichnis erstellen
Organisieren Sie Informationen in anklickbaren Karten für eine einfache Navigation.
Benutzererlebnis verbessern Bieten Sie eine klare und interaktive Möglichkeit, Benutzer durch Ihre Inhalte zu führen.
Wie Sie ein Link Grid erstellen
Geben Sie / ein, um das Archbee Block-Menü zu öffnen
Suchen Sie nach Linkraster und klicken Sie, um es einzufügen
Wählen Sie aus, wie Sie es erstellen möchten.
Manuelles vs. automatisches Ausfüllen eines Link Grid
Wenn Sie weiterhin Inhalte manuell im Link Grid schreiben, sind die nächsten Schritte:
Einfarbiger Header
Sie können eine Farbe als Header verwenden, um Ihre Karte besser sichtbar zu machen. Sie können sogar Farbcode verwenden, um Ihre Funktionen abzustimmen.
Klicken Sie auf die Header‑TYP
Dropdown-Schaltfläche und wählen Sie Farbe
Klicken Sie auf die Farbe ändernund 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 es optisch ansprechender zu gestalten.
Klicken Sie auf die Header‑TYP Dropdown-Schaltfläche und wählen Sie Bild
Klicken Sie auf die Bild Hinzufügen Schaltfläche
Wählen Sie Ihr Bild aus. Alle vorgenommenen Änderungen werden automatisch gespeichert.
Layout-Optionen
Artikel pro Zeile- steuern Sie, wie viele Elemente in jeder Zeile angezeigt werden:
- 3 Elemente pro Zeile
- 2 Elemente pro Zeile
- 1 Element pro Zeile
Bildanleitung
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. Durch Befolgen der untenstehenden sichtbare Bereichsanleitung können Sie sicherstellen, dass Ihre Inhalte nicht abgeschnitten werden.
Leitfaden für sichtbaren Bereich
Das Hauptbild hat Abmessungen von 480px Höhe und 1324px Breite.
Wenn 3 Link-Raster pro Reihe verwendet werden, 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 die folgende Abbildung zur Veranschaulichung an:
Zur Klarstellung sollte der Hauptinhalt oder das Logo in diesem vorgesehenen Bereich positioniert werden.
Unten finden Sie eine Live-Demo, wie das Titelbild aussieht und wie es sich verhält.
Markdown
So erstellen Sie einen Tab in Ihrem Dokument mithilfe von Markdown-Code:
Das Link Grid erstellen Beginnen Sie mit der Zeile ::::link-array.
Eine Link-Karte hinzufügen Jeder Link-Grid-Inhalt steht zwischen den Markern :::link-array-item und :::.
Wählen Sie den Kopfzeilentyp Sie haben zwei Optionen für Ihren Header:
- Bild: Dies zeigt ein Bild als Header-Hintergrund an.
- FARBE: Damit können Sie eine Vollfarbe für Ihren Header verwenden.
Das passende Attribut hinzufügen
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 in Ihre Link-Karte ein.
🚨 Achtung!
Wenn Sie die Triple-Colon-Syntax (:::) 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 Triple-Colon enthält.
## 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:
- Listeneintrag 1
- Listeneintrag 2
Nicht angekreuztes Kontrollkästchen
Angekreuztes Kontrollkästchen
Besuchen Sie die Seite Markdown-Verknüpfungen verwenden für weitere Markdown-Verknüpfungen für andere Blöcke.
Beispiele
Beispiele? Für ein Link Grid? Das ist wie Wasser im Ozean finden. Man kann es nicht vermeiden. Unsere Dokumentation ist voll davon! Auf dieser Seite gibt es 8 davon, plus Bilder.
Custom CSS
Im Laufe unserer umfangreichen Erfahrung haben wir Kunden stets dabei unterstützt, ihre Dokumentation nach ihren individuellen Vorlieben zu personalisieren. Zusätzlich haben wir wertvolle Unterstützung angeboten, die auch Ihnen dabei helfen wird, herausragende Dokumentation für Ihr Produkt zu erstellen.
Link unten fixieren
Setzen Sie Ihre Links innerhalb des Link Grids so, dass sie am unteren Rand der Karte fixiert sind.
<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.
Brauchen Sie Hilfe? ⬇️
Verwenden Sie die blaue Chat-Blase in der unteren rechten Ecke.
Oder probieren Sie den AI-Chat (aus der Suchleiste) für schnelle Antworten.
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 KI wird Ihnen eine Lösung geben.