Loading
Experience Cloud
Componentes de layout de tema e layouts de tema personalizados

Você está aqui:

  1. Ajuda do Salesforce
  2. Documentação
  3. Experience Cloud

Componentes de layout de tema e layouts de tema personalizados

Layouts de tema e componentes de layout de tema são combinados para oferecer controle granular da aparência e da estrutura de cada página no site. Personalize o cabeçalho e o rodapé do layout para combinar com o estilo da empresa. Configure propriedades de layout do tema. Ou use uma barra de pesquisa personalizada e um menu do perfil de usuário. Em seguida, use os layouts do tema para atribuir componentes de layout de tema a páginas individuais que permitem que você altere rapidamente os layouts de um único local central. Quer você seja um parceiro de consultoria ou um ISV, ou simplesmente quiser remodelar seu próprio site, layouts de tema personalizados facilitam a reformulação da marca.

Edições obrigatórias

Disponível em: Salesforce Classic e Lightning Experience
Disponível em: Enterprise, Performance, Unlimited e Developer Editions
Permissões de usuário necessárias
Para criar um site do Experience Cloud: Criar e configurar experiências E Visualizar configuração
Para personalizar ou publicar um site do Experience Cloud:

Um componente de layout de tema é o layout de nível superior (1) para páginas de modelo no seu site. Componentes de layout de tema são organizados e aplicados às suas páginas por meio de layouts do tema. Um componente de layout de tema inclui o cabeçalho e o rodapé comuns (2) e costuma incluir navegação, pesquisa e o menu de perfil de usuário. Por outro lado, o layout de conteúdo (3) define as regiões de conteúdo das páginas. A próxima imagem mostra um layout de conteúdo de duas colunas.

Página de modelo com layouts de tema e conteúdo, numeradas de 1 a 3

Um layout de tema categoriza as páginas do site que compartilham um componente de layout de tema. Você pode atribuir um componente de layout do tema a qualquer layout do tema. Aplique o layout de tema nas propriedades da página.

Nota
Nota Para criar componentes de layout de tema personalizado no Developer Console, um desenvolvedor implementa a interface forceCommunity:themeLayout. Todos os nossos temas pré-criados são desenvolvidos sobre essa interface e também usam várias interfaces de propriedades de design (selecionador de cores, selecionador de imagens, controle deslizante) no Criador de experiências. Os Temas pré-criados também aproveitam a troca de temas. Você pode alterar rapidamente a aparência geral do site sem afetar nenhuma das páginas, layouts de página e componentes subjacentes.
Exemplo
Exemplo

Digamos que você crie três páginas para a sua próxima campanha do Spring. Você deseja que elas utilizem o componente de layout de tema Cabeçalho grande que seu desenvolvedor criou. Na área de Configurações | Tema, adicione um layout de tema personalizado chamado Spring para categorizar essas páginas e atribuir o componente de layout Cabeçalho grande a ele.

A área Tema

Em seguida, aplique o layout de tema Spring em cada propriedade da página, que instantaneamente aplica o layout Cabeçalho grande a cada página.

A área Propriedades da página

Para aplicar o layout do tema, selecione Substituir o layout do tema padrão desta página (1). Esta seleção mostra as opções de Layout de tema. Em seguida, escolha o novo layout (2) nas opções disponíveis.

Tudo parece lindo até que o seu VP de marketing decide que o cabeçalho ocupa muito espaço. Isso é fácil de corrigir, porque você não precisa atualizar as propriedades de cada página para alterar o layout do tema. Em vez disso, com um clique no painel Tema, você pode alterar Spring para o componente de layout Small Header e instantaneamente atualizar todas as três páginas!

Tipo de layout de tema personalizado Spring
Exemplo
Exemplo

Agora, digamos que o layout Cabeçalho pequeno inclua duas propriedades personalizadas, o Segundo plano azul e o Logotipo pequeno. Você ativou e aplicou essas propriedades a todas as páginas da campanha. No entanto, para uma página, você deseja aplicar apenas a propriedade Logotipo pequeno.

Nesse caso, você pode criar um layout de tema chamado Spring B, atribuir o componente de layout Cabeçalho pequeno a ele e ativar o Logotipo pequeno. Em seguida, aplique o tema Spring B à página.

Tipo de layout de tema personalizado Spring

Não tem certeza de quais páginas estão associadas a algum dos seus layouts do tema?

Painel Configurações de tema mostrando Páginas atribuídas

Com apenas um clique, saiba quantas e quais páginas estão associadas a qualquer um dos layouts de tema. Em Configurações | Tema, clique no total Páginas atribuídas para qualquer linha do layout do tema (1). Clicar nesse valor abre uma lista de páginas associadas àquele layout do tema (2).

Os layouts de tema fazem com que seja fácil reutilizar o mesmo componente de layout de tema de maneiras diferentes e, ao mesmo tempo, manter o controle granular conforme necessário.

Consulte também:

 
Carregando
Salesforce Help | Article