widget são os principais blocos de construção de um site, permitindo que o senhor adicione e gerencie o conteúdo de forma eficaz. Eles servem como elementos essenciais que aprimoram a funcionalidade e o design do seu site. Ao incorporar vários tipos de widget, é possível criar uma experiência de usuário dinâmica e envolvente.
Há vários métodos para adicionar widget. Também varia se você estiver usando o Editor Clássico, o modo flexível ou o Editor 2.0. Veja a seguir como o senhor pode adicionar widget:
Para adicionar widget da biblioteca widget:
-
No painel lateral, clique em widget para abrir a biblioteca widget.
-
widget podem ser pesquisadas usando a barra de pesquisa na parte superior ou percorrendo as diferentes seções da biblioteca.
-
-
Clique e arraste o widget para o local que o senhor deseja no site. Um indicador de posicionamento azul é exibido.
-
O widget aparece no local mostrado pelo indicador de posicionamento azul.
Ao arrastar e soltar um widget em seu site, observe o texto no indicador de posicionamento azul (somente no editor Classic):
-
Insira aqui. O widget será adicionado a uma linha ou coluna existente.
-
Insira em uma nova linha. Uma nova linha será adicionada e o widget será colocado dentro dela.
-
Insira em uma nova coluna. Uma nova coluna será adicionada e o widget será colocado dentro dela.
Nota
Com o Editor 2.0, o widget só pode ser adicionado a colunas existentes; não é possível criar novas colunas com a colocação de um widget.
Para adicionar widget a partir da tela:
-
Clique com o botão direito do mouse em qualquer widget e selecione Add widget below no menu de contexto para adicionar widget imediatamente abaixo do widget atual (somente no editor Classic).
-
No modo Flex ou no Editor 2.0, clique no ícone de adição (+) no menu flutuante.
-
Se o senhor estiver clicando com o botão direito do mouse em uma coluna, clique em Add e selecione Add widget abaixo
(Relevante para Classic, Flex mode e Editor 2.0)
-
-
Selecione entre os quatro mais populares widget ou clique em More widget para abrir o menu completo. Depois de adicionar o widget, o senhor pode editá-lo como de costume.
O senhor pode personalizar o site widget para ajustar o conteúdo, a aparência e o layout do seu site. A edição do site widget permite que o senhor tenha maior controle sobre os recursos do site e como esses recursos se comportam.
A maioria dos sites widget tem uma área para o conteúdo e também para o design.
A maioria dos widget no editor tem opções de design que permitem que o senhor personalize a aparência do widget para o seu site. Nem todos os sites widget têm as mesmas opções. Por exemplo, alguns sites widget não permitem que o senhor edite o espaçamento interno, outros não permitem que o senhor altere o espaçamento externo.
A seguir estão as configurações de design comuns.
Para widget com texto, o senhor pode editar os estilos de texto. Qualquer alteração que o senhor fizer em um widget específico substituirá o estilo Theme Text.
No Editor 2.0, o tamanho do texto definido em widget específico (Editor de texto, Formulário de contato, Navegação, Negócios, Clique para enviar e-mail, Clique para ligar e Botão widget) será ajustado automaticamente com base no tamanho da tela. No desktop, o tamanho do texto é 100%, no tablet o tamanho do texto é reduzido para 85% e no celular o tamanho do texto é reduzido para 80%. No entanto, por padrão, o editor não ajustará o texto para ser menor que 16 px no celular ou tablet. E ele não se ajustará a mais de 60 px no tablet ou 40 px no celular. Isso é para garantir que o texto ainda seja legível e proporcional a cada tamanho de tela.
Se precisar substituir o tamanho do texto por dispositivo, você pode ajustar o tamanho do texto no Texto do tema e o texto não será reduzido por tamanho de tela.
Veja a seguir exemplos de como o tamanho do texto se ajustará em diferentes cenários:
-
Se o senhor definir o tamanho do texto como 40 px no desktop, o texto será automaticamente reduzido para 34 px no tablet e 32 px no celular.
-
Se o senhor definir o tamanho do texto como 16 px no desktop, ele não será reduzido em 85% para 13px no tablet ou em 80% para 12 px no celular, pois isso é muito pequeno para ler e está abaixo do mínimo de 16 px. Em vez disso, o tamanho do texto permanecerá o mesmo em 16 px em todos os tamanhos de tela.
-
Se o senhor definir o tamanho do texto como 100 px no desktop, ele será ajustado para 60 px no tablet, pois esse é o máximo, em vez de 85 px, que seria 85% do tamanho do texto do desktop. O tamanho do texto para celular também será ajustado para 40 px, pois esse é o máximo, em vez de 80px, que seria 80% do tamanho do texto para desktop.
As opções de layout geralmente são específicas para determinados widget. Para selecionar entre o conjunto de opções de layout disponíveis para esse widget, clique no layout que aparece no Design Editor (ou clique na seta pequena ao lado dele) para abrir o menu Select Layout (Selecionar layout). Para alterar o layout selecionado, clique no layout que o senhor deseja usar e ele será atualizado no widget.
Exemplo de seção de layout na guia Design (editor clássico):
Exemplo de seção de layout no painel de design (Editor 2.0/Flex):
-
Cor. Clique no ícone de cor redonda à direita do nome da configuração para abrir o seletor de cores e alterar a cor.
-
Fronteira. Altere a largura da borda usando o controle deslizante ou a caixa de texto. Clique no ícone de engrenagem () para obter mais
opções.
-
Antecedentes. Use uma imagem ou cor de fundo para esse widget usando a caixa de diálogo Choose and Place Images ou um URL de vídeo.
-
Largura e altura. Use o controle deslizante ou a caixa de texto para alterar o número de pixels.
-
Cantos arredondados. Aumenta ou diminui o arredondamento dos cantos em um widget. Clique no ícone de engrenagem () para obter mais
-
Sombras. Ativar ou desativar uma sombra para esse widget.
-
Texto. Defina vários aspectos do texto, como família da fonte, peso da fonte etc.
widget que incorporam um botão oferecem a possibilidade de selecionar se o botão herda o estilo de botão primário ou secundário definido no painel do tema. Além disso, o senhor pode escolher entre os diferentes layouts de botão, fazer edições no estilo do botão (largura, altura) e no texto do botão (fonte, tamanho do texto) e ajustar o espaçamento interno e externo.
Qualquer alteração feita no editor de design substituirá os estilos definidos no nível do botão do tema. Se você precisar voltar ao estilo do botão do tema, clique em Redefinir para o estilo do tema.
-
Se forem feitas alterações no botão (o que anula os estilos definidos no nível de botão do tema), ainda haverá uma caixa indicadora no estilo do botão principal ou secundário.
-
Ao clicar no estilo do botão sem a caixa indicadora, o botão voltará para o estilo definido no nível de botão do tema.
Altere o espaçamento interno (espaçamento dentro das bordas do widget) e o espaçamento externo (espaçamento fora das bordas do widget). Cada número na caixa externa define o espaçamento externo para seu próprio lado (superior, inferior, esquerdo ou direito), e cada número na caixa interna define o espaçamento interno para seu próprio lado (superior, inferior, esquerdo ou direito).
Para obter informações detalhadas, consulte Espaçamento externo e interno
As animações de entrada permitem que o senhor anime o site widget e a página widget quando eles são carregados pela primeira vez em seu site. O movimento e a interatividade tornam seu site mais memorável e podem enfatizar as seções nas quais você deseja que os visitantes se concentrem, como um número de telefone ou um botão de contato.
Além disso, você pode controlar onde a animação começa e termina na tela usando as configurações de rolagem.
Para adicionar uma animação:
-
Navegue até a seção Animação.
-
Selecione um gatilho ( entrada ou rolagem) e uma animação.
-
(Opcional) Personalize a animação (por exemplo, a direção de onde ela entrará).
Exemplo de configuração de animação:
Para redefinir a animação, clique em Redefinir para o padrão.
Se você usa uma animação de rolagem, pode clicar em Pausar animação () no painel lateral para pausar todas as animações enquanto estiver no modo de edição. As animações ainda estarão ativas no modo de pré-visualização e no site ao vivo.
Nota
As animações definidas para desktop e tablet estão vinculadas e serão as mesmas. No entanto, o celular é separado, e as animações configuradas para desktop/tablet não se aplicarão a ele.
Ao adicionar animações, lembre-se do seguinte:
-
Inserir muitas animações pode desorientar ou distrair os usuários, portanto, utilize-as com moderação.
-
Ao remover uma animação, lembre-se de que as animações podem ser aplicadas tanto a linhas quanto a widget, portanto, a animação que o senhor está vendo pode ter sido adicionada em algum lugar inesperado.
Para remover animações:
Nota
Se um elemento não tiver uma animação, ela poderá ser aplicada a um dos contêineres em que o elemento está. É recomendável verificar todos os contêineres para ver se há animações possíveis.
Nota
Essas informações são específicas do Editor 2.0, anteriormente conhecido como Editor All-Flex. Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
O widget fixo permite que o senhor mantenha o widget visível o tempo todo, mesmo quando o visitante rola a página para baixo, enquanto o widget fixado permanece no elemento pai (coluna ou coluna interna) enquanto o elemento pai estiver na janela de visualização.
widget pode ser definida como fixa ou fixada na seção Position (Posição ) do Design Panel (Painel de design). Para obter mais informações sobre as seções do Painel de design, consulte Design com Flex.
O widget fixo permite que o senhor mantenha o widget visível o tempo todo, mesmo quando o visitante rola a página para baixo. Use o site widget fixo para manter as chamadas para ação importantes fixas, visíveis e clicáveis em todas as páginas do site.
Para tornar um widget fixo:
-
No painel lateral, clique em widget. Procure o widget desejado e, em seguida, clique e arraste-o para a tela.
-
Clique no widget para abrir o menu flutuante e selecione Edit Design. Isso abre o painel de design no lado direito da tela. Role para baixo até a seção Posição do painel de design.
-
Clique para expandir o menu Tipo de posição e selecione Fixo. Essa alteração se aplica a todos os tamanhos de tela, mas você pode substituí-la, se necessário. Depois de selecionar a posição, você não pode alternar de Fixa para Fixada. Isso ocorre porque, quando o usuário seleciona Fixed, o widget é removido de seu contêiner original para que possa permanecer visível na tela à medida que o usuário rola a tela. Se o senhor mudasse de Fixed para Pinned, o editor não saberia em qual contêiner colocar o widget. Se precisar mudar, primeiro você precisa voltar para o Padrão. O widget será movido para a primeira seção da janela de visualização.
-
No menu Spacing (Espaçamento ), use as configurações de Margin (Margem ) para definir onde o widget está localizado na janela de visualização. É especialmente importante configurar isso se o senhor tiver dois widget fixos na mesma posição de viewport.
-
Para exibir o widget somente na página atual, ative a opção Show on this page only (Mostrar somente nesta página ).
Fixado widget fica preso ao seu elemento pai (coluna ou coluna interna) enquanto o elemento pai estiver na janela de visualização. Se houver mais de um widget fixado na mesma posição, o widget no topo será o primeiro widget.
Nota
Fixado não é uma opção em grades avançadas.
Para fixar um widget:
-
No painel lateral, clique em widget. Procure o widget desejado e, em seguida, clique e arraste-o para a tela.
-
Clique no widget para abrir o menu flutuante e selecione Edit Design. Isso abre o painel de design no lado direito da tela.
-
No painel de design, role para baixo até a seção Posição.
-
Clique para expandir o menu Tipo de posição e selecione Fixado. Isso garante que o widget fique preso ao elemento pai (coluna ou coluna interna), desde que o elemento pai esteja na janela de visualização. Essa alteração se aplica a todos os tamanhos de tela, mas você pode substituí-la, se necessário.
-
Na seção Position (Posição ), configure o deslocamento do widget. O deslocamento é onde o widget será fixado na rolagem antes de sair da janela de visualização. Se definido a partir do desktop, outros tamanhos de tela terão os mesmos valores; no entanto, ele pode ser substituído por tamanho de tela, conforme necessário. Se o cabeçalho fixo estiver ativado, o deslocamento será baseado na altura padrão do cabeçalho. Se você ativar um cabeçalho fixo após definir o deslocamento, ele não será atualizado automaticamente e você precisará voltar e ajustar manualmente o deslocamento.
Se, em algum momento, o senhor mover o widget fixado para um elemento pai diferente (coluna ou coluna interna), as configurações do painel de design, como o deslocamento, serão mantidas.
Nota
Essas informações são específicas do Editor Clássico e não são relevantes para o Editor 2.0 (anteriormente conhecido como Editor All-Flex). Para identificar sua versão atual do editor, consulte Como identificar a versão do editor que seu site usa.
Defina se o widget está alinhado à esquerda, à direita ou ao centro de sua área.
Alguns widget se comportam de forma muito diferente em diferentes visualizações. Verifique a maneira como o widget é exibido em cada visualização após adicioná-lo para garantir que ele seja exibido corretamente.
Para definir o alinhamento, clique com o botão direito do mouse no widget e clique em um ícone Alinhar à esquerda, Alinhar ao centro ou Alinhar à direita.
Para opções de alinhamento no modo Flex ou no Editor 2.0, consulte Design comFlex.
Seleciona o contêiner em que o widget está, permitindo que o senhor o localize e edite facilmente.
Editor clássico:clique com o botão direito do mouse no widget, clique em Select Container (Selecionar contêiner) e selecione Column (Coluna ) ou Row (Linha).
Editor 2.0: Clique com o botão direito do mouse no widget, clique em Select Layer (Selecionar camada ) e selecione o contêiner desejado.
Um widget pode ser copiado e colado em outro local. A opção de colar só aparece se o senhor tiver um widget que tenha sido copiado.
Clique com o botão direito do mouse no widget e clique em Copiar ou Colar.
Como alternativa, no Editor 2.0, clique no ícone Duplicar no menu flutuante.
Atenção
Não recomendamos copiar e colar formulários de contato, pois isso normalmente resulta em problemas no formulário de contato duplicado.
Use o recurso Ocultar no Dispositivo para alterar seu conteúdo, dependendo do dispositivo que o visitante usar para acessar seu site. Por exemplo, mostre um widget click-to-call para usuários móveis ou um formulário de contato para usuários de desktop.
widget ocultos pelo recurso Hide On Device não são excluídos.
No Editor clássico, clique com o botão direito do mouse no widget, clique em Hide On Device (Ocultar no dispositivo) e selecione um dispositivo (no Editor 2.0, os elementos só podem ser ocultados em dispositivos que estejam sendo editados no momento).
Como alternativa, no Editor 2.0, os elementos podem ser ocultados no painel de camadas. No painel lateral, clique em Layers (Camadas), hover sobre o elemento desejado e clique no ícone Eye (Olho).
Se um ícone de olho () estiver presente no painel lateral, isso indica que há elementos ocultos no dispositivo que você está editando no momento(somente no editor clássico). Para ver os elementos ocultos, clique no ícone Olho.
No Editor 2.0, se houver algum elemento oculto no dispositivo que você está editando no momento, ele será indicado no painel de camadas. No painel lateral, clique em Camadas. Os elementos ocultos aparecerão desativados com um ícone de olho riscado próximo a eles().
Nota
O conteúdo oculto ainda pode ser exibido no código do site ativo (após a publicação/republicação). Isso é esperado e devido à tecnologia usada. Para obter informações detalhadas, consulte Desempenho e otimização do site.
Os links âncora permitem que você direcione os visitantes para uma seção específica da página, facilitando a locomoção de um lugar para outro em uma página mais longa ou em uma seção específica que você deseja referenciar. Para obter mais informações sobre âncoras, consulte Ações e opções do Canvas.
Clique com o botão direito do mouse no widget e clique em Set As Anchor (Definir como âncora).