DocumentaçãoCommercePage Builder

Elementos - Código HTML

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 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

Caixa de ferramentas Código HTML {width="500" modal="regular"}

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

  1. Visite o site Google Fonts e escolha a família de fontes que deseja usar.

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

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

    code language-html 
    <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

  1. Na barra lateral Admin do seu armazenamento, vá para Content > Elements>Pages.

  2. Localize a página onde a fonte deve estar disponível e abra-a no modo de edição.

  3. Role para baixo e expanda a seção Content.

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

    Arrastando um espaço reservado para o Código HTML para o estágio {width="600" modal="regular"}

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

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

    código e estilos de HTML {width="500" modal="regular"}

  7. Atualize as configurações restantes conforme necessário (consulte Alterar configurações de código de HTML para obter detalhes).

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

  1. Na seção Currently Active, defina Enable Page ​como Yes.

    Habilitando a página {width="600" modal="regular"}

  2. No canto superior direito, clique na seta Save e escolha Save & Close.

  3. Localize a página na grade e selecione View na coluna Actions.

    Visualizar os cabeçalhos da página com a nova família de fontes {width="700" modal="regular"}

Alterar configurações de código HTML html-settings

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

  2. 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:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    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.

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

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

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
      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 {width="600" modal="regular"}

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

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

      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.

      table 0-row-2 1-row-2 2-row-2
      Á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
85b60248-86a4-4d5f-9933-5179643f608d