Editor de Blocos – Gerencie o conteúdo das suas páginas

A nossa ferramenta Editor de Blocos é uma maneira flexível e moderna de montar o conteúdo de uma página.


Pense que cada parte da sua página é representada por um bloco de conteúdo (um texto, uma foto, uma banner, uma tabela, etc). Esses blocos funcionam como peças de um quebra-cabeça que você pode empilhar, reorganizar e personalizar para montar sua página com total controle sobre o layout e a ordem dos elementos.

Onde encontrar o Editor de Blocos

Após "adicionar" ou "editar" uma Página, um Post de Blog, um Produto ou uma Categoria, você verá um botão amarelo no canto superior direito da tela, chamado Editor de Blocos.

Ao clicar nele, será aberto o editor avançado de blocos, com a seguinte estrutura:

  • À esquerda: uma prévia em tempo real de como sua página será exibida na loja.
  • À direita: a barra de ferramentas, com os controles para gerenciar os blocos e adicionar novos.

Como adicionar um bloco de texto

  1. Na barra lateral direita, localize um Grupo de blocos
  2. Passe o mouse sobre esse Grupo e clique no ícone de ”+” (Adicionar bloco).

  3. Selecione o tipo Texto.

    O novo bloco de texto será adicionado à pilha. Para editá-lo:

    Clique sobre o nome do bloco (sublinhado) e depois clique em Editar.

    Na barra lateral de edição, você verá:

    • Dimensões do bloco: defina como ele será exibido em diferentes tamanhos de tela (celular, notebook, desktop).
    • Título: um título para o bloco (opcional).
    • Conteúdo: o texto propriamente dito, que pode ser digitado diretamente no campo.
  4. Clique em Continuar e depois em Gravar. O conteúdo aparecerá na prévia à esquerda, em tempo real.

Como adicionar um bloco de fotos

  1. No mesmo fluxo de adicionar blocos, clique no ”+” e selecione Fotos.
  2. O novo bloco será inserido e, novamente, clique sobre o nome do bloco (sublinhado) e selecione Editar.

Na tela de edição, você verá os seguintes campos:

  • Margem antes do bloco: defina o espaçamento antes da exibição das fotos.

  • Dimensões: ajuste para dispositivos móveis e desktops.

    Título e descrição: para contextualizar o grupo de fotos.

    Estilo de exibição das imagens:

    • Fotos empilhadas
    • Fotos empilhadas com legenda inferior
    • Fotos com legenda centralizada sobre a imagem
    • Fotos com texto à direita (formato semelhante ao usado em banners ou blocos de frete)
    • Apresentação com carrossel (swiper)

Para adicionar as fotos:

  • Basta arrastar as imagens para a caixa de upload ou clicar para selecionar do seu computador.
  • As fotos enviadas aparecerão logo abaixo com opção de ordenação e exclusão.

Como adicionar um bloco de banners

O bloco de banners é semelhante ao bloco de fotos, mas com uma diferença importante: ele é tratado como um grupo independente no editor, e não como um bloco dentro de um grupo existente.


Para adicionar um bloco de banners:

  1. Passe o mouse no botão azul com o símbolo de “+”, localizado na barra lateral direita. Esse botão serve para criar um novo grupo de blocos.
  2. No menu que abrir, selecione a opção “Banner principal”.
  3. Um novo grupo de blocos será criado automaticamente com o tipo Banner Principal.
  4. Clique no nome do bloco (que estará sublinhado) e, em seguida, clique em Editar.

Na tela de edição, você encontrará os seguintes campos:

  • Margem anterior ao bloco: controle o espaçamento acima do banner (nenhuma, pequena, média ou grande).
  • Dimensões do bloco: defina como ele deve se comportar em diferentes tamanhos de tela (celular, tablet, notebook e desktop).
  • Título do bloco: opcional, pode ser exibido acima dos banners.
  • Efeitos de transição: escolha entre slide ou fade para a troca de imagens.
  • Auto play: defina se a transição entre os banners será automática.
  • Proporção dos banners: esse campo é muito importante, pois a proporção correta ajuda a manter a performance da loja e impacta diretamente na pontuação do Google PageSpeed.

Por fim, adicione suas imagens utilizando o campo de arrastar e soltar — o mesmo usado no bloco de fotos. Após adicionar as imagens, você poderá definir legendas e links para cada banner.

Como adicionar um bloco de vídeo

Para inserir um vídeo na sua página, siga o mesmo fluxo de criação de blocos:

  1. Clique no botão “+” dentro do grupo de blocos onde deseja inserir o vídeo.
  2. No menu que abrir, selecione a opção Vídeo.
  3. Um novo bloco será adicionado. Clique no nome do bloco (sublinhado) e, em seguida, em Editar.

Na tela de edição, você encontrará os seguintes campos:

  • Dimensões: defina como o bloco de vídeo será exibido em diferentes tamanhos de tela (celular, tablet, notebook, desktop).
  • Título e descrição: campos opcionais para contextualizar o conteúdo do vídeo.

Configurações do vídeo:

  • Tipo de vídeo: escolha entre YouTube, Vimeo ou Dyntube.
  • URL de compartilhamento: cole o link do vídeo, sempre começando com "https://".
  • Largura e altura: defina manualmente as dimensões de exibição do vídeo.
  • Autoplay: ative se quiser que o vídeo comece a rodar automaticamente (obs: o vídeo precisa estar sem áudio para o autoplay funcionar em navegadores modernos).
  • Loop: ative se desejar que o vídeo reinicie automaticamente após o término.

Após salvar, o vídeo será exibido diretamente na página, de forma responsiva e integrada ao layout.

Reorganizando os blocos

Cada bloco, grupo de blocos ou até mesmo o grupo de banner principal pode ser facilmente reorganizado dentro da página.


Para isso, utilize o ícone de arrastar e soltar que aparece ao lado de cada item. Basta clicar, segurar e mover o bloco para a posição desejada.


A prévia à esquerda será atualizada imediatamente com a nova ordem dos blocos.


Importante:

Após fazer a reorganização, será exibido um botão amarelo no canto direito chamado Gravar posições. As alterações só serão aplicadas na loja depois que você clicar nesse botão.