Layout adaptativo

Quando você configura blocos da página principal, você pode carregar imagens em diferentes resoluções para exibição em um computador e em um dispositivo móvel. Isso permite que você implemente a adaptabilidade completa para exibir a página em qualquer dispositivo.

Um exemplo de exibição da página-mestre em um computador:

Um exemplo de exibição da página principal em um tablet:

Um exemplo de exibição da página inicial em um telefone:

Conectando o Master Page Designer

Você pode usar a visão padrão da página principal ou personalizá-la individualmente através do designer. Você conecta o designer de páginas principais através do painel de administração. Você precisa ir para a seção Configurações do Portalda plataforma.Image Removed

Image Added

Na seção Informações sobre o Portal, instale o Habilitar o construtor de páginas principais. Em seguida, você precisa salvar as alterações para que a configuração se aplique.

Em seguida, você pode usar as configurações principais da página do projeto para alterar sua aparência.Image Removed

Image Added

Configurar cabeçalho do site

Header está localizado na parte superior da página e contém por padrão:

• sequência de pesquisa catálogo com pesquisa de propriedade avançada
• lista de comparação
• lista de produtos favoritos
• botão para ir para o carrinho  

Além disso, um bloco de informações, uma taxa de câmbio, um switcher para comutação de idiomas, um número de telefone de contato e um botão para inserir uma conta pessoal também podem ser exibidos em cima.

Todas as outras seções são configuradas manualmente através do painel de administração. Para configurar o cabeçalho da página, vá para a seção Header.Image Removed

Image Added

A página que abre exibe seções de cabeçalho que foram configuradas anteriormente.

Posição na linha de produtos - esta coluna com a ajuda da funcionalidade Arrastar e soltar permite alterar a ordem da saída das seções na página. Basta puxar o retângulo cinza na linha desejada e transferi-lo para o lugar que ele deve ocupar.

ID - identificador único da seção.

Nome - o nome da seção, que será exibido na página principal.

Ícone - display visual, que também será exibido na página principal.

URL - o endereço do link que será clicado quando você clicar nesta seção na página principal.

Excluindo partições de cabeçalho

Para excluir algumas das seções de cabeçalho disponíveis, você precisa destacá-las com caixas de seleção na primeira coluna e, em seguida, na parte inferior esquerda na lista de retirada, selecione  Remover Header selecionados.

Adicionar seções de cabeçalho

Para adicionar uma nova seção ao cabeçalho, clique no botão Adicionar Header no canto superior direito da página.

Na página que abre, você precisa preencher os campos para adicionar uma nova seção.

Nome - este campo especifica o nome que será exibido na página principal. Se o multilíngue estiver ativado na plataforma, então você pode especificar o nome em diferentes idiomas.

URL - o endereço do link que será clicado quando você clicar nesta seção na página principal. O endereço URL pode levar tanto a páginas internas da plataforma quanto a sites externos. 

Ícone - display visual, que também será exibido na página principal. Você pode selecionar um ícone em um catálogo disponível que inclui várias centenas de imagens. Por conveniência, uma barra de pesquisa é exibida, o que permite encontrar o ícone pelo nome.

Se não houver um necessário na lista de ícones, então você mesmo pode baixá-lo. Para fazer isso, selecione Carregar seu próprio ícone e, em seguida, selecione o arquivo SVG no seu computador e adicione-o à plataforma. O tamanho recomendado para o ícone é 16x16 px.

Depois de todos os parâmetros necessários terem sido preenchidos, você precisa salvar o Header e ele aparecerá na lista.

Personalização de blocos de página mestre

Os blocos da página principal são exibidos abaixo do cabeçalho. A configuração é realizada através do painel de administração na seção Blocos construtores da página.Image Removed

Image Added

A página que abre exibe os blocos da página-mestre que você criou anteriormente.

Posição na linha de produtos - esta coluna com a ajuda da funcionalidade arrastar e soltar permite alterar a ordem de saída dos blocos na página. Basta puxar o retângulo cinza na linha desejada e transferi-lo para o lugar que ele deve ocupar.

ID - identificador exclusivo do bloco de construção de páginas.

Nome - o nome do bloco, que permitirá ao administrador da plataforma navegar melhor. Alguns dos títulos serão exibidos na página principal.

Tipo de bloco - esta coluna exibe o tipo deste bloco. Mais informações sobre tipos de blocos serão descritas abaixo.

Excluir blocos construtores da página

Para remover qualquer um dos blocos de construtor de páginas disponíveis, você precisa destacá-los com caixas de seleção na primeira coluna e, em seguida, na parte inferior esquerda na lista de drop-down, selecione Remover Blocos de construtores de página selecionados.

Adicionando blocos construtores da página

Para adicionar uma nova seção ao cabeçalho, clique no botão Adicionar Bloco de construtor de página no canto superior direito da página.

Na página que abre, você precisa preencher os campos para adicionar um novo bloco de designer de páginas.

Slider

Vamos ver a ordem de configurar o slider.

Nome - o nome do bloco, que permitirá ao administrador da plataforma navegar melhor. Não aparecerá na página principal. Se o multilíngue estiver ativado na plataforma, então você pode especificar o nome em diferentes idiomas nos campos apropriados.

Preview - neste campo você pode ver um exemplo de exibição deste bloco.

No bloco Slider, você pode ligar a caixa de seleção do Troca automática para que a imagem mude automaticamente. Se a configuração estiver desativada, a comutação de imagens estará disponível apenas manualmente.

Tempo de troca - este campo indica o tempo em segundos após o qual as imagens serão alteradas.

No bloco Banners na página principal, você pode enviar imagens para banners. Para fazer isso, clique em "+".

No Banner do slider para versão desktop e Banner do slider para versão mobile, você pode ver o formato das respectivas versões e selecionar a área de exibição.

Na coluna Arquivo para obter, você pode selecionar a versão para a qual a imagem é carregada. Você pode carregar imagens individuais em diferentes resoluções para as versões desktop e mobile do display da página.

A coluna Endereço URL especifica o link que será clicado quando você clicar no banner. O link pode levar a seções da plataforma ou a sites de terceiros.

Na coluna Ordem de exibição, você pode especificar a ordem em que as imagens aparecem no controle deslizante.

Desta forma, você pode carregar todas as imagens que deseja exibir no controle deslizante. Ao mesmo tempo, você pode carregar imagens de diferentes resoluções para as versões móvel e desktop. Para cada imagem, você pode selecionar a área de exibição que aparecerá na página principal.

3 banners seguidos - um tamanho

Vamos considerar a ordem de configurar banners de bloco 3 banners seguidos - um tamanho.

Nome - o nome do bloco, que será exibido na página principal acima do bloco com banners. Se o multilíngue estiver ativado na plataforma, então você pode especificar o nome em diferentes idiomas nos campos apropriados.

Localização do cabeçalho - neste campo há 3 valores: No lado esquerda (na página do site), No meio (na página do site), No lado direita (na página do site). Dependendo do valor selecionado, o título especificado no campo Nome será exibido à esquerda, no meio ou direito acima dos banners.

Preview - neste campo você pode ver um exemplo de exibição deste bloco.

No bloco Banners na página principal, você pode carregar uma imagem de banners. Para fazer isso, clique em "+". Em seguida, as imagens são carregadas e o ajuste é realizado da mesma forma descrito para o slider.

Bloco de informações

Vamos considerar o procedimento para configurar o bloco de informações.

Nome - o nome do bloco, que será exibido na página principal acima do bloco com o texto. Se o multilíngue estiver ativado na plataforma, então você pode especificar o nome em diferentes idiomas nos campos apropriados.

Localização do cabeçalho - neste campo há 3 valores: No lado esquerda (na página do site), No meio (na página do site), No lado direita (na página do site). Dependendo do valor selecionado, o título especificado no campo Nome será exibido à esquerda, no meio ou direito acima do texto. Neste bloco, a configuração de localização do texto é uma prioridade maior, que será descrita mais tarde.

Preview - neste campo você pode ver um exemplo de exibição deste bloco.

Conteúdo no bloco - este campo indica o texto que deve ser exibido neste bloco na página principal.

Localização do botão - há 2 valores neste campo: No lado esquerda (na página do site) e No lado direita (na página do site). Dependendo do valor selecionado, o texto será exibido à esquerda ou à direita da imagem.

Nome do botão - aqui está o texto que será indicado no botão exibido abaixo do texto.

Tipo de botão - há 3 valores neste campo:

Line button - botão com contorno e sem preenchimento de cor.

Solid button - um botão com um preenchimento de cor.

Text (link) - um link sem botão.

Dependendo do valor selecionado, o formato de exibição do botão será diferente.

Endereço URL - este campo especifica o link que será clicado quando você clicar no botão. O link pode levar a seções da plataforma ou a sites de terceiros.

Imagem - neste campo, a imagem que acompanhará o texto é carregada. Depois de salvar as alterações, nos dois últimos campos você pode selecionar a área de exibição de imagens para as versões desktop e mobile.

Bloco de Notícias

Vamos considerar o procedimento para criar um bloco de notícias.

Nome - o nome do bloco, que será exibido na página principal acima do bloco com novidades. Se o multilíngue estiver ativado na plataforma, então você pode especificar o nome em diferentes idiomas nos campos apropriados.

Localização do cabeçalho - neste campo há 3 valores: No lado esquerda (na página do site), No meio (na página do site), No lado direita (na página do site). Dependendo do valor escolhido, o título especificado no campo Nome aparecerá à esquerda, meio ou direito acima da lista de notícias.

Preview - neste campo você pode ver um exemplo de exibição deste bloco.

Nome do botão - aqui você pode especificar o texto que será indicado no botão exibido no bloco de notícias.

Endereço URL - este campo indica o link que será usado para navegar quando você clicar no botão sob o bloco de notícias. O link pode levar a seções da plataforma ou a sites de terceiros.

No último campo, você pode selecionar as seguintes opções:

Mostre últimas (4) notícias - esta opção exibirá 4 notícias baixadas pelas últimas.

Mostrar notícias selecionadas - com esta opção, você pode selecionar as notícias que serão exibidas no bloco na página principal.

Bloco de produtos

Vamos considerar o procedimento para montar um bloco de produtos.

Nome - o nome do bloco, que será exibido na página principal acima do bloco com produtos. Se o multilíngue estiver ativado na plataforma, então você pode especificar o nome em diferentes idiomas nos campos apropriados.

Localização do cabeçalho - neste campo há 3 valores: No lado esquerda (na página do site), No meio (na página do site), No lado direita (na página do site). Dependendo do valor escolhido, o título especificado no campo Nome aparecerá à esquerda, meio ou direito acima dos produtos.

Preview - neste campo você pode ver um exemplo de exibição deste bloco.

Tipo de exibição do produto - há 3 valores neste campo: Carrossel, Estática, Promoção Estática. Considere as características de cada um dos tipos.

Carrossel é um tipo de display no qual os produtos são exibidos em 5 produtos na página e botões são exibidos à direita para virar o carrossel com mercadorias. Você pode rolar através deles tanto para frente quanto para trás.

Estática é um tipo de display no qual os produtos selecionados são exibidos estaticamente na página. Com esta opção, todos os produtos selecionados para exibição serão exibidos.

Promoção Estática - tipo de display, no qual 7 produtos são exibidos em um bloco. O cartão de um dos produtos é esticado verticalmente e tem um tamanho maior que o outro 6. O resto das mercadorias são de tamanho igual. Esse tipo de display é relevante para produtos para os quais os descontos são aplicados na plataforma.

Vamos voltar para o resto das configurações.

Ordenação - neste campo você pode selecionar a opção de classificar mercadorias no bloco. Há também 3 significados:

Aumento de preços - as mercadorias serão exibidas por ordem de aumento de preços.

Preço descendente - as mercadorias serão exibidas em ordem descendente de preços.

Aleatoriamente - as mercadorias serão exibidas em uma ordem aleatória, sem condições específicas.

Dependendo do valor selecionado, a ordem de saída das mercadorias mudará.

Em seguida, uma lista de produtos é selecionada, que será exibida.

Mostrar apenas produtos selecionados - quando você selecionar esse valor na seleção manual de mercadorias, você precisa especificar itens específicos que devem ser exibidos neste bloco.

Mostrar apenas produtos selecionados (categorias, subcategorias) - ao selecionar esse valor no campo Categoria, você deve selecionar categorias específicas de produtos que serão exibidas neste bloco.

Exibir produtos na faixa de preço de e Exibir produtos na faixa de preço até - nestes campos você pode definir condições adicionais para a faixa de preço para a produção de mercadorias. Por exemplo, se você optar por exibir uma categoria inteira, você pode especificar uma faixa de preço específica. Neste caso, nem todos os produtos da categoria serão exibidos, mas apenas aqueles que atendam às condições.

Número de itens para exibir - este campo especifica o número de produtos que serão exibidos no bloco. Para os tipos de Carrossel e de exibição Estática, um máximo de 50 produtos podem ser exibidos. Para as tipo de Promoção Estática, um máximo de 7 produtos podem ser exibidos. 

Existem vários recursos ao personalizar o Tipo de Exibição da Promoção Estática. O campo categoria exibe apenas as Categoria para as quais há descontos na plataforma. Na seleção manual de produtos, apenas os produtos para os quais os descontos são válidos também estarão disponíveis para seleção.

Cartão principal do produto - neste campo você pode selecionar o produto que será exibido em grande parte em primeiro lugar no bloco.

2 banners na linha

O procedimento para configurar banners de bloco 2 em sequência é semelhante, pois para 3 banners seguidos, vamos considerá-lo.

Nome - o nome do bloco, que será exibido na página principal acima do bloco com banners. Se o multilíngue estiver ativado na plataforma, então você pode especificar o nome em diferentes idiomas nos campos apropriados.

Localização do cabeçalho - neste campo há 3 valores: No lado esquerda (na página do site), No meio (na página do site), No lado direita (na página do site). Dependendo do valor selecionado, o título especificado no campo Nome será exibido à esquerda, no meio ou direito acima dos banners.

Preview - neste campo você pode ver um exemplo de exibição deste bloco.

No bloco Banners na página principal, você pode carregar uma imagem de banners. Para fazer isso, clique em "+". Em seguida, as imagens são carregadas e o ajuste é realizado da mesma forma descrito para o slider.

Texto

Vamos considerar o procedimento para configurar um bloco de texto.

Nome - o nome do bloco, que será exibido na página principal acima do bloco com o texto. Se o multilíngue estiver ativado na plataforma, então você pode especificar o nome em diferentes idiomas nos campos apropriados.

Preview - neste campo você pode ver um exemplo de exibição deste bloco.

Conteúdo no bloco - este campo indica o texto que deve ser exibido na página principal. Assim como no campo Nome, você pode especificar conteúdo em diferentes idiomas para plataformas nas quais multilíngues estão habilitados.

1 banner na linha

A ordem de instalação do bloco 1 banner na linha é a mesma de outros banners, vamos considerar isso.

Nome - o nome do bloco, que será exibido na página principal acima do bloco com o banner. Se o multilíngue estiver ativado na plataforma, então você pode especificar o nome em diferentes idiomas nos campos apropriados.

Localização do cabeçalho - neste campo há 3 valores: No lado esquerda (na página do site), No meio (na página do site), No lado direita (na página do site). Dependendo do valor selecionado, o título especificado no campo Nome será exibido à esquerda, no meio ou direito acima do banner.

Preview - neste campo você pode ver um exemplo de exibição deste bloco.

No bloco Banners na página principal, você pode carregar uma imagem de banner. Para fazer isso, clique em "+". Em seguida, as imagens são carregadas e o ajuste é realizado da mesma forma descrito para o slider.

3 banners na linha - tamanho diferente

O procedimento para a instalação de banners de bloco 3 em sequência é semelhante, como para outros banners, vamos considerá-lo.

Nome - o nome do bloco, que será exibido na página principal acima do bloco com banners. Se o multilíngue estiver ativado na plataforma, então você pode especificar o nome em diferentes idiomas nos campos apropriados.

Localização do cabeçalho - neste campo há 3 valores: No lado esquerda (na página do site), No meio (na página do site), No lado direita (na página do site). Dependendo do valor selecionado, o título especificado no campo Nome será exibido à esquerda, no meio ou direito acima dos banners.

Preview - neste campo você pode ver um exemplo de exibição deste bloco.

No bloco Banners na página principal, você pode carregar uma imagem de banners. Para fazer isso, clique em "+". Em seguida, as imagens são carregadas e o ajuste é realizado da mesma forma descrito para o slider. Além disso, duas colunas também são exibidas para indicar a área de exibição do primeiro banner, que é esticada verticalmente, nas versões desktop e mobile. O primeiro banner é selecionado com base na ordem de saída especificada.