Layouts de página
O layout de cada página na loja consiste em seções distintas, ou contêineres, que definem as áreas de cabeçalho, rodapé e conteúdo da página. Dependendo do layout, cada página pode ter uma, duas, três colunas ou mais. Pense no layout como a planta baixa da página e atribua um layout específico a ser usado como padrão para as páginas CMS, produto e categoria.
Na página, os blocos de conteúdo flutuam para preencher o espaço disponível, de acordo com a seção do layout de página onde são atribuídos para serem exibidos. Observe que, se você alterar o layout de três colunas para duas colunas, o conteúdo da área principal se expande para preencher o espaço disponível. Observe também que todos os blocos associados à barra lateral não usada parecem desaparecer. No entanto, se você restaurar o layout de três colunas, os blocos reaparecerão. Essa abordagem fluida, ou layout líquido, possibilita alterar o layout da página sem precisar reprocessar o conteúdo. Se você está acostumado a trabalhar com páginas de HTML individuais, essa abordagem modular de bloco de construção requer uma maneira diferente de pensar.
Configurar layouts padrão
-
Na barra lateral Admin, vá para Stores > Settings>Configuration.
-
No painel esquerdo, em General, escolha Web.
-
Expandir
-
Escolha o Default Product Layout que deseja usar nas páginas de produto.
Essa configuração determina o layout usado por padrão para páginas de produtos.
No layout updates- Atualizações de layout não disponíveis para páginas de produtos.Empty- Usa um layout em branco para páginas de produtos.1 column- Usa um layout de coluna única para páginas de produtos.2 columns with left bar- Usa um layout de duas colunas com a barra lateral à esquerda para páginas de produtos.2 columns with right bar- Usa um layout de duas colunas com a barra lateral à direita para páginas de produtos.3 columns- Usa um layout de três colunas com barras laterais à esquerda e à direita para páginas de produtos.
Quando o Page Builder está habilitado, há opções adicionais de largura total disponíveis. Em seguida, você pode usar as ferramentas de conteúdo do Page Builder para criar o layout das páginas de produtos.
Page -- Full Width- Usa o layout Página - Largura Total para páginas de produto.Category -- Full Width- Usa o layout Categoria - Largura Total para páginas de produto.Product -- Full Width- (Recomendado) Usa o layout Produto - Largura Total para páginas de produto.
-
Escolha a Default Category Layout que deseja usar para páginas de categoria.
Essa configuração determina o layout usado por padrão para páginas de categoria.
No layout updates- Atualizações de layout não disponíveis para páginas de categoria.Empty- Usa um layout em branco para páginas de categoria.1 column- Usa um layout de coluna única para páginas de categoria.2 columns with left bar- Usa um layout de duas colunas com a barra lateral à esquerda para páginas de categoria.2 columns with right bar- Usa um layout de duas colunas com a barra lateral à direita para páginas de categoria.3 columns- Usa um layout de três colunas com barras laterais à esquerda e à direita para páginas de categoria.
Quando o Page Builder está habilitado, há opções adicionais de largura total disponíveis. Em seguida, você pode usar as ferramentas de conteúdo do Page Builder para criar o layout das páginas de categoria.
Page -- Full Width- Usa o layout Página - Largura Total para páginas de categoria.Category -- Full Width- (Recomendado) Usa o layout Categoria - Largura Total para páginas de categoria.Product -- Full Width- Usa o layout Produto - Largura Total para páginas de categoria.
-
Escolha o Default Page Layout que deseja usar para páginas CMS.
Essa configuração determina o layout usado por padrão para páginas CMS.
No layout updates- Atualizações de layout não disponíveis para páginas CMS.Empty- Usa um layout em branco para páginas CMS.1 column- Usa um layout de coluna única para páginas CMS.2 columns with left bar- Usa um layout de duas colunas com a barra lateral à esquerda para páginas CMS.2 columns with right bar- Usa um layout de duas colunas com a barra lateral à direita para páginas CMS.3 columns- Usa um layout de três colunas com barras laterais à esquerda e à direita para páginas CMS.
Quando o Page Builder está habilitado, há opções adicionais de largura total disponíveis. Em seguida, você pode usar as ferramentas de conteúdo do Page Builder para criar o layout das páginas do CMS.
Page -- Full Width- (Recomendado) Usa o layout Página - Largura Total para páginas CMS.Category - Full Width- Usa o layout Categoria - Largura Total para páginas CMS.Product - Full Width- Usa o layout Produto - Largura Total para páginas CMS.
-
Quando terminar, clique em Save Config.
Layouts de página padrão
Uma coluna
O layout 1 Column pode ser usado para criar uma página inicial dramática com uma imagem grande ou ponto focal. Também é uma boa opção para uma página de aterrissagem ou qualquer outra página que tenha uma combinação de texto, imagens e vídeo.
Duas colunas com barra esquerda
O layout 2 Columns with Left Bar é usado com frequência para páginas com navegação à esquerda, como páginas de catálogo ou de resultados de pesquisa com navegação em camadas. Também é uma excelente opção para páginas iniciais que precisam de navegação adicional ou blocos de conteúdo de suporte à esquerda.
Duas colunas com barra direita
Com um layout 2 Columns with Right Bar, a área de conteúdo principal é grande o suficiente para proporcionar uma imagem atraente ou banner. Esse layout também é usado com frequência para páginas de produto com blocos de conteúdo de suporte à direita.
Três colunas
O layout 3 Column tem uma coluna central larga o suficiente para o texto principal da página, com espaço em cada lado para navegação adicional e blocos de conteúdo de suporte.
Empty
O layout Empty pode ser usado para definir layouts de página personalizados.