Referência dos blocos de conteúdo
Um guia de todos os blocos de conteúdo do editor, de títulos e imagens a depoimentos, perguntas frequentes e formulários, com a finalidade e as principais configurações de cada um.
Cada página da sua loja é montada com blocos. Este artigo lista os blocos de conteúdo do painel à esquerda do editor, para que serve cada um e as principais configurações dele. Os blocos que mostram seus produtos e cuidam do carrinho e do checkout estão em Blocos da loja: grade de produtos, produto, carrinho e checkout.
Configurações que todo bloco tem
Clique em um bloco na página para abrir as configurações dele. A maioria dos blocos as agrupa em Geral, Aparência e Tipografia. Todo bloco também tem Tamanho e posição, onde você define o lugar dele na grade e o oculta em tablets ou celulares, e Gerenciar, com Duplicar e Excluir. Veja Adicione, mova e redimensione blocos e Deixe seu site bonito em celulares e tablets.
Quando um bloco tem configurações de Tipografia, elas são sempre as mesmas: Fonte, Tamanho da fonte, Peso, Cor, Itálico, Caixa das letras, Espaçamento entre letras e Altura da linha. As tabelas abaixo as listam uma só vez, como “Tipografia”.
Básico
| Bloco | Para que serve | Principais configurações |
|---|---|---|
| Título | Um título ou o cabeçalho de uma seção. | Texto, Tamanho (Título 1 a Título 6), Alinhamento, Tipografia. |
| Texto | Um parágrafo de texto corrido. | Texto, Alinhamento, Tipografia. |
| Lista | Uma lista curta de pontos, como o que está incluído. | Itens (um por linha), Marcador (Marca de seleção, Ponto, Travessão, Numerado ou Nenhum), Espaço entre os itens, Tipografia. |
| Botão | Um botão que leva a uma página ou a um endereço. | Rótulo, Link, Estilo (Sólido, Contorno ou Sutil), Alinhamento, cores, Raio dos cantos, tamanho do texto, espaçamento interno e Largura total. |
| Emoji | Um emoji grande como decoração simples. | Emoji (escolha um ou digite o seu), Tamanho da fonte, Alinhamento. |
Para saber mais sobre textos e botões, veja Edite textos, títulos e botões. O Link de um botão funciona como um link de menu: veja Editar os links do menu.
Mídia
| Bloco | Para que serve | Principais configurações |
|---|---|---|
| Imagem | Uma única foto ou gráfico. | Imagem, Texto alternativo (uma descrição curta para quem não consegue ver a imagem), Formato (Larga 16:9, Padrão 4:3, Quadrada ou Original), Ajuste da imagem (Preencher o quadro ou Caber dentro), Raio dos cantos. |
| Galeria | Uma grade de imagens, que podem abrir em tamanho real ao serem clicadas. | Fotos, Número de colunas (1 a 6), Espaço entre células, Formato, Raio dos cantos, Abrir em tamanho real ao clicar. |
| Vídeo | Um vídeo do YouTube, reproduzido na sua página. | Link do YouTube. A Payly nunca hospeda arquivos de vídeo. |
| Mapa | Um mapa do Google do seu ateliê, loja ou ponto de retirada. | Endereço ou local, Zoom, Formato, Raio dos cantos. Digite o endereço como você o pesquisaria. |
Em uma Galeria, cada imagem é adicionada pelo endereço web dela, com uma descrição e um link opcional. Para usar uma foto que você enviou, copie o endereço dela na tela Mídia. Veja Adicione imagens e use a biblioteca de mídia.
Layout
| Bloco | Para que serve | Principais configurações |
|---|---|---|
| Contêiner | Uma caixa que guarda outros blocos, para você estilizá-los e movê-los como uma peça só. | Layout interno (Grade livre, Empilhado ou Lado a lado), Espaço entre células, Alinhar itens, Cor de fundo, Cor da borda, Raio dos cantos, espaçamento interno, Altura mínima. |
| Grade | Uma tabela de linhas e colunas com um bloco em cada célula. Vira uma coluna no celular. | Número de colunas e Número de linhas (de 1 a 8 cada), Espaço entre células, Alinhar itens, Contorno da célula, cores, espaçamento interno. |
| Divisor | Uma linha fina entre duas partes de uma página. | Cor, Espessura. |
| Espaçador | Espaço vazio entre blocos. | Altura. |
Veja Crie layouts com contêineres e grades.
Marketing
| Bloco | Para que serve | Principais configurações |
|---|---|---|
| Barra de avisos | Uma barra colorida e fina para uma mensagem curta, como uma oferta de entrega, com um link opcional. | Texto, Texto do link, Link, Alinhamento, Cor de fundo, Cor do texto, Tamanho da fonte. |
| Depoimento | A fala de um cliente, com nome, uma breve descrição, uma foto e uma avaliação em estrelas. | O que a pessoa disse, Nome, Descrição, Foto, Estrelas (0 a 5), Alinhamento, cores, Tipografia. |
| Faixa de logos | Uma fileira de logos, como as lojas que vendem o seu trabalho ou aparições na imprensa. | Logos, Número de colunas, Espaço entre células, Altura dos logos, Sem cor até passar o mouse. |
| Contagem regressiva | Um cronômetro que conta os dias até uma data, para uma promoção ou um lançamento. | Conta regressivamente até, Mensagem quando o tempo acabar, Mostrar rótulos de dia e hora, Alinhamento, Tamanho dos números, cores. |
| Redes sociais | Ícones que levam às suas contas nas redes sociais. | Contas (uma rede e um endereço para cada), Estilo (Círculo preenchido, Círculo contornado ou Somente ícone), Tamanho do ícone, Espaço entre células, Alinhamento, Cor do círculo, Cor do ícone. |
Para mostrar uma barra de avisos em todas as páginas, coloque-a no seu cabeçalho. A contagem regressiva lê a data no fuso horário de cada visitante, então meia-noite significa a meia-noite dele. Os blocos de redes sociais oferecem Instagram, Facebook, TikTok, X, YouTube, LinkedIn, Pinterest, WhatsApp, E-mail e Site.
Menus e formulários
| Bloco | Para que serve | Principais configurações |
|---|---|---|
| Formulário | Um formulário de contato cujas mensagens chegam a você por e-mail. | Título do formulário, Descrição, Campos, Texto do botão de envio, Mensagem após o envio, cores. |
| Perguntas frequentes | Perguntas que se abrem para mostrar as respostas. | Título, Perguntas (uma pergunta e uma resposta cada), Abrir a primeira resposta, Uma resposta aberta por vez, Cor de fundo, Tipografia. |
| Navegação | Seu logo e seu menu. Ela já está no seu cabeçalho. | Logo do site, Nome da marca, Altura do logo, Layout, Mostrar botão do carrinho, Links, cores. |
| Lista de links | Uma coluna de links com título, como as de um rodapé. | Título da coluna, Links, Cor de fundo, Fonte, Cor, Tamanho da fonte. |
Veja Adicione um formulário de contato, Editar os links do menu e Personalize o cabeçalho e o rodapé.