Layout - Linha

Use o tipo de conteúdo Linha para adicionar uma linha no Page Builder estágio.

NOTE
Se você estiver fazendo alterações significativas no conteúdo de Page Builder, é recomendável aumentar o Tempo de Vida da Sessão de Administrador para evitar que a sessão atinja o tempo limite enquanto você trabalha.

Caixa de ferramentas Linha

A caixa de ferramentas da linha é exibida quando você passa o mouse sobre o contêiner de linha. A caixa de ferramentas inclui opções para mover, ocultar, duplicar, editar ou remover a linha. A seleção de configurações determina a aparência, o plano de fundo e o layout da linha. Elementos de conteúdo adicionais podem ser arrastados para a linha a partir do painel Page Builder à esquerda.

Caixa de ferramentas de linha

Ferramenta
Ícone
Descrição
Mover
Ícone Mover {width="25"}
Move a linha para outra posição em relação a outras linhas no palco.
(rótulo)
Row
Identifica o contêiner de conteúdo atual como uma linha. Passe o mouse sobre o contêiner para ver a caixa de ferramentas.
Configurações
Ícone de configurações {width="25"}
Abre a página Editar linha, onde é possível alterar as propriedades do container.
Ocultar
Ícone Ocultar {width="25"}
Oculta a linha atual.
Mostrar
Mostrar ícone {width="25"}
Mostra a linha oculta.
Duplicar
Ícone duplicado {width="25"}
Faz uma cópia da linha.
Remover
Ícone Remover {width="25"}
Exclui o contêiner de linha e seu conteúdo do estágio.
NOTE
Os elementos ocultos são armazenados no banco de dados e invisíveis para os clientes. No entanto, esses elementos são visíveis para mecanismos de pesquisa e outros bots que rastreiam seu site. Eles também são retornados como parte do conteúdo, se solicitado por meio de uma chamada de API com um atributo de invisibilidade, a menos que você os remova do estágio.

Adicionar uma linha

  1. No painel Page Builder, em Layout, arraste uma nova Row ​para o estágio, logo abaixo da primeira linha.

  2. Para formatar a linha, passe o mouse sobre o contêiner de linha para exibir a caixa de ferramentas e escolha o ícone Configurações ( Ícone Configurações {width="20"} ).

    Use as seções a seguir para obter informações detalhadas sobre como concluir as configurações disponíveis.

    Adicionando uma linha {width="600" modal="regular"}

Alterar configurações de linha

  1. Passe o mouse sobre o contêiner de linhas para exibir a caixa de ferramentas e escolher o ícone Configurações ( Ícone Configurações {width="20"} ).

    Caixa de ferramentas de linha {width="600" modal="regular"}

  2. Use as seções a seguir para obter informações detalhadas sobre como atualizar as configurações disponíveis.

  3. Quando terminar, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.

Aparência

Use as configurações de Aparência para determinar como o conteúdo é exibido na linha.

Configurações de aparência

  • Para determinar como a cor e/ou a imagem do plano de fundo aparecem em relação ao contêiner e à largura da área de conteúdo, escolha o alinhamento:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opção Descrição
    Contained A cor ou imagem do plano de fundo é limitada à largura máxima da página definida pelo tema.
    Full Width Limita o conteúdo à largura máxima da página definida pelo tema. A cor e/ou imagem do plano de fundo não é limitada e estende a largura total da linha.
    Full Bleed O conteúdo e a imagem e/ou cor do plano de fundo não são limitados e estendem a largura total da linha. A Sangria Completa só pode ser usada com temas que ofereçam suporte ao layout.
  • Insira o Minimum Height para a linha. Este valor pode ser um número com qualquer unidade CSS válida (como 100px, 50%, 50em, 100vh) ou um cálculo (como 100vh - 237px).

    Por exemplo, você pode definir a altura mínima de uma linha para alongar a altura total da página, fornecendo opções atraentes para imagens e vídeos de fundo de página inteira.

  • Escolha uma configuração Vertical Alignment para alinhar qualquer contêiner de conteúdo adicionado à linha (Superior, Centro ou Inferior).

Histórico

Há muitas opções para definir a exibição do plano de fundo de uma linha. É possível aplicar uma cor simples ou uma imagem de plano de fundo e gerenciar efeitos mais sofisticados.

Cor do plano de fundo

Especifique a cor do plano de fundo escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente. Essa configuração determina a cor do plano de fundo da linha. Também é possível ajustar a opacidade da cor.

Nenhuma cor (padrão)

Você pode definir o valor de uma das três formas a seguir:

  • Um nome de cor predefinido, como White
  • O valor de cor hexadecimal da cor, como #ffffff
  • O valor rgba da cor, com porcentagem de opacidade, como rgba(255, 255, 255, 0.75)

Se quiser escolher uma cor, clique na amostra à esquerda da caixa Sem cor.

Escolhendo uma amostra de cor

Se você clicar na caixa de cores para abrir o seletor de cores novamente, a caixa abaixo do controle deslizante mostrará os valores atuais de vermelho, verde, azul e alfa (rgba). O último número indica a porcentagem de opacidade atual como um decimal. Você pode usar o controle deslizante para ajustar a opacidade ou inserir o valor decimal desejado.

Definindo a opacidade

NOTE
Page Builder também oferece suporte a uma camada de transparência, ou a um canal alfa, em imagens de plano de fundo que podem ser usadas para criar planos de fundo com vários graus de opacidade.

Background Type

Um tipo de plano de fundo pode ser uma imagem ou um vídeo. O Page Builder assume o padrão Image e mostra várias configurações de imagem. Se você selecionar Video, o Page Builder trocará as configurações da imagem pelas configurações do vídeo. Ambos os tipos de plano de fundo são descritos a seguir.

Tipo de plano de fundo

Configurações de tipo de imagem

Se você definir o Background Type ​como Image, use as seguintes configurações para definir a exibição da imagem de fundo.

Imagem de plano de fundo

  • Background Image - Se necessário, use as ferramentas fornecidas para escolher uma imagem de plano de fundo a ser aplicada à linha:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opção Descrição
    Upload Faz upload de um arquivo de imagem do seu computador local para a galeria e o aplica como a imagem de plano de fundo para a linha.
    Select from Gallery Solicita que você escolha uma imagem existente da galeria como a imagem do plano de fundo para a linha.
    Ícone de câmera {width="25"} Permite que você arraste a imagem para o bloco da câmera ou navegue até a imagem no seu sistema de arquivos local.
  • Background Mobile Image - Se necessário, use as mesmas ferramentas para escolher uma imagem de plano de fundo diferente para ser usada para exibição em dispositivos móveis.

  • Background Size - Defina esta opção para determinar como a imagem do plano de fundo é dimensionada em relação à largura da linha:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opção Descrição
    Cover A imagem de plano de fundo cobre a largura total da linha.
    Contain A imagem de fundo é limitada à largura da área de conteúdo.
    Auto Aplica o tamanho da folha de estilos atual.

    Tamanho do Plano de Fundo {width="250"}

  • Background Position - Defina esta opção para determinar como a imagem do plano de fundo é ancorada em relação à linha:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Ponto de ancoragem Position
    Top Esquerda / Centro / Direita
    Center Esquerda / Centro / Direita
    Bottom Esquerda / Centro / Direita

    O ponto de ancoragem se parece com um pino de pressão que anexa a imagem à linha na posição de fundo especificada.

  • Background Attachment - Definir o tipo de anexo para determinar como a imagem de plano de fundo se move em relação à página de rolagem:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Opção Descrição
    Scroll A imagem de fundo anexada é sincronizada para se mover para baixo conforme a página rola. Use Plano de fundo paralaxe para controlar a velocidade de rolagem.
    Fixed (Não disponível para dispositivos móveis) A imagem de plano de fundo não se move conforme o contêiner rola pela imagem e é fixada na posição de plano de fundo especificada.
  • Background Repeat - Defina como Yes para repetir a imagem de plano de fundo para preencher o espaço disponível na linha.

Configurações de tipo de vídeo

Se você definir o Tipo de Plano de Fundo como Video, use as configurações a seguir para definir a exibição da imagem de plano de fundo.

  • Video URL - Digite uma URL de vídeo válida. Os URLs válidos do vídeo podem ser links para:

    • Vídeos do YouTube: https://youtu.be/CoDhMRUUjeI
    • Vídeos do Vimeo: https://vimeo.com/190156113
    • Arquivos de vídeo válidos (.mp4 é recomendado): https://myvideos.com/spiral.mp4

    URL do vídeo de fundo {width="300"}

  • Overlay Color - Selecione uma cor para aplicar um tom transparente ao vídeo.

  • Infinite Loop - Defina como No para reproduzir o vídeo uma vez e parar. Quando essa opção é definida como Yes (padrão), o vídeo se repete em um loop infinito.

  • Lazy Load - Defina como No para fazer com que o vídeo seja carregado com a página, mesmo quando não estiver visível. Quando essa opção está definida como Yes (padrão), o vídeo é carregado da origem somente quando visível na tela.

  • Play Only When Visible - Defina como No para fazer com que o vídeo comece a ser reproduzido imediatamente após ser carregado, independentemente de estar visível ou não. Quando essa opção está definida como Yes (padrão), o vídeo começa a ser reproduzido somente quando está visível.

  • Fallback Image - Se necessário, especifique uma imagem a ser exibida na tela antes do carregamento do vídeo e se ele não for carregado por algum motivo.

Plano de fundo do Parallax

Use essas opções para controlar a velocidade de uma imagem ou vídeo de plano de fundo de rolagem em relação à rolagem da página. O plano de fundo pode ser definido para rolar mais lentamente para criar uma sensação de imersão.

  • Definir Habilitar Plano de Fundo de Paralaxe para Yes.
  • Insira a Velocidade da Paralaxe como um valor decimal entre -1.0 e 2.0.

Configurações de plano de fundo do Parallax

Avançado

  • Para controlar o posicionamento horizontal dos contêineres de conteúdo adicionados à linha, escolha um Alignment:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Opção Descrição
    Default Aplica a configuração padrão de alinhamento especificada na folha de estilos do tema atual.
    Left Alinha os contêineres de conteúdo na borda esquerda do contêiner de linha, com permissão para qualquer preenchimento especificado.
    Center Alinha o contêiner de conteúdo no centro do contêiner de linha, com permissão para qualquer preenchimento especificado.
    Right Alinha o contêiner de conteúdo na borda direita do contêiner de linha, com permissão para qualquer preenchimento especificado.
  • Defina o estilo Border que é aplicado aos quatro lados do contêiner de linhas:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Opção Descrição
    Default Aplica o estilo de borda padrão especificado pela folha de estilos associada.
    None Não fornece nenhuma indicação visível das bordas do contêiner.
    Dotted A borda do contêiner aparece como uma linha pontilhada.
    Dashed A borda do contêiner aparece como uma linha tracejada.
    Solid A borda do contêiner aparece como uma linha sólida.
    Double A borda do contêiner aparece como uma linha dupla.
    Groove A borda do contêiner é exibida como uma linha com ranhura.
    Ridge A borda do contêiner aparece como uma linha estriada.
    Inset A borda do contêiner aparece como uma linha interna.
    Outset A 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:

    Cor da Borda {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opção Descrição
    Border Color Especifique a cor escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente.
    Border Width Insira o número de pixels para a largura da linha de borda.
    Border Radius Insira o número de pixels para definir o tamanho do raio usado para arredondar cada canto da borda.

    A linha no exemplo a seguir tem um raio de borda de 15.

    Linha com Raio de Borda de 15 {width="500"}

  • (Opcional) Especifique os nomes de CSS classes da folha de estilos atual para aplicar ao contêiner de linha.

    Separe vários nomes de classe com um espaço.

  • Insira valores, em pixels, para que Margins and Padding especifique as margens externas e o preenchimento interno da linha.

    Insira cada valor correspondente no diagrama de contêiner de linha.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Área de contêiner Descrição
    Margins A quantidade de espaço em branco aplicada à borda externa de todos os lados do container. Opções: Top / Right / Bottom / Left
    Padding A quantidade de espaço em branco aplicada à borda interna de todos os lados do contêiner. Opções: Top / Right / Bottom / Left

    Margens e Preenchimento {width="600" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d