Com as seções personalizadas, você pode montar suas próprias seções dentro do editor do layout Ipanema combinando os blocos que quiser: botão, imagem, título, descrição, separador e grupo. Você também pode adicionar um bloco de código próprio para inserir HTML, CSS e JavaScript diretamente na sua loja, sem abrir o FTP.
Essa funcionalidade te dá liberdade para criar layouts sob medida, sem depender das seções predefinidas. Se você ainda não sabe como adicionar seções na sua loja, recomendamos acessar primeiro o tutorial: Como trocar, adicionar e gerenciar páginas e seções do layout Ipanema na Nuvemshop?
Neste tutorial, te explicamos como adicionar uma seção personalizada, o que é possível configurar nela, como adicionar blocos e quais opções de personalização cada um tem.
Como adicionar uma seção personalizada?
Para adicionar uma seção personalizada à sua loja, seguir os passos abaixo:
1. Acessar o painel administrador Nuvemshop.
2. Seguir o caminho "Loja online > Layout" e clicar em “Editar layout” para abrir o editor do layout Ipanema.
3. Na página onde você quer incluir a nova seção, clicar em "Adicionar seção".
4. Escolher a seção "Personalizada" na lista de seções disponíveis e clicar no botão "Adicionar".
Pronto!
Agora a seção personalizada está criada, pronta para você configurar e adicionar os blocos que quiser.
O que é possível configurar na seção personalizada?
Clicando na seção (e não em um bloco específico), você pode ajustar os seguintes campos no painel lateral.
Em "Disposição", escolher a "Direção" em que os blocos se organizam (vertical ou horizontal). Ativar "Direção diferente para celulares" se você quiser que eles se organizem de outra forma nesses dispositivos e escolher essa direção em "Direção para celulares".
Com "Alinhamento", definir a posição dos blocos dentro da seção, tanto no eixo horizontal (esquerda, centro ou direita) quanto no vertical (acima, centro ou abaixo).
Em "Design", escolher a "Largura" da seção: "Página" para respeitar a largura padrão do conteúdo ou "Completa" para ocupar toda a largura da tela. Com "Espaçamento entre elementos", definir o espaço entre os blocos e, com "Espaçamento superior e inferior" e "Espaçamento esquerdo e direito", ajustar a margem interna da seção (este último só fica habilitado se você escolheu "Completa" em "Largura").
Em "Cores", escolher a "Cor de fundo" e a "Cor do texto" da seção no seletor de cores.
Além disso, no mesmo painel, você pode expandir "CSS personalizado" para adicionar estilos que se aplicam somente a esta seção, sem afetar o resto da loja.
Como adicionar blocos à seção personalizada?
Com a seção personalizada já criada, você pode adicionar os blocos que quiser. Para saber como, seguir os passos abaixo:
1. Dentro da seção personalizada, clicar em "+ Adicionar bloco".
2. Escolher o bloco que você quer incluir: "Botão", "Imagem", "Título", "Descrição", "Separador", "Grupo" ou "Código".
3. Repetir o passo anterior para cada bloco que você quiser adicionar à seção.
4. Clicar em cada bloco para personalizar o conteúdo e o estilo dele no painel lateral.
Pronto!
Agora sua seção personalizada está montada com os blocos que você escolheu.
O que é possível configurar em cada bloco?
Cada bloco tem seu próprio painel de configuração. Clique no bloco correspondente abaixo para ver os detalhes:
Botão
Em "Texto do botão", escrever o texto que o botão vai mostrar e, em "Link do botão", adicionar a URL de destino.
Em "Design", escolher a "Largura": "Ajustar" para o botão acompanhar o tamanho do texto ou "Preencher" para ocupar toda a largura disponível.
Em "Estilo", escolher o "Estilo" visual ("Principal", "Secundário" ou "Terciário"), o "Tamanho" ("Pequeno", "Médio" ou "Grande") e a "Cor de fundo" e a "Cor do texto" do botão.
Título
Em "Texto", escrever o conteúdo do título com o editor de texto avançado (negrito, itálico, sublinhado, cor, links, listas).
Em "Design", escolher a "Largura" do bloco ("Ajustar" ou "Preencher").
Em "Ajustes de texto", escolher o nível de "Estilo" no menu suspenso. Você pode selecionar até 6 níveis de estilo. Também pode usar a opção “Personalizado” para criar um estilo próprio, definindo a fonte e o tamanho em pixels. Ativar "Tamanho diferente para celulares" se você quiser definir um tamanho diferente para essa visualização.
Imagem
Em "Imagem", carregar ou selecionar a imagem que você quer mostrar. Ativar "Usar outra imagem para celulares" se quiser mostrar uma imagem diferente nesses dispositivos e adicionar um "Link" se quiser que a imagem funcione como acesso a outra página.
Em "Design", escolher a "Largura" do bloco ("Ajustar" ou "Preencher").
Descrição
Em "Texto", escrever o conteúdo com o editor de texto avançado.
Em "Design", escolher a "Largura" do bloco ("Ajustar" ou "Preencher").
Em "Ajustes de texto", escolher o "Tamanho" ("Pequeno", "Médio" ou "Grande").
Separador
Em "Design", ajustar o "Espaçamento" ao redor do separador com o controle deslizante.
Ativar "Linha divisória" se você quiser mostrar uma linha visível e escolher a "Cor da linha" (este campo só aparece se você ativou a linha divisória).
Grupo
Em "Disposição", escolher a "Direção" dos blocos que você agrupa (vertical ou horizontal), ativar "Direção diferente para celulares" se quiser uma direção diferente nessa visualização e definir o "Alinhamento" dos blocos dentro do grupo, tanto no eixo horizontal quanto no vertical.
Em "Design", escolher a "Largura" do grupo ("Ajustar" ou "Preencher") e ajustar o "Espaçamento entre elementos", o "Espaçamento superior e inferior" e o "esquerdo e direito".
Em "Cores", escolher a "Cor de fundo" e a "Cor do texto" do grupo.
Código
Se você quiser inserir HTML, CSS ou JavaScript próprio (e não somente CSS), pode fazer isso com o bloco "Código". Cada seção admite somente um bloco de código: se você precisar de outro, criar uma nova seção personalizada.
Para adicioná-lo, seguir os passos abaixo:
1. Depois de incluir o bloco na seção Personalizada, escrever ou colar o código no campo de texto. Você pode incluir HTML, CSS dentro de tags <style> e JavaScript dentro de tags <script>.
2. Em "Design", escolher a largura do bloco: "Ajustar" para acompanhar o conteúdo ou "Preencher" para ocupar toda a largura do contêiner.
3. Salvar e publicar as alterações.
Helpjuice Warning Callout Title
O editor avisa se houver erros de sintaxe, mas somente o CSS inválido bloqueia o salvamento. O código é publicado na sua loja exatamente como você escreveu, sem que a Nuvemshop o modifique: você é responsável pelo conteúdo dele. O campo permite até 50.000 caracteres.
Pronto!
Agora seu código próprio está funcionando dentro da seção personalizada.
Se você quiser saber mais sobre o layout Ipanema e suas funcionalidades, consultar: