Como editar os blocos de conteúdo da sua página

Toda landing page é montada por blocos de conteúdo. Cada bloco é uma seção da página: um título de destaque, um trio de serviços lado a lado, uma imagem com texto, e assim por diante. É editando esses blocos que você constrói e atualiza as suas páginas. Neste tutorial você vai conhecer a lista de blocos e aprender a editar cada campo, do título à imagem.

Se você ainda não criou a sua página, comece pelo tutorial de como criar e configurar uma landing page. E pra deixar o visual dos blocos padronizado, veja depois o tutorial de Estilos & Cores.

A lista de blocos de conteúdo

Na lista de Landing Pages, clique em Editar na página que você quer trabalhar. Você chega na lista de blocos, com três abas no topo: Landing Page, Cadastrar Bloco e Configurações. Logo abaixo aparecem o nome da página, a URL com o status de renderização e o botão Ver Landing, pra abrir a página no site.

Os blocos aparecem na ordem em que são exibidos na página, e cada um traz um resumo completo: a etiqueta do layout (Título e Texto, 3 por Linha, HTMLCSS e assim por diante), o título com a hierarquia entre parênteses, o comecinho do texto, a imagem quando tem, o Estilo & Cor aplicado, o link do botão e o status de renderização. Assim você bate o olho e já sabe o que é cada seção.

Cada bloco tem os botões Editar, Duplicar e Excluir. E pra mudar a ordem das seções, você pode simplesmente clicar e arrastar os blocos na lista e salvar a ordem.

Conhecendo os layouts de bloco

O layout é o formato visual do bloco, e é a primeira escolha na hora de montar uma seção. O sistema oferece uma lista completa de layouts prontos, é só selecionar no campo Layout dentro da edição do bloco.

São muitas opções: Título e Sub-título, 1 item por Linha com as variações de proporção, de 2 a 6 itens por linha, Parallax, Foto Capa, Galeria de Fotos, Carrossel de Banners, Formulário, Avaliações de Clientes, Código HTML e CSS, Arquivo Personalizado, Últimas Publicações do Blog e FAQ. Pra você bater o olho e já saber qual escolher, veja abaixo os layouts mais usados no dia a dia, cada um com um exemplo real.

Título e Texto

O bloco só de texto. Perfeito pra seções de conteúdo escrito, como a apresentação da empresa, um texto institucional ou qualquer parte da página em que a palavra é a protagonista.

1 item por Linha (6/6)

Imagem de um lado, texto do outro, com as duas colunas do mesmo tamanho. É o clássico pra apresentar um serviço ou um destaque com uma boa imagem de apoio, e você escolhe se a foto fica à esquerda ou à direita.

1 item por Linha (4/8)

A mesma ideia, mas com proporções diferentes: a coluna da imagem menor e a do texto maior. Ótimo quando a imagem é um ícone ou uma ilustração de apoio e o texto precisa de mais espaço. Também existem as variações 3/9 e 5/7, pra você calibrar a proporção do jeito que a seção pedir.

3 itens por Linha

Agrupa três chamadas lado a lado numa linha só, cada uma com imagem, texto e botão. É um dos layouts mais úteis do criador, ideal pra apresentar serviços, diferenciais ou benefícios.

Parallax

Uma imagem de fundo que se move suavemente conforme a rolagem da página, com uma lente escura por cima pra dar contraste e facilitar a leitura do texto. Perfeito pra frases de impacto e chamadas pra ação no meio da página.

Avaliações de Clientes

Exibe as avaliações do Google num carrossel, com a nota da empresa, o total de avaliações e os depoimentos reais dos clientes. É prova social pura, um dos blocos que mais geram confiança na página.

Código HTML e CSS

O bloco de código livre. Você cola o HTML e o CSS e a seção aparece exatamente como foi criada, sem interferência. É o bloco ideal pra seções totalmente personalizadas e pra conteúdos gerados com IA, como um hero de página feito sob medida.

Editando um bloco

Ao clicar em Editar, abre o formulário do bloco. Ele é o mesmo tanto pra editar um bloco existente quanto pra cadastrar um novo pela aba Cadastrar Bloco. Vamos passar por cada parte.

Tipo de bloco e conteúdo

1. Layout. O formato visual do bloco. Você pode trocar a qualquer momento, por exemplo de Título e Texto pra 3 itens por Linha.
2. Título. O texto principal do bloco, com três ajustes ao lado: o Alinhamento, os Itens (se o ajuste vale só pro título ou pro título e o texto) e a Hierarquia, que define se o título é um H1, H2, H3 ou um parágrafo. A hierarquia é importante pro SEO, o H1 é o título principal da página e os H2 e H3 organizam as seções.
3. Texto. O conteúdo do bloco, num editor completo estilo Word. Você pode formatar, colar texto e até trabalhar direto no código pelo botão Código-Fonte, porque o editor aceita HTML.

Ordem e espaçamentos

1. Ordem de Exibição. A posição do bloco na página. Lembre que na lista também dá pra arrastar.
2. Espaço Superior e Inferior (caixa). As margens de cima e de baixo do bloco, pra dar respiro entre as seções.
3. Espaço Superior (texto). Uma margem extra acima do texto, dentro do bloco.

Botão, link e estilo

1. Legenda Botão. O texto do botão. Dica de SEO: use a palavra-chave da página de destino no texto do link, tipo Ver Criação de Sites.
2. URL Destino. O endereço pra onde o botão leva. É aqui que você faz as linkagens internas entre as páginas do site, por exemplo /criacao-de-sites-profissionais.
3. Alinhamento Botão. Esquerda, centro ou direita.
4. Estilo e Cor. Aqui você escolhe qual estilo padrão o bloco usa, por exemplo BG 02 - Borda Item. Os estilos são criados na aba Estilos & Cores, e a mágica deles a gente explica no tutorial de Estilos & Cores.
5. Abrir link em nova janela. Recomendado quando o destino é um site externo.

Foto

Na parte da foto, você vê a imagem atual do bloco e escolhe entre atualizar somente o texto ou atualizar a foto também, enviando uma nova imagem. Dois campos merecem atenção especial:

1. Nome do arquivo da imagem (SEO). É o nome de referência da imagem desse bloco. Ele não renomeia nem substitui arquivos no servidor, apenas grava o nome no item, e serve pra quando o arquivo já está na pasta do site. Ao salvar, a landing re-renderiza pra refletir.
2. Texto Alternativo da Imagem (alt). A descrição da imagem, importante pro SEO e pra acessibilidade. Descreva o que a imagem mostra. Se ficar vazio, o sistema usa o título do item como descrição.

No fim, clique em Salvar. A alteração é gravada, a página renderiza de novo e já exibe o conteúdo atualizado no site.

Editando as cores de um bloco individual

Cada bloco também tem uma tela de Editar Cores, onde dá pra ajustar cores, fundo, bordas e CSS só daquele item: cor da fonte, fundo da linha toda (cor sólida, degradê ou imagem), cor interna do bloco, cores do botão, bordas do item e da imagem, um CSS específico e até a opção de exibir o item somente após o preenchimento de formulário. No rodapé da tela, o botão Copiar Estilo replica o visual desse item pra todos os blocos do mesmo layout na página.

Passo a passo: atualizando uma seção da página