O bloco Tabs 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 guias permitem que os visitantes naveguem entre as seções instantaneamente — mantendo suas páginas organizadas, focadas e fáceis de ler.
O bloco suporta layouts de guias horizontais e verticais, ícones por guia, conteúdo de rich text em cada painel e um conjunto completo de controles de estilo para cores, tipografia, bordas e preenchimento das guias. Modelos pré-construídos permitem aplicar uma aparência refinada com um clique, enquanto a guia Avançado oferece controle granular sobre cada detalhe visual.
Adicionando o bloco de guias às suas páginas
Siga estas etapas para adicionar um bloco de guias à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Guias na seção desejada da sua página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Guias para abrir suas configurações. Na guia Conteúdo, a seção Guias permite criar e gerenciar todos os seus painéis de guias:
- Nome da guia: insira o rótulo que aparece em cada botão da guia. Clique em qualquer item da guia existente para expandi-lo e editar seu nome, ícone e conteúdo.
- Ícone: opcionalmente, atribua um ícone a cada guia usando o seletor de ícones. O ícone aparece ao lado do rótulo da guia na barra de guias.
- Conteúdo: insira o conteúdo do corpo para cada painel da guia. Cada guia tem sua própria área de conteúdo independente.
- Adicionar novo item: Clique neste botão para adicionar painéis de guias adicionais ao bloco.
- Excluir/Duplicar: cada item da guia inclui opções para removê-lo ou criar uma cópia com as mesmas configurações e conteúdo.
- Ocultar ícone da guia: alterne esta opção para mostrar ou ocultar ícones em todas as guias de uma só vez.
- Cor do ícone: defina uma cor para todos os ícones das guias usando o seletor de cores.
- Tamanho da fonte: Ajuste o tamanho da fonte dos rótulos das guias.
- Espaço entre: Defina o espaço entre botões de guia adjacentes.
- Alinhamento: escolha o alinhamento horizontal da barra de guias — Esquerda, Centro ou Direita.
Etapa 2a: Escolha um estilo de modelo
Na guia Modelos, você pode aplicar um estilo visual pré-construído ao seu bloco Guias com um único clique. Sete designs predefinidos estão disponíveis, variando de um estilo padrão minimalista a opções mais decorativas com bordas, planos de fundo e tratamentos de ícones. A seleção de um modelo atualiza instantaneamente as cores, bordas e layout do bloco para corresponder ao design escolhido.
Etapa 3: Personalizar o design
Na guia Avançado, a seção Estilos oferece controle total sobre a aparência da barra de guias e dos painéis de conteúdo:
Estilos da barra de guias:
- Layout da guia: alterne entre Horizontal (guias organizadas em uma linha) e Vertical (guias empilhadas em uma coluna ao lado do painel de conteúdo).
- Tipografia da guia: defina a fonte, o tamanho, a espessura, o estilo, a altura da linha, o espaçamento entre letras e as maiúsculas e minúsculas para os rótulos das guias.
- Cor da guia: escolha a cor do texto para rótulos de guias inativos.
- Cor de fundo da guia: defina a cor de fundo para guias inativas.
- Cor da guia ativa: defina a cor do texto da guia selecionada no momento.
- Fundo da guia ativa: defina a cor de fundo da guia selecionada no momento.
- Raio da borda da guia: arredonde os cantos dos botões da guia usando um controle deslizante de 0 a 100.
- Estilo da borda: escolha um estilo de borda para os botões da guia — Sólida, Pontilhada ou Tracejada.
- Largura da borda: defina a espessura da borda em cada lado (superior, direito, inferior, esquerdo) dos botões da guia.
- Cor da borda: escolha a cor da borda dos botões da guia.
- Preenchimento da guia: controle o espaçamento interno (superior, direito, inferior, esquerdo) dentro de cada botão da guia.
Estilos do painel de conteúdo:
- Tipografia do conteúdo: defina a fonte, o tamanho, a espessura, o estilo, a altura da linha, o espaçamento entre letras e as maiúsculas e minúsculas do texto do corpo do painel da guia.
- 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, direito, inferior, esquerdo) 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 tamanhos predefinidos que variam de Nenhum a 2X Grande.
A guia Avançado também oferece 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 Guias e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de guias à sua página! As guias são uma maneira eficaz de apresentar muito conteúdo em um formato compacto e fácil de usar, mantendo os visitantes envolvidos sem sobrecarregá-los com uma página longa para rolar. Experimente layouts horizontais e verticais, estilos de modelo e combinações de cores para criar uma seção com guias que se encaixe perfeitamente no seu design.