Layout - Guias

No painel Page Builder, em Layout, arraste o espaço reservado Tabs ​diretamente para o estágio ou para uma linha ou coluna no estágio.

{width="600" modal="regular"}

Clique no rótulo Tab 1 para exibir a caixa de ferramentas de guia individual e escolha o ícone Configurações ( {width="20"} ).

Insira o Tab Name que você deseja usar como rótulo.

{width="600" modal="regular"}

Se necessário, insira o Minimum Height para a guia.

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).

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

Se necessário, defina as outras opções usando as seguintes seções como orientação:

• Background
• Advanced

No canto superior direito, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.

Passe o mouse sobre o contêiner de guias para exibir a caixa de ferramentas e escolher o ícone Adicionar ( {width="20"} ).

Clique no rótulo Tab 2 para exibir o cursor e insira seu próprio rótulo para a guia.

Clique na segunda guia novamente no palco e escolha o ícone Duplicar ( {width="20"} ).

Clique no rótulo SeuNome Copy para exibir o cursor e inserir seu próprio rótulo para a terceira guia.

Clique na guia que deseja mover.

Selecione e arraste o ícone Mover ( {width="20"} ), que aparece logo antes do texto do rótulo da guia, para uma nova posição dentro do conjunto de guias.

Clique na guia onde deseja adicionar o conteúdo.

No painel Page Builder, expanda Elements e arraste um espaço reservado para Texto para a guia.

Insira ou cole algum texto no editor e use a barra de ferramentas do editor para formatá-lo conforme necessário.

Consulte Elementos - Texto para obter mais informações sobre como trabalhar com o tipo de conteúdo de texto.

{width="500" modal="regular"}

No canto superior direito, clique em Save.

Passe o mouse sobre uma guia individual para exibir a caixa de ferramentas e escolha o ícone Configurações ( {width="20"} ).

Se necessário, altere qualquer uma das configurações básicas da guia:

• Tab Name - Inserir texto revisado para o rótulo da guia. Também é possível modificar o rótulo diretamente no palco.

• Minimum Height - Digite como pixels se desejar substituir a altura automática. Por exemplo, você pode definir a altura mínima para corresponder à altura de uma imagem do plano de fundo para garantir que a imagem completa fique visível.

• Vertical Alignment - Escolha a posição vertical dos contêineres de conteúdo adicionados à guia.

Altere as outras configurações conforme necessário usando as seções a seguir para obter detalhes.

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

Passe o mouse sobre a borda superior do contêiner do conjunto de guias para exibir a caixa de ferramentas e escolha o ícone Configurações ( {width="20"} ).

Se necessário, altere o Default Active Tab.

Escolha a guia no conjunto que você deseja que fique ativa quando a página for carregada.

Insira o Minimum Height, em pixels, se desejar substituir a altura automática do conjunto de guias.

Para posicionar as guias de navegação na parte superior do conjunto de guias, escolha o Tab Navigation Alignment (Left, Center ou Right).

{width="500" modal="regular"}

Defina as opções Avançadas para o conjunto de guias:

• Para controlar o posicionamento do conjunto de guias no contêiner pai, 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 o conjunto de guias na borda esquerda do contêiner pai, com permissão para qualquer preenchimento especificado.
  Center	Alinha o conjunto de guias no centro do contêiner pai, com permissão para qualquer preenchimento especificado.
  Right	Alinha o conjunto de guias na borda direita do container principal, com permissão para qualquer preenchimento especificado.

• Defina o estilo Border aplicado a todos os quatro lados do contêiner de guias:

  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:

  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.

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

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

• Insira valores, em pixels, para que Margins and Padding determine as margens externas e o preenchimento interno do contêiner de guias.

  Insira os valores correspondentes no diagrama do container de guias.

  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

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