Lista Avançada

O que é o Elemento de Lista Avançada?

O GemPages oferece dois elementos para exibir conteúdo em uma lista:

• Elemento da lista de itens: Projetado para listas simples. Cada item começa com um ícone, que você pode selecionar na biblioteca de ícones do GemPages ou carregar o seu próprio. Este elemento funciona bem para exibir pontos concisos, como benefícios do produto, recursos ou destaques rápidos.
• Elemento de lista avançada: Em vez de se limitar a ícones, permite que você inclua imagens ao lado de cada item da lista, proporcionando maior controle visual sobre o layout. Isso o torna ideal para casos de uso que exigem recursos visuais mais ricos, como exibir funcionalidades do produto com imagens, guias passo a passo ou comparações visuais. 

Como adicionar o elemento de lista avançada à sua página

Etapa 1: De acordo com o relatório Painel GemPages, selecione sua página para entrar no Editor.

Etapa 2: No Editor, localize o Lista avançada elemento sob o Lista de conteúdo seção. Arraste e solte-o no local desejado na página.

Clique no elemento e você verá a configuração revelada na barra lateral esquerda. 

Configurar a guia Configurações

1. Gerenciamento de itens

Esta seção permite que você adicionar, remover ou duplicar itens da lista.

• Para adicionar um novo item, Clique no ícone duplicado ao lado de um item existente. Um novo item aparecerá imediatamente abaixo do original.
• Para remover um item, Clique no Ícone da Lixeira no item que você deseja excluir e confirme a exclusão.

2. Espaçamento dos itens

O processo de Espaçamento de itens controla o espaço vertical entre cada item da sua lista. Use o controle deslizante ou o valor de entrada para ajustar a distância.

• Padrão: 12px
• Um espaçamento maior pode tornar a lista mais fácil de ler, enquanto um espaçamento menor cria um design mais compacto.

3. Estilo do item

Lacuna de ícone e texto : Isso ajusta o espaço horizontal entre o ícone (ou imagem) e o texto.

• Padrão: 12px
• Aumente o espaço para um layout mais aberto; reduza para uma aparência mais compacta.

Acolchoamento: Adiciona espaço ao redor de cada item da lista.

• Clique Adicionar preenchimento e insira o número de pixels desejado.
• Isso garante que seu conteúdo não toque nas bordas da caixa do item.

Contexto: Você pode adicionar um fundo colorido atrás do item.

Borda, Canto e Sombra: Essas opções permitem que você estilize o contêiner do item.

• Fronteira: Escolha o estilo (sólido, tracejado, pontilhado), espessura e cor.
• Canto: Ajuste o raio da borda para arredondar os cantos.
• Sombra: Adicione sombras para criar profundidade ou destacar itens.

4. Tamanho

Largura: Controla a largura da caixa de conteúdo dentro do elemento:

• Ajustar ao conteúdo: A caixa se ajusta automaticamente ao tamanho do conteúdo.
• Cheio: A caixa se expande até 100% da largura do contêiner.

Acolchoamento: Ajuste o espaçamento entre as bordas da caixa de conteúdo e o conteúdo interno. Clique Adicionar preenchimento e insira o valor desejado em pixels.

Organizar: Alinhe o conteúdo dentro da caixa: Esquerdo, Centralização de, ou Certo.

• Esta configuração ficará oculta se a largura estiver definida como Automático.
• O alinhamento padrão é à esquerda.

5. Fundo

Você também pode definir um plano de fundo para o elemento inteiro da Lista Avançada:

• Cor:

• Imagem:

6. Forma

• Fronteira: Defina o estilo, a espessura e a cor da borda para o elemento geral.
• Canto: Arredonde os cantos do elemento com border-radius.
• Sombra: Aplique efeitos de sombra para destacar visualmente a lista.

7. Alinhar

Determine como o elemento será posicionado na sua página. Há três opções para escolher: alinhamento à esquerda, centralizado e alinhamento à direita.

Configurar a guia Avançado

O processo de Guia Avançado permite mais personalização:

• Adicione CSS customizado para estilizar sua lista de maneiras não disponíveis nas configurações padrões.
• Adjust visibilidade por dispositivo para ocultar ou mostrar a lista no desktop, tablet ou celular.
• Inscreva-se animações ou efeitos de interação para tornar seu conteúdo mais dinâmico.

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