Introducción
Este artículo describe los primeros pasos con 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.
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.
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
- Abra la página y haga clic en Editar en la esquina superior derecha.
- 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.
- Escriba Smart Tiles en el cuadro de búsqueda y haga clic en el elemento 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 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.

| 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 y KB10249. Mostrar títulos y descripciones en los mosaicos; los efectos al pasar el puntero se explican en KB10248. Configurar el efecto al pasar el puntero sobre los mosaicos.
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:
- 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.
- Seleccione Sección de ancho completo en la lista de diseños.
- 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.

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: https://vitextra.com/es/products/smart-tiles