--- title: "Cómo agregar y configurar el elemento web Smart Tiles" description: "Guía paso a paso para agregar Vitextra Smart Tiles a una página de SharePoint Online: implementar el paquete, encontrar el elemento web, los mosaicos de ejemplo, el título, todos los ajustes de Apariencia, el grupo Acerca de y las secciones de ancho completo." url: https://vitextra.com/es/support/kb/10042 language: es published: 2026-11-05 modified: 2026-11-07 products: - "Smart Tiles" author: "Jānis Bērziņš" tags: ["agregar Smart Tiles", "configurar Smart Tiles", "navegación con mosaicos SharePoint Online", "panel de propiedades", "ajustes de Apariencia", "sección de ancho completo", "instalar Vitextra Smart Tiles", "mosaicos de página SharePoint", "configuración Smart Tiles", "panel de navegación"] --- # Cómo agregar y configurar el elemento web Smart Tiles Guía paso a paso para agregar Vitextra Smart Tiles a una página de SharePoint Online: implementar el paquete, encontrar el elemento web, los mosaicos de ejemplo, el título, todos los ajustes de Apariencia, el grupo Acerca de y las secciones de ancho completo. ## Introducción Este artículo describe los primeros pasos con [Smart Tiles](https://vitextra.com/es/products/smart-tiles): implementar el ::elemento web::, agregarlo a una página moderna de ::SharePoint Online:: y configurar las propiedades que se aplican a todo el panel. Las propiedades de cada mosaico -textos, vínculos, colores e iconos- se explican en [KB10242. Cómo agregar y editar un mosaico en Smart Tiles](https://vitextra.com/es/support/kb/10242). ## Antes de comenzar Un administrador de ::SharePoint:: implementa Smart Tiles una sola vez para el espacio empresarial desde su ::catálogo de aplicaciones::. El paquete se implementa para todo el espacio empresarial, por lo que el elemento web está disponible en todos los sitios sin tener que agregarlo a cada uno por separado. El procedimiento se describe en [KB10035. Cómo instalar un producto Vitextra en SharePoint Online](https://vitextra.com/es/support/kb/10035). Para agregar el elemento web a una página, necesita permiso para editarla. Basta con el ::nivel de permisos:: **Editar** o con pertenecer al grupo Miembros del ::sitio::. 📝 **Nota** Smart Tiles solo funciona en páginas modernas. Si el sitio todavía utiliza páginas clásicas, cree primero una página de sitio moderna. ## Agregar el elemento web a una página 1. Abra la página y haga clic en **Editar** en la esquina superior derecha. 2. Coloque el puntero donde desee situar el panel hasta que aparezca una línea con el signo **+** entre las secciones o los elementos web. Haga clic para abrir la ::galería de elementos web::. 3. Escriba *Smart Tiles* en el cuadro de búsqueda y haga clic en el elemento web. ![Smart Tiles en el cuadro de herramientas de elementos web](https://static.vitextra.com/articles/10042/web-part-toolbox-es.png) *Smart Tiles en el cuadro de herramientas de elementos web* El elemento web aparece en la página con tres mosaicos de ejemplo que enlazan con páginas de productos de Vitextra. Muestran el aspecto de un mosaico y puede modificarlos para incluir sus propios vínculos o quitarlos. ![El elemento web con los mosaicos de ejemplo](https://static.vitextra.com/articles/10042/sample-tiles-es.png) *El elemento web con los mosaicos de ejemplo* ## El título del elemento web Encima de los mosaicos hay un campo de título. Haga clic en él y escriba un encabezado para el panel, por ejemplo, *Vínculos rápidos* o *Servicios de RR. HH.*. El título es opcional: si deja el campo vacío, no se mostrará ningún encabezado en la página publicada. ## Ajustes de apariencia Haga clic en el icono de lápiz (**Editar elemento web**) situado a la izquierda del elemento web para abrir el panel de propiedades. El grupo **Apariencia** contiene los ajustes que se aplican a todos los mosaicos. ![El grupo Apariencia del panel de propiedades](https://static.vitextra.com/articles/10042/appearance-group-es.png) *El grupo Apariencia del panel de propiedades* |::Ajuste::|::Descripción::| |:---|:---| |**Tamaño de fuente**|Tamaño del título del mosaico, en siete pasos de 14 px a 32 px. La descripción, cuando se muestra, se reduce proporcionalmente.| |**Tamaño de icono**|Tamaño del icono, en seis pasos de 20 px a 64 px. Las imágenes personalizadas de iconos utilizan los mismos tamaños.| |**Sangría Interna**|Espacio por encima y por debajo del contenido del mosaico, de 0 a 30 px. Los valores mayores aumentan la altura de los mosaicos.| |**Sangría de Iconos**|Espacio entre el icono y el título, de 0 a 30 px.| |**Sangría Externa**|Espacio entre mosaicos contiguos, de 0 a 30 px. Con el valor 0, los mosaicos se tocan y forman una superficie continua.| |**Sombra**|Dibuja una sombra suave bajo los iconos.| |**Mostrar los títulos**|Muestra u oculta los títulos de todos los mosaicos. Cuando se ocultan los títulos, los iconos quedan centrados.| |**Mostrar descripciones**|Muestra u oculta las descripciones de todos los mosaicos. Las descripciones siguen disponibles en la información sobre herramientas.| |**Efecto al pasar el puntero**|Activa un efecto visual cuando el puntero permanece sobre un mosaico. Debajo del interruptor aparecen la ::lista:: **Efecto**, el control deslizante de intensidad y **Duración**.| Los controles deslizantes y los interruptores se aplican a la página de inmediato, lo que permite evaluar el resultado mientras los modifica. 💡 **Sugerencia** Los tamaños, los espacios y los textos se describen detalladamente en [KB10247. Tamaños y distribución de mosaicos en Smart Tiles](https://vitextra.com/es/support/kb/10247) y [KB10249. Mostrar títulos y descripciones en los mosaicos](https://vitextra.com/es/support/kb/10249); los efectos al pasar el puntero se explican en [KB10248. Configurar el efecto al pasar el puntero sobre los mosaicos](https://vitextra.com/es/support/kb/10248). ## El grupo Acerca de El grupo **Acerca de** del panel de propiedades muestra la licencia del elemento web: el **Estado** (de evaluación, activo, expirado o suspendido), la **Versión** del elemento web, la **Fecha de inicio** de la suscripción y el **Espacio empresarial** al que está asignada. Durante el período de prueba también se muestra el número de días restantes. El grupo incluye además un vínculo a la página del producto, donde puede adquirir una suscripción. 📝 **Nota** Cuando hay una versión más reciente de Smart Tiles, aparece un aviso encima de los mosaicos en el modo de edición. La actualización se instala cargando el nuevo paquete en el catálogo de aplicaciones; las páginas y sus mosaicos no se ven afectados. ## Colocar el panel en una sección de ancho completo Los mosaicos tienen mayor impacto visual cuando ocupan toda la pantalla. Para ello, coloque el elemento web en una ::sección de ancho completo::: 1. En el modo de edición, coloque el puntero en el borde izquierdo de la página y haga clic en el signo **+** que aparece entre las secciones. 2. Seleccione **Sección de ancho completo** en la lista de diseños. 3. Arrastre el elemento web Smart Tiles desde su sección actual a la nueva, o agregue un nuevo elemento web Smart Tiles a la sección de ancho completo. ![Agregar una sección de ancho completo](https://static.vitextra.com/articles/10042/full-width-section-es.png) *Agregar una sección de ancho completo* Smart Tiles también se adapta a secciones de una o dos columnas. Una página puede contener varios elementos web Smart Tiles, por ejemplo, un panel por departamento. Cada elemento web conserva sus propios ajustes y efecto al pasar el puntero. ❗ **Importante** Las secciones de ancho completo están disponibles en sitios de comunicación y en sitios de equipo con el diseño moderno de página principal. En las páginas sin secciones de ancho completo, los mosaicos ocupan el ancho de la sección en la que se encuentran. ## Guardar la página Los mosaicos y los ajustes se almacenan en la página. Haga clic en **Guardar como borrador** para continuar más adelante, o en **Volver a publicar** para que los visitantes vean el panel. Hasta que vuelva a publicar la página, los visitantes verán la versión anterior. Más información sobre el producto: