Adicionando banners em grid na plataforma e-commerce

O Banner em Grid é utilizado para inserir banners com uma diagramação diferenciada

O Banner em Grid é geralmente utilizado para quando você desejar inserir banners com uma diagramação diferenciada. Existem 4 estilos pré-desenvolvidos de diagramação para a sua escolha.

Como inserir o banner em grid no seu site de vendas

Para realizar as configurações no design do seu site de vendas. Acesse na plataforma para loja virtual o menu Aparência, meus temas, customizar. Clique em adicionar seção e selecione a seção banner em grid.

Incluindo o conteúdo do banner em grid da sua loja online

Na aba conteúdo você poderá inserir um título e um subtítulo que será exibido acima dos banners em grid do seu site de vendas.

Editando a aparência do banner em grid

Na aba Aparência, você poderá editar a aparência do banner em grid da sua loja, confira abaixo todos os campos que podem ser editados nesta seção.

Campo

Especificação

Não exibir em dispositivos móveis

Ao selecionar essa opção você está impedindo que o banner em grid seja exibido durante a navegação em um dispositivo móvel.

Classe customizada para editar o CSS

Essa opção será utilizada somente por desenvolvedores que desejam criar classes específicas para editar o CSS de elementos dessa seção.

Estilo do conteúdo

Nesse campo você pode escolher como quer que seja exibido o seu banner.

Estilo de exibição do banner

Selecione qual dos 4 estilos pré-desenvolvidos de diagramação para a exibição dos banners na loja virtual.

Alinhamento do banner principal

Determine se você quer que o banner principal seja exibido à direita ou à esquerda no seu site de vendas.

Espaçamento entre os banners

Informe qual é o espaçamento desejado entre os banners em grid.

Cor do título

Determine a cor do título dos banners comerciais.

Cor do título da seção

Selecione a cor do texto que ficará abaixo do título.

Cor de fundo da seção

Você pode inserir uma cor para ser exibida no fundo da seção de banners.

Cor da borda da seção

Informe a cor da borda responsável pela divisão dos módulos que compõem o visual da sua loja.

Imagem de fundo da seção

Você pode inserir uma imagem para ser exibida no fundo da seção de banners.

Espessura da borda da seção

Determine o tamanho da espessura da borda que fará a divisão dos módulos que compõem o visual da sua loja. Caso não queira borda pode informar 0.

Margem de cima da seção

Informe o espaçamento entre o banner comercial e o módulo utilizado em cima.

Margem de baixo da seção

Informe o espaçamento entre o banner comercial e o módulo utilizado em baixo.

Inserindo o banner principal do conjunto de banners em grid

Na aba banner principal, você poderá inserir o banner em grid que terá a exibição maior na sua loja, confira abaixo todas os campos que podem ser editados nesta seção.

Campo

Especificação

Imagem

Selecione a imagem que será exibida como o banner principal dos banners em grid do seu site de vendas.

Textos sempre visíveis

Ao selecionar essa opção o texto inserido ficará sempre visível no banner. Caso não selecione só será possível visualizar o texto quando passar o mouse em cima.

Textos sempre visível no mobile

Ao selecionar essa opção o texto inserido ficará sempre visível no banner durante a navegação mobile. Caso não selecione só será possível visualizar o texto clicar no banner.

Título

Insira o título do seu banner em grid que será exibido junto a imagem.

Descrição

Insira a descrição do seu banner em grid que será exibido junto com o título e a imagem.

Texto do botão

Caso você queira inserir um botão no seu banner, nesse campo você poderá informar o texto que aparecerá no botão.

Link do Banner

Você pode inserir um link para que ao clicar no banner o seu cliente seja direcionado para alguma página de sua escolha.

Abrir em uma nova aba

Ao selecionar essa opção o link cadastrado no banner abrirá em uma nova aba do navegador do cliente.

Cor da máscara de fundo

Selecione a cor da máscara de fundo que será exibida em cima da imagem e atrás das informações de título e descrição.

Cor do título

Determine a cor do título do banner principal dos banners em grid.

Cor da descrição

Selecione a cor do texto que ficará abaixo do título no banner principal.

Cor de fundo do botão

Selecione a cor do fundo do botão.

Cor de texto do botão

Informe a cor do texto do botão.

Inserindo os banners em grid no seu site de vendas

No bloco de Banners, você poderá inserir as imagens dos demais banners em grid da sua loja, confira abaixo todas os campos que podem ser alterados nesta seção.

Campo

Especificação

Imagem

Selecione a imagem que será exibida nos banners em grid do seu site de vendas.

Textos sempre visíveis

Ao selecionar essa opção o texto inserido ficará sempre visível no banner. Caso não selecione só será possível visualizar o texto quando passar o mouse em cima.

Textos sempre visível no mobile

Ao selecionar essa opção o texto inserido ficará sempre visível no banner durante a navegação mobile. Caso não selecione só será possível visualizar o texto clicar no banner.

Título

Insira o título do seu banner em grid que será exibido junto a imagem.

Descrição

Insira a descrição do seu banner em grid que será exibido junto com o título e a imagem.

Texto do botão

Caso você queira inserir um botão no seu banner, nesse campo você poderá informar o texto que aparecerá no botão.

Link do Banner

Você pode inserir um link para que ao clicar no banner o seu cliente seja direcionado para alguma página de sua escolha.

Abrir em uma nova aba

Ao selecionar essa opção o link cadastrado no banner abrirá em uma nova aba do navegador do cliente.

Cor da máscara de fundo

Selecione a cor da máscara de fundo que será exibida em cima da imagem e atrás das informações de título e descrição.

Cor do título

Determine a cor do título dos banners em grid.

Cor da descrição

Selecione a cor do texto que ficará abaixo do título no banner.

Cor de fundo do botão

Selecione a cor do fundo do botão.

Cor de texto do botão

Informe a cor do texto do botão.