Elementos - Divisor
Criado para:
- Iniciante
- Intermediário
- Usuário
Use o tipo de conteúdo Divider para adicionar uma regra como uma quebra visual entre seções de conteúdo no Page Builder estágio. É possível especificar a cor, a espessura e a largura da linha do divisor. Você também pode controlar o alinhamento, definir as margens e o preenchimento e o formato da borda do container. Por padrão, o divisor é uma regra de traço que estende a largura total do contêiner, com permissão para preenchimento.
Embora a maioria dos contêineres divisores seja invisível, o exemplo a seguir exibe o contêiner com uma borda tracejada vermelha para que você possa ver a relação entre o divisor, o preenchimento e o contêiner. Você pode ajustar o preenchimento na parte superior e inferior do divisor para controlar o espaçamento entre os elementos.
NOTECaixa de ferramentas Divisor
NOTEAdicionar um divisor
-
No painel Page Builder, expanda Elements e arraste um espaço reservado Divider para uma linha, coluna ou conjunto de guias no estágio.
Use a diretriz vermelha para referência ao posicionar o divisor antes ou depois de outro contêiner de conteúdo no estágio.
No exemplo a seguir, o divisor marca o início de uma nova seção de texto.
-
Para especificar as configurações do novo divisor, siga o próximo procedimento.
Alterar as configurações do divisor
-
Passe o mouse sobre o contêiner do divisor para exibir a caixa de ferramentas e escolher o ícone Configurações (
-
Altere o divisor Line Color usando um dos seguintes métodos:
- Insira um nome de cor do HTML válido. Por exemplo,
Teal. - Insira o valor de cor hexadecimal. Por exemplo,
#008080.
Quando terminar, clique em Apply.
- Insira um nome de cor do HTML válido. Por exemplo,
-
Insira o Line Thickness em pixels.
-
Para indicar a unidade de medida, insira o Line Width seguido por
pxou%.
-
Atualize as configurações de Advanced conforme necessário.
-
Para controlar o posicionamento do divisor no contêiner pai, escolha o Alignment:
OpçãoDescriçãoDefaultAplica a configuração padrão de alinhamento especificada na folha de estilos do tema atual.LeftAlinha a lista ao longo da borda esquerda do contêiner principal, com permissão para qualquer preenchimento especificado.CenterAlinha a lista no centro do contêiner pai, com permissão para qualquer preenchimento especificado.RightAlinha o bloco ao longo da borda direita do contêiner principal, com permissão para qualquer preenchimento especificado.No exemplo a seguir, as opções são definidas para usar um alinhamento central para o divisor.
-
Defina o estilo Border aplicado a todos os quatro lados do contêiner divisor:
OpçãoDescriçãoDefaultAplica o estilo de borda padrão especificado pela folha de estilos associada.NoneNão fornece nenhuma indicação visível das bordas do contêiner.DottedA borda do contêiner aparece como uma linha pontilhada.DashedA borda do contêiner aparece como uma linha tracejada.SolidA borda do contêiner aparece como uma linha sólida.DoubleA borda do contêiner aparece como uma linha dupla.GrooveA borda do contêiner é exibida como uma linha com ranhura.RidgeA borda do contêiner aparece como uma linha estriada.InsetA borda do contêiner aparece como uma linha interna.OutsetA borda do contêiner aparece como uma linha de saída. -
Se você definir um estilo de borda diferente de
None, conclua as opções de exibição de borda:OpçãoDescriçãoBorder ColorEspecifique a cor escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente.Border WidthInsira o número de pixels para a largura da linha de borda.Border RadiusInsira o número de pixels para definir o tamanho do raio usado para arredondar cada canto da borda. -
(Opcional) Especifique os nomes de CSS classes da folha de estilos atual para aplicar ao contêiner.
Separe vários nomes de classe com um espaço.
-
Insira valores, em pixels, para Margins and Padding para determinar as margens externas e o preenchimento interno do contêiner divisor.
Insira os valores correspondentes no diagrama.
Área de contêinerDescriçãoMarginsA quantidade de espaço em branco aplicada à borda externa de todos os lados do container. Opções:Top/Right/Bottom/LeftPaddingA quantidade de espaço em branco aplicada à borda interna de todos os lados do contêiner. Opções:Top/Right/Bottom/Left
-
-
Quando terminar, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.
Duplicar um divisor
Para um divisor formatado com configurações específicas, é mais eficiente fazer uma duplicata, em vez de começar novamente com um novo espaço reservado.
-
Passe o mouse sobre o contêiner do divisor para exibir a caixa de ferramentas e escolher o ícone Duplicar (
O contêiner de divisor duplicado aparece logo abaixo do original.
-
Passe o mouse sobre o novo contêiner do divisor para exibir a caixa de ferramentas e escolher o ícone Mover (
-
Selecione e arraste o divisor até que a diretriz vermelha marque a nova posição.
As bordas superior e inferior de cada contêiner são exibidas como linhas tracejadas enquanto o divisor é movido.
