LOJA VIRTUAL
Editor Visual
Como configurar o visual da listagem do blog
  1. 1.
    home
  2. 2.
    Meus temas
  3. 3.
    Como configurar o visual da listagem do blog
Publicado em: 4/15/2021, 11:02:57 AM
‚Äč
O blog √© uma ferramenta para a produ√ß√£o de conte√ļdos para sua loja virtual. Inserindo um blog, voc√™ otimiza os acessos org√Ęnicos na sua loja.
Assista o tutorial em vídeo:
Ou, se preferir, siga as instru√ß√Ķes a seguir para configurar o visual da a p√°gina de listagem do blog da sua loja virtual:

Importante!

O Cabe√ßalho e Rodap√© s√£o configura√ß√Ķes padr√£o, portanto, as edi√ß√Ķes definidas ser√£o inseridas igualmente em todas as p√°ginas de sua loja. Ambos s√£o se√ß√Ķes fixas e n√£o dispon√≠veis para ordena√ß√£o em sua loja.
Para configurar e personalizar seu cabeçalho, acesse nosso Artigo de Como personalizar o Cabeçalho.
Para configurar e personalizar seu rodapé, acesse nosso Artigo de Como personalizar o Rodapé.
1¬ļ Acesse o menu Loja Virtual clique em Meus temas e Personalizar.
2¬ļ No menu superior, selecione a op√ß√£o Blog - listagem.
Edite as configura√ß√Ķes desejadas:

Banners em carrossel > Aparência

  • Identifica√ß√£o da se√ß√£o: Insira neste campo um nome de identifica√ß√£o da se√ß√£o.
  • N√£o exibir em dispositivos m√≥veis: Ative esta op√ß√£o caso voc√™ deseja n√£o exibir banners em carrossel em dispositivos m√≥veis.
  • N√£o exibir em desktop: Ative esta op√ß√£o caso voc√™ deseja n√£o exibir banners em carrossel em desktop.
  • Classe customizada para editar o css: Caso voc√™ tenha alguma aplica√ß√£o de c√≥digo customizada para essa se√ß√£o, aplique aqui.
  • Estilo do conte√ļdo: Defina o estilo do conte√ļdo do banner: Centralizado ou Adapt√°vel a largura da tela.
  • Tempo de transi√ß√£o (em segundos): Defina o tempo (em segundos) de transi√ß√£o entre um banner e outro.
  • Tamanho m√°ximo da se√ß√£o (em px): Defina o tamanho m√°ximo da se√ß√£o (em px). Deixe o campo em branco ou insira o n√ļmero 0 para deixar sem tamanho m√°ximo.
  • Exibir setas de navega√ß√£o: Ative esta op√ß√£o para as setas de navega√ß√£o serem exibidas.
  • Exibir √≠ndice de navega√ß√£o: Para exibir o √≠ndice de navega√ß√£o, ative esta op√ß√£o.
  • Cor de fundo da se√ß√£o: Defina a cor de fundo de sua se√ß√£o.
  • Imagem de fundo da se√ß√£o: Fa√ßa upload da imagem de fundo da se√ß√£o. Selecione a op√ß√£o "Imagem fixa de fundo" para que ela fique fixa.
Para finalizar, clique em Salvar.

Banners em carrossel > Bloco

  • Imagem desktop: Fa√ßa upload da imagem de fundo no desktop.
  • Efeito de imagem fixa: Selecione esta op√ß√£o para que a imagem fique fixa e n√£o acompanhe a rolagem de tela.
  • Desativar efeito de zoom: Ao selecionar esta op√ß√£o, o efeito de zoom da imagem ser√° desativado e ela permanecer√° parada e sem movimentos.
  • Imagem mobile: Fa√ßa upload da imagem de fundo no mobile.
  • V√≠deo de fundo (Youtube): Insira a URL do Youtube do v√≠deo de fundo.
  • T√≠tulo: Insira o t√≠tulo do banner que desejar.
  • Descri√ß√£o: Insira a descri√ß√£o do banner.
  • Texto do bot√£o: Insira o texto do bot√£o de seu banner.
  • Link do banner: Copie aqui a URL da p√°gina para qual o cliente vai ser redirecionado ao clicar no Banner. Selecione a op√ß√£o "abrir em nova aba" caso voc√™ desejar que esse redirecionamento seja feito em uma nova aba no navegador.
  • Selecione uma data para a exibi√ß√£o do banner: Caso voc√™ queira que o banner seja exibido apenas dentro de um determinado per√≠odo, defina as datas conforme preferir. Caso voc√™ n√£o insira uma data limite, o banner n√£o ser√° oculto automaticamente.
  • Alinhamento do conte√ļdo: Defina o alinhamento do conte√ļdo de seu banner: Centralizado, √† Esquerda ou √† Direita.
  • Cor: Separadamente, defina as cores da m√°scara de fundo, do t√≠tulo, da descri√ß√£o, cor de fundo do bot√£o e de texto do bot√£o.
  • Intensidade de m√°scara de fundo: Altere a intensidade da cor da m√°scara de fundo.
  • Para remover o bloco, clique em X Remover bloco.
Para finalizar, clique em Salvar.

Cabeçalho do blog

  • T√≠tulo: Defina o t√≠tulo do seu cabe√ßalho de blog.
  • Subt√≠tulo: Defina o subt√≠tulo do seu cabe√ßalho de blog.
Para finalizar, clique em Salvar.
Vitrine de produtos > Conte√ļdo
  • Identifica√ß√£o da se√ß√£o: Insira neste campo um nome de identifica√ß√£o da se√ß√£o.
  • T√≠tulo: Defina o t√≠tulo de sua vitrine de produtos na listagem do blog.
  • Subt√≠tulo: Defina o subt√≠tulo de sua vitrine de produtos na listagem do blog.
  • Selecionar: Clique em Selecionar para conseguir adicionar os produtos desejados em sua vitrine. Selecione os que desejar e clique em Aplicar.
Para finalizar, clique em Salvar.

Vitrine de produtos > Aparência

  • N√£o exibir em dispositivos m√≥veis: Ative esta op√ß√£o caso voc√™ deseja n√£o exibir a vitrine de produtos em dispositivos m√≥veis.
  • N√£o exibir em desktop: Ative esta op√ß√£o caso voc√™ deseja n√£o exibir a vitrine de produtos em desktop.
  • Classe customizada para editar o css: Caso voc√™ tenha alguma aplica√ß√£o de c√≥digo customizada para essa se√ß√£o, aplique aqui.
  • Estilo do conte√ļdo: Defina o estilo do conte√ļdo do banner: Centralizado ou Adapt√°vel a largura da tela.
  • Quantidade m√°xima de produtos por linha: Defina a quantidade m√°xima de produtos exibidor por linha no desktop.
  • Quantidade m√°xima de produtos por linha mobile: Defina a quantidade m√°xima de produtos exibidor por linha no mobile.
  • Habilitar carrossel: Ative esta op√ß√£o para habilitar a visualiza√ß√£o em carrossel da sua vitrine de produtos.
  • Exibir setas de navega√ß√£o: Ao ativar esta op√ß√£o, seta de navega√ß√£o (esquerda e direita) aparecer√£o para que a rolagem seja feita a partir do clique.
  • Cor: Separadamente, defina as cores do t√≠tulo, do subt√≠tulo, de fundo da se√ß√£o, de fundo do produto, de borda da se√ß√£o e cor das setas.
  • Imagem fixa de fundo: Selecione esta op√ß√£o para que a imagem de fundo fique fixa.
  • Espessura da borda de se√ß√£o: Defina, numa escala de 0 a 10, a espessura da borda de se√ß√£o.
  • Margem de cima da se√ß√£o: Defina, numa escala de 0 a 10, o tamanho da margem de cima da se√ß√£o.
  • Margem de baixo da se√ß√£o: Defina, numa escala de 0 a 10, o tamanho da margem de baixo da se√ß√£o.
Para finalizar, clique em Salvar.
Para uma guia deste tópico, valide os itens ao lado direito.