--- title: Cuadrícula de enlaces slug: docs/es/cuadricula-de-enlaces createdAt: 2024-07-24T07:41:15.178Z --- ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/7Swb-lpQWhWia7P0JwhzK-20260108-105119.png) Link Grid es un elemento que combina el atractivo visual de una tarjeta con la funcionalidad de un elemento en el que se puede hacer clic. Es perfecto para **resaltar** información importante o **mostrar** recursos relacionados. ## Cuándo usarlo ::::LinkArray{contentSource="CUSTOM" itemsPerRow="2"} :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-star"} **Resaltar información clave** Cree tarjetas llamativas para anuncios o actualizaciones importantes. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-file-pen"} **Mostrar contenido relacionado** Enlace a recursos adicionales, artículos o productos. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-folder-tree"} **Crear un directorio visualmente atractivo** Organice la información en tarjetas en las que se puede hacer clic para facilitar la navegación. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-arrow-pointer"} **Mejorar la experiencia del usuario** Proporcione una forma clara e interactiva de guiar a los usuarios a través de su contenido. ::: :::: ## Cómo crear un Link Grid ::::WorkflowBlock :::WorkflowBlockItem Escriba `/` para abrir el menú **Bloque de Archbee** ::: :::WorkflowBlockItem Busque **Cuadrícula de enlaces** y haga clic para insertarlo ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/gTvRvhMyIEa6ZAEK_XWgP-20260107-112506.png) ::: :::WorkflowBlockItem Elija cómo desea crearlo. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/9sjCskLUQLroEBt3GbBs--20260128-131317.png) ::: :::: ## Link Grid Manual vs. Auto-fill ::::::::Tabs :::::::Tab{title="Manual Link Grid"} A medida que continúe escribiendo contenido manualmente en Link Grid, los siguientes pasos son: ::::::WorkflowBlock :::::WorkflowBlockItem Elija un tipo de encabezado. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/NzrVaqt42ZCwPD859wbEQ-20260107-112732.png) Tiene tres opciones: - Ninguna - [Color](docId\:pESqvrrUdOhU5KV4dL3uF) - [Imagen](docId\:pESqvrrUdOhU5KV4dL3uF) ::::LinkArray{contentSource="CUSTOM" customOrder="foiWGU1sKYkQpO3puSCc-,9bGqAthPinIWIzN1JDG9a,KN_Vi2koMOHat6p3NwJmV"} :::LinkArrayItem **Ningún** encabezado ::: :::LinkArrayItem{headerType="COLOR" headerColor="#2166ae"} **Color** encabezado ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/P2zVL7JMh-OAL-9OuY4WL-wzfTIiPQpIcLwzpDfNvIY-20240805-143427.png"} **Imagen** encabezado ::: :::: ::::: :::WorkflowBlockItem Agregue su contenido. Puede diseñar el contenido como desee usando el [Menú WYSIWYG](#) o incluso insertar otros bloques, como: - [Encabezados](docId\:x4riVaxqQbCBjTnqeWqic) - [Encabezados expandibles](docId\:RLgly5f4flqxrRAhDjDwE) - [Listas](docId\:Iv2V1jy2ZEWbeh9Md8rae) - [Callout](docId\:Ni_uilT4CntVomYJLkRXy) - [Separador horizontal](docId\:qUBUpddaFkwdpopx-COFH) - [Archivo](docId\:qO7K2fS16-H9MPkRoLOj4) - [Imagen](docId\:ZZQ2diclLTWyF3ETR6mid) - [Video](docId:4vX_Rm34eSQrWWXtQazgj) ::: :::::: ### Encabezado de color sólido Puede usar un color como encabezado para hacer que su tarjeta sea más visible. Incluso puede usar colores de código para que coincidan con sus funciones. ::::WorkflowBlock :::WorkflowBlockItem Haga clic en el **Tipo de encabezado**:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} botón desplegable y seleccione **Color** ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/KGqONH1WBlDKfHrOqsxKx-20260113-122010.png" size="80" width="1806" height="962" position="center" showCaption="false"} ::: :::WorkflowBlockItem Haga clic en **Cambiar color**y seleccione su color preferido. Cualquier cambio realizado se guardará automáticamente. ::: :::: ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/i2rKx8uA91waVM4dtoDrf-20260127-193752.png" size="70" width="1688" height="1324" position="center" showCaption="false"} ### Encabezado de imagen Puede usar una imagen como encabezado para describir el contenido dentro de la tarjeta y hacerlo más estéticamente agradable. ::::WorkflowBlock :::WorkflowBlockItem Haga clic en el **Tipo de encabezado**:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} botón desplegable y seleccione **Imagen** ::: :::WorkflowBlockItem Haga clic en** Agregar imagen **botón ::: :::WorkflowBlockItem Elija su imagen. Cualquier cambio realizado se guardará automáticamente. ::: :::: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WeWMQu8KeXdNOMW30NHTW_image.png) ### Opciones de diseño **Elementos por fila **- controle cuántos elementos aparecen en cada fila: - 3 elementos por fila - 2 elementos por fila - 1 elemento por fila ::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="Auto-fill Link Grid"} Ahorre tiempo y mantenga la estructura de su documentación sincronizada completando automáticamente una **Cuadrícula de enlaces**con documentos secundarios basados en un elemento principal seleccionado. Cada elemento se muestra como un enlace o tarjeta en la que se puede hacer clic y que navega al documento correspondiente. ### Elija una fuente Elegir una fuente es el primer paso y determina qué documentos aparecerán en el Link Grid. Seleccione de dónde debe obtener documentos el Link Grid: - **Cualquier documento principal en el espacio** – Elija un documento o categoría específico como fuente. - **Documento principal actual** – Use el principal de la página que está editando. El Link Grid incluirá todos los documentos directamente bajo el principal seleccionado. No se incluirán borradores, documentos ocultos, con permisos restringidos ni niveles más profundos. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/AkJ4oac_KRwvCY69ODKDb-20260128-142724.png) ### Ejemplo A continuación se muestra un ejemplo de nuestra documentación donde se utiliza Link Grid Auto-fill en [Ejemplos de Inserción](docId\:G-ZoaKa5Gm-61gQNjdl5F). ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DDWZix1eIFtrffmTaLXFE-20260128-173556.png) ### Opciones de diseño Estas opciones le permiten controlar la estructura, el orden y la apariencia visual de su Link Grid. Después de seleccionar una fuente, personalice cómo se muestra el Link Grid. **Elementos por fila **- controle cuántos elementos aparecen en cada fila: - 3 elementos por fila - 2 elementos por fila - 1 elemento por fila ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" showCaption="false"} **Opciones de ordenación** - elija cómo se ordenan los elementos: - **Predeterminado** – Coincide con el orden del árbol del portal. - **Manual** – Arrastre y suelte elementos para definir un orden personalizado. - **Alfabético** – Ordenar A–Z o Z–A. - **Fecha de creación** – Más reciente primero o más antiguo primero. ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Uxi0o0I8YiE8zcZBIfLHG-20260128-174445.png" size="80" width="1920" height="1160" position="center" showCaption="false"} **Estilo de visualización** - elija cómo aparecen los elementos en su documentación: - **Enlace** – Una lista compacta, ideal para una gran cantidad de documentos. - **Tarjeta** – Un diseño visual con imagen, título y descripción. ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![Vista de enlace de los elementos de Link Grid](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/S2ki6R4zi0cuGW5CimEHP-20260128-175053.png "Vista de enlace de los elementos de Link Grid") ::: :::VerticalSplitItem ![Vista de tarjeta de los elementos de Link Grid](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DretKScZcyN1zDyMBsTrm-20260128-175110.png "Vista de tarjeta de los elementos de Link Grid") ::: :::: :::hint{type="info"} ### Detalles de la tarjeta Para la visualización de **Tarjeta** , la imagen, el título y la descripción se obtienen automáticamente de los [Controles de meta SEO](docId\:vweNVpuPM8bHCg6zehUOY) del documento. Usted puede editar estos valores directamente en las configuraciones de cada documento en **Controles meta de SEO**. Consulte la documentación de SEO Meta Controls para aprender a actualizar imágenes, títulos y descripciones. ::: ::::: :::::::: *** ## Guía de Imágenes ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/fFVWmk1gxX-tjDfg6Z-kr_image-guide.png "Guía de Imágenes para Link Grid") Para asegurarse de que su contenido se muestre correctamente, recomendamos crear una imagen con una **altura de 480px** y un **ancho de 1324px**. Al seguir la [guía de área visible](docId\:pESqvrrUdOhU5KV4dL3uF) a continuación, puede asegurarse de que su contenido no se corte. ### Guía de Área Visible La imagen principal tiene dimensiones de 480px de alto y 1324px de ancho. ::::Tabs :::Tab{title="3 elementos / fila"} En el caso de tener **3 Cuadrículas de Enlaces** por fila, el área visible será de **480px** de **alto** y **860px de ancho**. Esta área visible estará centrada dentro de las dimensiones principales. Consulte la imagen a continuación para una representación visual: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/ypYZ53zBi5kh4s42ErngN_3perrow.png "Área Visible 3 Cuadrículas de Enlaces por fila") ::: :::Tab{title="2 elementos / fila"} Cuando hay **2 Cuadrículas de Enlaces** por fila, el área visible estará determinada por las dimensiones principales. Para una mejor comprensión, consulte la imagen a continuación: ![2 Link Grids per row](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WzWRX9svOFc3oazdOcUGN_2perrow.png "Área Visible 2 Cuadrículas de Enlaces por fila") ::: :::Tab{title="1 elemento / fila"} Cuando solo hay **1 Cuadrícula de Enlaces** por fila, el área visible estará centrada dentro de las dimensiones principales. Específicamente, tendrá un ancho de 1324px y una altura de 234px. Para una mejor comprensión, consulte la imagen a continuación: ![Link Grid per row](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PDlPPdo9SGDIM1fuPndHH_1perrow.png "Área Visible 1 Cuadrícula de Enlaces por fila") ::: :::: :::hint{type="info"} Para aclarar, el contenido principal o el logotipo deben colocarse en esta área designada. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/liJYjYkvJUMwyTyv5TpiX_arealogo.png "posicionamiento del contenido") ::: A continuación, encontrará una demostración en vivo de cómo se ve la imagen de portada y su comportamiento. ::::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 Aquí tiene cómo crear una pestaña en su documento usando código markdown: :::::WorkflowBlock :::WorkflowBlockItem **Crear la cuadrícula de enlaces** Comience con la línea `::::link-array`. ::: :::WorkflowBlockItem **Agregar una tarjeta de enlace** Cada contenido de Link Grid va entre los marcadores `:::link-array-item` y `:::`. ::: :::WorkflowBlockItem **Elija el `headerType`** Tiene dos opciones para su encabezado: - **`IMAGEN`:** Esto muestra una imagen como fondo del encabezado. - **`Color`:** Esto le permite usar un color sólido para su encabezado. ::: :::WorkflowBlockItem **Agregar el atributo correspondiente** Para encabezados `IMAGEN`: - Agregue la URL de la imagen como valor para el atributo `headerImage`. - Ejemplo: `headerImage="https://placehold.co/600x400")` Para encabezados `Color`: - Defina el color deseado usando un código hex para el atributo `headerColor`. - Ejemplo: `headerColor="#ff00FF"` ::: ::::WorkflowBlockItem Agregue contenido dentro de su tarjeta de enlace. :::hint{type="warning"} **🚨 ¡Atención!** Cuando use la sintaxis de triple dos puntos (`:::`) para crear un elemento anidado de markdown, asegúrese de que cada elemento padre por encima también tenga un dos puntos adicional (`:`) antes de su apertura con triple dos puntos. ::: :::: ::::: ```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 ::: :::: ``` Aquí está el resultado: ::::LinkArray{attributes="{}" contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/2YO-Z1cATRi0OGk8yZ99Y-20260127-192519.png"} - elemento de lista 1 - elemento de lista 2 ::: :::LinkArrayItem{attributes="{"headerType":"COLOR","headerColor":"#ff00FF"}" headerType="COLOR" headerColor="#ff00FF"} - [ ] casilla sin marcar - [x] casilla marcada ::: :::: Consulte la página [Usar atajos de Markdown](docId\:TTIZhu7Zl1J1Ii-Nsr2gq) para ver más atajos de markdown para otros bloques. ## Ejemplos ¿Ejemplos? ¿Para una Link Grid? Es como encontrar agua en el océano. No se puede evitar. ¡Nuestros documentos están llenos de ellos! En esta página hay 8, además de imágenes. ## CSS personalizado A lo largo de nuestra amplia experiencia, nos hemos dedicado a ayudar a los clientes a personalizar su documentación según sus preferencias únicas. Además, hemos ofrecido asistencia valiosa que creemos que también será de gran beneficio para usted al crear una documentación excepcional para su producto. [Vea cómo funciona CSS personalizado](docId\:NKOStykm9MNb75x6HWABH) ### Fijar enlace en la parte inferior Fije sus enlaces dentro del Link Grid para que permanezcan pegados en la parte inferior de la tarjeta. ```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"} ** Encuentre otros bloques** Descubra nuevas formas y bloques para crear páginas de documentación impresionantes y funcionales. [Revise todos los bloques](docId\:IzBUJGUT0bOmcbZ5hFQNX) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} :FontAwesome[]{icon="fa-solid fa-headset"}** ¿Necesita ayuda? ⬇️** Use la **burbuja** **de chat azul **desde la esquina inferior derecha. O intente **Chat de IA** (desde la barra de búsqueda) para obtener respuestas rápidas. ::: :::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"}** Su opinión importa** Use el siguiente formulario de comentarios, de forma anónima. O haga una pregunta en la **sección de Preguntas y Respuestas** y nuestro equipo o la IA le dará una solución. ::: ::::