Adicionar e mover secções e arrastar medidas

Módulo 3: Textos, fotografias e secções · Tempo de leitura: 10 minutos

Objetivo de aprendizagem: No final desta lição, saberá construir uma página a partir de secções: adicionar uma secção através do seletor ou do chat, movê-la, copiá-la e removê-la, arrastar o espaçamento e as medidas e escolher, por secção, as colunas, os cantos, o fundo e a visibilidade no telemóvel.

Conceitos chave: secção, Secções, Adicionar componente, formato, Secção abaixo, três designs, Criar com IA, Editar secção, Espaçamento, Espaço entre elementos, Colunas, Cantos, Ocultar no telemóvel, pega, HTML próprio

Uma página é uma pilha de secções

Cada página do seu site é composta por secções: faixas horizontais colocadas umas por baixo das outras. No topo há normalmente um Hero (a grande abertura com título, texto e botão), por baixo, por exemplo, Cartões com os seus serviços, Avaliações, Horário de funcionamento e, no fundo, Contacto. O construtor tem 35 tipos, cada um com um ou mais formatos: o mesmo conteúdo, com outra apresentação.

Quem pensa desta forma constrói uma página melhor. Coloque a informação mais importante no topo, um assunto por secção, e termine com aquilo que o visitante deve fazer (telefonar, enviar um e-mail, pedir um orçamento). No Schildersbedrijf Example, a página inicial tem este aspeto: Hero com "Pedir orçamento", Cartões com três serviços, Foto e texto sobre o método de trabalho, Avaliações, Perguntas e Contacto.

Adicionar uma secção: três caminhos

1. Escolher no seletor (gratuito)

Abra o painel Secções na barra lateral ou clique, na pré-visualização, em Secção abaixo: esse botão está na barra de ferramentas de uma secção selecionada e na linha com + que aparece quando passa o rato entre duas secções. Por baixo da pré-visualização encontra também Adicionar componente.

O seletor mostra os tipos em grupos: Popular, Abertura e cabeçalho, Texto e história, Serviços e produtos, Preços e promoções, Confiança e equipa, Foto e vídeo, Informações práticas, Contacto e apelo à ação e Personalizado e widgets. Existe uma caixa de pesquisa ("Pesquisar, por exemplo avaliações, preços ou equipa"). Cada tipo é apresentado como exemplo na sua própria identidade visual. Clique num tipo para ver os formatos e escolha um com Adicionar. Se não chegou ao seletor através de uma secção concreta, o construtor pergunta "Onde deve ficar ...?": clique numa linha verde da sua página ou escolha No topo ou No fundo. Também pode arrastar um componente diretamente do painel para a sua página.

Isto não custa nada. A nova secção vem com textos de exemplo, que depois altera o próprio utilizador (lição 3.2) ou que a IA preenche (lição 3.1). Importante: enquanto o seu site tiver esse texto de exemplo, o construtor não o coloca online. Nesse caso, surge a mensagem "O seu site ainda tem texto de exemplo. Preencha-o primeiro ou remova a secção."

2. Pedir no chat: três designs

Se escrever no chat "Quero uma secção com o nosso método de trabalho em quatro passos", a IA mostra primeiro três designs adequados da biblioteca de secções, na sua identidade visual. Escolha com Este design ou clique em Deixar a IA escolher. Em seguida, a IA preenche a secção com conteúdo, sob a forma de proposta. Como é acrescentada uma secção, isto custa 2 edições.

Se indicar que algo deve ficar numa secção existente ("coloque o horário no bloco de contacto"), ou se mencionar um serviço como Spotify ou Calendly com uma ligação, o construtor salta os três designs: nesse caso, é claro o que pretende.

3. Mandar criar um componente próprio

Não encontra o que procura? No topo do seletor está Crie o seu próprio componente com IA. Descreva o que os visitantes devem poder fazer, por exemplo uma calculadora de preços ou um pequeno questionário, e clique em Criar com IA. Isto custa 2 edições, porque é acrescentado um novo componente.

Mover, copiar e remover

Passe o rato por cima de uma secção. Aparece uma barra de ferramentas com Alterar com IA, Subir, Descer, Duplicar, Secção abaixo e Eliminar, e uma pega para arrastar a secção ("Arraste esta secção para outro lugar"). Ao clicar em Eliminar, o construtor pergunta primeiro "Tem a certeza?". Também pode arrastar, duplicar e remover elementos individuais dentro de uma fila, como um cartão ou uma avaliação.

Todos estes botões são gratuitos. Cada ação cria uma nova versão ("Secção movida (versão ...)"), por isso uma secção removida por engano pode ser reposta em Versões (lição 3.5). Remover através de um pedido no chat custa uma edição: utilize, portanto, o botão.

Arrastar medidas

Passe o rato, na pré-visualização, por cima de uma secção, fotografia ou texto e aparecem pegas. Arrastar é gratuito e não usa a IA:

• Margem inferior de uma secção: mais ou menos espaço por cima e por baixo da secção.
• Hero: tornar mais alto ou mais baixo.
• Fotografia: mais larga ou mais estreita, mais alta ou mais achatada (o formato), cantos mais arredondados ou mais retos, e o ponto de foco (lição 3.3).
• Bloco de texto: mais largo ou mais estreito (margem direita).
• Título: maior ou menor, e o espaço por baixo.
• Fila de cartões ou colunas: a largura de toda a fila.

Faça duplo clique numa pega e a medida padrão é reposta; no hero, o construtor volta a escolher a altura por si.

Porque é que arrastar é melhor do que pedir "aumente isto": vê de imediato o que acontece, não custa nada e a IA não altera nenhum texto pelo caminho.

Editar secção: as definições de uma secção

Clique numa secção e escolha Editar secção. Abre-se uma janela com:

Por baixo estão os mesmos botões da barra de ferramentas (Subir, Descer, Duplicar, Secção abaixo, Eliminar) e, em "Ou peça outra coisa à IA:", uma caixa de texto para um pedido à IA apenas sobre esta secção.

Alguns conselhos. Alterne os fundos (painel claro, nenhum, tom), para que os visitantes vejam onde termina um assunto. Numa fila de cartões, use no máximo três ou quatro colunas; num telemóvel ficam, de qualquer forma, umas por baixo das outras. Use Ocultar no telemóvel com moderação: nunca oculte os seus dados de contacto nem algo de que um visitante no telemóvel precise. Para verificar o aspeto, escolha Telemóvel na barra superior.

HTML próprio

No grupo Personalizado e widgets está também HTML próprio: uma secção onde cola o seu próprio HTML e, se quiser, CSS. Depois de a colocar, altera-a com Editar HTML na secção. As cores e os tipos de letra seguem a sua identidade visual através de variáveis como var(--acc), var(--tekst) e var(--kop-font). O CSS aplica-se apenas a esta secção.

As limitações são intencionais: scripts, iframes e formulários não funcionam aqui. Para um leitor, agenda, mapa ou formulário de outro serviço, utilize o Widget (lição 4.3). O HTML próprio destina-se a quem conhece HTML; para todos os outros, as secções normais e a IA são o caminho mais rápido.

Armadilhas

• Deixar texto de exemplo numa secção do seletor: assim não consegue colocar o site online.
• Demasiadas secções. Uma página longa com dez secções não é lida. Remova o que não acrescenta nada. Uma página tem no máximo 40 secções, mas nunca precisará de tantas.
• Tratar do espaçamento através do chat. Isso custa edições e é menos preciso do que arrastar.
• Ver apenas no computador. As colunas, o espaçamento e a ocultação funcionam de outra forma num telemóvel.
• Remover no chat, quando o botão Eliminar é gratuito.

No construtor: como fazer

1. Clique, na pré-visualização, em Secção abaixo ou abra Secções.
2. Escolha um grupo, um tipo e um formato e clique em Adicionar.
3. Substitua os textos de exemplo, manualmente ou com a IA.
4. Mova com Subir, Descer ou a pega; duplique ou elimine através da barra de ferramentas.
5. Arraste a margem inferior para ajustar o espaçamento; faça duplo clique para voltar ao padrão.
6. Abra Editar secção para o fundo, as colunas, os cantos, a altura do hero e Ocultar no telemóvel.
7. Verifique em Telemóvel.

Resumo

• Uma página é uma pilha de secções; 35 tipos, cada um com um ou mais formatos.
• Adicionar através do seletor é gratuito e traz texto de exemplo que tem de substituir antes de poder publicar; através do chat recebe três designs e custa 2 edições.
• Mover, duplicar, remover e arrastar medidas é gratuito; um duplo clique numa pega repõe o padrão.
• Editar secção define o fundo, o espaçamento, o espaço entre elementos, as colunas, os cantos, a altura do hero e Ocultar no telemóvel.
• HTML próprio é possível, mas sem scripts, iframes e formulários; para isso existe o widget.

Questionário

Exercício

Exercício D3.4: Uma secção a mais, uma a menos. Melhore a estrutura da sua página inicial com os botões e as pegas, sem pedidos desnecessários à IA.

Lista de verificação:

• [ ] anotou as secções da sua página inicial, de cima para baixo;
• [ ] adicionou uma secção através do seletor e substituiu todo o texto de exemplo;
• [ ] removeu ou juntou uma secção que não acrescentava nada, com Eliminar;
• [ ] moveu uma secção com Subir, Descer ou a pega;
• [ ] arrastou o espaçamento de pelo menos uma secção e repô-lo uma vez com duplo clique;
• [ ] alterou o fundo ou as colunas em Editar secção;
• [ ] viu a página em Telemóvel.

Perguntas:

1. Qual era a ordem das suas secções antes e depois, e porque escolheu esta ordem?
2. Que secção removeu, e porque é que um visitante não sente agora a falta dela?
3. Quantas edições lhe custou este exercício, e que passo teria custado edições através do chat?

Depois de "concluído", verá um exemplo de resposta: de Hero, Números, Cartões, Avaliações, Contacto para Hero, Cartões, Foto e texto (método de trabalho), Avaliações, Perguntas, Contacto, para que os serviços fiquem logo por baixo da abertura; a secção Números foi removida porque os números eram inventados; o exercício custou 0 edições, enquanto remover ou adicionar uma nova secção através do chat teria custado 1 ou 2.

Para saber mais

• Curso gratuito Ser encontrado online 3.2: Títulos e a estrutura de uma página
• Curso gratuito Ser encontrado online 4.2: Mobile-first e o viewport
• Sitebuilder e AI Builder: qual escolher e como abri-lo?