Entendendo os componentes de layout

Na plataforma e-commerce da Uoou Solutions existe o recurso de criador de layouts, você pode criar diversos layouts com ele através dos componentes, mas muitas vezes podem surgir dúvidas de para que servem cada um desses componentes de layout, por isso acompanhe a baixo a explicação de para que serve cada um deles:

• Tipo do bloco: Galeria de Imagem

Descrição: Banner em formato fullscreen (100% da largura da tela), geralmente utilizado como banner principal da página inicial.

Onde Configurar? É possível configurar algumas opções do banner em Configurações Gerais > Página Inicial - Banner Principal

Exemplo:

Descrição: Banner em formato boxed (limitado ao tamanho da página), geralmente utilizado como banner principal da página inicial.

Onde Configurar? É possível configurar algumas opções do banner em Configurações Gerais > Página Inicial - Banner Principal

Exemplo:

Descrição: Banner em formato boxed (limitado ao tamanho da página), sem efeito algum de transição pois se trata de uma imagem apenas onde geralmente utilizado para fazer uma breve propaganda dos produtos que serão listados logo abaixo do mesmo, sendo apresentado na página inicial.

Exemplo: 

Descrição: 3 imagens pequenas com o mesmo tamanho que podem ser utilizadas para as mais diversas necessidades.

Exemplo:

Descrição: Contém 2 imagens e um título pode ser utilizado como chamada para categorias, produtos, coleções, etc.

Exemplo:

Descrição: 3 imagens grandes sendo que a primeira imagem é maior na largura.

Exemplo:

Descrição: 3 imagens grandes sendo que a segunda imagem é maior na largura.

Descrição: 3 imagens grandes sendo que a terceira imagem é maior na largura.

Exemplo:

Descrição: A barra de vantagens pode ser utilizada em um local de destaque na página inicial para mostrar diferenciais da sua loja virtual ou mesmo promoções disponíveis (ex.: frete grátis a partir de, trocamos todas as peças, descontos para a categoria blusas, etc.).

Exemplo:

Descrição: Slide show de formato boxed (limitado ao tamanho da página), Com efeito de transição pois se trata das marcas no qual seu cliente poderá filtrar seus produtos de acordo com a marca de desejo, funcionamento igual as categorias dos produtos.

Onde Cadastrar? Para cadastrar as marcas você tera de ir em categorização, no qual ao lado direito superior terá um botão com o nome de "criar taxonomia" você será levado a uma página onde poderá escolher o nome desejado para a taxonomia, o nome é de sua escolha, mas aconselhamos usar o nome "Marca", após isso poderá criar as taxons, clicando em cima da taxonomia criada "Marca" e do lado direito superior se encontra um botão com o nome de "criar táxon" onde devem ser cadastrados as marcas no qual você deseja que os produtos sejam filtrados.

Descrição: Exibi um carrossel limitado ao tamanho da página das marcas cadastradas, no qual seu cliente poderá filtrar seus produtos de acordo com a marca de desejo, funcionamento igual as categorias dos produtos.

Exemplo:

Descrição: 3 imagens pequenas com o mesmo tamanho que podem ser utilizadas para as mais diversas necessidades.

Exemplo:

Descrição: 4 imagens do mesmo tamanho com um pequeno espaço separando elas.

Descrição: Banner fixo que é visível em todos os aparelhos.

Exemplo:

Descrição: Banner fixo que apenas é visível no celular(mobile).

Exemplo: 

Descrição: Banner fixo que apenas é visível no desktop. (computador/notebook)

Descrição: Banner inteligente que se adequa automaticamente ao tamanho da imagem, permitindo inserir imagens de diferentes tamanhos.

Descrição: Banner inteligente que se adequa automaticamente ao tamanho da imagem, permitindo inserir imagens de diferentes tamanhos.

Descrição: 6 imagens do mesmo tamanho com um pequeno espaço separando elas.

Exemplo:

• Tipo do bloco: Componentes de Layout 

Descrição: Cria uma listagem customizável de produtos por tag ou táxon. É possível também estilizar e definir a quantidade de produtos a ser exibido.

Exemplo:

Descrição: A barra de vantagens pode ser utilizada em um local de destaque na página inicial para mostrar diferenciais da sua loja virtual ou mesmo promoções disponíveis (ex.: frete grátis a partir de, trocamos todas as peças, descontos para a categoria blusas, etc.).

Onde Cadastrar? Para cadastrar a barra de vantagens você pode ir no menu Conteúdo > Galerias de Imagem e clicar na galeria Página Inicial - Barra de Vantagens

Exemplo:

Descrição: Será exibido uma lista contendo os produtos da táxon selecionada na criação desse bloco. Você pode definir vários estilos e descrições diferente para cada bloco.

Exemplo:

Descrição: Caso os padrões de galerias e recursos de imagem não sejam suficientes para as suas necessidades, é possível utilizar um editor HTML (ele é parecido com o Word) para personalizar a página inicial da maneira que desejar.

Onde Cadastrar? Para cadastrar o conteúdo customizado basta ir até o final desta página e ver o local onde diz "Conteúdo Customizado (HTML)".

Descrição: Insira código HTML em um editor personalizado onde é colocado as váriaveis padrões do sistema.

Descrição: Lista de conteúdos do mapa com filtro e exibição das informações.

Exemplo:

Descrição: Descrição com botões que ocupam a largura inteira da tela.

Exemplo:

Descrição: 2 links com ícones, títulos e imagem de fundo que pode ser alterada.

Exemplo:

Descrição: Listagem com as imagens mais recentes do seu Instagram.

Exemplo:

Descrição: Componente que contém uma barra com o fundo customizado. Esse componente possui um texto informativo e os campos para se cadastrar na newsletter.

Exemplo:

Descrição: Bloco com título customizável. É possível escolher cor da fonte, cor do fundo, cor tipo da borda entre outros.

• Tipo do bloco: Outros

Descrição: Os produtos em destaque são todos os produtos que foram marcados como "Em Destaque" no cadastro do produto.

Onde Cadastrar? Para cadastrar produtos em destaque vá no Cadastro de Produtos e coloque os produtos que deseja que apareçam em destaque como: "Em Destaque?" igual a "Sim"

Onde Configurar? É possível definir diversas configurações da forma como os produtos serão exibidos, para isso você pode ir no menu Configurações Gerais > Página Inicial - Regras.

Exemplo:

Descrição: A linha separadora é uma linha que pode ajudar a separar o conteúdo entre um bloco e outro na página inicial.

Não há configurações necessárias para a linha separadora.

Exemplo:

O espaçamento é um espaço em branco que pode ajudar a separar o conteúdo entre um bloco e outro na página inicial.

Não há configurações necessárias para o espaçamento.