LOJA VIRTUAL
Editor Visual
Como configurar a Seção de Banners em Grid
Publicado em: 7/6/2021, 4:25:49 PM
Banners em Grid é uma seção disponível no editor visual da Dooca para você personalizar na página inicial ou em hotsites da sua loja virtual.
Você pode usá-la para layoutar a exibição de vários banners juntos, cada um com promoções, campanhas ou categorias diferentes, melhorando seu tráfego e o incentivo à finalização de compra através do direcionamento de cliques.
Para configurar a Seção de Banners em Grid, assista o tutorial em vídeo:
Ou, se preferir, siga as instruções abaixo para personalizar a exibição de acordo com os modelos disponíveis:
Modelo 1: Banner principal à esquerda dos secundários:
Modelo 2: Banner principal à direita dos secundários:
1º Acesse o Menu Loja Virtual e clique em Meus temas.
2º Clique em Personalizar.
3º Na coluna da esquerda, clique em Adicionar seção.
4º Selecione a seção Banners em Grid:
5º Preencha as informações de Conteúdo:
  • Identificação da seção: Neste campo, insira o nome de identificação da seção.
  • Título: Insira o título de sua seção. Este é o título que aparecerá na sua loja virtual.
  • Subtítulo: Insira o subtítulo de sua seção. Este é o subtítulo que aparecerá na sua loja virtual.
  • Para finalizar, clique em Salvar.
6º Preencha as informações de Aparência:
  • Não exibir em dispositivos móveis: Habilite essa opção para não exibir essa seção em dispositivos móveis.
  • Não exibir em desktop: Habilite essa opção para não exibir essa seção em desktop.
  • Classe customizada para editar o css: Insira aqui o código de personalização css para esta seção, caso queira.
  • Estilo do conteúdo: Defina se o conteúdo estará centralizado ou adaptável à largura da tela.
  • Estilo de exibição dos banners: Selecione o melhor estilo de exibição de seus banners. Utilize o campo de visualização ao lado para observar e decidir.
  • Alinhamento do banner principal: Defina o alinhamento do banner principal em relação aos demais: à direita ou à esquerda.
  • Espaçamento entre os banners: Defina o tamanho do espaçamento entre um banner e outro.
  • Cores: Personalize, separadamente, as cores de título, subtítulo, fundo e borda da seção.
  • Imagem de fundo da seção: Caso queira, faça o upload de uma imagem de fundo da seção.
  • Imagem fixa de fundo: Ative esta opção caso desejar que a imagem de fundo seja fixa.
  • Espessura da borda de seção: Defina o tamanho da espessura da borda de seção.
  • Margem de cima da seção: Defina o tamanho da margem de cima da seção.
  • Margem de baixo da seção: Defina o tamanho da margem de baixo da seção.
  • Para finalizar, clique em Salvar.
7º Preencha as informações de Banner Principal:
  • Imagem: Faça upload da imagem para o seu banner principal.
  • Textos sempre visíveis: Habilite essa opção para que os textos estejam permanentemente visíveis em desktop.
  • Textos sempre visíveis no mobile: Habilite essa opção para que os textos estejam permanentemente visíveis em mobile.
  • Título: Insira o título do seu banner. Este é o título que aparecerá na sua loja virtual.
  • Descrição: Insira uma descrição para seu banner. Ela também aparecerá na sua loja virtual.
  • Texto do botão: Insira algum texto de botão caso houver botão de redirecionamento.
  • Link do banner: Se desejar, insira o link para onde o banner direciona.
  • Abrir em nova aba: Habilite essa função para que o redirecionamento seja feito em uma nova aba no navegador e não dentro da que já estiver aberta.
  • Cor da máscara de fundo: Defina uma cor para a máscara de fundo do banner.
  • Opacidade da máscara de fundo: Ajuste a opacidade da cor da máscara de fundo.
  • Cores: Personalize, individualmente, as cores de título, descrição, fundo e texto de botão de seu banner principal.
  • Banners secundários (limite de 02):Cada bloco adicionado representa um banner secundário e pode ser personalizado individualmente assim como o principal. Eles serão exibidos conforme o layout aplicado em Grid.
  • Para finalizar, clique em Salvar.

Exibição na loja virtual

Para uma guia deste tópico, valide os itens ao lado direito.
Export as PDF
Copy link