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 choose a header type you have tree options none color docid\ y93y0 ixfzqmxwqaigkyw image docid\ y93y0 ixfzqmxwqaigkyw none header color header image header add your content you can style the content however you like using the wysiwyg menu or even insert other blocks, like headings docid\ d04ktoe02htji6sktrgxh expandable headings docid\ osm3b8icfkpdla51nlnjt lists docid\ atvh9 hhorlirbzn7rv7d callout docid\ ik6fk0pqabk9omuh2cu5h horizontal divider docid\ vkc xtnpg2oid2v5dbitp file docid\ ztnuxrk1uvz1dds3x mnj image docid\ svzsof zzwetmdeluvnm2 video docid mep2bkli3tjrhw0 92er 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 save time and keep your documentation structure in sync by automatically populating a link grid with child documents based on a selected parent each item is rendered as a clickable link or card that navigates to the corresponding document choose a source choosing a source is the first step and determines which documents will appear in the link grid select where the link grid should pull documents from any parent document in space – choose a specific document or category as the source current parent document – use the parent of the page you are editing the link grid will include all documents directly under the selected parent drafts, hidden docs, permission restricted documents, and deeper nested levels will not be included example below is an example from our documentation showing link grid auto fill used in embed examples docid\ lqadpm4903jjjqwulj op layout options these options let you control the structure, order, and visual appearance of your link grid after selecting a source, customize how the link grid is displayed items per row control how many items appear on each row 3 items per row 2 items per row 1 item per row sort options choose how items are ordered default – matches the order in the portal tree manual – drag and drop items to define a custom order alphabetical – sort a–z or z–a date created – newest first or oldest first display style choose how items appear in your documentation link – a compact list, ideal for large numbers of documents card – a visual layout with image, title, and description link view of link grid itemscard view of link grid items card details for card display, the image, title, and description are automatically pulled from the document’s seo meta controls docid\ ru2ksifkyxgh0s91vtolh you can edit these values directly in each document’s settings under seo meta controls see the seo meta controls documentation to learn how to update images, titles, and descriptions 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 docid\ y93y0 ixfzqmxwqaigkyw 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 cuando hay 2 link grids por fila, el área visible será determinada por las dimensiones principales para una mejor comprensión, consulta la imagen a continuación 2 link grids por fila cuando solo hay 1 link grid 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, consulta la imagen a continuación link grid por fila 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 docid\ idvlcwlug5 qfm2aml3ne 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 ver cómo funciona el css personalizado docid\ rsjy06m36pd9ewahsktey 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 ver todos los bloques docid\ g2gqexisue2xnvgu6pwst ¿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