Usar a web part Hero

Traga foco e interesse visual para sua página e vídeo com a Web Part Hero. Você pode exibir até cinco itens na Web Part Hero e usar imagens, textos e links atraentes para chamar a atenção para cada um. A Web Part Hero é incluída por padrão em sites de comunicação, mas você também pode adicionar a Web Part de Hero a outras páginas. 

Se os vídeos estiverem configurados no Hero Webpart, eles serão reproduzidos embutidos enquanto você pode permanecer e navegar pela mesma página em vez de ser levado para uma nova janela. 

Algumas funcionalidades são introduzidas gradualmente para as organizações que optaram por participar do programa de Versão Direcionada. Isso significa que esse recurso pode ainda não estar disponível ou pode parecer diferente em relação ao que descrevemos nos artigos da Ajuda.

Sumário

• A Web Part do Herói em sites de comunicação: Tópico e Demonstração
• Alterar o layout da Web Part em destaque
• Altere a imagem, o texto e os links de cada bloco ou camada
• Alterar o ponto focal de uma imagem
• Reordenar blocos ou camadas
• Coloque a Web Part Hero em uma coluna
• Adicionar uma Web Part em destaque vazia a uma página
• Dimensionamento de imagem na Web Part em destaque

A Web Part do Herói em sites de comunicação: Tópico e Demonstração

Ao criar um site de Comunicação, você pode começar com um site em branco ou escolher um dos outros modelos de site, cada um com um conjunto padrão de Web Parts. Alguns desses modelos de site de comunicação vêm com a Web Part Hero, como:

• Comunicação Standard: compartilhe informações como notícias, eventos e outros conteúdos.
• Demonstração: use fotos ou imagens para mostrar um produto, equipe ou evento.

Nesses modelos, a Web Part Hero é incluída em sua página por padrão. Ele é preenchido previamente com imagens, texto e links padrão que você altera para mostrar suas próprias imagens, texto, páginas, links ou documentos.

Quando você seleciona o modelo de comunicação Standard, o herói padrão é um layout lado a lado com cinco blocos (que você pode alterar de um a cinco):

Quando você seleciona o modelo de demonstração , o destaque padrão é um layout vertical com três camadas (que você pode alterar de uma a cinco camadas):

Você pode alterar o layout da Web Part em destaque de uma grade para camadas verticais ou carrosséis, usando o botão (1) Editar propriedades ( ) e pode alterar os links, imagens e texto para cada bloco ou camada usando o botão (2) Editar detalhes ( ) para cada bloco ou camada.

. Botão Editar web part

2. Botão Editar detalhes

Alterar o layout da Web Part em destaque

Se você ainda não estiver no modo de edição em sua página, selecione Editar no canto superior direito da página.

1. Você pode selecionar um dos três layouts disponíveis para a Web Part em destaque: Carrossel, Blocos e Camadas. Selecione o layout selecionando Editar propriedades ( ) no canto superior esquerdo da web part e, em seguida, selecione o layout no menu suspenso de layout:

   

   Ou você pode selecionar o tipo de layout desejado no painel de propriedades da Web Part:

   

2. No Painel de Propriedades da Web Part, escolha:

   • Adicionar um slide para o layout do carrossel
      

     Dica

     • Para o layout do carrossel, para ativar/desativar a transição de slides automáticos, você pode ativar/desativar a alternância Reprodução automática.
     • 

   • Adicionar um bloco para o layout de blocos

   • Adicionar uma camada para o layout de Camadas
     

• Observação

  você pode selecionar até 5 blocos (como em um site de comunicação Standard), ou até 5 camadas (como em um site de Showcase) ou até 5 imagens no carrossel. 

Altere a imagem, o texto e os links de cada bloco ou camada

Se você ainda não estiver no modo de edição em sua página, selecione Editar no canto superior direito da página.

1. Selecione Editar detalhes ( ) no canto inferior direito do bloco ou camada que você deseja alterar.

2. No Painel de Propriedades, selecione Alterar e escolha um local para obter o link:

   • Recentes: se você tiver imagens, páginas ou documentos abertos recentemente, os encontrará listados aqui.

   • Imagens de Estoque As imagens de estoque são fornecidas pela Microsoft. Eles são de alta qualidade e dimensionados para o seu uso. Se você for um administrador do SharePoint, recomendamos que você habilite uma CDN (Rede de Distribuição de Conteúdo) para melhorar o desempenho da obtenção de imagens.

   • Pesquisa na Web: Você pode encontrar imagens do Bing que utilizam a licença Creative Common. Você é responsável por revisar o licenciamento de uma imagem antes de inseri-la em sua página. Somente no Microsoft 365.

   • Sua organização: se sua organização tiver especificado um conjunto de ativos aprovados, você poderá escolher entre esse conjunto aqui.  Se você é um Administrador do SharePoint e deseja saber como criar uma biblioteca de ativos para sua organização, consulte Criar uma biblioteca de ativos da organização.

   • OneDrive: você pode obter um link para um documento ou imagem armazenada no OneDrive. Somente no Microsoft 365.

   • Site: Você pode obter um link para um documento, imagem ou página de um site especificado.

   • Carregar: Você pode fazer upload de um documento ou imagem de um dispositivo pessoal.

   • De um link: insira um link para sua página, documento ou imagem do OneDrive ou do SharePoint no Microsoft 365.

     Observação

     Os links externos ao seu site não mostrarão uma visualização de imagem no GCC High e DoD do Governo dos EUA e no Office 365 operado pela 21Vianet.

3. Selecione sua imagem, página ou documento e selecione Abrir.

4. No Painel de Propriedades, em Imagem de tela de fundo, selecione Imagem personalizada ou Somente cor (a cor está disponível apenas para o layout Blocos, e a cor corresponde à cor do tema do site).
   A opção Selecionada automaticamente seleciona automaticamente uma imagem da página ou documento ao qual você está vinculando, se houver uma disponível.

5. Insira o cabeçalho da imagem.

   • Você pode mostrar um link de chamada para ação alternando o botão para Sim. Em seguida, adicione seu texto de chamada para ação (por exemplo, "Saiba mais"). O link Chamada para ação está disponível para cada camada em um layout em camadas, mas somente para o bloco maior em um layout lado a lado.

     Observação

     O layout Carrossel tem 3 novos estilos. Você pode definir estilos diferentes (Sobreposição de imagem, Bloco de texto, Divisão diagonal) para cada slide para variar a apresentação do conteúdo.

     

Alterar o ponto focal de uma imagem

No SharePoint do Microsoft 365, você pode alterar o ponto focal em uma imagem selecionada na Web Part em destaque para obter a parte mais importante da imagem no quadro.

1. Se você ainda não estiver no modo de edição em sua página, selecione Editar no canto superior direito da página.

2. Selecione o na barra de ferramentas na parte inferior da imagem Hero que você deseja alterar.

3. Arraste o ponto focal para o local desejado na imagem.

   

Reordenar imagens, blocos ou camadas de carrossel

Você pode reordenar imagens de carrossel, blocos ou camadas movendo-as para onde quiser.

1. Se você ainda não estiver no modo de edição em sua página, selecione Editar no canto superior direito da página.
2. No Painel de Propriedades, selecione as reticências de três pontos ao lado da imagem, do bloco ou da camada e selecione Mover para cima ou Mover para baixo para reordenar. Para blocos e camadas, você também pode apenas selecionar a imagem e, em seguida, segurar e arrastar o bloco ou a camada para onde desejar.

Coloque a Web Part em destaque em uma de duas ou três colunas

A Web Part Hero foi projetada para ocupar toda a largura da página. Se preferir que a Web Part em destaque não ocupe toda a largura, você pode fazer isso alterando o layout da seção.

1. Se você ainda não estiver no modo de edição, selecione Editar no canto superior direito da página.
2. Passe o mouse logo acima da Web Part em destaque e selecione o + circulado à esquerda da Web Part
3. Em Layout da seção, selecione Duas colunas ou Três colunas.
4. A peça Web Destaque está agora na coluna esquerda das duas ou três colunas na secção. 
5. Para mover a peça Web Destaque, selecione a imagem e, em seguida, sem soltar, arraste-a para a coluna pretendida.

Adicionar uma peça Web Destaque vazia a uma página

Pode adicionar uma peça Web Destaque a uma página num Site de equipa ou num Site de comunicação . Para fazer isso:

1. Se ainda não estiver no modo de edição na sua página, selecione Editar no canto superior direito da página. Encontre a Caixa de Ferramentas ( ) à direita.

2. Selecione Ver todas as peças Web e, em seguida, selecione ou arraste e largue Destaque na lista de peças Web.

3. Selecione Editar propriedades ( ) e selecione o tipo de esquema que pretende - pode ser utilizada uma grelha de 1 a 5 mosaicos ou 1 a 5 camadas verticais.

4. Selecione Selecionar ligação para cada mosaico que pretende alterar.

5. Para cada mosaico, na caixa de ferramentas, selecione Selecionar e, em seguida, escolha uma localização a partir da qual obter a sua ligação:
   Na caixa de ferramentas, selecione Alterar e, em seguida, escolha um local a partir do qual obter a sua ligação:

   • Recente: Se abriu imagens, páginas ou documentos recentemente encontrará estes listados aqui.
   • Pesquisa na Web: Pode encontrar imagens do Bing que utilizam a licença Creative Common. É responsável por rever o licenciamento de uma imagem antes de a inserir na sua página. SharePoint apenas no Microsoft 365.
   • A sua organização: se a sua organização tiver especificado um conjunto de recursos aprovados, poderá escolher entre esse conjunto aqui.  Se você é um Administração do SharePoint e deseja saber como criar uma biblioteca de ativos para sua organização, consulte Criar uma biblioteca de ativos da organização.
   • OneDrive: Pode obter uma ligação para um documento ou imagem que armazenou no OneDrive. SharePoint apenas no Microsoft 365.
   • Site: você pode obter um link para um documento, imagem ou página de um site especificado.
   • Carregar: pode carregar um documento ou imagem a partir de um dispositivo pessoal.
   • A partir de uma ligação: Introduza uma ligação para a sua página, documento ou imagem do OneDrive para SharePoint no Microsoft 365.

6. Selecione a sua imagem, página ou documento e clique em Abrir.

7. Na caixa de ferramentas, em Imagem, selecione Apenas Imagem personalizada ou Cor. A opção Seleccionar automaticamente selecciona automaticamente uma imagem da página ou documento ao qual está a ligar, se houver um disponível. A cor só está disponível para o esquema de Mosaicos e a cor corresponde à cor do tema do site.

8. Introduza texto alternativo para a imagem.

9. Pode mostrar uma ligação de Chamada à ação ao mudar o botão de alternar para Sim. Em seguida, adicione o texto da Chamada à ação (por exemplo, "Saiba mais"). A ligação Call to action está disponível para cada camada num esquema em camadas, mas apenas para o mosaico maior num esquema em mosaico

Dimensionamento de imagem na peça Web Destaque

Para escolher imagens de tamanho adequado para a peça Web Destaque, considere o seguinte:

• A peça Web foi concebida para se ajustar à largura do ecrã num esquema de sangria total.
• No esquema Mosaicos , a altura da peça Web é dimensionada de modo a seguir uma proporção de 8:3 e as imagens dentro da peça Web são dimensionadas para uma proporção de 4:3.
• No layout Camadas , uma camada individual é dimensionada para uma proporção de 8:3 e as imagens dentro de cada camada são dimensionadas para uma proporção próxima a 9:16.

Quando o layout do carrossel estará disponível?

Disponibilidade geral (mundial, GCC, GCC High e DoD): a implementação começa em meados de janeiro de 2025 e será concluída no final do mês.

O que vai acontecer aos Esquemas Existentes depois de o esquema Carrossel ter sido adicionado?

Como parte das atualizações à peça Web Destaque, foram efetuadas as seguintes alterações:

• Gestão de Itens Atualizações
  A forma como gerencia itens na peça Web Destaque mudou. Em vez de definir o número de itens (1-5), pode agora adicionar ou eliminar diretamente itens com a nova interface intuitiva do Diapositivo . Isto simplifica o processo de personalização da peça Web Destaque para satisfazer as suas necessidades específicas.
• Ajustes do Painel de Propriedades
  Embora a IU no painel de propriedades dos esquemas Mosaicos e Camadas tenha sido atualizada para uma experiência mais moderna, a funcionalidade destes esquemas permanece inalterada.
•   Sem impacto nos layouts existentes
  Se estiver a utilizar atualmente os esquemas Mosaicos ou Camadas , não se preocupe, pois estes irão permanecer tal como estão. Não haverá conversão automática para o novo layout Carrossel, garantindo que suas páginas existentes continuem a parecer e funcionar conforme o esperado.