Wix Blocks: personalizar painéis para os botões da barra de ação do widget
7 min de leitura
O Wix Blocks está aberto a todos os usuários do Wix Studio. Para ter acesso ao Wix Blocks, junte-se ao Wix Studio.
O Blocks permite que você crie painéis personalizados para as barras de ação no seu widget e seus elementos. Quando um criador de sites clica em um botão de ação (por exemplo, o botão Configurações), um painel personalizado é aberto, em vez do painel padrão.
Ao criar painéis personalizados, você oferece aos criadores de sites mais opções para trabalhar com seu widget, melhorando sua usabilidade e ajudando-os a personalizá-lo com mais facilidade em seus sites.
A criação do seu painel tem três etapas principais:
2. Adicione código ao seu painel (em inglês) para fazê-lo funcionar.
Observações
- Conecte seu painel: defina quais painéis combinam com qual botão de ação na aba Configuração.
- Diretrizes de experiência do usuário: use nossas diretrizes de UX para tornar seus painéis claros e eficazes.
Criar seu painel
Há duas maneiras de criar um painel.
Crie seu painel através da aba Painéis
Ou crie seu painel através da aba Configuração
Adicionar elementos ao seu painel
Seu painel é composto por elementos de painel, como botões, separadores, campos de entrada e muito mais.
Confira uma lista de elementos de painel
Clique em + Adicionar elemento e selecione quais elementos você deseja adicionar ao seu painel. Você pode adicionar o mesmo elemento quantas vezes precisar. Em seguida, você pode personalizar o texto e o estilo da etiqueta e definir padrões e valores.
Personalizar o painel
Você tem várias opções de personalização para os elementos em seu painel. Você pode alterar o texto da etiqueta, adicionar dicas de ferramentas, definir padrões e valores. Você faz isso usando a barra de ação conectada a cada elemento.
Opções de configuração
Clique em um elemento. Selecione Configurações ou o ícone 
para personalizar seu painel. Aqui estão algumas das opções:
para personalizar seu painel. Aqui estão algumas das opções:Adicione títulos de campo (ver mais)
Adicionar tooltips (ver mais)
Definir elemento como "somente leitura" (ver mais)
Definir as opções de texto inicial (ver mais)
Adicionar validação de padrão (ver mais)
Elementos de múltipla escolha
Se você optar por adicionar um elemento que tem várias opções, como caixas de seleção, botões de rádio ou listas dropdown, você pode configurá-los usando o botão Gerenciar opções na barra de ação que aparece quando você seleciona o elemento.
Renomear opções (ver mais)
Mais ações (ver mais)
para definir padrões, editar valores e mover ou duplicar elementos.
Após criar seu painel, você precisa adicionar código para que ele funcione. Em seguida, você pode adicioná-lo a um botão de ação e testá-lo para ver se funciona. Saiba mais sobre como codificar seu painel
Renomear, duplicar ou excluir seu painel
- Passe o mouse sobre o nome do painel na seção Meus painéis em Painéis no canto inferior esquerdo.
- Clique no ícone Mais ações
quando ele aparecer. - Selecione renomear, duplicar ou excluir.
Conectar seu painel a um botão de ação
Após criar seu painel, você deve conectá-lo a um botão na barra de ação de um widget ou elemento.
- Clique na aba Configuração.
- Selecione o widget adequado no painel Widgets.
- Passe o mouse sobre o botão ao qual você deseja conectar seu painel, no menu Editar barra de ação que é exibido. Por exemplo, se for um painel de configurações, selecione o botão de configurações. Se for um painel de design, selecione o botão de design. Você também pode adicionar um novo botão, nomeá-lo e conectá-lo a um painel.
- Clique em Configurações
.
5. Selecione seu painel na seção Meus painéis.
Agora que você criou seu painel, você precisa adicionar código a ele para que funcione. Saiba mais
Conecte seu painel através da aba Configuração
Observe que o design e a codificação dos painéis acontecem na aba Painéis. Escolher quais painéis combinam com quais botões acontece na aba Configuração. Se você não estiver familiarizado com a aba Configuração, saiba mais sobre como configurar a barra de ação do seu widget