O bloco Divisor permite inserir separadores de linha visualmente atraentes entre diferentes seções de conteúdo em sua página. Esses divisores ajudam a melhorar a legibilidade e a criar um layout mais estruturado e envolvente.
Além de uma linha simples, o bloco Divisor permite colocar um rótulo de texto ou um ícone no centro do divisor, tornando-o um elemento de design versátil para dividir o conteúdo com estilo.
Adicionando o Bloco Divisor às Suas Páginas
Siga estas etapas para adicionar um bloco Divisor à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Divisor na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco Divisor para abrir suas configurações. Na aba Conteúdo, configure a aparência e o estilo do seu divisor.
Divisor:
- Estilo: Escolha o estilo da linha para o seu divisor — Linha Sólida, Pontilhada, Tracejada ou Dupla.
- Cor: Defina a cor da linha do divisor.
- Largura: Controle a largura do divisor como uma porcentagem de seu contêiner, de 1% a 100%.
- Altura: Defina a espessura da linha do divisor em pixels, de 1px a 10px.
- Alinhamento: Alinhe o divisor à Esquerda, Centro ou Direita. Suporta alinhamento por dispositivo para desktop, tablet e celular.
- Adicionar Elemento: Opcionalmente, coloque um elemento no centro da linha divisória. Escolha entre Nenhum (apenas a linha), Texto (um rótulo de texto) ou Ícone (um ícone do Font Awesome).
- Quando Texto for selecionado: Insira o texto do rótulo e escolha uma Tag HTML (H1–H6 ou span) para controlar sua marcação semântica.
- Quando Ícone for selecionado: Escolha seu ícone usando o seletor de ícones e defina o Tamanho do Ícone.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar ainda mais a aparência do seu bloco Divisor.
Estilos:
- Sombra: Adicione um efeito de sombra ao divisor. Escolha entre Nenhuma, Fina, Pequena, Média ou Grande.
- Tipografia do Cabeçalho (visível quando Adicionar Elemento está definido como Texto): Personalize a família da fonte, peso, tamanho, altura da linha, espaçamento entre letras e transformação de texto para o elemento de texto.
- Cor do Texto (visível quando Adicionar Elemento está definido como Texto): Defina a cor do rótulo de texto no divisor.
- Cor do Ícone (visível quando Adicionar Elemento está definido como Ícone): Defina a cor do ícone exibido no divisor.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco Divisor (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o divisor e os elementos circundantes na página.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco Divisor (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco Divisor, criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por JavaScript.
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do divisor. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do Dispositivo:
- Ocultar em Desktop: Oculte o bloco Divisor em telas de desktop.
- Ocultar em Tablet: Oculte o bloco Divisor em dispositivos tablet.
- Ocultar em Mobile: Oculte o bloco Divisor em dispositivos móveis.
Efeitos de Animação:
- Animação de Entrada: Escolha um efeito de animação que é reproduzido quando o bloco Divisor entra na tela, como Bounce, Fade In, Zoom In, Rotate In e muitos outros.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco Divisor e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Divisor à sua página! Divisores são uma maneira simples, mas eficaz, de criar estrutura visual e guiar seus visitantes pelo seu conteúdo. Experimente diferentes estilos de linha, cores, larguras e elementos centrais para encontrar o visual certo para o seu design.