Cuadrícula de enlaces
12 min
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 crea tarjetas llamativas para anuncios o actualizaciones importantes mostrar contenido relacionado enlaza a recursos adicionales, artículos o productos crear un directorio visualmente atractivo organiza la información en tarjetas clicables para una navegación sencilla mejorar la experiencia del usuario proporciona una forma clara e interactiva de guiar a los usuarios a través de tu contenido cómo crear una link grid escribe / para abrir el menú archbee block busca link grid y haz clic para insertarlo elige cómo deseas crearlo link grid manual vs auto‑fill a medida que continúas escribiendo contenido manualmente en link grid, los siguientes pasos son elige un tipo de encabezado tienes tres opciones ninguno color docid\ pesqvrrudohu5kv4dl3uf imagen docid\ pesqvrrudohu5kv4dl3uf ninguno encabezado color encabezado imagen encabezado agrega tu contenido puedes estilizar el contenido como quieras usando el menú wysiwyg o incluso insertar otros bloques, como encabezados docid\ x4rivaxqqbcbjtnqewqic encabezados expandibles docid\ rlgly5f4flqxrrahdjdwe listas docid\ iv2v1jy2zewbeh9md8rae callout docid\ ni uilt4cntvomyjlkrxy divisor horizontal docid\ qubupddafkwdpopx cofh archivo docid\ qo7k2fs16 h9mpkroloj4 imagen docid\ zzq2diclltwyf3etr6mid video docid 4vx rm34esqrwwxtqazgj encabezado de color sólido puedes usar un color como encabezado para hacer tu tarjeta más visible incluso puedes usar colores de código para que coincidan con tus funcionalidades haz clic en el tipo de encabezado botón del menú desplegable y selecciona color haz clic en cambiar color y selecciona tu color preferido cualquier cambio realizado se guardará automáticamente encabezado de imagen puedes usar una imagen como encabezado para describir el contenido dentro de la tarjeta y hacerla más estéticamente atractiva haz clic en el tipo de encabezado botón del menú desplegable y selecciona imagen haz clic en el agregar imagen botón elige tu imagen cualquier cambio realizado se guardará automáticamente opciones de diseño elementos por fila controla cuántos elementos aparecen en cada fila 3 elementos por fila 2 elementos por fila 1 elemento por fila ahorra tiempo y mantén la estructura de tu documentación sincronizada llenando automáticamente un link grid con documentos hijos basados en un padre seleccionado cada elemento se muestra como un enlace o tarjeta clickeable que navega al documento correspondiente elige una fuente elegir una fuente es el primer paso y determina qué documentos aparecerán en el link grid selecciona de dónde debe obtener documentos el link grid cualquier documento padre en el espacio – elige un documento o categoría específica como fuente documento padre actual – usa el padre de la página que estás editando el link grid incluirá todos los documentos directamente bajo el padre seleccionado borradores, documentos ocultos, documentos con permisos restringidos y niveles más profundos no serán incluidos ejemplo a continuación se muestra un ejemplo de nuestra documentación que muestra el auto fill de link grid usado en ejemplos de inserción docid\ g zoaka5gm 61gqnjdl5f opciones de diseño estas opciones te permiten controlar la estructura, el orden y la apariencia visual de tu link grid después de seleccionar una fuente, personaliza cómo se muestra el link grid elementos por fila controla cuántos elementos aparecen en cada fila 3 elementos por fila 2 elementos por fila 1 elemento por fila opciones de ordenamiento elige cómo se ordenan los elementos predeterminado – coincide con el orden del árbol del portal manual – arrastra y suelta 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 estilo de visualización elige cómo aparecen los elementos en tu documentación enlace – una lista compacta, ideal para grandes cantidades de documentos tarjeta – un diseño visual con imagen, título y descripción vista de enlace de elementos de link gridvista de tarjeta de elementos de link grid detalles de la tarjeta para la visualización en tarjeta , la imagen, el título y la descripción se obtienen automáticamente de los controles de meta seo docid\ vwenvpupm8bhcg6zehuoy del documento puedes editar estos valores directamente en la configuración de cada documento bajo controles de seo meta consulta la documentación de controles de seo meta para aprender a actualizar imágenes, títulos y descripciones guía de imágenes para asegurar 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 docid\ pesqvrrudohu5kv4dl3uf a continuación, puedes asegurarte de que tu contenido no se corte guía de área visible la imagen principal tiene unas dimensiones de 480px de altura 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 por favor, consulta la imagen a continuación para una representación visual cuando hay 2 cuadrículas de enlaces por fila, el área visible estará determinada por las dimensiones principales para proporcionar una mejor comprensión, consulta la imagen a continuación 2 cuadrículas de enlaces por 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 un alto de 234px para una mejor comprensión, consulta la imagen a continuación cuadrícula de enlaces por fila para aclarar, el contenido principal o el logotipo deben 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 imagen esto muestra una imagen como fondo del encabezado color esto permite usar un color sólido para el encabezado agregar el atributo correspondiente para encabezados de imagen agrega la url de la imagen como valor para el atributo headerimage ejemplo headerimage="https //placehold co/600x400") para encabezados de color 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 tres puntos ( ) para crear un elemento markdown anidado, asegúrate de que cada elemento padre por encima también tenga un punto adicional ( ) antes de su triple punto 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 sin marcar casilla marcada consulta la usar atajos de markdown docid\ ttizhu7zl1j1ii nsr2gq página 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, 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 ver cómo funciona css personalizado docid\ nkostykm9mnb75x6hwabh configurar el 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> encontrar otros bloques descubre nuevas formas y bloques para crear páginas de documentación impresionantes y funcionales revisa todos los bloques docid\ izbujgut0bomcbz5hfqnx ¿necesitas ayuda? ⬇️ usa la burbuja de chat azul en la esquina inferior derecha o prueba chat de ia (desde la barra de búsqueda) para respuestas rápidas tu opinión importa usa el siguiente formulario de comentarios, 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
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.