DocumentaçãoCommercePage Builder

Adicionar conteúdo - Bloco dinâmico

Last update: Tue Nov 28 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined
  • undefined

Usar o tipo de conteúdo Bloco dinâmico para adicionar um existente bloco dinâmico para o Page Builder estágio.

Bloco dinâmico na loja

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

Caixa de ferramentas Bloco dinâmico

Ferramenta
Ícone
Descrição
Mover
Ícone Mover {width="25"}
Move o contêiner de bloco e seu conteúdo para outra posição no palco.
Configurações
Ícone Configurações {width="25"}
Abre a Editar bloco página, onde você pode escolher o bloco e alterar as propriedades do container.
Ocultar
Ícone Ocultar {width="25"}
Oculta o container de bloco atual e seu conteúdo.
Mostrar
Mostrar ícone {width="25"}
Mostra o contêiner de bloco oculto e seu conteúdo.
Duplicar
Ícone Duplicar {width="25"}
Faz uma cópia do contêiner de bloco e de seu conteúdo.
Remover
Ícone Remover {width="25"}
Exclui o contêiner de bloco 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 um bloco dinâmico existente ao estágio

  1. Navegue até a Page Builder espaço de trabalho na página, bloco, produto ou categoria de destino.

  2. No Page Builder painel, expandir Add Content e arraste uma Dynamic Block espaço reservado para o estágio.

    Arrastar um espaço reservado de bloco dinâmico para o estágio {width="600" modal="regular"}

  3. Passe o mouse sobre o contêiner de bloco dinâmico vazio para exibir a caixa de ferramentas e escolher o Configurações ( Ícone Configurações {width="20"} ) ícone.

    Caixa de ferramentas Bloco dinâmico {width="600" modal="regular"}

  4. No Editar bloco dinâmico clique em Select Dynamic Block e use a lista para selecionar o bloco.

    Seleção de um bloco dinâmico {width="600" modal="regular"}

    Na lista, localize o bloco dinâmico que deseja inserir e clique em Select. Em seguida, clique em Add Selected.

    Seleção de um bloco dinâmico na lista {width="600" modal="regular"}

    Um resumo das informações de bloco dinâmico aparece abaixo.

    Resumo de bloco dinâmico {width="600" modal="regular"}

  5. Definir Template a um dos seguintes:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Opção Descrição
    Dynamic Block Block Template Adiciona um bloco independente.
    Dynamic Block Inline Template Insere o conteúdo do bloco no texto.

    Modelo de bloco dinâmico {width="200"}

  6. Complete as Configurações avançadas, conforme necessário.

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

Configurações avançadas

  1. Para controlar o posicionamento do bloco dinâmico no container pai, escolha uma 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 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.

  2. Defina o Border estilo aplicado aos quatro lados do contêiner de bloco dinâmico:

    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.

  3. Se você definir um estilo de borda diferente de None, conclua as opções de exibição da 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.

  4. (Opcional) Especifique os nomes dos CSS classes na folha de estilos atual para aplicar ao contêiner.

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

  5. Insira valores, em pixels, para o Margins and Padding para determinar as margens externas e o preenchimento interno do contêiner de bloco dinâmico.

    Insira os valores correspondentes no diagrama.

    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

Editar configurações de contêiner de bloco dinâmico

  1. Passe o mouse sobre o container de bloco dinâmico para exibir a caixa de ferramentas e escolher o Configurações ( Ícone Configurações {width="20"} ) ícone.

    Caixa de ferramentas Bloco dinâmico {width="500" modal="regular"}

  2. Se necessário, altere o bloco dinâmico:

    • Clique em Select Dynamic Block.

      Seleção de outro bloco dinâmico {width="20"}

    • Na lista de blocos dinâmicos ativos, clique em Select para o bloco que deseja adicionar.

  3. Atualize as configurações restantes conforme necessário.

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

Duplicar um bloco dinâmico

  1. Passe o mouse sobre o container de bloco dinâmico para exibir a caixa de ferramentas e escolher o Duplicar ( Ícone Duplicar {width="20"} ) ícone.

    A duplicata é exibida logo abaixo do original.

    Duplicação de um bloco dinâmico {width="500" modal="regular"}

  2. Para mover o novo bloco dinâmico para uma posição diferente, passe o mouse sobre o contêiner e escolha Mover ( Ícone Mover {width="20"} ) na caixa de ferramentas.

  3. Selecione e arraste o bloco dinâmico até que a diretriz vermelha apareça na nova posição.

    As bordas superior e inferior de cada contêiner são exibidas como linhas tracejadas enquanto o bloco dinâmico é movido.

Remover um bloco dinâmico do estágio

  1. Passe o mouse sobre o container de bloco dinâmico para exibir a caixa de ferramentas e escolher o Remover ( Ícone Remover {width="20"} ) ícone.

  2. Quando for solicitada a confirmação, clique em OK.

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