Escrever na página e adicionar blocos

Escrever diretamente

Clique num texto e escreva: é só isso. Quando seleciona um excerto, aparece uma pequena barra para o pôr em negrito, em itálico, riscá-lo, adicionar uma ligação, e um botão ✨ para o retocar com a IA. No painel da direita, o separador Bloco propõe também os títulos, as listas, a citação e o alinhamento.

Nesta barra, a lista Estilo do texto transforma o parágrafo onde está o cursor: Texto, Título 1 a 4, Antetítulo (uma linha curta por cima de um título) ou Entrada (um parágrafo de introdução, maior). Cada opção é mostrada tal como vai aparecer.

Ao escolher uma ligação, pode optar por uma página, uma secção, um endereço de e-mail ou outro site, e também por um artigo do blogue ou um produto da loja (separadores Artigo e Produto). A ligação acompanha o artigo em cada língua do site, e é retirada de forma limpa se o artigo deixar de estar publicado.

Destacar palavras num título

Num título grande (Título 1, Título 2 ou o título de um bloco Hero), selecione uma ou duas palavras e clique em Itálico: ganham o destaque do estilo do seu site. Consoante o estilo, é outra cor, um tipo de letra de destaque, por vezes um degradé, e as palavras nem sempre ficam inclinadas.

É a forma certa de colorir uma palavra: o destaque acompanha o estilo se o mudar, adapta-se sozinho ao modo claro e ao modo escuro, e continua legível. Uma cor escolhida à mão não faria nada disto.

Adicionar um bloco com a tecla « / »

1. Coloque o cursor numa linha vazia.
2. Escreva /: abre-se o menu de comandos, organizado por categorias (Secção, Texto, Multimédia, Conteúdo, Ação).
3. Escreva algumas letras para filtrar (« gal » para Galeria) e confirme.

Também pode clicar em Adicionar um objeto… no separador Bloco do painel da direita.

Os principais blocos

• Texto e paginação: títulos, listas, citação, Caixa de destaque, Colunas (2 a 4 zonas lado a lado), Separador, Espaçador, Tabela, Índice.
• Multimédia: Imagem, Galeria, Multimédia (vídeo, som ou conteúdo do YouTube, Vimeo, SoundCloud, Spotify…), Antes / depois, Incorporar (uma webcam, uma agenda, um widget de avaliações… pelo endereço ou pelo código HTML).
• Apresentar a sua atividade: Hero (banner com título e botões), Funcionalidades, Grelha de cartões, Equipa, Testemunhos, Números-chave, Cronologia, Ficha técnica, História em deslocamento, Faixa deslizante, Nuvem de logótipos.
• Preços: Planos de preços (cartões de planos, com, se necessário, um Preço riscado e uma Nota sob o preço) e Tabela de preços (uma lista de serviços e preços por categoria, como a ementa de um restaurante).
• Interagir: Botão CTA, Formulário, FAQ, Mapa, Redes sociais, Newsletter, Reserva, Comentários / Avaliações.
• Destacar: Produtos da loja e Artigos do blogue.

O bloco Imagem propõe cinco tamanhos: XS (150 px no máximo, para um logótipo ou um emblema), S, M, L e 100%.

Os artigos do blogue e da documentação oferecem os mesmos blocos que as páginas, com os mesmos gestos. Só o bloco Comentários / Avaliações não é proposto na documentação.

As ligações do Hero e da Equipa

Num bloco Hero, clique no bloco: o painel da direita define o texto e o destino de cada botão, com o seletor de ligações habitual (uma página, uma secção, um endereço de e-mail, outro site…).

Num bloco Equipa, cada membro tem o campo Página do membro: a foto e o nome levam então à sua própria página, a uma secção ou a outro site.

A grelha de cartões

Clique num bloco Grelha de cartões: o painel direito lista os seus cartões. Abra um cartão para alterar o título, o texto, a meta, o preço e o texto do botão; assim, um cartão que adicione pode receber um botão. O campo Ligação do cartão escolhe para onde leva. Também pode clicar no texto de um cartão, diretamente na página.

A ligação de um cartão escolhe-se como as outras ligações do TOWeb: uma página do site, um artigo, um produto, um ficheiro ou um endereço externo. A definição Alinhamento do texto centra o texto dos cartões.

Quando há menos cartões do que colunas, uma indicação sob Colunas diz-lhe quantos cartões adicionar para preencher a fila.

Editar, mover, eliminar

Clique num bloco: as suas definições aparecem no separador Bloco do painel da direita. A pega à esquerda do bloco arrasta-se para o mover; um clique nela abre o menu Subir, Descer, Duplicar, Eliminar.

O índice de uma página

O bloco Índice lista os títulos de uma página, de um artigo do blogue ou de um artigo de documentação, com uma ligação para cada um. Escreva / e depois «índice» ou «sumário», ou adicione-o a partir do separador Adicionar.

Constrói-se sozinho a partir dos títulos que se lhe seguem: defina Títulos listados como H2 e H3 ou Apenas H2. É atualizado em cada publicação e aparece na língua de cada página, com as mesmas ligações em todas as línguas. Se deixar vazio o seu Título, este passa a «Índice», também traduzido. No telemóvel, fica recolhido até ser tocado.

No editor, o seu cartão mostra os títulos atuais. Enquanto nenhum título se lhe seguir, fica vazio e não aparece no site.

O formulário de contacto

Escreva / e escolha Formulário. Clique no bloco: as suas definições aparecem no separador Bloco do painel da direita.

• Campos: adicione-os um a um (texto, e-mail, telefone, área de texto, lista pendente, escolha única, caixa de verificação, data, ficheiro) e indique se são obrigatórios.
• Texto do botão: o que o botão de envio mostra.
• Depois do envio: Mostrar uma mensagem (a Mensagem de confirmação aparece no lugar do formulário) ou Ir para uma página: depois de enviada a mensagem, o visitante chega à página escolhida, na sua língua.

As mensagens chegam ao endereço de receção dos formulários, definido uma vez para todo o site em Definições › i-Services.

Proteger os seus formulários contra o spam

Em Definições › i-Services, a secção Proteção anti-spam protege os formulários de contacto, os comentários do blogue e as avaliações de produtos. Escolha o Fornecedor de CAPTCHA (Cloudflare Turnstile ou Google reCAPTCHA) e cole a Chave do site e a Chave secreta que esse fornecedor lhe deu.

Na publicação, o TOWeb verifica junto da Google ou da Cloudflare se a chave secreta é aceite: uma chave recusada deixaria passar o spam sem avisar. O ecrã Publicar assinala-o, indicando onde corrigir a chave. Assinala também uma proteção configurada a meio, quando falta a chave do site ou a chave secreta. Sem ligação, a publicação avança sem esperar.

No site publicado, o servidor do site verifica cada envio. Com o reCAPTCHA v3, um envio que a Google considere automático é recusado; se a Google não responder, o envio é aceite, para que nenhuma mensagem dos seus clientes se perca. Com o Turnstile, uma validação obtida noutro site é recusada.

Incorporar um serviço externo

Uma webcam, uma agenda online, um widget de avaliações, uma previsão meteorológica, um formulário de outro serviço: o bloco Incorporar coloca-os em qualquer ponto das suas páginas.

1. Numa linha vazia, escreva / e depois Incorporar.
2. No painel da direita, escolha o que incorpora: Um endereço (a página do serviço, mostrada numa moldura cuja altura define) ou Um código HTML (o código que o serviço lhe fornece, para copiar e colar tal como está).
3. Descreva em poucas palavras O que a incorporação mostra: é o que os leitores de ecrã leem.
4. Abra a Pré-visualização para ver o resultado: no editor, o bloco aparece como um cartão.

No modo Um código HTML, o código escreve-se diretamente no bloco, a cores, e o separador Pré-visualização mostra o resultado.

Se o serviço colocar cookies ou seguir os seus visitantes, escolha a sua categoria em Consentimento do visitante: Medição de audiência ou Marketing e redes sociais. O bloco aguarda então que o visitante aceite esta categoria no banner de cookies; até lá, uma mensagem ocupa o seu lugar, com uma ligação para gerir os cookies. Funciona com o banner do TOWeb e com o da WebLegal.

O código também pode conter PHP, como uma página .php do TOWeb 14: a página que o contém é publicada como index.php, no mesmo endereço. Antes da publicação, o TOWeb verifica a sintaxe do código: um erro interrompe a publicação indicando a página e a linha. O código é executado no seu alojamento, sob a sua responsabilidade, e no teste local; na pré-visualização, uma moldura ocupa o seu lugar. Não é publicado numa página protegida por palavra-passe. Para verificar se o seu alojamento executa PHP, use Publicar › Testar o servidor.

Copiar ou duplicar um trecho

Um título, o seu texto e uma imagem copiam-se em conjunto, como num processador de texto:

1. Selecione o trecho com o rato, do início do título até ao fim do último elemento. Também pode clicar no início e depois Shift + clique no fim.
2. Copie: ⌘C (Mac) ou Ctrl+C (Windows).
3. Clique no fim da linha após a qual quer colocar a cópia e prima Enter: cria-se uma linha vazia.
4. Cole: ⌘V (Mac) ou Ctrl+V (Windows).

Para reproduzir uma secção inteira, com o seu fundo e todo o seu conteúdo, use antes Duplicar nos seus comandos: veja o artigo As secções.

Mostrar um bloco consoante o ecrã

No fundo do painel de cada bloco, Mostrar em escolhe os ecrãs onde aparece: Computador, Tablet e Telemóvel. Um bloco desligado para um ecrã não aparece nele no site publicado, mas continua visível no editor com uma etiqueta. A pré-visualização por dispositivo mostra o resultado.