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.

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

No separador Externa, é aceite um endereço do seu próprio site que comece por «/» (por exemplo /boutique/ma-collection/): é colocado no idioma certo na publicação.

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. O bloco Comentários / Avaliações, esse, só é proposto nos artigos do blogue.

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 definição Tamanho das fotos do bloco Equipa vai de S a XL. Um membro sem foto é representado pelas suas iniciais, que seguem o seu nome. Escolha Nenhuma para uma direção ou uma lista de contactos apresentados só com o nome e a função, sem foto nem iniciais.

O bloco Mapa

O bloco Mapa coloca um mapa no endereço à sua escolha. O seu Fornecedor é o OpenStreetMap ou o Google Maps. Com o Google Maps, Tipo de mapa escolhe entre Mapa e Satélite (a vista aérea, com os nomes das ruas): são as duas vistas que a Google oferece sem chave.

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, uma coleção da loja, 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.

O bloco Planos de preços

Clique num bloco Planos de preços: o painel da direita lista os seus planos. A definição Botão coloca o botão de cada plano Sob o preço, à mesma altura em todos os cartões, para que fique visível sem deslizar, ou Em baixo no cartão.

Nas Funcionalidades de um plano, cada ponto pode ter uma ligação: clique no ícone Ligação do ponto e escolha uma página do site, uma âncora ou um endereço externo. Com um Texto da ligação («Ver a demonstração», por exemplo), aparece como uma pequena ligação depois do texto do ponto; sem texto de ligação, é o ponto inteiro que se torna a ligação.

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.

Os títulos e os parágrafos também têm a sua pega ⋮⋮, que aparece ao passar o rato: arraste-a para mover o texto para outro sítio da página, ou clique nela para abrir o mesmo menu. Um bloco Colunas tem a sua quando passa o rato sobre o texto. O texto de uma coluna, de uma tabela ou de um destaque não tem: o que se move é o bloco que o envolve.

Para desfazer um bloco Colunas, clique nele e depois em Remover as colunas nas suas definições: o conteúdo das colunas é mantido, um por baixo do outro, em largura total, e uma coluna vazia desaparece.

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.

Para dividir o formulário em grupos («Os seus dados», «O seu projeto»), adicione um campo do tipo Título: um texto fixo que não pede nada ao visitante.

• 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.
• Ligação da etiqueta: numa caixa de seleção, a etiqueta leva a um documento, por exemplo as suas condições gerais. Abre num novo separador, sem perder o formulário em curso.
• 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.
• Assunto do e-mail: próprio de cada formulário, serve de assunto das mensagens recebidas quando o visitante não preencheu nenhum, para as ordenar num relance («Orçamento», «Inscrição»…).

Num campo Lista pendente ou Botões de opção, as setas Mover a opção para cima e Mover a opção para baixo mudam a ordem das opções, com o rato ou com o teclado.

As mensagens chegam ao endereço de receção dos formulários, definido uma só vez para todo o site em Definições › i-Services. Para que um formulário escreva para outro endereço, preencha o seu E-mail do destinatário nas definições do bloco.

No site publicado, por baixo de um campo de e-mail (formulário de contacto, newsletter, encomenda, reserva), um erro de escrita no endereço de um grande serviço de webmail (gmail.vom, hotmial.com…) é assinalado ao visitante com «Queria dizer …?»: um clique corrige-o. O endereço escrito continua sempre a ser aceite tal como está.

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.

Numa página protegida por palavra-passe, um formulário não mostra captcha: só os visitantes que introduziram a palavra-passe o podem enviar.

O site também limita os envios em massa, mesmo quando um robô envia todos os pedidos ao mesmo tempo. O aviso de receção enviado ao visitante só copia a sua mensagem se o site tiver proteção antispam: sem ela, um robô poderia usar o seu site para enviar e-mails a terceiros.

A subscrição da newsletter

Com o bloco Newsletter, o visitante que introduz o seu endereço recebe um e-mail de confirmação. A sua ligação abre uma página do seu site com o botão Confirmar a minha subscrição: só esse botão inscreve o endereço. Um antivírus de correio que abre as ligações dos e-mails recebidos não pode, portanto, confirmar uma subscrição no lugar da pessoa.

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. O código pode ter até 1 MB, para os serviços que fornecem um código longo.

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.