Cuadrícula de enlaces
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
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 la información en tarjetas en las que se puede hacer clic para facilitar la navegación.
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
Escriba / para abrir el menú Bloque de Archbee
Busque Cuadrícula de enlaces y haga clic para insertarlo
Elija cómo desea crearlo.
Link Grid Manual vs. Auto-fill
A medida que continúe escribiendo contenido manualmente en Link Grid, los siguientes pasos son:
Agregue su contenido.
Puede diseñar el contenido como desee usando el Menú WYSIWYG o incluso insertar otros bloques, como:
- Encabezados
- Listas
- Callout
- Archivo
- Imagen
- Video
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.
Haga clic en el Tipo de encabezado
botón desplegable y seleccione Color
Haga clic en Cambiar colory seleccione su color preferido. Cualquier cambio realizado se guardará automáticamente.
Encabezado de imagen
Puede usar una imagen como encabezado para describir el contenido dentro de la tarjeta y hacerlo más estéticamente agradable.
Haga clic en el Tipo de encabezado botón desplegable y seleccione Imagen
Haga clic en Agregar imagen botón
Elija su imagen. Cualquier cambio realizado se guardará automáticamente.
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
Guía de Imágenes
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 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.
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:
Para aclarar, el contenido principal o el logotipo deben colocarse en esta área designada.
A continuación, encontrará una demostración en vivo de cómo se ve la imagen de portada y su comportamiento.
Markdown
Aquí tiene cómo crear una pestaña en su documento usando código markdown:
Crear la cuadrícula de enlaces Comience con la línea ::::link-array.
Agregar una tarjeta de enlace Cada contenido de Link Grid va entre los marcadores :::link-array-item y :::.
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.
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"
Agregue contenido dentro de su tarjeta de enlace.
🚨 ¡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.
## 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 sin marcar
casilla marcada
Consulte la página Usar atajos de Markdown 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.
Fijar enlace en la parte inferior
Fije sus enlaces dentro del Link Grid para que permanezcan pegados en la parte inferior de la tarjeta.
<style>
.ab-link-block-content-wrap .ab-link {
position: absolute;
bottom: 0;
}
</style>
Encuentre otros bloques
Descubra nuevas formas y bloques para crear páginas de documentación impresionantes y funcionales.
¿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.
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.