Os widgets são os principais blocos de construção de um site, permitindo-lhe adicionar e gerir conteúdos de forma eficaz. Servem como elementos essenciais que melhoram a funcionalidade e o design do seu sítio Web. Ao incorporar vários tipos de widgets, pode criar uma experiência de utilizador dinâmica e envolvente.
Segue-se a forma como pode adicionar widgets:
Para adicionar widgets da biblioteca de widgets:
-
No painel lateral, clique em Widgets para abrir a biblioteca de widgets.
-
Pode procurar os widgets utilizando a barra de pesquisa na parte superior ou percorrendo as diferentes secções da biblioteca.
-
-
Clique e arraste o widget para a localização que pretende no sítio. Aparece um indicador de colocação azul.
-
O widget aparece na localização indicada pelo indicador de colocação azul.
Pode personalizar os widgets para ajustar o conteúdo, o aspeto e o esquema do seu site. A edição de widgets permite-lhe ter um maior controlo sobre as funcionalidades do seu site e sobre o comportamento dessas funcionalidades.
A maioria dos widgets tem uma área para o seu conteúdo, bem como para o seu design.
A maioria dos widgets no editor tem opções de design que lhe permitem personalizar o aspeto do widget para o seu site. Nem todos os widgets têm as mesmas opções. Por exemplo, alguns widgets não lhe permitem editar o espaçamento interior, outros não lhe permitem alterar o espaçamento exterior.
As definições de conceção comuns são as seguintes.
Para widgets com texto, pode editar os estilos de texto. Quaisquer alterações que faça a um widget específico substituirão o estilo de texto do tema.
O tamanho do texto definido em widgets específicos (editor de texto, formulário de contacto, navegação, negócios, clique para enviar e-mail, clique para ligar e widgets de botão) será automaticamente ajustado com base no tamanho do ecrã. No ambiente de trabalho, o tamanho do texto é de 100%, no tablet o tamanho do texto é reduzido para 85% e no telemóvel o tamanho do texto é reduzido para 80%. No entanto, por predefinição, o editor não ajustará o texto para ser mais pequeno do que 16 px no telemóvel ou tablet. E não se ajustará a uma dimensão superior a 60 px no tablet ou 40 px no telemóvel. Isto destina-se a garantir que o texto continua a ser legível e proporcional a cada tamanho de ecrã.
Se precisar de substituir o tamanho do texto por dispositivo, pode ajustar o tamanho do texto no Texto do tema e o texto não será reduzido por tamanho de ecrã.
-
Se definir o tamanho do texto para 40 px no ambiente de trabalho, o texto será automaticamente reduzido para 34 px no tablet e 32 px no telemóvel.
-
Se definir o tamanho do texto para 16 px no ambiente de trabalho, este não será reduzido em 85% para 13px no tablet, ou 80% para 12 px no telemóvel, uma vez que é demasiado pequeno para ler e inferior ao mínimo de 16 px. Em vez disso, o tamanho do texto permanecerá igual a 16 px em todos os tamanhos de ecrã.
-
Se definir o tamanho do texto para 100 px no ambiente de trabalho, este será ajustado para 60 px no tablet, uma vez que esse é o máximo, em vez de 85 px, que seria 85% do tamanho do texto no ambiente de trabalho. O tamanho do texto para telemóvel também será ajustado para 40 px, uma vez que esse é o máximo, em vez de 80px, que seria 80% do tamanho do texto para computador.
As opções de apresentação são normalmente específicas de determinados widgets. Para selecionar a partir do 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) para abrir o menu Selecionar layout. Para alterar o esquema selecionado, clique no esquema que pretende utilizar e este será atualizado no widget.
Exemplo de secção de apresentação no painel de design :
-
Cor. Clique no ícone de cor redondo à direita do nome da definição para abrir o seletor de cores e alterar a cor.
-
Fronteira. Altere a largura do contorno utilizando o cursor ou a caixa de texto. Clique no ícone de engrenagem (
) para mais opções.
-
Antecedentes. Utilize uma imagem ou cor de fundo para este widget utilizando a caixa de diálogo Escolher e colocar imagens ou um URL de vídeo.
-
Largura e altura. Utilize o cursor ou a caixa de texto para alterar o número de pixéis.
-
Cantos arredondados. Aumente ou diminua o arredondamento dos cantos de um widget. Clique no ícone de engrenagem (
-
Sombras. Active ou desactive uma sombra para este widget.
-
Texto. Defina vários aspectos do texto, como a família de letra, o peso da letra, etc.
Os widgets 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 de temas. Além disso, pode escolher entre os diferentes esquemas de botões, editar o estilo do botão (largura, altura) e o texto do botão (tipo de letra, tamanho do texto) e ajustar o espaçamento interior e exterior.
Quaisquer alterações que faça no editor de design substituirão os estilos definidos ao nível do botão de tema. Se precisar de voltar ao estilo do botão temático, clique em Repor estilo temático.
-
Se forem efectuadas alterações ao botão (que se sobrepõem aos estilos definidos ao nível do botão temático), continuará a existir uma caixa de indicador no estilo de botão Primário ou Secundário.
-
Se clicar no estilo de botão que não tem a caixa de indicador, o botão será reposto no estilo definido ao nível do botão temático.
Altere o espaçamento interior (espaçamento dentro das margens do widget) e o espaçamento exterior (espaçamento fora das margens do widget). Cada número na caixa exterior define o espaçamento exterior para o seu próprio lado (superior, inferior, esquerdo ou direito), e cada número na caixa interior define o espaçamento interior para o seu próprio lado (superior, inferior, esquerdo ou direito).
Para obter informações pormenorizadas, consulte Espaçamento exterior e interior
As animações de entrada permitem-lhe animar widgets e widgets de página quando estes são carregados pela primeira vez no seu site. O movimento e a interatividade tornam o seu site mais memorável e podem realçar as secções em que pretende que os visitantes se concentrem, como um número de telefone ou um botão de contacto.
Além disso, pode controlar onde a animação começa e termina no ecrã, utilizando as definições de deslocamento.
Para adicionar uma animação:
-
Navegue até à secção Animação.
-
Selecione um acionador ( entrada ou deslocação) e uma animação.
-
(Opcional) Personalize a animação (por exemplo, a direção a partir da qual entrará).
Exemplo de configuração de animação:
Para repor a animação, clique em Repor a predefinição.
Se utilizar uma animação de deslocamento, pode clicar em Pausar animação () no painel lateral para fazer uma pausa em todas as animações enquanto está no modo de edição. As animações continuarão a estar activas no modo de pré-visualização e no sítio ao vivo.
Nota
As animações definidas para computador e tablet estão ligadas e serão as mesmas. No entanto, os telemóveis são separados e as animações configuradas para o ambiente de trabalho/tablet não se aplicam a eles.
Ao adicionar animações, tenha em conta o seguinte:
-
Demasiadas animações podem desorientar ou distrair os utilizadores, por isso utilize-as com moderação.
-
Ao remover uma animação, lembre-se de que as animações podem ser aplicadas tanto a linhas como a widgets, pelo que a animação que está a ver pode ter sido adicionada num local inesperado.
Para remover animações:
- Clique no elemento para abrir o menu flutuante e, em seguida, clique na opção para editar o design.
- Navegue até à secção Animação.
-
Clique no menu pendente Animação e selecione Nenhum.
Nota
Se um elemento não tiver uma animação, esta pode ser aplicada a um dos contentores em que o elemento se encontra. Recomenda-se que verifique todos os contentores quanto a possíveis animações.
Os widgets fixos permitem-lhe manter um widget sempre visível, mesmo quando um visitante se desloca para baixo na página, enquanto os widgets fixados se mantêm no seu 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 na secção Posição do Painel de Design.
Os widgets fixos permitem-lhe manter um widget sempre visível, mesmo quando um visitante se desloca para baixo na página. Utilize widgets fixos para manter os apelos à ação importantes fixos, visíveis e clicáveis em todas as páginas do site.
Para fixar um widget:
-
No painel lateral, clique em Widgets. Procure o widget pretendido e, em seguida, clique e arraste-o para a tela.
-
Clique no widget para abrir o menu flutuante e selecione Editar design. Isto abre o painel de design no lado direito do ecrã. Desloque-se para baixo até à secção Posição do painel de design.
-
Clique para expandir o menu Tipo de posição e selecione Fixo. Esta alteração aplica-se a todos os tamanhos de ecrã, mas pode substituí-la, se necessário. Depois de selecionar a posição, não pode mudar de Fixo para Fixado. Isto porque quando seleciona Fixo, o widget é removido do seu contentor original para que possa ficar visível no ecrã à medida que o utilizador se desloca. Se mudasse de Fixo para Fixado, o editor não saberia em que contentor colocar o widget. Se precisar de mudar, tem de voltar a mudar para Predefinição primeiro. O widget será movido para a primeira secção da janela de visualização.
-
No menu Espaçamento, utilize as definições de Margem para definir a localização do widget na janela de visualização. É especialmente importante configurá-lo se tiver dois widgets fixos na mesma posição da janela de visualização.
-
Para apresentar o widget apenas na página atual, active a opção Mostrar apenas nesta página.
Os widgets fixados mantêm-se no seu elemento principal (coluna ou coluna interna) enquanto o elemento principal estiver na janela de visualização. Se houver mais do que um widget fixado na mesma posição, o widget no topo será o primeiro widget.
Nota
A fixação não é uma opção nas grelhas avançadas.
Para fixar um widget:
-
No painel lateral, clique em Widgets. Procure o widget pretendido e, em seguida, clique e arraste-o para a tela.
-
Clique no widget para abrir o menu flutuante e selecione Editar design. Isto abre o painel de design no lado direito do ecrã.
-
No painel de design, desloque-se para baixo até à secção Posição.
-
Clique para expandir o menu Tipo de posição e selecione Fixado. Isto garante que o seu widget fica colado ao seu elemento principal (coluna ou coluna interna) enquanto o elemento principal estiver na janela de visualização. Esta alteração aplica-se a todos os tamanhos de ecrã, mas pode substituí-la, se necessário.
-
Na secção Posição, configure o deslocamento do widget. O offset é o local onde o widget será fixado no scroll antes de sair da janela de visualização. Se definido a partir do ambiente de trabalho, os outros tamanhos de ecrã terão os mesmos valores, mas pode ser substituído por cada tamanho de ecrã, conforme necessário. Se o cabeçalho fixo estiver ativado, o desvio basear-se-á na altura predefinida do cabeçalho. Se ativar um cabeçalho fixo depois de definir o desvio, este não será automaticamente atualizado e terá de voltar atrás e ajustar manualmente o desvio.
Se, em qualquer altura, mover o widget fixado para um elemento principal diferente (coluna ou coluna interior), as definições do painel de design, como o deslocamento, serão mantidas.
Um widget pode ser copiado e colado noutra localização. A opção colar só aparece se tiver um widget que tenha sido copiado.
Clique com o botão direito do rato no widget e clique em Copiar ou Colar.
Aviso
Não recomendamos que copie e cole formulários de contacto, uma vez que isso resulta normalmente em problemas no formulário de contacto duplicado.
Utilize a funcionalidade de ocultar no dispositivo para alterar o seu conteúdo em função do dispositivo que o visitante utiliza para aceder ao seu sítio Web. Por exemplo, mostre um widget "click-to-call" para utilizadores móveis ou um formulário de contacto para utilizadores de computador.
Os widgets ocultos pela funcionalidade Ocultar no dispositivo não são eliminados.
Os elementos só podem ser ocultados em dispositivos que estejam a ser editados.
Para ocultar um elemento: no painel lateral, clique em Camadas, passe o cursor sobre o elemento pretendido e clique no ícone Olho. Se existirem elementos ocultos no dispositivo que está a editar atualmente, isso será indicado no painel de camadas com um ícone de olho riscado.
Nota
O conteúdo oculto pode ainda aparecer no código do sítio ativo (após a publicação/republicação). Este facto é esperado e deve-se à tecnologia utilizada.
Os links âncora permitem-lhe enviar os visitantes para uma secção específica da página, facilitando-lhes a deslocação de um local para outro numa página mais longa ou para uma secção específica que pretenda referenciar.
Clique com o botão direito do rato no widget e clique em Definir como âncora.
Comentários
0 comentário
Artigo fechado para comentários.