widgets são os principais elementos de um site, permitindo que você adicione e gerencie 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 widgets, você pode criar uma experiência de usuário dinâmica e envolvente
Existem vários métodos para adicionar widgets. Também varia se você estiver usando o Editor Clássico, o modo flexível ou o Editor 2.0 Veja a seguir como você pode adicionar widgets:
Para adicionar widgets da biblioteca de widgets:
-
-
Para encontrar um widget, use a barra de pesquisa ou selecione uma categoria para navegar rapidamente até o widget desejado.
-
Os widgets personalizados da conta e do site estão localizados na Personalizado categoria do painel Widget.
-
-
Clique e arraste o widget até o local desejado 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, anote o texto no indicador de posicionamento azul (Somente editor clássico):
-
Insira aqui. O widget será adicionado a uma linha ou coluna existente
-
Inserir em uma nova linha. Uma nova linha será adicionada e o widget será colocado dentro dela
-
Inserir em uma nova coluna. Uma nova coluna será adicionada e o widget será colocado dentro dela
Nota
Com o Editor 2.0, os widgets só podem ser adicionados às colunas existentes; novas não podem ser criadas com a colocação de um widget.
Para adicionar widgets da tela:
-
Clique com o botão direito em qualquer widget e selecione Adicione o widget abaixo no menu de contexto para adicionar widgets imediatamente abaixo do widget atual (Somente editor clássico).
-
No modo Flex ou no Editor 2.0, clique no sinal de adição (+) ícone no menu flutuante.
-
Se você estiver clicando com o botão direito do mouse em uma coluna, clique emAdicionare selecioneAdicione o widget abaixo
(Relevante para o modo Clássico, Flex e Editor 2.0)
-
-
Selecione entre os quatro widgets mais populares ou clique em Mais widgets para abrir o menu completo. Depois de adicionar o widget, você pode editá-lo normalmente
-
Clique no sinal de mais + ícone no menu flutuante.
-
Se você estiver clicando com o botão direito do mouse em uma coluna, clique Adicionar e selecione Adicione o widget abaixo.
O Painel de mídia permite que você arraste e solte facilmente mídias (imagens, vídeos e ícones) na tela e adicione um widget ao mesmo tempo. Por exemplo, se você adicionar uma imagem do Painel de mídia à tela, um widget de imagem será adicionado automaticamente. Para saber mais, consulte Painel de mídia.
Para adicionar uma imagem, ícone ou widget de vídeo do Painel Medial:
-
(Opcional) Use os filtros para ajudar a localizar a mídia desejada. Ou clique em Carregar mídia para adicionar novas mídias.
-
Clique e arraste a mídia desejada para a tela. Observe que as imagens não podem ser colocadas em os widgets do Catálogo da Loja ou da Galeria de Produtos nem em widgets conectados a páginas dinâmicas.
Você pode personalizar os widgets para ajustar o conteúdo, a aparência e o layout do seu site. A edição de widgets permite maior controle sobre quais recursos seu site tem e como esses recursos se comportam
A maioria dos widgets tem uma área para seu conteúdo e seu design.
A maioria dos widgets no editor tem opções de design que permitem que você personalize a aparência do widget para o seu site. Nem todos os widgets têm as mesmas opções. Por exemplo, alguns widgets não permitem editar o espaçamento interno, outros não permitem alterar o espaçamento externo
A seguir estão as configurações de design comuns.
Para widgets com texto, você pode editar os estilos de texto. Qualquer alteração que você fizer em um widget específico substituirá o estilo de texto do tema
Estilos de texto no Editor 2.0
tamanho do texto definido em widgets específicos (editor de texto, formulário de contato, navegação, negócios, clique para enviar e-mail, clique para ligar e widgets de botão) será ajustado automaticamente com base no tamanho da tela. No desktop, o tamanho do texto é de 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 você definir o tamanho do texto para 40 px no desktop, o texto será automaticamente reduzido para 34 px no tablet e 32 px no celular.
-
Se você definir o tamanho do texto para 16 px no desktop, ele não reduzirá de 85% a 13 px no tablet ou de 80% a 12 px no celular, pois é muito pequeno para ler e 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 você definir o tamanho do texto para 100 px no desktop, ele se ajustará para 60 px no tablet, já que esse é o máximo, em vez de 85 px, que seria 85% do tamanho do texto do desktop. O tamanho do texto móvel também será ajustado para 40 px, já que esse é o máximo, em vez de 80 px, o que seria 80% do tamanho do texto do desktop
As opções de layout geralmente são específicas para determinados widgets. Para selecionar entre o conjunto de opções de layout disponíveis para esse widget, clique no layout que aparece no Editor de Design (ou clique na pequena seta ao lado dele) para abrir oSelecione o layoutcardápio. Para alterar o layout selecionado, clique no layout que você deseja usar e ele será atualizado no widget
Exemplo de seção de layout na Design aba (Editor clássico):
Exemplo de seção de layout na 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.
-
Plano de fundo. Use uma imagem ou cor de fundo para esse widget usando a caixa de diálogo Escolher e colocar imagens 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. Aumente ou diminua os cantos arredondados em um widget. Clique no ícone de engrenagem (
-
Sombras. Ative ou desative uma sombra para esse
-
Texto. Defina vários aspectos do texto, como família da fonte, peso da fonte etc.
widgets que incorporam um botão oferecem a capacidade de selecionar se o botão herda o estilo de botão primário ou secundário definido no painel temático. Além disso, você 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,Redefinir para o estilo do tema.
-
Se forem feitas alterações no botão (que substituirão os estilos definidos no nível do botão do tema), uma caixa indicadora ainda estará presente no estilo do botão primário ou secundário.
-
Se o estilo do botão que não tem a caixa indicadora for clicado, ele redefinirá o botão para o estilo definido no nível do 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 animar widgets e widgets de página 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 oRolagemconfigurações.
Para adicionar uma animação:
-
Navegue até o Animação seção.
-
Selecione um Gatilho e Animação.
-
(Opcional) Personalize a animação. Por exemplo, a direção de onde ele entra.
Exemplo de configuração de animação:
Para redefinir a animação, clique em Redefinir para o padrão.
Se você estiver usando a animação Scroll, você pode clicar em Pausar animação no painel lateral para pausar todas as animações enquanto você trabalha no editor. A animação permanecerá no site ao vivo e no modo de pré-visualização.
Nota
As animações definidas para tamanhos de tela de desktop ou tablet estão vinculadas e serão as mesmas. No entanto, o celular é separado e as animações configuradas para desktop e tablet não serão aplicadas
Ao adicionar animações, tenha em mente o seguinte:
-
Muitas animações podem desorientar ou distrair os usuários, então use-as com moderação.
-
Ao remover uma animação, lembre-se de que as animações podem ser aplicadas a linhas e widgets, portanto, a animação que você 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
Use a IA para criar rapidamente widgets de site personalizados sem sair do editor. Observe que os widgets do site são específicos do site em que foram criados e não podem ser usados em outros sites da sua conta. Todos os widgets de site personalizados que você cria são armazenados no painel Widget abaixo do Personalizado categoria para fácil acesso.
Nota
Esse recurso está disponível para administradores e membros da equipe com o Copiloto permissão.
Para criar um widget de site personalizado no editor:
-
No painel do widget, você pode gerar um widget personalizado do site das seguintes maneiras:
-
Insira um prompt. Você pode usar o @ símbolo para referenciar uma coleção específica. Nossa IA pode recuperar as coleções e a estrutura do seu site, permitindo que ele crie widgets que exibem seu conteúdo
-
Clique Ideias para experimentar para navegar em uma biblioteca de solicitações predefinidas. Use este prompt para selecionar o prompt desejado.
-
Remixe um widget pronto. Clique para selecionar o widget desejado e clique em Remix. O widget remixado é adicionado ao Personalizado seção do painel do widget e está pronta para ser arrastada e solta na tela.
Note que Copiloto é necessária permissão para remixar um widget.
-
-
Se você inseriu uma solicitação, uma nova janela será aberta no lado direito da tela. Dependendo da complexidade da solicitação, a IA pode levar alguns instantes para gerar seu widget. Quando o widget for criado, clique em Leve-me até lá.
-
Do Personalizado na seção do painel Widget, arraste e solte o widget na tela.
-
(Opcional) Se precisar fazer edições no widget, clique no ícone de três pontos no cartão do widget personalizado do site e selecione uma das seguintes opções:
-
Edite com o Copilot
-
Editar nome e ícone
-
Gerenciar no espaço de trabalho (Somente planos personalizados)
-
Arquivo
-
Os widgets fixos permitem que você mantenha um widget visível o tempo todo, mesmo quando um visitante rola a página para baixo, enquanto os widgets fixos permanecem no elemento principal (coluna ou coluna interna) enquanto o elemento principal estiver na janela de visualização.
Os widgets podem ser definidos como fixos ou fixados no Posição seção do Painel de Design.
widgets fixos permitem que você mantenha um widget visível o tempo todo, mesmo quando um visitante rola a página para baixo. Use widgets fixos para manter as chamadas à ação importantes fixas, visíveis e clicáveis em todas as páginas do site
Para corrigir um widget:
-
Pesquise o widget desejado e clique nele e arraste-o para a tela.
-
Clique no widget para abrir o menu flutuante e selecioneEditar design. Isso abre o painel de design no lado direito da tela. Role para baixo até oPosiçãoseção do painel de design.
-
Clique para expandir oTipo de posiçãomenu e selecioneFixo. 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 você seleciona Fixo, o widget é removido de seu contêiner original para que ele possa ficar visível na tela enquanto o usuário rola. Se você mudasse de Fixo para Fixado, o editor não saberia em qual contêiner colocar o widget. Se você precisar mudar, primeiro você precisa voltar para o Padrão. O widget será movido para a primeira seção na janela de exibição
-
NaEspaçamentomenu, use oConfigurações de margem para definir onde o widget está localizado na janela de visualização. É especialmente importante configurar isso se você tiver dois widgets fixos na mesma posição da janela de visualização
-
Para exibir o widget somente na página atual, ative aMostrar somente nesta páginaalternar.
widgets fixados permanecem no elemento principal (coluna ou coluna interna) enquanto o elemento principal estiver na janela de visualização. Se houver mais de um widget fixado na mesma posição, o widget na parte superior será o
Nota
Fixado não é uma opção em grades avançadas.
Para fixar um widget:
-
Pesquise o widget desejado e clique nele e arraste-o para a tela.
-
Clique no widget para abrir o menu flutuante e selecioneEditar design. Isso abre o painel de design no lado direito da tela.
-
No painel de design, role para baixo até oPosiçãoseção.
-
Clique para expandir oTipo de posiçãomenu e selecionePreso. Isso garante que seu widget permaneça no elemento principal (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
-
NaPosiçãoseçã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, mas eles podem ser substituídos 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
Se em algum momento você mover o widget fixado para um elemento principal diferente (coluna ou coluna interna), as configurações do painel de design, como 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, vejaComo 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 widgets se comportam de maneira muito diferente em visualizações diferentes. Verifique a forma como seu widget é exibido em cada visualização depois de 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 umAlinhar à esquerda,Alinhar o centro, ou Alinhar à direita ícone.
Para opções de alinhamento no modo Flex ou no Editor 2.0, consulte Projete com Flex.
Seleciona o contêiner em que o widget está, permitindo que você o encontre e edite facilmente.
Editor clássico:Clique com o botão direito do mouse no widget e clique emSelecione o contêinere selecioneColunaouLinha.
Editor 2.0:Clique com o botão direito do mouse no widget e clique em Selecionar camada e selecione o recipiente desejado.
Um widget pode ser copiado e colado em outro local. A opção de colar só aparece se você tiver um widget que tenha sido copiado
Clique com o botão direito do mouse no widget e clique emCopiarouPasta.
Alternativamente, no Editor 2.0, clique no Ícone duplicado 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 de acordo com o dispositivo que o visitante usa para acessar seu site. Por exemplo, mostre um widget de clique para ligar para usuários móveis ou um formulário de contato para usuários
Widgets escondidos pelo Ocultar no dispositivo os recursos não são excluídos.
Editor clássico
Clique com o botão direito do mouse no widget, clique em Ocultar no dispositivo, selecione um dispositivo. Se um ícone de olho estiver presente no painel lateral, isso indica que há elementos ocultos no dispositivo que você está editando no momento. Para ver os elementos ocultos, clique no ícone do olho.
Editor 2.0
Os elementos só podem ser ocultados nos dispositivos que estão sendo editados no momento.
Para ocultar um elemento: no painel lateral, clique em Camadas, passe o mouse sobre o elemento desejado e clique no Ícone de olho. Se houver elementos ocultos no dispositivo que você está editando no momento, eles serão indicados no painel de camadas com um ícone de olho riscado
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.
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.
Clique com o botão direito do mouse no widget e clique emDefinir como âncora.
Para obter mais informações sobre âncoras, consulte Ações e opções do Canvas.
Embora possa haver diferenças com base no que um aplicativo ou widget personalizado está tentando realizar, os widgets criados com nosso criador de widgets não são necessariamente melhores do que os widgets criados por nossos parceiros de aplicativos.
Os aplicativos também devem atender a padrões rígidos e passar por um rigoroso processo de controle de qualidade pela equipe da Duda.
Para obter uma resposta mais detalhada, consulte a seção de perguntas frequentes no Visão geral da App Store artigo.
Consulte os seguintes recursos para widgets personalizados e o construtor de widgets:
Nota
-
Se você está procurando um widget personalizado, mas precisa de um desenvolvedor, um especialista da Duda pode ajudar. Para obter mais informações, o programa Experts, consulte Especialistas em Duda. Para procurar os especialistas, visite experts.duda.com.
-
O suporte da Duda não consegue solucionar problemas com widgets personalizados.