Aporta atención e interés visual a tu página y vídeo con el elemento web Héroe. Puede mostrar hasta cinco elementos en el elemento web Hero y usar imágenes, texto y vínculos atractivos para llamar la atención sobre cada uno. El elemento web Imagen prominente se incluye de forma predeterminada en sitios de comunicación, pero también se puede agregar el elemento web Imagen prominente a otras páginas.
Si los vídeos están configurados en el elemento web Héroe, se reproducirán en línea mientras puede permanecer y navegar por la misma página en lugar de ir a una ventana nueva.
Algunas funcionalidades se introducen gradualmente en las organizaciones que han optado por el programa de versiones dirigidas. Esto significa que es posible que todavía no pueda ver esta característica o que la vea con un aspecto diferente a como se describe en los artículos de ayuda.
Nota
Debe tener permisos de edición para crear páginas. Si es un propietario, pero no puede agregar una página, es posible que el administrador haya desactivado la capacidad de hacerlo.
Contenido
- El elemento web Elemento web Elemento principal en Sitios de comunicación: tema y presentación
- Cambiar el diseño del elemento web Elemento principal
- Cambie la imagen, el texto y los vínculos de cada mosaico o capa
- Cambiar el punto focal de una imagen
- Reordenar iconos o capas
- Colocar el elemento web Elemento principal en una columna
- Agregar un elemento web de Elemento principal vacío a una página
- Escala de imagen en el elemento web Hero
El elemento web Elemento web Elemento principal en Sitios de comunicación: tema y presentación
Al crear un sitio de comunicación, puede empezar con un sitio en blanco o elegir una de las otras plantillas de sitio, cada una de las cuales viene con un conjunto predeterminado de elementos web. Algunas de estas plantillas de sitio de comunicación incluyen el elemento web Elemento principal, como:
- Standard communication: comparte información como noticias, eventos y otro contenido.
- Mostrar: use fotos o imágenes para mostrar un producto, un equipo o un evento.
En estas plantillas, el elemento web Elemento principal se incluye de forma predeterminada en la página. Se rellena previamente con imágenes, texto y vínculos predeterminados que puede cambiar para mostrar sus propias imágenes, texto, páginas, vínculos o documentos.
Al seleccionar la plantilla de comunicación Standard, el elemento principal predeterminado es un diseño en mosaico con cinco mosaicos (que puede cambiar de uno a cinco):
Al seleccionar la plantilla Presentación , el elemento principal predeterminado es un diseño vertical con tres capas (que puede cambiar de una a cinco capas):
Puede cambiar el diseño del elemento web Hero de una cuadrícula a capas verticales o carruseles, usando el botón (1) Editar propiedades (
) y puede cambiar los vínculos, imágenes y texto de cada mosaico o capa usando el botón (2) Editar detalles ( ) para cada mosaico o capa.
1. Botón Editar elemento web
2. Botón Editar detalles
Cambiar el diseño del elemento web Elemento principal
Si aún no se encuentra en el modo de edición de la página, seleccione Editar en la parte superior derecha de la página.
Puede seleccionar uno de los tres diseños disponibles para el elemento web Héroe: Carrusel, Mosaicos y Capas. Para seleccionar el diseño, seleccione Editar propiedades (
de la sección) en la parte superior izquierda del elemento web y, a continuación, seleccione el diseño en el menú desplegable de diseño:
O bien, puede seleccionar el tipo de diseño que quiera en el panel de propiedades del elemento web:
En el panel de propiedades del elemento web, elija:
Agregar una diapositiva para el diseño de carrusel
Recomendación
- Para el diseño de carrusel, para habilitar o deshabilitar la transición de diapositivas automáticas, puede activar o desactivar el botón de alternancia Reproducción automática.
-
Agregar un icono para el diseño de iconos
Agregar una capa para el diseño de capas
-
Nota
puede seleccionar hasta 5 mosaicos (como el de un sitio de comunicación de Standard), o hasta 5 capas (como el de un sitio de exhibición), o hasta 5 imágenes en el carrusel.
Cambie la imagen, el texto y los vínculos de cada mosaico o capa
Si aún no se encuentra en el modo de edición de la página, seleccione Editar en la parte superior derecha de la página.
Seleccione Editar detalles (
) en la parte inferior derecha del icono o capa que desea cambiar.En el panel de propiedades, seleccione Cambiar y, a continuación, elija una ubicación desde la que obtener el vínculo:
Reciente: Si has abierto recientemente imágenes, páginas o documentos, los encontrarás en la lista.
Imágenes de archivo Las imágenes de archivo las proporciona Microsoft. Son de alta calidad y tienen el tamaño adecuado para su uso. Si es administrador de SharePoint, le recomendamos que habilite una red de entrega de contenido (CDN) para mejorar el rendimiento de la obtención de imágenes.
Búsqueda web: puede encontrar imágenes de Bing que utilicen la licencia Creative Common. Usted es responsable de revisar la licencia de una imagen antes de insertarla en la página. SharePoint solo en Microsoft 365.
Su organización: si su organización ha especificado un conjunto de activos aprobados, podrá elegir entre ese conjunto aquí. Si es Administración de SharePoint y desea obtener información sobre cómo crear una biblioteca de activos para su organización, consulte Crear una biblioteca de activos de la organización.
OneDrive: puede obtener un vínculo para un documento o una imagen que haya almacenado en OneDrive. SharePoint solo en Microsoft 365.
Sitio: puede obtener un vínculo para un documento, imagen o página desde un sitio que especifique.
Cargar: puedes cargar un documento o una imagen desde un dispositivo personal.
Desde un vínculo: escriba un vínculo para su página, documento o imagen desde OneDrive o SharePoint en Microsoft 365.
Nota
Los vínculos externos al sitio no mostrarán una vista previa de la imagen en el Gobierno de Estados Unidos, GCC High y DoD, y en Office 365 operado por 21Vianet.
Seleccione la imagen, página o documento y seleccione Abrir.
En el panel de propiedades, en Imagen de fondo, seleccione Solo imagen personalizada o Color (solo el color está disponible solo para el diseño de mosaicos y el color corresponde al color del tema del sitio).
La opción seleccionada automáticamente selecciona automáticamente una imagen de la página o documento con el que se establece el vínculo, si hay una disponible.Escriba el encabezado de la imagen.
Puedes mostrar un vínculo de llamada a la acción cambiando el botón de alternancia a Sí. A continuación, añade el texto de llamada a la acción (por ejemplo, "Más información"). El vínculo Llamada a la acción está disponible para cada capa de un diseño en capas, pero solo para el icono más grande de un diseño en mosaico.
Nota
El diseño del carrusel tiene 3 nuevos estilos. Puede establecer diferentes estilos (Superposición de imagen, Bloque de texto, División diagonal) para cada diapositiva para variar la presentación del contenido.
Cambiar el punto focal de una imagen
En SharePoint en Microsoft 365, puede cambiar el punto focal de una imagen seleccionada dentro del elemento web Elemento principal para obtener la parte más importante de la imagen en el marco.
Si aún no se encuentra en el modo de edición de la página, seleccione Editar en la parte superior derecha de la página.
Seleccione Establecer punto focal
en la barra de herramientas en la parte inferior de la imagen principal que quiera cambiar.Arrastre el punto focal en la parte de la imagen donde lo desee.
Reordenar imágenes, mosaicos o capas de carrusel
Puede reordenar imágenes, mosaicos o capas de carrusel moviéndolos donde desee.
- Si aún no se encuentra en el modo de edición de la página, seleccione Editar en la parte superior derecha de la página.
- En el panel de propiedades, seleccione los puntos suspensivos de tres puntos suspensivos junto a la imagen, el mosaico o la capa y, a continuación, seleccione Subir o Bajar para reordenar. En el caso de los mosaicos y las capas, también puede seleccionar la imagen y, a continuación, mantener presionado y arrastrar el mosaico o la capa donde desee.
Coloque el elemento web Elemento principal en una de dos o tres columnas
El elemento web Hero está diseñado para ocupar todo el ancho de la página. Si prefiere que el elemento web Hero no ocupe todo el ancho, puede hacerlo cambiando el diseño de la sección.
- Si aún no está en modo de edición, seleccione Editar en la parte superior derecha de la página.
- Pase el ratón justo encima del elemento web Imagen destacada y seleccione el signo + en un círculo a la izquierda del elemento web
- En Diseño de sección, seleccione Dos columnas o Tres columnas.
- El elemento web Elemento principal ahora se encuentra en la columna izquierda de las dos o tres columnas de la sección.
- Para mover el elemento web Elemento principal, seleccione la imagen y, después, manténgala presionada y arrástrela hasta la columna que desee que esté.
Agregar un elemento web de Elemento principal vacío a una página
Puede agregar un elemento web Elemento principal a una página de un sitio de grupo o de comunicación . Para ello:
Si aún no se encuentra en el modo de edición de la página, seleccione Editar en la parte superior derecha de la página. Busque el Cuadro de herramientas (
) a la derecha.Seleccione Ver todos los elementos web y, a continuación, seleccione o arrastre y coloque el elemento principal de la lista de elementos web.
Seleccione Editar propiedades (
) y seleccione el tipo de diseño que desee: se puede usar una cuadrícula de 1 a 5 mosaicos o de 1 a 5 capas verticales.Selecciona Seleccionar vínculo para cada icono que quieras cambiar.
Para cada icono, en el cuadro de herramientas, seleccione Seleccionar y, a continuación, elija una ubicación desde la que obtener el vínculo:
En el cuadro de herramientas, seleccione Cambiar y, a continuación, elija una ubicación desde la que obtener el vínculo:- Reciente: Si has abierto recientemente imágenes, páginas o documentos, los encontrarás en la lista.
- Búsqueda web: puede encontrar imágenes de Bing que utilicen la licencia Creative Common. Usted es responsable de revisar la licencia de una imagen antes de insertarla en la página. SharePoint solo en Microsoft 365.
- Su organización: si su organización ha especificado un conjunto de activos aprobados, podrá elegir entre ese conjunto aquí. Si es Administración de SharePoint y desea obtener información sobre cómo crear una biblioteca de activos para su organización, consulte Crear una biblioteca de activos de la organización.
- OneDrive: puede obtener un vínculo para un documento o una imagen que haya almacenado en OneDrive. SharePoint solo en Microsoft 365.
- Sitio: puede obtener un vínculo para un documento, imagen o página desde un sitio que especifique.
- Cargar: puedes cargar un documento o una imagen desde un dispositivo personal.
- Desde un vínculo: escriba un vínculo para su página, documento o imagen desde OneDrive para SharePoint en Microsoft 365.
Seleccione la imagen, página o documento y haga clic en Abrir.
En el cuadro de herramientas, en Imagen, seleccione Solo imagen personalizada o Color. La opción seleccionada automáticamente selecciona automáticamente una imagen de la página o documento con el que se establece el vínculo, si hay una disponible. El color solo está disponible solo para el diseño de mosaicos y el color corresponde al color del tema del sitio.
Escriba texto alternativo para la imagen.
Puedes mostrar un vínculo de llamada a la acción cambiando el botón de alternancia a Sí. A continuación, añade el texto de llamada a la acción (por ejemplo, "Más información"). El vínculo Llamada a la acción está disponible para cada capa de un diseño por capas, pero solo para el icono más grande de un diseño en mosaico
Escala de imagen en el elemento web Hero
Para elegir imágenes con el tamaño adecuado para el elemento web Elemento principal, tenga en cuenta lo siguiente:
- El elemento web se ha diseñado para ajustarse al ancho de la pantalla en un diseño completo.
- En el diseño de iconos , la altura del elemento web se escala para seguir una relación de aspecto de 8:3, y las imágenes dentro del elemento web se escalan a una relación de aspecto de 4:3.
- En el diseño Capas , una capa individual se escala a una relación de aspecto de 8:3 y las imágenes dentro de cada capa se escalan a una relación de aspecto cercana a 9:16.
Nota
Puede agregar un vínculo a un vídeo o cargar un vídeo en el elemento web Héroe. Ahora se admiten vídeos en el elemento web Hero con la integración de Stream.
¿Cuándo estará disponible el diseño de carrusel?
Disponibilidad general (en todo el mundo, GCC, GCC High y DoD): la implementación comienza a mediados de enero de 2025 y se completará a finales de mes.
¿Qué sucede con los diseños existentes después de agregar el diseño de carrusel?
Como parte de las actualizaciones del elemento web Héroe, se han realizado los cambios siguientes:
-
Novedades de la administración de artículos
La forma de administrar los elementos en el elemento web Hero ha cambiado. En lugar de establecer el número de elementos (1-5), ahora puedes agregar o eliminar elementos directamente utilizando la nueva e intuitiva interfaz de diapositivas . Esto simplifica el proceso de personalización del elemento web Hero para satisfacer sus necesidades específicas.
-
Ajustes del panel de propiedades
Aunque la interfaz de usuario del panel de propiedades para los diseños de iconos y capas se ha actualizado para ofrecer una experiencia más moderna, la funcionalidad de estos diseños permanece sin cambios. -
Sin impacto en los diseños existentes
Si actualmente está utilizando los diseños de mosaicos o capas , tenga la seguridad de que permanecerán como están. No habrá ninguna conversión automática al nuevo diseño de carrusel , lo que garantiza que las páginas existentes sigan teniendo el aspecto y el funcionamiento esperados.