Além dos blocos padrão de cada seção, o layout Ipanema permite incluir blocos adicionais para ampliar ou personalizar o conteúdo.
Por um lado, existem os blocos de uso geral (Botão, Imagem, Título, Descrição, Separador, Grupo e Código), disponíveis em diferentes seções da sua loja. Por outro, a seção Barra de navegação tem o seu próprio conjunto de blocos exclusivos (Anúncios, Redes sociais, Dados de contato, Menu e Ícones informativos), que não são usados em nenhuma outra seção.
Neste tutorial, explicamos o que é cada bloco e o que você pode configurar nele. Para conhecer os passos para incluí-lo em uma seção, acessar: Como adicionar um bloco a uma seção com o layout Ipanema na Nuvemshop?
Quais blocos de uso geral posso adicionar?
Veja abaixo o detalhe de cada bloco: o que você pode configurar e quais opções ele tem.
Botão
Serve para criar uma chamada para ação (CTA) que direcione o seu cliente para outra página, por exemplo "Comprar agora", "Ver mais produtos" ou "Conhecer a promoção".
Em "Texto do botão", escreva o texto que o botão vai exibir e, em "Link do botão", adicione a URL de destino.
Em "Estilo", escolha qual tipo de botão usar: "Principal" (para a ação mais importante da seção), "Secundário" (para uma ação complementar) ou "Terciário" (para uma opção de menor destaque, como um link auxiliar). A cor, a forma e o resto do estilo visual de cada tipo são definidos de forma global na identidade de marca da sua loja, e se aplicam automaticamente a todos os botões desse tipo.
Também em "Estilo", escolha o "Tamanho" do botão ("Pequeno", "Médio" ou "Grande") e, se quiser, uma "Cor de fundo" e uma "Cor do texto" diferentes das definidas globalmente.
Em "Design", escolha a "Largura": "Ajustar" (o botão ocupa apenas o espaço do seu conteúdo) ou "Preencher" (o botão ocupa toda a largura disponível do contêiner).
Imagem
Serve para incluir conteúdo gráfico dentro de uma seção, por exemplo uma foto de produto, uma imagem editorial ou um ícone próprio.
Em "Imagem", carregue o arquivo que você quer exibir. Ative "Usar outra imagem para celulares" se quiser carregar uma versão diferente para essa visualização, e preencha "Link" se quiser que a imagem direcione para outra página ao ser clicada.
Em "Design", escolha a "Largura": "Ajustar" (a imagem ocupa apenas o espaço do seu conteúdo) ou "Preencher" (a imagem ocupa toda a largura disponível do contêiner).
Título
Serve para destacar a mensagem principal da seção, por exemplo o nome de uma promoção ou o cabeçalho de um bloco editorial.
Escreva o texto no campo de texto, com opções de formatação como negrito, itálico, cor e links.
Em "Design", escolha a "Largura": "Ajustar" (o título ocupa apenas o espaço do seu conteúdo) ou "Preencher" (ocupa toda a largura disponível do contêiner).
Em "Ajustes de texto", escolha o "Estilo", ou seja, o nível de título: por exemplo, de "Título 1" a "Título 6", ou "Personalizado" se quiser definir outro tamanho. Quanto menor o número, maior e mais destacado o texto aparece. Ative "Tamanho para celulares" se quiser definir um tamanho diferente nessa visualização.
Descrição
Serve para incluir uma mensagem complementar ao título, por exemplo uma descrição breve da promoção ou o desenvolvimento de um conteúdo editorial.
Escreva o texto no campo de texto, com opções de formatação como negrito, itálico, cor e links.
Em "Design", escolha a "Largura" do bloco: "Ajustar" (o texto ocupa apenas o espaço do seu conteúdo) ou "Preencher" (ocupa toda a largura disponível do contêiner). Em "Ajustes de texto", escolha o "Tamanho" ("Pequeno", "Médio" ou "Grande").
Separador
Serve para gerar espaço entre blocos ou marcar uma divisão visual dentro de uma seção, por exemplo entre dois módulos de conteúdo diferentes.
Em "Design", ajuste o "Espaçamento" (em pixels) ao redor do separador: quanto maior o valor, mais espaço fica entre os blocos de cada lado.
Ative "Linha divisória" se quiser exibir uma linha visível em vez de deixar apenas o espaço vazio, e escolha a "Cor da linha" (esse campo só aparece se você ativar a linha divisória).
Grupo
Serve para agrupar vários blocos (por exemplo, Título, Descrição e Botão) e mantê-los organizados como uma única unidade dentro da seção, para que se movam e se alinhem juntos.
Em "Disposição", escolha a "Direção": a seta para baixo empilha os blocos um abaixo do outro, e a seta para a direita os coloca um ao lado do outro. Ative "Direção diferente para celulares" se quiser que ela mude nessa visualização.
Em "Alinhamento", defina como os blocos ficam posicionados dentro do grupo: a primeira linha de ícones controla o alinhamento no sentido contrário à direção escolhida (por exemplo, se a direção for vertical, essa linha alinha à esquerda, ao centro ou à direita), e a segunda linha controla o alinhamento no sentido da direção escolhida (acima, no meio ou abaixo).
Em "Design", escolha a "Largura": "Ajustar" (o grupo ocupa apenas o espaço do seu conteúdo) ou "Preencher" (ocupa toda a largura disponível do contêiner). Ajuste também a "Separação entre elementos" (o espaço entre cada bloco agrupado), o "Espaçamento superior e inferior" e o "Espaçamento esquerdo e direito" (a margem interna do grupo em relação ao seu conteúdo).
Em "Cores", defina a "Cor de fundo" e a "Cor do texto" do grupo.
Código
Serve para inserir HTML, CSS e JavaScript próprios dentro de uma seção ou bloco aninhado, por exemplo para um elemento sob medida que os blocos padrão não cobrem, como um widget externo ou uma animação personalizada.
Em "Design", escolha a "Largura" do bloco: "Ajustar" (ocupa apenas o espaço do seu conteúdo) ou "Preencher" (ocupa toda a largura disponível do contêiner).
Helpjuice Warning Callout Title
O código é publicado na sua loja exatamente como você escreveu, sem nenhum tipo de validação de conteúdo nem modificação por parte da Nuvemshop. Você é responsável pelo conteúdo que inserir.
O editor de código inclui ferramentas para ajudar na escrita e detectar erros antes de publicar.
Escolha o modo de sintaxe de acordo com o que você vai escrever: "HTML" (padrão, aceita HTML com blocos de estilo e de script incorporados) ou "CSS" (para escrever somente CSS, com uma validação mais rígida).
Conforme você escreve, o editor sugere o autocompletar: propriedades e valores CSS quando o cursor está dentro de uma tag <style>, tags e atributos HTML em contexto HTML, e palavras-chave e globais de JavaScript dentro de uma tag <script>. Navegue pelas sugestões com as setas do teclado e confirme com "Enter" ou "Tab".
Use "Tab" para inserir uma indentação de 2 espaços. Ao pressionar "Enter", o editor mantém automaticamente o nível de indentação da linha anterior. Ao fechar uma chave "}" ou uma barra "/", o editor reduz a indentação automaticamente.
Se você precisar de mais espaço para escrever um código extenso, clique no botão localizado no canto superior direito do editor para abri-lo em uma janela flutuante independente. As alterações feitas ali são sincronizadas automaticamente com o painel do editor. Se você fechar a janela flutuante sem salvar, as alterações são mantidas no painel do editor; se fechar a aba do navegador onde ela foi aberta, o estado do painel não é afetado.
O editor valida o código automaticamente depois que você para de escrever, e mostra os erros abaixo do campo de texto com o número da linha e da coluna em que ocorrem. Se houver muitos erros, são exibidos os primeiros e o resto é agrupado como "+ N mais".
No modo HTML, o editor verifica se as tags estão corretamente abertas e fechadas, se não há comentários nem aspas sem fechar, e valida separadamente o conteúdo das tags <style> e <script>. No modo CSS, a validação é mais rígida.
Um CSS inválido bloqueia o salvamento do bloco. Um HTML ou JavaScript inválido mostra o aviso, mas permite salvar do mesmo jeito.
O campo de código aceita até 50.000 caracteres. O editor avisa assim que você alcança esse limite, e não vai ser possível salvar o bloco se você passar dele.
Helpjuice Info Callout Title
Se você está adicionando esse bloco dentro de uma seção personalizada, só é possível incluir um bloco de Código por seção. Se precisar de outro, adicione uma nova seção personalizada.
Quais blocos posso adicionar na seção Barra de navegação?
A seção Barra de navegação tem o seu próprio menu de blocos, diferente do das outras seções. Primeiramente, para incluir a Barra de navegação clicar em “Cabeçalho > Adicionar seção > Barra de navegação > Adicionar”.
Nela, é possível adicionar até 3 blocos:
Anúncios
Serve para exibir mensagens curtas e rotativas na barra de navegação, por exemplo "Frete para todo o Brasil" ou "20% de desconto na primeira compra".
Em "Disposição", escolha o "Alinhamento em computadores" (esquerda, centro ou direita). Em "Design", ajuste a "Separação entre elementos".
Ao adicionar o bloco, clique em "+ Adicionar Anúncio" para incluir cada mensagem.
Em cada uma, preencha o "Texto" que você quer exibir e, de forma opcional, um "Link" de destino. Você pode adicionar quantos anúncios precisar: eles vão se alternar na barra de navegação.
Redes sociais
Serve para exibir os ícones das suas redes sociais na barra de navegação, por exemplo Instagram ou Facebook, e facilitar que os seus clientes encontrem você nelas.
Em "Disposição", escolha o "Alinhamento em computadores" (esquerda, centro ou direita). Em "Design", ajuste a "Separação entre elementos".
Esse bloco exibe as redes sociais que você já tem configuradas no seu administrador, ele não tem campos próprios para preencher. Se você ainda não as adicionou, siga os passos em como inserir os ícones das redes sociais na minha loja.
Dados de contato
Serve para exibir na barra de navegação os dados de contato que você configurou no seu administrador, por exemplo o seu telefone ou WhatsApp, e facilitar que os seus clientes entrem em contato com você.
Ative "Mostrar telefone", "Mostrar WhatsApp" e "Mostrar e-mail" de acordo com os dados que você quer que apareçam.
Em "Disposição", escolha o "Alinhamento em computadores" (esquerda, centro ou direita). Em "Design", ajuste a "Separação entre elementos".
Menu
Serve para exibir um menu de navegação adicional dentro da barra, por exemplo um submenu de categorias ou de páginas de conteúdo.
Em "Menu a exibir", escolha o menu que você já tem criado na sua loja.
Em "Disposição", escolha o "Alinhamento em computadores" (esquerda, centro ou direita). Em "Design", ajuste a "Separação entre elementos".
Ícones informativos
Serve para destacar uma informação breve com um ícone, por exemplo frete grátis, formas de pagamento ou política de trocas e devoluções, dentro da barra de navegação.
Ao adicionar o bloco, clique em "+ Adicionar Ícone e texto" para incluir cada item.
Em "Tipo de ícone", escolha entre "Ícones do layout" ou "Imagem própria" para subir o seu próprio ícone.
Se você escolher "Ícones do layout", pode selecionar entre estas opções: Frete, Cartão de crédito, Segurança, Devoluções, Dinheiro, Promoções, Sacola, Carrinho, Loja, Presente, Favoritos, Estrela, Telefone, E-mail, Localização, Internacional, Calendário, Verificado e WhatsApp.
Preencha a "Descrição" com o texto do benefício e, de forma opcional, um "Link" de destino. Você pode adicionar quantos itens precisar.
Pronto!
Agora você já conhece os blocos que pode adicionar nas seções da sua loja com o layout Ipanema. Para conhecer as seções disponíveis e os seus blocos padrão, confira o catálogo de seções disponíveis com o layout Ipanema.