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 criam um layout mais estruturado e envolvente.
Além de uma simples linha, o bloco Divisor permite colocar uma etiqueta de texto ou í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:
Passo 1: Adicione 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
Depois de adicioná-lo, clique no bloco Divisória para abrir suas configurações. Na guia Conteúdo, configure a aparência e o estilo da sua divisória.
Divisória:
- Estilo: escolha o estilo da linha para o seu divisor — Linha sólida, pontilhada, tracejada ou dupla.
- Cor: Defina a cor da linha divisória.
- Largura: controle a largura do divisor como uma porcentagem do seu contêiner, de 1% a 100%.
- Altura: defina a espessura da linha divisória em pixels, de 1px a 10px.
- Alinhamento: alinhe o divisor à esquerda, ao 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 Font Awesome).
- Quando Texto estiver 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 estiver selecionado: Escolha seu ícone usando o seletor de ícones e defina o Tamanho do Ícone.
Etapa 3: Personalizar o design
Na guia 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 de fontes, a espessura, o tamanho, a altura da linha, o espaçamento entre letras e a transformação do 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, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre o divisor e os elementos ao redor na página.
- Preenchimento: ajuste o espaçamento interno do seu bloco Divisor (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- CSS ID: Exibe o identificador exclusivo gerado automaticamente para o seu bloco Divisor, criado automaticamente pelo SeedProd para personalização de estilo ou segmentação 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 divisor wrapper. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do dispositivo:
- Ocultar na área de trabalho: Oculta o bloco Divisor nas telas da área de trabalho.
- Ocultar no tablet: Oculta o bloco Divisória em dispositivos tablet.
- Ocultar no celular: Oculte o bloco Divisória em dispositivos móveis.
Efeitos de animação:
- Animação de entrada: escolha um efeito de animação que seja reproduzido quando o bloco Divisor for exibido, como Saltar, Aparecer gradualmente, Ampliar, Girar 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! Os divisores são uma maneira simples, mas eficaz, de criar uma estrutura visual e orientar os visitantes pelo seu conteúdo. Experimente diferentes estilos de linha, cores, larguras e elementos centrais para encontrar a aparência certa para o seu design.