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.

Personalizar seu widget

Depois de selecionar o widget desejado, clique no ícone Add New (+) (Adicionar novo) para adicionar dados ao 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. 

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

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.       

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.

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).

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.)

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

• Ajuda do Salesforce: Páginas de painel personalizadas