Workspace Page Builder

Quando Page Builder está habilitado, a seção Content ​e o processo de criação de conteúdo são modificados para aproveitar as ferramentas Page Builder avançadas para páginas CMS, produto e categoria, blocos e blocos dinâmicos. Esta seção inclui um campo_ Cabeçalho do Conteúdo _, uma visualização do conteúdo e acesso fácil ao espaço de trabalho Page Builder em tela cheia.

{width="700" modal="regular"}

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.

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

{width="700" modal="regular"}

Visualização

Quando você expande a seção Content ​e há conteúdo existente criado com Page Builder, ela exibe uma visualização do conteúdo como ele apareceria em uma página. Clique em Edit with Page Builder ​ou dentro da área de visualização de conteúdo para abrir o espaço de trabalho Page Builder, onde você pode fazer as atualizações necessárias.

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

Estágio

Ao abrir o espaço de trabalho Page Builder a partir da 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.

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

Visores

Um 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 de visor são exibidos acima do estágio Page Builder para mostrar o conteúdo conforme o usuário do site o vê na loja.

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

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

Page Builder 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 fornece duas visualizações de visor:

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, o Page Builder fornece configurações de ponto de interrupção para os campos Minimum Height ​de Linhas, Colunas, Guias, Itens de Guia, Banners, Controles Deslizantes 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:

{width="400"}

Painel

O painel Page Builder 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 seção Layout ​do painel Page Builder é usada 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, o estágio Page Builder 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.

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

Elementos

Use a seção Elements ​do painel Page Builder 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.

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

Mídia

Use a seção Media ​do painel Page Builder para adicionar imagens, vídeo, banners, controles deslizantes e Google Maps a qualquer contêiner de layout no 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.

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

Adicionar conteúdo

Use a seção Add Content ​do painel Page Builder para adicionar conteúdo existente ao 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 de tipo de conteúdo para acessar as_ Configurações _específicas do tipo.

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

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.

Product Recommendations

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.

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

Opções da caixa de ferramentas

Opção

Ícone

Descrição

Mover

{width="25"}

Move o contêiner de conteúdo atual para outra posição no estágio.

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

{width="25"}

Abre as propriedades do container de conteúdo no modo de edição.

Ocultar

{width="25"}

Oculta o contêiner de conteúdo atual.

Mostrar

{width="25"}

Mostra o contêiner de conteúdo atual.

Duplicar

{width="25"}

Faz uma cópia do container de conteúdo atual.

Remover

{width="25"}

Exclui o contêiner de conteúdo atual do estágio.