Page Builder Workspace

Quando Page Builder está ativado, o Content ​seção e o processo de criação de conteúdo são modificados para aproveitar o Page Builder ferramentas para CMS páginas, produto e categoria páginas, blocos, e blocos dinâmicos. Esta seção inclui uma_ Cabeçalho do conteúdo _uma pré-visualização do conteúdo e fácil acesso à tela inteira Page Builder espaço de trabalho.

Seção de conteúdo com Page Builder pré-visualização

Cabeçalho do conteúdo

Como os mecanismos de pesquisa procuram cabeçalhos de nível um (H1), adicionar um cabeçalho de nível um é uma maneira fácil de garantir que a página seja indexada corretamente.

NOTE
A variável Content Heading ​O campo que aparece na parte superior da página é um campo herdado que oferece suporte ao conteúdo criado com Commerce versões. No entanto, não faz parte Page Builder. A variável Content Heading é formatado como um cabeçalho H1 de acordo com a folha de estilos associada ao tema atual. Ele está posicionado logo acima da área de conteúdo ativa definida pelo Page Builder estágio.

Para obter o melhor controle sobre o posicionamento e o formato dos cabeçalhos de todos os níveis, é recomendável deixar a opção Content Heading ​campo vazio e use o Page Builder Cabeçalho tipo de conteúdo.

Cabeçalho de conteúdo e outros cabeçalhos

Visualização

Ao expandir a variável Content ​e houver conteúdo existente criado com Page Builder, ele exibe uma pré-visualização do conteúdo como ele seria exibido em uma página. Clique em Edit with Page Builder ​ou dentro da área de pré-visualização de conteúdo para abrir o Page Builder espaço de trabalho, onde você pode fazer as atualizações necessárias.

Visualização da descrição do produto

NOTE
Para os formulários de produto e categoria, essa pré-visualização de conteúdo é habilitada por padrão, mas pode ser desabilitada. Se o desempenho for afetado pelo carregamento da visualização, você poderá desativar a visualização na Configuração da Gestão de conteúdo configurações.

Estágio

Ao abrir a variável Page Builder espaço de trabalho na pré-visualização, o estágio é a área de trabalho principal onde você pode criar e formatar conteúdo e até fazer edições rápidas no conteúdo ativo. O estágio está inicialmente vazio, fornecendo a superfície de design onde você pode arrastar linhas, colunas e guias do painel esquerdo.

NOTE
A partir da versão 2.4.1, a edição de conteúdo agora é em tela cheia somente para todas as áreas controladas pelo Page Builder— Páginas CMS, páginas de produto e categoria, blocos e blocos dinâmicos. A edição em tela cheia coloca o foco no conteúdo e fornece uma visualização que melhor corresponde à experiência do usuário na loja.

Preparo com conteúdo de página

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.

Visores

A viewport é a área visível de uma página da web que um usuário vê. No modo de design de tela cheia, os botões da janela de visualização são exibidos acima da Page Builder para mostrar o conteúdo à medida que o usuário do site o vê na loja.

Botões da janela de visualização

Page Builder O também define pontos de interrupção para janelas de visualização. Os pontos de interrupção definem as larguras mínimas e máximas nas quais determinados estilos são aplicados. A variável Page Builder Os visores fornecem os seguintes pontos de interrupção de conteúdo:

  • Ponto de interrupção da área de trabalhomin-width: 1024px. Esse ponto de interrupção aplica estilos definidos para larguras de visor de 1024 pixels ou mais.
  • Pontos de interrupção móveismax-width: 768px, min-width: 640px. Esses pontos de interrupção aplicam estilos definidos para larguras de visor entre 768 e 640 pixels.

Page Builder Os visores fornecem dois recursos: visualizações de conteúdo e configurações de ponto de interrupção.

Visualizações de conteúdo

Por padrão, Page Builder O fornece duas visualizações de visor:

  • Desktop — Exibe a pré-visualização de conteúdo sem uma largura predefinida. Estilos definidos pela área de trabalho (usando a largura mínima do ponto de interrupção de 1024 pixels) ainda são aplicados à página. Mas a largura da janela de visualização da área de trabalho é definida pelas configurações para tipos de conteúdo de contêiner, como Linhas. A seleção da janela de visualização do desktop mostra como o conteúdo é estilizado na loja quando a largura da página do navegador é de 1024 pixels e mais.

    Visualização do visor do desktop com largura mínima de 1024 pixels {width="500" modal="regular"}

  • Dispositivo móvel — Exibe a visualização do conteúdo em uma largura predefinida de 768 pixels. Ao contrário do visor desktop, o visor móvel mostra o conteúdo da página com uma largura de 768 pixels, juntamente com os estilos definidos para as larguras de ponto de interrupção de 768 pixels (máximo) e 640 pixels (mínimo).

    Visualização do visor móvel com largura mínima de 768 pixels {width="500" modal="regular"}

Configurações de ponto de interrupção

Os botões visor também fornecem a opção para aplicar diferentes estilos de ponto de interrupção a tipos de conteúdo com base no visor selecionado. Por padrão, Page Builder fornece configurações de ponto de interrupção para o Minimum Height ​campos de Linhas, Colunas, Tabulações, Itens de tabulação, Banners, Sliders e Slides. Ao selecionar a janela de visualização móvel e abrir o editor para um desses tipos de conteúdo, você pode inserir valores de campo específicos para os pontos de interrupção da janela de visualização móvel. Os campos de tipo de conteúdo que permitem configurações específicas de ponto de interrupção exibem um ícone à direita do campo, semelhante ao exemplo a seguir para uma Linha:

Indicador de ícone para configuração de ponto de interrupção

Painel

A variável Page Builder O painel está localizado à esquerda do estágio e contém tipos de conteúdo que podem ser arrastados para o estágio. Um contêiner específico ao tipo de conteúdo é exibido com uma caixa de ferramentas de opções. Os tipos de conteúdo são organizados no painel da seguinte maneira:

Layout

A variável Layout ​seção do Page Builder é usado para adicionar linhas, colunas ou guias ao estágio. Ao arrastar um tipo de conteúdo do painel para o estágio, um contêiner é exibido com uma caixa de ferramentas de opções específicas ao tipo de conteúdo.

Por padrão, a variável Page Builder estágio está vazio. Ao arrastar tipos de conteúdo de layout do painel para o palco, você pode colocá-los acima, abaixo ou dentro de outros contêineres de layout na página. As linhas só podem ser adicionadas diretamente ao estágio.

Page Builder painel com tipos de conteúdo de layout e estágio

Tipo de conteúdo de layout
Descrição
Linha
Uma nova linha só pode ser arrastada do painel para o estágio e posicionada acima ou abaixo de outra linha, guia ou grupo de colunas. Também é possível usar a opção Duplicate para fazer uma cópia de uma linha existente.
Coluna
Uma coluna pode ser arrastada do painel para o palco ou para linhas e guias. O número máximo de colunas que podem ser adicionadas é determinado pelo número de divisões da grade especificado no configuração.
Guias
Uma única guia pode ser arrastada do painel para o palco ou para linhas e colunas. Guias adicionais podem ser adicionadas na caixa de ferramentas.

Elementos

Use o Elements ​seção do Page Builder painel para adicionar texto, cabeçalhos, botões, divisores e código HTML a qualquer contêiner de layout no Page Builder estágio. Ao arrastar um tipo de conteúdo do painel para uma linha ou coluna, ou para um conjunto de guias no palco, um container é exibido. Use a caixa de ferramentas de tipo de conteúdo para acessar as configurações específicas do tipo.

Page Builder painel com tipos de conteúdo Elemento

Tipo de conteúdo do elemento
Descrição
Texto
Adiciona um contêiner de texto e um editor ao estágio.
Cabeçalho
Adiciona um contêiner de cabeçalho ao estágio.
Botões
Adiciona um contêiner a um botão individual ou a um conjunto de botões ao estágio.
Divisor
Adiciona um contêiner de um divisor ao estágio.
Código HTML
Adiciona um contêiner para código HTML ao estágio.

Mídia

Use o Media ​seção do Page Builder painel para adicionar imagens, vídeo, banners, controles deslizantes e Google Maps para qualquer contêiner de layout na Page Builder estágio. Quando um tipo de conteúdo de mídia é arrastado do painel para o palco, um container é exibido com uma caixa de ferramentas de opções específicas ao tipo de conteúdo.

Page Builder painel com tipos de conteúdo de mídia

Tipo de conteúdo de mídia
Descrição
Imagem
Adiciona um contêiner de imagem ao estágio.
Vídeo
Adiciona um contêiner de vídeo ao estágio.
Banner
Adiciona um contêiner de banner ao estágio.
Controle deslizante
Adiciona um contêiner de controle deslizante ao estágio.
Mapa
Adiciona um Google Maps contêiner ao estágio.

Adicionar conteúdo

Use o Add Content ​seção do Page Builder painel para adicionar conteúdo existente à Page Builder estágio. Quando você arrasta um tipo de conteúdo de mídia do painel para o palco, um container é exibido. Use a caixa de ferramentas do tipo de conteúdo para acessar a_ Configurações _que são específicos ao tipo.

Page Builder painel com Adicionar tipos de conteúdo

Tipo de conteúdo
Descrição
Bloquear
Adiciona um bloco existente ao estágio.
Bloco dinâmico
Adiciona um bloco dinâmico existente ao estágio.
Produtos
Adiciona uma lista de produtos ao estágio.
Somente Adobe Commerce Recommendations do produto
Adiciona uma unidade de recomendação ao estágio.

Toolbox

Cada container de conteúdo no estágio tem uma caixa de ferramentas de opções. As opções variam de acordo com o tipo de conteúdo, mas normalmente incluem Mover, Configurações, Ocultar/Mostrar, Duplicar e Remover.

Mostrar a caixa de ferramentas

Passe o mouse sobre o container para exibir a caixa de ferramentas e escolher uma opção.

Opções da caixa de ferramentas de linha

Opções da caixa de ferramentas

Opção
Ícone
Descrição
Mover
Ícone Mover {width="25"}
Move o contêiner de conteúdo atual para outra posição no estágio.
Adicionar
Ícone Adicionar {width="25"}
Adiciona elementos secundários, como um botão, slide ou guia.
(rótulo)
Identifica o tipo de conteúdo do container.
Configurações
Ícone Configurações {width="25"}
Abre as propriedades do container de conteúdo no modo de edição.
Ocultar
Ícone Ocultar {width="25"}
Oculta o contêiner de conteúdo atual.
Mostrar
Mostrar ícone {width="25"}
Mostra o contêiner de conteúdo atual.
Duplicar
Ícone Duplicar {width="25"}
Faz uma cópia do container de conteúdo atual.
Remover
Remover {width="25"}
Exclui o contêiner de conteúdo atual 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.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d