Módulo 3 · 3.2
Editar textos e botões por si mesmo
Módulo 3: Textos, fotografias e secções · Tempo de leitura: 8 minutos
Objetivo de aprendizagem: Depois desta lição, saberá alterar textos e botões por si mesmo sem IA, usar ligações e formatação, e fazer cada botão levar ao sítio certo: uma página, um endereço de e-mail, um número de telefone, outro website ou uma secção.
Conceitos chave: Editar, duplo clique, barra de formatação, ligação, Palavra de destaque, Editar botão, destino de um botão, mailto e tel, âncora (secção), botão de envio, Configurar formulário
Porquê editar por si mesmo
Nem tudo tem de passar pela IA. Um erro de escrita, outro número de telefone, uma frase que precisa de ficar ligeiramente diferente: tudo isso escreve mais depressa por si mesmo. Editar por si mesmo é gratuito, acontece sem IA e sem proposta. Vê de imediato o que está a fazer, e a IA não altera pelo caminho nada que não tenha pedido. Sempre que guarda, o construtor cria uma nova versão ("O seu texto foi guardado como versão ..."), por isso é sempre possível voltar atrás (lição 3.5).
Regra prática: o conteúdo que já conhece, escreve-o por si mesmo; textos novos ou um tom diferente, peça-os à IA. O Bas, da Schildersbedrijf Example, deixa a IA escrever os textos dos serviços, mas o número de registo comercial, a morada e o número de telefone copia-os ele próprio. Assim tem a certeza de que estão corretos.
Editar texto na pré-visualização
Na pré-visualização, passe o rato por cima de um texto. Aparece um pequeno botão Editar. Clique nele ou faça duplo clique diretamente no texto. O texto passa a ser um campo editável e pode escrever nele como num processador de texto.

Guardar e cancelar fazem-se com o teclado:
- Num texto curto, como um título: Enter guarda, Esc cancela.
- Num texto mais longo com parágrafos: Ctrl+Enter guarda (o Enter cria então uma nova linha), Esc cancela.
Também pode começar a partir do chat: com Escolher elemento, selecione um texto e clique em Editar texto ao lado da etiqueta. Os botões Guardar e Cancelar aparecem então na parte de baixo do chat.
Se receber a mensagem "Não pode editar este elemento diretamente. Peça-o através do chat.", trata-se de um elemento que o próprio construtor gera. Nesse caso, peça a alteração no chat, com o elemento selecionado.
A barra de formatação: títulos, listas, cor e ligações
Durante a edição, aparece junto ao texto uma barra de ferramentas Formatação, com pequenos botões; passe o rato por cima para ver o nome. Os botões disponíveis dependem do tipo de texto: num título há menos do que num parágrafo. Encontra, entre outros:
- num texto mais longo, o tipo de linha: Texto normal, Subtítulo, Subtítulo pequeno;
- Negrito, Itálico, Sublinhado, Rasurado, Realçar;
- Lista com marcas, Lista numerada, Citação;
- Alinhar (esquerda, centro, direita) e Tamanho (mais pequeno, normal, maior, muito maior);
- Cor do texto, com as cores da sua identidade visual (cor principal, segunda cor, cor do texto, texto suave, branco, escuro);
- Adicionar ou alterar ligação e Remover ligação;
- Palavra de destaque: coloca uma a quatro palavras escolhidas no estilo de destaque da sua identidade visual;
- Limpar formatação.
Com o teclado, vai para a barra de ferramentas com Alt+F10.
Alguns conselhos. Escolha uma cor da sua identidade visual e não uma cor avulsa: assim o seu site mantém-se sóbrio e tudo combina. Se o construtor detetar uma cor pouco legível sobre o fundo, isso é indicado ("pouco legível neste fundo"). Use subtítulos para estruturar o texto e não para tornar algo maior; os motores de pesquisa e os leitores de ecrã utilizam essa estrutura (curso Ser encontrado online, lição 3.2). E use o negrito com moderação: se tudo estiver a negrito, nada se destaca.
Uma ligação num texto
Selecione as palavras e clique em Adicionar ou alterar ligação. Escolhe uma Página do seu site ou preenche um endereço, endereço de e-mail ou número de telefone. O construtor aceita um endereço web (https://...), um endereço de e-mail (mailto:), um número de telefone (tel:), um caminho no seu site (/pagina) ou uma secção (#secção). Se não reconhecer o endereço, não guarda a ligação e informa-o disso.
Escreva o texto da ligação de forma a que a pessoa saiba onde vai parar. "Ver os nossos preços" é melhor do que "clique aqui". É mais agradável para os visitantes e para as pessoas que usam um leitor de ecrã.
Botões: o texto e para onde levam
Um botão tem duas coisas: o texto e o destino. Passe o rato por cima de um botão e clique em Editar botão. Vê:
- Texto do botão;
- Para onde vai este botão?, com cinco opções.

| Opção | O que o visitante obtém | Exemplo na Schildersbedrijf Example |
|---|---|---|
| Página | Uma página do seu site | "Ver o nosso trabalho" para a página Projetos |
| Um novo e-mail para esse endereço no seu programa de e-mail; funciona também sem plano | "Enviar e-mail" para info@example.com | |
| Telefonar | Num telemóvel, o visitante liga de imediato para este número | "Ligar agora" para o número real da empresa |
| Website | Uma página noutro website, por exemplo o seu sistema de reservas ou o Instagram | "Marcar uma visita" para uma agenda de marcações |
| Secção | A página desliza até essa secção | "Pedir orçamento" para o formulário de contacto no fundo da página |
O construtor verifica o que preenche. Um endereço de e-mail tem de ser válido, um número de telefone tem de ter pelo menos 8 dígitos e um endereço web tem de ser um endereço real. Editar botão é gratuito e sem IA.
Porque é que isto importa: um botão é muitas vezes o ponto mais importante de uma página. Um "Pedir orçamento" que não leva a lado nenhum faz-lhe perder clientes. Se existir uma ligação sem destino, o construtor avisa: "Esta ligação ainda não aponta para lado nenhum e não funciona no seu site publicado. Escolha uma página ou um endereço."
Atenção à opção Telefonar: o campo mostra como exemplo 06 12345678. É um exemplo, não um número. Introduza o seu próprio número.
O botão de envio do formulário não é uma ligação
O botão por baixo do seu formulário de contacto parece igual a qualquer outro botão, mas faz outra coisa: envia o formulário. Ao passar o rato por cima, aparece Configurar formulário em vez de Editar botão. Se clicar nele, vê Botão de envio do formulário e o endereço para onde chegam as mensagens. Se ainda não estiver configurado, aparece "o endereço de e-mail da sua conta". Com Alterar endereço vai para Definições > Formulários. Aí configura o endereço e o resto do formulário (lições 4.3 e 5.3).
Se quiser que os visitantes lhe possam enviar um e-mail sem formulário, coloque um botão normal com a opção E-mail. Funciona também no site gratuito sem plano, porque o visitante envia o e-mail a partir do seu próprio programa de e-mail.
Armadilhas
- Um número de telefone apenas no texto. Coloque-o também num botão ou numa ligação com Telefonar, para que as pessoas possam ligar diretamente a partir do telemóvel.
- Botões que levam à página errada depois de mudar o nome ou remover uma página. Se remover uma página, o construtor remove também as ligações para ela e indica quantas. Verifique depois os seus botões.
- Deixar ficar dados de exemplo. Um endereço de e-mail ou número da primeira versão pode ser inventado (lição 2.4). Escreva os seus dados reais por si mesmo.
- Cores fora da sua identidade visual. Cores avulsas tornam o seu site confuso e por vezes ilegível.
- Pedir à IA que "melhore" o que já está bem. Cada pedido à IA pode alterar mais do que pretende. As pequenas coisas faça-as por si mesmo.
No construtor: como fazer
- Na pré-visualização, passe o rato por cima de um texto e clique em Editar (ou faça duplo clique).
- Altere o texto; use a barra de ferramentas Formatação para títulos, listas e ligações.
- Guarde com Enter (texto curto) ou Ctrl+Enter (texto mais longo).
- Passe o rato por cima de um botão e clique em Editar botão.
- Altere o Texto do botão e escolha um destino em Para onde vai este botão?.
- Clique no botão de envio do seu formulário e veja, através de Configurar formulário, para onde chegam as mensagens.
Resumo
- Editar texto por si mesmo é gratuito, sem IA e sem proposta; cada gravação é uma nova versão.
- Com a barra de ferramentas Formatação cria títulos, listas, cor na sua identidade visual, palavras de destaque e ligações.
- Editar botão define o destino: Página, E-mail, Telefonar, Website ou Secção.
- O botão de envio do formulário não é uma ligação; o endereço de receção configura-se em Definições > Formulários.
Questionário
Exercício
Exercício D3.2: Botões que levam a algum lado. Reveja todos os botões da sua página inicial e da página de contacto e dê a cada botão um destino real.
Lista de verificação:
- [ ] cada botão da página inicial aberto com Editar botão;
- [ ] um destino escolhido para cada botão (Página, E-mail, Telefonar, Website ou Secção);
- [ ] pelo menos um botão com Telefonar ou E-mail com os seus dados reais (nada de 06 12345678);
- [ ] pelo menos um botão com Secção para uma secção da mesma página;
- [ ] o botão de envio do formulário verificado através de Configurar formulário e o endereço de receção confirmado;
- [ ] um texto alterado por si mesmo com uma ligação através de Adicionar ou alterar ligação;
- [ ] verificado em Telemóvel que os botões estão bem colocados.
Perguntas:
- Que botão não levava a lado nenhum ou levava ao sítio errado, e para onde leva agora?
- Para que endereço chegam as mensagens do seu formulário, e é um endereço que lê todos os dias?
- Que texto de ligação escolheu, e porquê?
Depois de "concluído", vê uma resposta de exemplo: o botão "Pedir orçamento" no hero não levava a lado nenhum e agora desliza até à secção Contacto; as mensagens chegam a info@example.com, que o Bas lê todos os dias; texto de ligação "Ver os nossos preços" em vez de "clique aqui", porque assim o visitante sabe onde vai parar.
Exercício D3.2: Botões que levam a algum lado
Este exercício faz você mesmo; ninguém o verifica. Assinale o que já fez e marque o exercício como concluído.
O botão "Pedir orçamento" no hero não levava a lado nenhum e agora desloca a página até à secção Contacto. As mensagens chegam a info@example.com, que o Bas lê todos os dias. Texto da ligação "Consultar os nossos preços" em vez de "clique aqui", porque assim o visitante sabe para onde vai.
As suas marcações e notas ficam apenas neste navegador; não as enviamos para lado nenhum. Se tiver sessão iniciada, guardamos em Os meus cursos apenas que concluiu o exercício.
