Cuadrícula de enlaces
Link Grid es un elemento que combina el atractivo visual de una tarjeta con la funcionalidad de un elemento clicable.
Es perfecto para resaltar información importante o mostrar recursos relacionados.
Cuándo usarlo
Resaltar información clave
Cree tarjetas llamativas para anuncios o actualizaciones importantes.
Mostrar contenido relacionado Enlace a recursos adicionales, artículos o productos.
Crear un directorio visualmente atractivo
Organice información en tarjetas clicables para una navegación sencilla.
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 una cuadrícula de enlaces
Escribe / para abrir el menú Archbee Block
Busca Link Grid y haz clic para insertarlo
Elige cómo quieres crearlo.
Cuadrícula de enlaces manual vs. auto-relleno
As you continue to write content manually in Link Grid, the next steps are:
Add your content.
You can style the content however you like using the WYSIWYG Menu or even insert other blocks, like:
- Encabezados
- Listas
- Callout
- Archivo
- Imagen
- Video
Solid color header
You can use a color as the header to make your card more visible. You can even use code colors to match your features.
Click on the Header Type 
dropdown button and select Color
Click on the Change Color and select your preferred color. Any changes made will be saved automatically.
Image header
You can use an image as the header to describe the content inside the card and make it more aesthetically pleasing.
Click on the Header Type dropdown button and select Image
Click on the Add Image button
Choose your image. Any changes made will be saved automatically.
Layout options
Items per row - control how many items appear on each row:
- 3 items per row
- 2 items per row
- 1 item per row
Guía de imágenes
Para asegurarte de que tu contenido se muestre correctamente, recomendamos crear una imagen con una altura de 480px y un ancho de 1324px. Siguiendo la guía de área visible a continuación, puedes asegurarte de que tu contenido no se corte.
Guía de área visible
La imagen principal tiene dimensiones de 480px de altura y 1324px de ancho.
En el caso de tener 3 Link Grids por fila, el área visible será de 480px de alto y 860px de ancho. Esta área visible estará centrada dentro de las dimensiones principales. Por favor, consulta la imagen a continuación para una representación visual:
Para aclarar, el contenido principal o logo debe colocarse en esta área designada.
A continuación encontrarás una demostración en vivo de cómo se ve la imagen de portada y su comportamiento.
Markdown
Aquí se muestra cómo crear una pestaña en su documento utilizando código markdown:
Crear la cuadrícula de enlaces Comienza con la línea ::::link-array.
Agregar una tarjeta de enlace Cada contenido de la cuadrícula de enlaces va entre :::link-array-item y ::: marcadores.
Elige el headerType Tienes dos opciones para tu encabezado:
- IMAGE: Esto muestra una imagen como fondo de tu encabezado.
- COLOR: Esto te permite usar un color sólido para tu encabezado.
Agrega el atributo apropiado
Para IMAGE encabezados:
- Agrega la URL de la imagen como valor para el atributo headerImage.
- Ejemplo: headerImage="https://placehold.co/600x400")
Para COLOR encabezados:
- Define el color deseado usando un código hex para el atributo headerColor.
- Ejemplo: headerColor="#ff00FF"
Agrega contenido dentro de tu tarjeta de enlace.
🚨 ¡Atención!
Cuando uses la sintaxis de triple dos puntos (:::) para crear un elemento markdown anidado, asegúrate de que cada elemento padre por encima también tenga un dos puntos adicional (:) antes de su triple dos puntos de apertura.
## 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:
- elemento de lista 1
- elemento de lista 2
casilla de lista sin marcar
casilla de lista marcada
Consulta la página Usar atajos de Markdown para ver más atajos de Markdown para otros bloques.
Ejemplos
¿Ejemplos? ¿Para una cuadrícula de enlaces? Es como encontrar agua en el océano. No puedes evitarlo. ¡Nuestros documentos están llenos de ellos! En esta página hay 8 de ellos, 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 también será de gran beneficio para ti al crear documentación excepcional para tu producto.
Configurar enlace para que sea fijo en la parte inferior
Configura tus enlaces dentro de la cuadrícula de enlaces para que permanezcan fijos en la parte inferior de la tarjeta.
<style>
.ab-link-block-content-wrap .ab-link {
position: absolute;
bottom: 0;
}
</style>
Encuentra otros bloques
Descubre nuevas formas y bloques para crear páginas de documentación impresionantes y funcionales.
¿Necesitas ayuda? ⬇️
Usa la burbuja de chat azul en la esquina inferior derecha.
O prueba el Chat de IA (desde la barra de búsqueda) para respuestas rápidas.
Tu opinión importa
Usa el formulario de comentarios a continuación, de forma anónima.
O haz una pregunta en la sección de Preguntas y Respuestas y nuestro equipo o la IA te dará una solución.