Elemento Tab

O que é o elemento Tab?

As abas em sites foram inspiradas nas abas físicas das pastas de arquivo em papel. Elas permitem exibir diferentes seções de conteúdo em um formato compacto e fácil de navegar.

Com o Elemento Tab do GemPages, você pode:

• Apresente o conteúdo em um layout organizado e que economize espaço.
• Permita que os usuários alternem entre os conteúdos sem sair da seção.
• Mantenha sua página limpa e visualmente atraente.

Como adicionar o elemento Tab no GemPages

Siga estas etapas para inserir o Elemento de guia na sua página:

Etapa 1: A partir do Painel GemPages, abra um modelo para editar. Você pode encontrar rapidamente o Aba elemento na barra lateral esquerda do Editor, sob o Interativo seção. Arraste e solte o elemento em qualquer posição que você preferir.

Etapa 2: Solte os outros elementos como Título, Bloco de texto, Imagem, etc. dentro da aba para criar o layout de conteúdo desejado.

Clicando no elemento Tab, a configuração estará disponível na barra lateral esquerda, que será abordada nas seções seguintes.

Configurar a configuração do elemento Tab

Assim que o elemento Tab estiver na sua página, suas opções de configuração aparecerão no barra lateral esquerda.

1. A guia de configuração

traçado

• Controla a posição das guias em relação ao conteúdo.
• Padrão: Guias no esquerda do conteúdo.

Opções de layout:

• Guias acima do conteúdo
• Guias à esquerda do conteúdo
• Guias à direita do conteúdo

Selecionar um layout abre o Layout popover para mudanças fáceis.

Tabs

1. Ordem: Por padrão, o elemento tem 3 itens de guia. O título da guia no popover reflete o conteúdo da guia na área Design.

• Para adicionar uma aba adicional: Basta clicar na opção “Adicionar mais”. 
• Para duplicar uma guia: passe o mouse sobre o slide desejado e clique no ícone duplicar. 
• Para remover uma guia: passe o mouse sobre o slide específico e clique no ícone da lixeira.

2. Texto: O estilo de texto de cada conteúdo da guia.

3. Largura: A largura de cada item da guia. O valor padrão da largura é Automático, o que significa que a largura da guia será redimensionada automaticamente para corresponder ao tamanho do conteúdo interno.

Opções de largura: ao clicar no botão suspenso do campo de entrada Largura, um menu suspenso incluindo opções de largura aparecerá:

• Automático significa que a largura se ajustará ao conteúdo
• Completo significa Largura = 100% (largura total) -> A largura de cada aba será preenchida com o elemento

4. Fundo: Defina a cor de fundo para cada aba.

5. fronteira: Personalize o estilo da borda.

6. Alinhamento de guias: O alinhamento de todos os itens de guia dentro do elemento Tab.

• Layout Superior → Alinhamento horizontal.
• Layout Esquerda/Direita → Alinhamento vertical.

7. Efeitos de foco: as configurações para cada aba ao passar o mouse sobre ela.

8. Estado ativo: As configurações de cada guia quando ativa.

Dimensões:

1. Largura

Largura = 1200px: quando uma Tabulação é colocada para criar uma nova Seção ou dentro de uma coluna da Seção 1

Largura = 100% (largura total): quando uma guia é colocada dentro de outros elementos

Opções de largura: ao clicar no botão suspenso do campo de entrada Largura, um menu suspenso incluindo opções de largura aparecerá abaixo: 

• Padrão significa Largura = 1200px
• Completo significa Largura = 100% (largura total)

2. Preenchimento

• Preenchimento do elemento.
• Adicionar o preenchimento aumentará o espaçamento entre a borda do elemento e o tamanho real do elemento.

Contexto

1. Cor

Clicar na combinação Entrada abrirá o Seletor de cores e adicionará uma cor padrão #DDDDDD.

2. Imagem

Clicar na combinação Entrada abrirá o Seletor de imagens e adicionará uma imagem padrão.

Shape

Essas configurações de forma são para o wrapper do acordeão. 

• Fronteira
• Corner
• Shadow

Opção de exibição

• Ativo padrão: define um dos itens da guia para ser selecionado inicialmente por padrão.

Alinhar

• O alinhamento será desabilitado quando a largura do elemento for 100%.
• Caso contrário, as opções de alinhamento padrão serão alinhadas Center.

2. A guia Avançado

Para uma personalização mais avançada, navegue até o Avançado aba e siga as instruções em Este artigo.