Seção de texto

Use a seção Texto quando quiser exibir um conjunto de texto em colunas. Você pode adicionar um Seção de texto a uma página para vincular facilmente diferentes páginas do site ou adicionar links com suas descrições.

Conforme você adiciona os itens da lista a esta seção, as configurações e o estilo que você especificou serão aplicados a ela. Esta seção será útil para mostrar a equipe, diferentes produtos que você vende e para muitas outras finalidades.


Neste artigo:

  1. O que é uma seção de texto?
  2. Adicionar uma seção de texto
  3. Adicionar e editar itens da lista
  4. Sequenciando itens da lista
  5. Excluindo itens da lista
  6. Alteração do layout da seção
  7. Gerenciar Elementos
  8. Opções de estilo
  9. O Estilo Carrossel
  10. Exemplo vivo

Seção de texto

  • Se você deseja adicionar texto ou um link em um texto sem imagens, pode adicionar uma seção de texto.

Adicionar uma seção de texto

  • Uma seção pode ser adicionada a uma página. Você pode adicionar uma seção a uma página já existente ou crie uma nova página dentro do seu site.
  • Na sua página, Clique no ícone + azul para adicionar um Nova Seção para sua página.

  •  Você vai agora ver o categorias de seção no painel esquerdo.
  • Escolha o Conteúdo (1) opção e clique em Texto guia (2) onde você pode escolher layouts diferentes (3).

  • Escolha qualquer layout de seção e clique nele para adicioná-lo à sua página.

Observação

  1. Você pode gerenciar a largura da seção no seção de configurações e a largura do conteúdo do estilo de conteúdo.
  2. Mantenha os títulos, subtítulos e descrições curtos e nítidos.
  3. No campo de descrição, clique no botão Entrar botão para dar uma quebra de linha e o Shift + Enter botão para começar a partir da próxima linha.


Adicionar e editar itens de lista

Adicionar item de lista

Depois de adicionar a seção: 

  • Clique no Editar conteúdo (1) botão para abrir o painel de itens da lista.

  • Clique no Adicionar item (2) botão para adicionar um novo item de lista.
  • Você terá a opção de Duplicar e excluir (3) os itens da lista.


Editar item da lista

Clique no item da lista que você deseja editar. Ele abrirá as opções de edição de itens de lista específicos.

  • Adicionar uma Título (1), Subtítulo (2), e Descrição (3) do item da lista.
  • Você pode não encontrar a opção de Legenda e Descrição em determinados itens da lista, dependendo do layout escolhido.
    Antes de adicionar a descrição, verifique esse artigo.

4. Ação no clique

Você pode personalizar o comportamento de clique de itens individuais no Lista de texto seção. Abaixo estão as opções disponíveis:

  • Ir para um link
    Selecionar esta opção abre o Criador de links, permitindo que você adicione um hyperlink a este item. O link pode direcionar os usuários para outra página dentro do seu site ou para uma URL externa. Saiba mais sobre Criador de links.
  • Abrir na caixa de luz
    Esta opção exibe o item em uma forma ampliada L visualizar quando clicado. Neste modo, o Legenda e Descrição associado ao item não aparecerá na visualização em grade, mas ficará visível no modo Lightbox.
  • Nenhuma Ação
    Selecione esta opção para tornar o item não clicável. Quando selecionado, clicar no item não acionará nenhuma ação.

5. Abrir link em nova janela: Defina o Link para abrir em um nova aba ou na mesma aba. Isso só ficará visível quando Ir para um link opção é selecionada em Ação no clique menu.

6. Botões e links: Adicione qualquer tipo de de vidrio para o item da lista. Você pode adicionar um Botão/Link de imagem/Ícone social/Link de texto. Saiba Mais.

7. Salvar: Após fazer as personalizações, salve as alterações.

8. Substituição de estilo de cartão

Você pode substituir as configurações globais de estilo de cartão na seção Configurações de estilo e personalizar o cartão de cada item individualmente na seção Lista de Imagens. Isso permite que você aplique estilos exclusivos a diferentes itens da lista para melhor personalização.

Saiba Mais sobre a opção Cartões na seção dinâmica.


Veja a edição de um item de lista de texto em ação:


Itens da Lista de Sequência

  • Você pode facilmente arrastar e soltar os itens da lista para alterar a sequência.

Excluir um item da lista

Depois de adicionar um item da lista, você pode editá-lo ou excluí-lo.

  • Clique no Apagar ícone ao lado do item Lista.
  • Clique no Apagar botão no pop-up de confirmação.
  • Economize as mudanças.

Observação

Os itens da lista, uma vez excluídos, não podem ser recuperados.


Layout da seção

  • Clique no Editar conteúdo (1) botão.

  • Escolha o traçado (2) aba.
  • Selecione qualquer layout e Economize (3) suas mudanças.


Seção Gerenciar Elementos de Texto

A seção Lista de texto inclui um Aba Elementos que permite que você gerencie a visibilidade de vários elementos dentro da seção com facilidade. Usando interruptores de alternância simples, você pode habilitar ou desabilitar elementos específicos sem ter que excluir ou modificar os elementos em si.

  • Clique no Editar conteúdo (1) botão.

  • Escolha o elementos (2) aba.
  • Após fazer as alterações, clique em Economize (3) botão.

Opções de seção

  1. Mostrar manchete: Ativa ou desativa a visibilidade do título para a seção Lista de Texto.
  2. Mostrar botões: Controle se os botões são exibidos no nível da seção.

Opções de itens

  1. Mostrar título: Controle se o título é exibido.
  2. Mostrar legenda: Habilitar ou desabilitar legendas.
  3. Mostre a descrição: Gerencie a visibilidade das descrições dos itens.
  4. Mostrar botões: Decida se os botões para itens individuais devem ser exibidos.


Estilize sua seção

  • Clique no Editar conteúdo (1) botão.

  • Escolha o Sessão de Fotos (2) aba.
  • Altere o estilo dos itens da lista e Economize (3) suas mudanças.


Você terá várias opções de estilo para esta seção: 

  1. Opções de exibição
  2. Display para celular
  3. Ataques XDR
  4. Tamanho do texto
  5. Espaçamento
  6. Título da Seção
  7. Opções de cartão
  8. Opções de sombra
  9. Botões e links

Opções de exibição

  1. Escolha Mostrar itens in Linhas e colunas or carrossel 
    • Se você escolheu o Linhas e colunas opção, os itens da lista serão organizados em linhas e colunas. Nesse caso, você precisa especificar o número de linhas e colunas.
    • Se você escolheu o carrossel opção, os itens da lista serão apresentados como uma apresentação de slides. Saiba mais.
  2. Colocou o Numero de colunas para a lista de texto. Você pode escolher de 1 a 10 colunas.
  3. Especifique o Espaço Entre Colunas dos itens da lista.
  4. Especifique o Espaço entre linhas dos itens da lista.

Se a opção Carrossel for selecionada na Etapa 1, você verá as seguintes opções adicionais:

  1. Ativar rolagem suave: Permite a rolagem contínua de itens dentro do carrossel para uma experiência perfeita e visualmente atraente.
  2. Deslizamento automático: Gira automaticamente os slides sem interação do usuário.
  3. Mostrar progresso da reprodução automática: Exibe um indicador de progresso enquanto a reprodução automática está ativa para melhor visibilidade.
  4. Atraso de reprodução automática: Define o intervalo de tempo entre cada transição de slide quando a reprodução automática está ativada.
  5. Loop de carrossel: Permite o loop contínuo de slides, para que o carrossel reinicie perfeitamente após o último slide.
  6. Controles do carrossel: Escolha o Controles de navegação. Você pode escolher entre Sem controles, Setas – Centro inferior/Centro superior direito/Inferior direito, Chevron, Pontos e Rolagem horizontal.


Display para celular

  1. Defina o número de Colunas da grade para dispositivos móveis. Você pode configurá-lo para no máximo 3 colunas.
  2. Definir o Espaçamento entre grades (em pixels).

Layout de coluna específico do dispositivo com base nas configurações do Studio:


Ataques XDR

  • Alinhamento de conteúdo: Alinhe o conteúdo horizontalmente na Text List. Você pode configurá-los para alinhamento à esquerda, à direita ou ao centro.


Tamanho do texto

  1. Clique no Alterar Estilo do Texto botão para visitar o Design seção e gerencie seus tamanhos e estilos de fonte. 
  2. Colocou o Título estilo de fonte para os itens de lista da seção.
  3. Colocou o Legenda estilo de fonte para os itens de lista da seção.
  4. Definir o padrão Descrição estilo de fonte para os itens de lista da seção.
    Verifique também: Estilo de texto do site.
  5. Ative esta opção para animar quaisquer números presente no Título e Legenda campos. Quando ativada, os valores numéricos aparecerão com uma animação de contagem dinâmica, tornando-os visualmente mais atraentes.


Espaçamento

  1. Especifique o Largura do conteúdo para os itens da lista.
  2. Especifique o Espaço abaixo do título da seção em px.
  3. Especifique o Espaço abaixo dos títulos dos itens da lista (em %).
  4. Especifique o Espaço abaixo das legendas dos itens da lista (em %).


Título da Seção

  1. Alinhar horizontalmente o texto do título da seção. Você pode defini-lo como Esquerda, Centro e Direita.
  2. Habilitar/Desabilitar o Divisor entre o título da seção e o conteúdo da seção.
  3. Colocou o espessura do divisor (em pixels).
  4. Especifique o Cor Divisória do seletor de cores.
  5. Escolher Estilo Divisor da lista suspensa.
  6. Colocou o Largura do título para definir a largura que o título da seção deve ter, começando com um mínimo de 50%.


Opções de cartão


Opções de sombra

  1. Ecrã – Escolha mostrar a sombra atrás dos itens da lista sempre ou apenas ao passar o mouse.
  2. Sessão de Fotos – Escolha entre as predefinições existentes ou crie uma sombra personalizada.
    Caso tenha escolhido a opção Personalizado, então visite este Gerador de sombra de caixa para criar uma sombra personalizada. Por fim, copie e cole o sombra de caixa CSS.
  3. Caso você tenha escolhido a opção de presets, então Escolha estilos de sombra da lista suspensa.

Observação

As configurações de estilo serão aplicadas a todos os itens da seção. Eles não podem ser alterados para cada item da lista individualmente.


Botões e links

  • Veja como para gerenciar o estilo de botões e links.


O Estilo Carrossel

O estilo Carrossel mostra os itens da lista como uma apresentação de slides, ou seja, os itens da lista serão alternados um após o outro.

Veja como funciona o estilo carrossel: 


Mostrar item da lista de texto como cartão

  • Quando você escolhe mostre a carta sobre sua lista de texto, os itens da lista terão um plano de fundo com a cor do cartão que você especificou no Design seção.
    Veja também: Cores e espaçamento do site.

Dar uma olhada: 


Aqui está uma lista de texto ao vivo: 

Veja um site de demonstração ao vivo. 


Não consegue encontrar o que procura?

Entre em contato com um especialista da Pixpa.