Editor de Blocos: montando páginas com peças encaixáveis

O Editor de Blocos é a ferramenta que monta o conteúdo visual da sua loja. Em vez de uma página fixa, você constrói cada tela com blocos, peças independentes que se encaixam e podem ser empilhadas, reordenadas e personalizadas. À primeira vista pode parecer complexo, mas o conceito é simples. Depois que você entende que tudo são peças que se encaixam, montar uma página vira quase um jogo de montar.

Onde o Editor de Blocos aparece

Ele está sempre no botão amarelo Editor de Blocos, no canto superior direito, quando você adiciona ou edita uma Vitrine (a página inicial), uma Página, uma Categoria, um Produto, um Post de Blog ou uma Marca. É o mesmo editor em todos esses lugares, então o que você aprende aqui vale para a loja inteira.

A ideia central: grupos e blocos

O conceito que destrava tudo: existem dois níveis. O Grupo é a caixa, e os blocos são o conteúdo dentro dela.

• O Grupo é a seção da página, uma faixa horizontal. É ele que define o visual da faixa: cor de fundo, espaçamentos, bordas e cantos.
• Os blocos são o conteúdo que vai dentro do grupo: um texto, uma foto, uma vitrine de produtos, um vídeo, e assim por diante.

Você cria um grupo, coloca os blocos que quiser dentro dele, e repete. A página é a soma desses grupos, de cima para baixo.

Conhecendo a tela

A tela tem duas áreas:

• À esquerda, uma prévia em tempo real de como a página fica na loja. No topo dela você alterna a prévia entre Celular e Computador, e ainda tem o Visualizar (abre a página na loja) e o Cache (atualiza a prévia).
• À direita, a barra de ferramentas, onde você monta a página, com os botões Adicionar, Modelos e Exibir.

Como montar a página

1. Comece por um grupo. No botão Adicionar, você cria a seção:

• Grupo de Blocos — um grupo vazio, para você preencher.
• Grupo + 2, 3 ou 4 Blocos de Fotos — atalhos que já criam o grupo com blocos de foto prontos.
• Banner principal — um grupo especial para o banner rotativo do topo.

Se preferir partir de algo pronto, use o botão Modelos. Ele traz layouts completos (Modelo 1 a 10) que você insere e depois ajusta ao seu gosto.

2. Adicione blocos dentro do grupo. No grupo, clique em Novo Bloco e escolha o tipo (a lista completa está na próxima seção).

3. Edite cada bloco. Clique no nome do bloco e em Editar para abrir as opções dele.

4. Reordene arrastando. Mova blocos e grupos pelo ícone de arrastar, e a prévia atualiza na hora.

Atenção: depois de reorganizar, grave a nova posição no botão que aparece no canto. As mudanças só valem na loja depois disso.

Os blocos disponíveis

Pelo Novo Bloco, dentro de um grupo, você adiciona:

• Texto — um texto formatado, com editor de fonte, cor e tamanho, e até edição por idioma.
• Fotos — uma ou mais imagens, com estilos de exibição (empilhadas, com legenda ou em carrossel).
• Vídeo — incorpora um vídeo do YouTube, Vimeo ou Dyntube.
• Produtos — uma vitrine de produtos, escolhidos manualmente ou por categoria, com número de colunas ajustável.
• Categorias, Conjuntos e Marcas — listas em formato de card.
• Blog — uma lista dos posts do blog.
• Avaliações — as avaliações dos seus clientes.
• Código HTML — para inserir um HTML próprio (uso avançado).

No nível do grupo (botão Adicionar), você ainda tem o Banner principal, para o banner rotativo do topo da loja.

Não precisa usar todos. Comece pelos essenciais (Banner principal, Produtos e Fotos) e vá experimentando.

Ajustes que todo bloco compartilha

Ao editar qualquer bloco, alguns controles se repetem:

• Status e Lembrete — ativa o bloco e dá a ele um nome interno, só para a sua organização.
• Larguras — a largura do bloco no Celular e no Computador (em porcentagem), além da opção de Ocultar no Celular ou Ocultar no Monitor.
• Título — um título opcional acima do bloco, que você pode até esconder.

O Grupo acrescenta os ajustes visuais da seção: espaçamento interno e externo, bordas, cantos arredondados e cores de fundo, texto e borda.

Entendendo o layout responsivo

Aqui entra um conceito que faz toda a diferença e que muita gente ainda não conhece.

Uma página responsiva é aquela em que o mesmo conteúdo se adapta a cada tamanho de tela. O texto, as fotos e os produtos são os mesmos no celular e no computador. O que muda é a largura, o número de colunas e os espaçamentos, para tudo continuar legível e bonito em qualquer aparelho.

É por isso que o editor pede a largura para Celular e Computador, e as colunas por dispositivo no bloco de Produtos: para você adaptar a apresentação, não para recomeçar do zero. Use a prévia, alternando entre Celular e Computador, para conferir como cada tela fica.

O erro mais comum: ocultar quase tudo no celular e montar uma estrutura completamente diferente da do computador. O cliente que vê a loja no celular e depois no computador encontra duas páginas sem relação uma com a outra, e isso confunde, atrapalha as vendas e dificulta a manutenção.

A boa prática é manter a mesma ordem e a mesma lógica de conteúdo nas duas telas, usando largura, colunas e espaçamento para adaptar a forma como o conteúdo aparece. Use o Ocultar com parcimônia, apenas para um detalhe que realmente não cabe em uma tela menor, nunca para criar uma página paralela.

Pensando assim, o Editor de Blocos deixa de ser complicado: são peças que se encaixam, e o seu trabalho é organizá-las para que façam sentido em qualquer tela.