Pular para o conteúdo
GloboGlobo Docs
Instalar app
Português (Brasil)

Visão geral dos blocos

Adicione blocos como links, imagens, produtos e contagens regressivas a um mega menu ou a uma aba.

Visão geral Todos os planos 6 min de leitura

Um bloco é uma peça de conteúdo dentro de um mega menu ou de uma aba. Os blocos ficam lado a lado em uma linha, e a Largura de cada bloco define quanto da linha ele ocupa.

Lista de linksUm título e uma coluna de links, com ícones, imagens e selos opcionais. Links com imagem ao passar o mouseLinks ao lado de uma imagem grande que muda ao passar o mouse. Lista de recursosDiferenciais como frete grátis, cada um com um ícone. BotãoUm botão de chamada para ação, como “Ver tudo”.

Imagens e banners

ImagemUm banner ou imagem promocional com título e link. Carrossel de imagensVárias imagens em um carrossel.Growth · Pro Banner promocionalUma imagem com título, texto e botão. Logos de marcasUma grade de logos de marcas, cada um com seu link.

Produtos e coleções

Lista de produtosUm card de produto ou produtos em grade, lista ou carrossel. Hotspots de lookbookUma foto com pontos clicáveis sobre os produtos nela. Lista de coleçõesColeções com suas imagens.Growth · Pro Destaque de coleçãoNomes de coleções ao lado de uma grade com seus produtos.Growth · Pro

Conteúdo e promoções

Posts do blogSeus artigos de blog mais recentes ou escolhidos a dedo.Growth · Pro Formulário de contatoUm formulário para os clientes enviarem uma mensagem. NewsletterUm formulário de inscrição por e-mail. Contagem regressivaUm cronômetro que conta até uma data.Growth · Pro Coupon codeUm código de desconto que os compradores copiam com um clique.Growth · Pro HTML personalizadoQualquer HTML: mapas, vídeos, incorporações.Pro

Qual devo usar?

Bloco Ideal para Aba em Selecionar bloco Plano
Lista de links Categorias, marcas, tamanhos Lista de links Todos os planos; o Selo exige o Pro Navigation
Links com imagem ao passar o mouse Categorias com pré-visualização por imagem Lista de links Todos os planos
Lista de recursos Frete grátis, devoluções, pagamento seguro Lista de links Todos os planos
Botão Uma chamada para ação “Ver tudo” Lista de links Todos os planos
Imagem Um banner sazonal ou promoção Adicionar imagem personalizada Todos os planos
Carrossel de imagens Várias campanhas em um bloco Adicionar imagem personalizada Growth Navigation, Pro Navigation
Banner promocional Uma promoção ou nova coleção, com botão Adicionar imagem personalizada Todos os planos
Logos de marcas “Compre por marca” Adicionar imagem personalizada Todos os planos
Lista de produtos Um mais vendido, novidades, uma coleção Adicionar produto Produto único: todos os planos. Grade, lista, carrossel: Growth Navigation, Pro Navigation
Hotspots de lookbook “Compre o look” Adicionar produto Todos os planos
Lista de coleções Blocos “Compre por categoria” Coleção Growth Navigation, Pro Navigation
Destaque de coleção Produtos de várias coleções Coleção Growth Navigation, Pro Navigation
Posts do blog Guias, lookbooks, novidades Blogs Growth Navigation, Pro Navigation
Formulário de contato Dúvidas sem sair da página Formulário de contato Todos os planos
Newsletter Aumentar sua lista de e-mails Formulário de contato Todos os planos
Contagem regressiva Promoções relâmpago e prazos Contagem regressiva Growth Navigation, Pro Navigation
Coupon code Um código de desconto para copiar Coupon code (código de cupom) Growth Navigation, Pro Navigation
HTML personalizado Mapas, vídeos, incorporações Adicionar HTML ao menu Pro Navigation

Duas outras abas adicionam estrutura em vez de um único bloco:

  • Multibloco adiciona combinações prontas, como 3 Listas de links + 1 Imagem ou Mapa + contato + endereço, com um clique. O plano necessário depende dos blocos que ela contém. Agrupamento de itens empilha vários blocos em uma coluna; veja Layout Masonry (Pro Navigation).
  • Aba adiciona abas simples ou aninhadas com os títulos à esquerda, no topo ou à direita. Veja Menu com abas (Pro Navigation).

Adicione um bloco

  1. Abra o painel

    No editor de menus, clique no item que tem um mega menu para abrir o painel dele. Clique em Adicionar bloco.

    Clique em Adicionar bloco no painel aberto do mega menu.

  2. Escolha uma aba e um layout

    Em Selecionar bloco, clique em uma aba, como Multibloco, Lista de links ou Coupon code. Passe o mouse sobre um layout e clique em Selecionar.

    (1) Escolha uma aba, (2) passe o mouse sobre um layout e clique em Selecionar.

  3. Configure o bloco

    As configurações dele abrem em Editar item. Preencha o conteúdo e escolha a Largura. Para editá-lo depois, clique no bloco na pré-visualização.

    (1) Clique na contagem regressiva na pré-visualização, (2) defina a Largura.

  4. Salve e publique

    Clique em Salvar e depois em Publicar.

Configurações que todo bloco tem

LarguraPadrão: Depende do layout
Quanto da linha o bloco ocupa: Automático ou de 8,33% a 100%. Blocos cujas larguras somam mais de 100% quebram para uma nova linha. Para colunas iguais, use 4 × 25%, 3 × 33,33% ou 2 × 50%.
Ocultar no desktop / Ocultar no celularPadrão: Desativado
Em Visibilidade. Oculta o bloco em um tipo de dispositivo.
Ocultar quando estiver logado / Mostrar somente quando estiver logadoPadrão: Desativado
Em Visibilidade. Mostra o bloco só para visitantes ou só para clientes conectados.
Agendar publicaçãoPadrão: Desativado
Em Visibilidade. Mostra o bloco somente entre uma Data de início / Hora de início e uma Data de término / Hora de término. Veja Agende menus.
Nome de classe extraPadrão: Vazio
Em Avançado. Adiciona sua própria classe CSS para você estilizar o bloco com o CSS personalizado.

Esta página foi útil?

Relatar um problema