O bloco de Abas permite organizar e exibir conteúdo em vários painéis alternáveis em uma única página do SeedProd. Em vez de empilhar todas as suas informações verticalmente, as abas permitem que os visitantes naveguem instantaneamente entre as seções – mantendo suas páginas limpas, focadas e fáceis de ler.
O bloco suporta layouts de abas horizontais e verticais, ícones por aba, conteúdo de rich text em cada painel e um conjunto completo de controles de estilo para cores, tipografia, bordas e preenchimento das abas. Modelos pré-construídos permitem aplicar um visual polido em um clique, enquanto a aba Avançado oferece controle granular sobre cada detalhe visual.
Adicionando o Bloco de Abas às Suas Páginas
Siga estas etapas para adicionar um bloco de Abas à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Abas na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco de Abas para abrir suas configurações. Na aba Conteúdo, a seção Abas permite que você crie e gerencie todos os seus painéis de abas:
- Nome da Aba: Insira o rótulo que aparece em cada botão de aba. Clique em qualquer item de aba existente para expandi-lo e editar seu nome, ícone e conteúdo.
- Ícone: Opcionalmente, atribua um ícone a cada aba usando o seletor de ícones. O ícone aparece ao lado do rótulo da aba na barra de abas.
- Conteúdo: Insira o conteúdo do corpo para cada painel de aba. Cada aba tem sua própria área de conteúdo independente.
- Adicionar Novo Item: Clique neste botão para adicionar painéis de abas adicionais ao bloco.
- Excluir / Duplicar: Cada item de aba inclui opções para removê-lo ou criar uma cópia com as mesmas configurações e conteúdo.
- Ocultar Ícone da Aba: Ative esta opção para mostrar ou ocultar ícones em todas as abas de uma vez.
- Cor do Ícone: Defina uma cor para todos os ícones das abas usando o seletor de cores.
- Tamanho da Fonte: Ajuste o tamanho da fonte dos rótulos das abas.
- Espaço Entre: Defina o espaçamento entre botões de abas adjacentes.
- Alinhamento: Escolha o alinhamento horizontal da barra de abas — Esquerda, Centro ou Direita.
Passo 2a: Escolha um Estilo de Modelo
Na aba Modelos, você pode aplicar um estilo visual pré-construído ao seu bloco de Abas em um único clique. Sete designs predefinidos estão disponíveis, variando de um estilo padrão minimalista a opções mais decorativas com bordas, fundos e tratamentos de ícones. Selecionar um modelo atualiza instantaneamente as cores, bordas e layout do bloco para corresponder ao design escolhido.
Etapa 3: Personalizar o Design
Na aba Avançado, a seção Estilos oferece controle total sobre a aparência da barra de abas e dos painéis de conteúdo:
Estilos da Barra de Abas:
- Layout da Aba: Alterne entre Horizontal (abas organizadas em uma linha) e Vertical (abas empilhadas em uma coluna ao lado do painel de conteúdo).
- Tipografia da Aba: Defina a fonte, tamanho, peso, estilo, altura da linha, espaçamento entre letras e caixa de letras para os rótulos das abas.
- Cor da Aba: Escolha a cor do texto para os rótulos de abas inativas.
- Cor de Fundo da Aba: Defina a cor de fundo para abas inativas.
- Cor da Aba Ativa: Defina a cor do texto para a aba atualmente selecionada.
- Fundo da Aba Ativa: Defina a cor de fundo para a aba atualmente selecionada.
- Raio da Borda da Aba: Arredonde os cantos dos botões de aba usando um controle deslizante de 0 a 100.
- Estilo da Borda: Escolha um estilo de borda para os botões de aba — Sólida, Pontilhada ou Tracejada.
- Largura da Borda: Defina a espessura da borda em cada lado (Superior, Direita, Inferior, Esquerda) dos botões de aba.
- Cor da Borda: Escolha a cor da borda para os botões de aba.
- Preenchimento da Aba: Controle o espaçamento interno (Superior, Direita, Inferior, Esquerda) dentro de cada botão de aba.
Estilos do Painel de Conteúdo:
- Tipografia do Conteúdo: Defina a fonte, tamanho, peso, estilo, altura da linha, espaçamento entre letras e caixa de letras para o texto do corpo do painel de conteúdo.
- Fundo do Conteúdo: Defina a cor de fundo da área do painel de conteúdo.
- Cor do Texto: Defina a cor do texto dentro do painel de conteúdo.
- Raio da Borda do Conteúdo: Arredonde os cantos da caixa do painel de conteúdo usando um controle deslizante de 0 a 100.
- Estilo da Borda do Conteúdo: Escolha um estilo de borda para o painel de conteúdo — Sólida, Pontilhada ou Tracejada.
- Cor da Borda do Conteúdo: Escolha a cor da borda do painel de conteúdo.
- Largura da Borda do Conteúdo: Defina a espessura da borda em cada lado (Superior, Direita, Inferior, Esquerda) do painel de conteúdo.
- Preenchimento do Conteúdo: Controle o espaçamento interno dentro do painel de conteúdo.
- Sombra do Texto: Adicione uma sombra ao texto do painel de conteúdo, com predefinições de tamanho variando de Nenhuma a 2X Grande.
A aba Avançado também fornece controles para espaçamento (margem e preenchimento), atributos CSS personalizados, visibilidade do dispositivo e animações de entrada.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Abas e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Abas à sua página! As abas são uma maneira poderosa de apresentar muito conteúdo em um formato compacto e amigável, mantendo os visitantes engajados sem sobrecarregá-los com uma página longa de rolagem. Experimente layouts horizontais e verticais, estilos de modelo e combinações de cores para criar uma seção de abas que se encaixe perfeitamente em seu design.