Elementos - Código HTML

5 de maio de 2025

Tópicos:

Criado para:

Iniciante
Intermediário
Usuário

Use o tipo de conteúdo Código HTML para adicionar trechos de código HTML, CSS e JavaScript no Page Builder estágio. Por exemplo, talvez você queira adicionar um HTML personalizado, declare uma classe CSS que possa ser aplicada a um elemento na página. Ou você pode adicionar um trecho de código para um logotipo, botão ou banner recebido de um provedor de terceiros.

Caixa de ferramentas Código HTML

Ferramenta	Ícone	Descrição
Mover		Move o contêiner do Código HTML para outro local válido na página.
Configurações		Abre a página Editar código HTML, onde é possível alterar as propriedades do container.
Ocultar		Oculta o contêiner do Código HTML.
Mostrar		Mostra o contêiner de Código HTML oculto.
Duplicar		Faz uma cópia do contêiner do Código HTML.
Remover		Exclui o contêiner do Código HTML 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 código HTML

O exemplo a seguir demonstra como incorporar o código Google Font e declarar classes de cabeçalho personalizadas que substituem a folha de estilos atual.

Etapa 1: Escolher uma fonte do Google

Visite o site Google Fonts e escolha a família de fontes que deseja usar.
Copie o código gerado que deve ser incorporado na seção <head> da página e cole-o temporariamente em um editor de texto.
- Incorporar código de fonte
- Regra CSS

Adicione a regra font-family a cada classe de cabeçalho, colocando as classes de cabeçalho em uma tag <style>.

Este código foi colado em Page Builder.

<style>
   h1 {color: teal; font-family: 'Khand', sans-serif; }
   h2 {color: teal; font-family: 'Khand', sans-serif; }
   h3 {color: teal; font-family: 'Khand', sans-serif; }
</style>

Etapa 2: adicionar o código à página

Na barra lateral Admin do seu armazenamento, vá para Content > Elements>Pages.
Localize a página onde a fonte deve estar disponível e abra-a no modo de edição.
Role para baixo e expanda a seção Content.
No painel Page Builder, expanda Elements e arraste um espaço reservado HTML Code para uma linha, coluna ou conjunto de guias no estágio.

Use a diretriz vermelha para posicionar o divisor antes ou depois de outro contêiner de conteúdo no conjunto de linhas, colunas ou guias.
Passe o mouse sobre o contêiner de HTML para exibir a caixa de ferramentas e escolha o ícone Configurações ( ).
Na caixa de texto, cole as declarações de código e estilo incorporadas do Google Fonts que você preparou.

Para facilitar a leitura, você pode digitar alguns espaços para recuar o código.
Atualize as configurações restantes conforme necessário (consulte Alterar configurações de código de HTML para obter detalhes).
No canto superior direito, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.

A nova fonte é renderizada quando a página é visualizada em um navegador.

Etapa 3: visualizar a página

Na seção Currently Active, defina Enable Page como Yes.
No canto superior direito, clique na seta Save e escolha Save & Close.
Localize a página na grade e selecione View na coluna Actions.

Alterar configurações de código HTML

Passe o mouse sobre o contêiner HTML para exibir a caixa de ferramentas e escolha o ícone Configurações ( ).

Na caixa de texto, edite o código conforme necessário.

Há suporte para os códigos HTML, CSS e JavaScript. Os trechos de código que pertencem à seção <head> da página podem ser inseridos aqui.

O editor também fornece botões para inserir elementos especiais no código:

Botão	Descrição
Inserir widget…	Clique para inserir um widget na posição do cursor na caixa de texto HTML.
Inserir imagem…	Clique para inserir uma imagem carregada ou uma imagem da Galeria na posição do cursor na caixa de texto HTML.
Inserir variável…	Clique em para inserir uma variável na posição do cursor na caixa de texto HTML.

Atualize as configurações de Advanced conforme necessário.

Para controlar o posicionamento do código no contêiner pai, escolha um Alignment:

Opção	Descrição
`Default`	Aplica a configuração padrão de alinhamento especificada na folha de estilos do tema atual.
`Left`	Alinha a lista ao longo da borda esquerda do contêiner principal, com permissão para qualquer preenchimento especificado.
`Center`	Alinha a lista no centro do contêiner pai, com permissão para qualquer preenchimento especificado.
`Right`	Alinha 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 bloco de código renderizado.

Divisor com alinhamento de centro

Defina o estilo Border aplicado a todos os quatro lados do contêiner de código:

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:

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.

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 código.

Insira os valores correspondentes no diagrama.

Á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`

recommendation-more-help