--- title: Linkraster slug: docs/de/est5-linkraster createdAt: 2024-07-24T07:41:15.178Z --- ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/7Swb-lpQWhWia7P0JwhzK-20260108-105119.png) 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 ::::LinkArray{contentSource="CUSTOM" itemsPerRow="2"} :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-star"} **Wichtige Informationen hervorheben** Erstellen Sie aufmerksamkeitsstarke Karten für wichtige Ankündigungen oder Updates. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-file-pen"} **Verwandte Inhalte präsentieren** Verlinken Sie auf zusätzliche Ressourcen, Artikel oder Produkte. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-folder-tree"} **Ein optisch ansprechendes Verzeichnis erstellen** Organisieren Sie Informationen in anklickbaren Karten für eine einfache Navigation. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-arrow-pointer"} **Benutzererlebnis verbessern** Bieten Sie eine klare und interaktive Möglichkeit, Benutzer durch Ihre Inhalte zu führen. ::: :::: ## Wie Sie ein Link Grid erstellen ::::WorkflowBlock :::WorkflowBlockItem Geben Sie `/` ein, um das **Archbee Block**-Menü zu öffnen ::: :::WorkflowBlockItem Suchen Sie nach **Linkraster** und klicken Sie, um es einzufügen ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/gTvRvhMyIEa6ZAEK_XWgP-20260107-112506.png) ::: :::WorkflowBlockItem Wählen Sie aus, wie Sie es erstellen möchten. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/9sjCskLUQLroEBt3GbBs--20260128-131317.png) ::: :::: ## Manuelles vs. automatisches Ausfüllen eines Link Grid ::::::::Tabs :::::::Tab{title="Manuelles Link Grid"} Wenn Sie weiterhin Inhalte manuell im Link Grid schreiben, sind die nächsten Schritte: ::::::WorkflowBlock :::::WorkflowBlockItem Wählen Sie einen Header-Typ aus. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/NzrVaqt42ZCwPD859wbEQ-20260107-112732.png) Sie haben drei Optionen: - Keine - [Farbe](docId\:est5Bkk-FA7xngDKFu4i2) - [Bild](docId\:est5Bkk-FA7xngDKFu4i2) ::::LinkArray{contentSource="CUSTOM" customOrder="foiWGU1sKYkQpO3puSCc-,9bGqAthPinIWIzN1JDG9a,KN_Vi2koMOHat6p3NwJmV"} :::LinkArrayItem **Kein** Header ::: :::LinkArrayItem{headerType="COLOR" headerColor="#2166ae"} **Farb** Header ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/P2zVL7JMh-OAL-9OuY4WL-wzfTIiPQpIcLwzpDfNvIY-20240805-143427.png"} **Bild** Header ::: :::: ::::: :::WorkflowBlockItem Fügen Sie Ihre Inhalte hinzu. Sie können die Inhalte beliebig gestalten, indem Sie das [WYSIWYG-Menü](#) verwenden oder sogar andere Blöcke einfügen, wie: - [Überschriften](docId\:KxU0tkuer8cfwWPLRrlpV) - [Erweiterbare Überschriften](docId\:BOkvJRwVCzFkQdzYgRVMi) - [Listen](docId\:bw9guZCpRJIeT8Jz1RTy1) - [Hinweis](docId\:hCfLA_aIEo_Xeo1u8xQT5) - [Horizontaler Trenner](docId\:hOmRbr1lBt4LWMc5-ZmX2) - [Datei](docId\:ZZXZpE1mWwgaCGPbr5rcC) - [Image](docId\:DMALxhZZ_dTYx-ophz5ah) - [Video](docId\:Vs6ynBxofG39F-KodHKHJ) ::: :::::: ### 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. ::::WorkflowBlock :::WorkflowBlockItem Klicken Sie auf die **Header‑TYP**:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} Dropdown-Schaltfläche und wählen Sie **Farbe** ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/KGqONH1WBlDKfHrOqsxKx-20260113-122010.png" size="80" width="1806" height="962" position="center" showCaption="false"} ::: :::WorkflowBlockItem Klicken Sie auf die **Farbe ändern**und wählen Sie Ihre bevorzugte Farbe aus. Alle vorgenommenen Änderungen werden automatisch gespeichert. ::: :::: ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/i2rKx8uA91waVM4dtoDrf-20260127-193752.png" size="70" width="1688" height="1324" position="center" showCaption="false"} ### Bild-Header Sie können ein Bild als Header verwenden, um den Inhalt innerhalb der Karte zu beschreiben und es optisch ansprechender zu gestalten. ::::WorkflowBlock :::WorkflowBlockItem Klicken Sie auf die **Header‑TYP**:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} Dropdown-Schaltfläche und wählen Sie **Bild** ::: :::WorkflowBlockItem Klicken Sie auf die** Bild Hinzufügen **Schaltfläche ::: :::WorkflowBlockItem Wählen Sie Ihr Bild aus. Alle vorgenommenen Änderungen werden automatisch gespeichert. ::: :::: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WeWMQu8KeXdNOMW30NHTW_image.png) ### 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 ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" showCaption="false"} ::::::: :::::Tab{title="Automatisches Ausfüllen des Link Grid"} Sparen Sie Zeit und halten Sie Ihre Dokumentationsstruktur synchron, indem Sie ein **Linkraster**automatisch mit untergeordneten Dokumenten basierend auf einem ausgewählten übergeordneten Dokument füllen. Jeder Eintrag wird als anklickbarer Link oder Karte dargestellt, die zum entsprechenden Dokument navigiert. ### Quelle auswählen Die Auswahl einer Quelle ist der erste Schritt und bestimmt, welche Dokumente im Link Grid erscheinen. Wählen Sie aus, woher das Link Grid Dokumente beziehen soll: - **Beliebiges übergeordnetes Dokument im Space** – Wählen Sie ein bestimmtes Dokument oder eine Kategorie als Quelle aus. - **Aktuelles übergeordnetes Dokument** – Verwenden Sie das übergeordnete Element der Seite, die Sie bearbeiten. Das Link Grid enthält alle Dokumente, die sich direkt unter dem ausgewählten übergeordneten Dokument befinden. Entwürfe, versteckte Dokumente, dokumente mit eingeschränkten Berechtigungen und tiefer verschachtelte Ebenen werden nicht eingeschlossen. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/AkJ4oac_KRwvCY69ODKDb-20260128-142724.png) ### Beispiel Nachfolgend finden Sie ein Beispiel aus unserer Dokumentation, das zeigt, wie Link Grid Auto-fill in [Einbettungsbeispiele](docId\:T9-RkDWXqNWjlOQXRVALp) verwendet wird. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DDWZix1eIFtrffmTaLXFE-20260128-173556.png) ### Layout-Optionen Diese Optionen ermöglichen Ihnen die Kontrolle über Struktur, Reihenfolge und visuelle Darstellung Ihres Link Grid. Nachdem Sie eine Quelle ausgewählt haben, können Sie anpassen, wie das Link Grid angezeigt wird. **Elemente pro Zeile **- legen Sie fest, wie viele Elemente in jeder Zeile erscheinen: - 3 Elemente pro Zeile - 2 Elemente pro Zeile - 1 Element pro Zeile ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" showCaption="false"} **Sortieroptionen** - wählen Sie aus, wie Elemente angeordnet werden: - **Standard** – Entspricht der Reihenfolge im Portalbaum. - **Manuell** – Ziehen Sie Elemente per Drag & Drop, um eine benutzerdefinierte Reihenfolge festzulegen. - **Alphabetisch** – Sortieren von A–Z oder Z–A. - **Erstellungsdatum** – Neueste zuerst oder älteste zuerst. ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Uxi0o0I8YiE8zcZBIfLHG-20260128-174445.png" size="80" width="1920" height="1160" position="center" showCaption="false"} **Anzeigestil** - wählen Sie aus, wie Elemente in Ihrer Dokumentation erscheinen: - **Link** – Eine kompakte Liste, ideal für große Mengen an Dokumenten. - **Karte** – Ein visuelles Layout mit Bild, Titel und Beschreibung. ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![Link view of Link Grid items](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/S2ki6R4zi0cuGW5CimEHP-20260128-175053.png "Link-Ansicht der Link Grid Elemente") ::: :::VerticalSplitItem ![Card view of Link Grid items](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DretKScZcyN1zDyMBsTrm-20260128-175110.png "Kartenansicht der Link Grid Elemente") ::: :::: :::hint{type="info"} ### Kartendetails Für **Karte**-Anzeige werden das Bild, der Titel und die Beschreibung automatisch aus den [SEO-Meta-Steuerung](docId:0eHnxwcL206b40oKwQKhF) des Dokuments übernommen. Sie können diese Werte direkt in den Einstellungen jedes Dokuments unter **SEO‑Meta‑Steuerelemente** bearbeiten. Lesen Sie die Dokumentation zu SEO Meta Controls, um zu erfahren, wie Sie Bilder, Titel und Beschreibungen aktualisieren. ::: ::::: :::::::: *** ## Bildanleitung ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/fFVWmk1gxX-tjDfg6Z-kr_image-guide.png "Bildanleitung für Link Grid") 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](docId\:est5Bkk-FA7xngDKFu4i2) 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. ::::Tabs :::Tab{title="3 Elemente / Reihe"} 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: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/ypYZ53zBi5kh4s42ErngN_3perrow.png "Sichtbarer Bereich 3 Link Grids pro Reihe") ::: :::Tab{title="2 Elemente / Reihe"} Wenn **2 Link‑Raster** pro Reihe verwendet werden, wird der sichtbare Bereich durch die Hauptabmessungen bestimmt. Für ein besseres Verständnis sehen Sie bitte die folgende Abbildung: ![2 Link Grids pro Reihe](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WzWRX9svOFc3oazdOcUGN_2perrow.png "Sichtbarer Bereich 2 Link Grids pro Reihe") ::: :::Tab{title="1 Element / Reihe"} Wenn nur **1-Link-Raster** pro Reihe vorhanden ist, wird der sichtbare Bereich innerhalb der Hauptabmessungen zentriert. Konkret beträgt die Breite 1324px und die Höhe 234px. Für ein besseres Verständnis sehen Sie bitte die folgende Abbildung: ![Link Grid pro Reihe](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PDlPPdo9SGDIM1fuPndHH_1perrow.png "Sichtbarer Bereich 1 Link Grid pro Reihe") ::: :::: :::hint{type="info"} Zur Klarstellung sollte der Hauptinhalt oder das Logo in diesem vorgesehenen Bereich positioniert werden. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/liJYjYkvJUMwyTyv5TpiX_arealogo.png "Inhaltspositionierung") ::: Unten finden Sie eine Live-Demo, wie das Titelbild aussieht und wie es sich verhält. ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/rAFUifPkjwjyC0lbqKM4c_image-guide.png"} ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/pK4P-nlFBux86p-jBYQTu_image-guide.png"} ::: :::: ## Markdown So erstellen Sie einen Tab in Ihrem Dokument mithilfe von Markdown-Code: :::::WorkflowBlock :::WorkflowBlockItem **Das Link Grid erstellen** Beginnen Sie mit der Zeile `::::link-array`. ::: :::WorkflowBlockItem **Eine Link-Karte hinzufügen** Jeder Link-Grid-Inhalt steht zwischen den Markern `:::link-array-item` und `:::`. ::: :::WorkflowBlockItem **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. ::: :::WorkflowBlockItem **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"` ::: ::::WorkflowBlockItem Fügen Sie Inhalt in Ihre Link-Karte ein. :::hint{type="warning"} **🚨 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. ::: :::: ::::: ```markdown ## 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: ::::LinkArray{attributes="{}" contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/2YO-Z1cATRi0OGk8yZ99Y-20260127-192519.png"} - Listeneintrag 1 - Listeneintrag 2 ::: :::LinkArrayItem{attributes="{"headerType":"COLOR","headerColor":"#ff00FF"}" headerType="COLOR" headerColor="#ff00FF"} - [ ] Nicht angekreuztes Kontrollkästchen - [x] Angekreuztes Kontrollkästchen ::: :::: Besuchen Sie die Seite [Markdown-Verknüpfungen verwenden](docId\:YQDXdtOR4KrgqM-gRSm9e) 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. [So funktioniert Custom CSS](docId\:hHtGQ5bJAhDLmeYuCx6ky) ### Link unten fixieren Setzen Sie Ihre Links innerhalb des Link Grids so, dass sie am unteren Rand der Karte fixiert sind. ```css ``` *** ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} :FontAwesome[]{icon="fa-solid fa-cubes"} ** Andere Blöcke finden** Entdecken Sie neue Möglichkeiten und Blöcke, um beeindruckende und funktionale Dokumentationsseiten zu erstellen. [Alle Blöcke ansehen](docId\:QR1fjhMprEujXqqNdqr1-) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} :FontAwesome[]{icon="fa-solid fa-headset"}** 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. ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"} :FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}** 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. ::: ::::