Skip to main content

Personalizar painéis

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Adicionar e personalizar widgets.
  • Aplicar designs personalizados em suas páginas.

O que são widgets?

Widgets são os elementos gráficos que aparecem na página e exibem seus dados de diferentes maneiras — como gráficos de pizza, tabelas e gráficos de barras. Criar um widget é simples. Você pode criar seu widget em apenas três passos. 

  1. Adicione dados ao seu widget (obrigatório).
  2. Aplique um filtro (opcional).
  3. Projete seu widget (opcional).

Para adicionar um novo widget, clique no ícone Add New (+) (Adicionar novo) e escolha o tipo de widget que deseja adicionar. Os widgets são classificados em três categorias para facilitar a seleção. 

  • Gráficos: Exibem dados em várias formas de gráficos, como gráficos de barras, gráficos de linhas, gráficos de pizza e mapas. Quando uma das categorias é escolhida, o widget padrão aparece. Para alterar categorias e tipos de widget, clique em More (Mais).
  • Interativo: Os widgets interativos permitem que os usuários que navegam na página alternem dinamicamente entre intervalos de data, medidas e dimensões. Isso permite filtrar os dados nos widgets da página, sem modificar a página.
  • Elementos: Você pode inserir elementos estáticos na página, como rich text, vídeos, imagens e widgets personalizados que você criou usando JavaScript, CSS ou HTML.

Página de painel destacando o sinal de adição para adicionar um widget a uma página e biblioteca de widget

Personalizar seu widget

Depois de selecionar o widget desejado, clique no ícone Add New (+) (Adicionar novo) para adicionar dados ao widget. 

Adicionar dados ao seu widget

Selecione as medidas e as dimensões que você deseja exibir. Você pode reconhecer facilmente se uma entidade é uma medida, dimensão ou data pelo seu ícone. 

Adicionar medida ou dimensão

Você pode ver alterações em tempo real no widget à medida que adiciona seus dados.

Nota

As dimensões e medidas que podem ser adicionadas a seus widgets são agregadas e estão no nível da campanha. Dados mais granulares, como dados no nível do assinante, não estão disponíveis nos painéis.

Em seguida, você tem a opção de adicionar ou editar filtros. Os filtros permitem remover quaisquer dados indesejados, dependendo dos critérios definidos. Para visualizar os filtros aplicados à página e adicionar filtros a um widget, selecione a guia Filters (Filtros) (1). Em seguida, clique em + Add Filter (Adicionar filtro) (2) para adicionar um novo filtro. Aqui você também pode editar o intervalo de datas (3) e a classificação dos dados (4), como mostrar os cinco principais resultados ou exibir os dados em ordem crescente.       

Página de painel mostrando a guia filtros em um widget]

Agora você pode personalizar o design do seu widget usando a guia Design. É aí que você adapta a aparência dos widgets selecionados na página de painel, como modificar o fundo, as fontes e a grade. Vamos analisá-la mais detalhadamente.

Aplicar um design personalizado à sua página

Depois de criar uma página incrível cheia de dados valiosos, é hora de levar seu design de página para o próximo nível. Com o InstaBrand, você pode criar uma página personalizada e de marca com apenas alguns cliques.

Para ativar o InstaBrand, clique em qualquer lugar da página, exceto nos widgets, como a barra de navegação superior (1). Clique na guia Design (2) no painel Editar página para ver uma série de opções de personalização. Clique no botão InstaBrand (3) para ativar o InstaBrand.

Plataforma Datorama mostrando a guia Design em uma página com o InstaBrand ativado

Em seguida, em Branding Assets (Ativos de identidade visual), adicione seu logotipo e uma imagem para o fundo. Você pode até usar a biblioteca de imagens Unsplash clicando na caixa de imagens. Aqui você pode inserir uma palavra-chave para pesquisar em centenas de imagens. Clique na imagem que deseja adicionar como sua imagem de fundo e sua página aplicará automaticamente a imagem selecionada. Após você selecionar a imagem, não só a imagem será adicionada ao fundo, mas o InstaBrand realizará sua mágica para criar uma página lindamente projetada de acordo com a paleta de cores de sua imagem escolhida. 

Sua página é instantaneamente transformada em uma página de marca com cores coordenadas que parece exclusiva e profissional. Se preferir, você pode selecionar um tema predefinido no menu de opções THEME (TEMA) que oferece uma variedade de temas genéricos que você também pode aplicar instantaneamente.

Depois de criar ou selecionar um tema, você pode continuar personalizando alterando a paleta de cores, ajustando as configurações de fundo ou editando as fontes.   

Criar um tema de design de página

Depois de criar sua página perfeita, você pode usar o mesmo design para todas as suas páginas usando um tema de design de página. Para isso, clique em qualquer lugar da página, exceto nos widgets. Isso o leva à guia Design (1) de nível de página. Clique no botão Options (Opções) (2) ao lado de TEMA e selecione Save as New Theme (Salvar como novo tema) (3). Nomeie seu Tema (4) e clique em Save (Salvar) (5).

Página de painel mostrando a caixa Salvar como novo tema

Aplicar design personalizado aos seus widgets

Agora que sua página tem marca e está lindamente criada, faça com que ela fique mais informativa tornando os widgets específicos mais proeminentes. Para fazer isso, selecione o widget e clique na guia Design. Personalize o design de seu widget com as opções de configuração disponíveis (Nota: as opções da guia Design variam entre os tipos de widget.)

Página de painel mostrando a guia Design em um widget

Estas são as opções de design de widget disponíveis.

  • Grade: Defina o estilo de layout do widget. Existem três tipos de estilos de grade.
    • Nenhum: O widget permanece imóvel na página.
    • Fixado: Fixa o widget no topo da página e ele permanece lá quando os usuários sobem e descem a página.
    • Flutuante: Flutua o widget selecionado em cima dos widgets existentes e permanece flutuando quando os usuários sobem e descem a página.
  • Fundo: Ajuste a exibição de fundo do widget, como a cor, opacidade, brilho e forma dos cantos.
  • Fontes: Ajuste as fontes em destaque no widget, como cabeçalhos e eixo.
  • Avançado: Adicione Cascading Style Sheets (CSS) personalizadas ao seu widget.

Nesta unidade, você aprendeu a adicionar, definir e personalizar widgets, transformar sua página em uma página de marca e criar um modelo de design de página. Continue até a próxima unidade para aprender como criar dimensões e medidas calculadas.

Recursos

Compartilhe seu feedback do Trailhead usando a Ajuda do Salesforce.

Queremos saber sobre sua experiência com o Trailhead. Agora você pode acessar o novo formulário de feedback, a qualquer momento, no site Ajuda do Salesforce.

Saiba mais Continue compartilhando feedback