A página inicial da sua loja é a principal vitrine para seus clientes. Ela é construída a partir de vários elementos da plataforma Yep!, como widgets, banners, sliders e blocos estáticos.
Este guia irá detalhar cada um desses componentes para que você tenha total autonomia para modificar a home da sua loja como preferir.
Widgets
O que são?
Widgets são ferramentas poderosas para adicionar conteúdo dinâmico ou funcionalidades específicas à sua loja, como uma lista de produtos, um temporizador de contagem regressiva ou um formulário. A grande vantagem é que você não precisa criar o código do zero; basta escolher um tipo de widget e definir onde e como ele será exibido.
Na home, usualmente os widgets estarão localizados em CMS>>Widgets. Recomendamos seguir esse padrão para uma melhor organização:
Configurando um widget para a home
Cada widget possui seu próprio tipo e particularidade. De uma forma geral, todos os widgets prontos para serem utilizados têm o prefixo Yep!
O pacote de template sempre deverá ser yepcomm/default
Após selecionar o tipo e pacote de template, o próximo passo é selecionar o local de exibição:
Opções do Widget
Aqui é onde você configurará o widget de fato, preenchendo as informações necessárias para a exibição. Essa etapa irá depender do tipo do widget, alguns necessitando de mais preenchimento ou menos.
Segue exemplo abaixo de um widget de listagem de produtos:
Nele, é possível configurar a categoria cujos produtos serão exibidos, o tipo de apresentação (carrousel ou tabela), o título exibido acima da listagem, se as setas (arrows) serão vísiveis e sua posição e a quantidade de colunas e produtos.
Banners/Sliders
Banners são as imagens de destaque da sua loja. Eles ficam organizados dentro de "sliders", que funcionam como caixas ou contêineres que definem a posição e o comportamento desses banners.
Sliders
Pense no slider como uma caixa onde serão inseridos os banners, ele definirá o espaço e posição dos banners.
Criando e configurando um slider
Para criar e configurar seu slider, acesse CMS>>Banner Slider Responsivo>>Gerenciar Sliders:
Informação Geral
- Título -> nome exibido na plataforma para identificação dos sliders (não exibido para os clientes)
- Posição -> se será exibido na parte inferior ou superior da página
- Ordem de Exibição -> caso hajam dois ou mais sliders na mesma página, essa ordem definirá a posição
- Visão do Banner -> se será exibido apenas para desktop, mobile ou ambos
- Status -> habilitar ou não o slider
Efeito do Slider
- Iniciar animação automaticamente -> se o slider irá passar os banners (caso tenha mais de um) automaticamente
- Loop slider -> se ele será um looping, ou seja, ao chegar no último banner voltará ao primeiro novamente
É possível definir a duração da animação tal qual a ordem dos banners também que pode ser aleatória ou não.
Estilo do slider
Aqui poderemos estilizar um pouco o slider, especialmente as setinhas e bolinhas de navegação.
Exibindo na home
Para exibir o slider na home, basta acessar a aba Exibir nas Páginas e selecionar a sua home:
Banners
Chegou a hora de configuramos as imagens que irão dentro do nosso slider, ou seja, nossos banners.
Criando e configurando meu banner
Para isso acesse CMS>>Banner Slider Responsivo>>Gerenciar Banners:
Aqui você pode selecionar o slider onde o banner será inserido (no nosso caso o da home), o título (para identificação na plataforma) e as imagens.
É possível configurar separadamente a imagem para desktop e mobile, porém se colocar somente o de desktop a imagem ficará responsiva e visível em telas menores também.
É recomendado que o formato da imagem seja webp e que o tamanho da imagem não seja extremamente grande para garantir uma boa otimização.
Por questões de acessibilidade, é recomendado que seja configurado o ALT text, que é um texto alternativo para a imagem utilizada por leitores de tela (para usuários cegos, por exemplo).
As abas URL e URL de Destino deverão ser configuradas caso deseje que o banner seja clicável.
- Descrição -> configura-se um texto para sobrepor o banner
- Usar Intervalo de Datas -> caso queira que o banner seja exibido em um período específico.
- Ordem de Exibição -> caso tenha no slider dois ou mais banners.
- Status -> habilitar ou não esse banner.
Blocos Estáticos
Blocos estáticos são ideais para conteúdos que mudam com pouca frequência, como a faixa informativa no topo do site. Eles funcionam como uma caixa onde pode ser inserido conteúdo, como texto, widgets, imagens, etc.
Criando e configurando meu bloco estático
Acesse CMS>>Blocos Estáticos:
O exemplo abaixo é de uma faixa informativa, muito utilizada no topo da página:
Menu e Rodapé
O menu principal e o rodapé são gerenciados de forma centralizada, facilitando a organização dos links da sua loja.
Para modificar nosso menu e rodapé, utilizaremos um único módulo. Acesse CMS>>Menu de Navegação Pro:
Grupos de Menu
Pense nos grupos como cada bloco do seu menu/rodapé. O menu principal constitui em um único grupo enquanto cada coluna do nosso rodapé tem seu próprio grupo:
Dentro dos grupos, inserimos os itens que falaremos a seguir.
Itens de Menu
Cada "filho" dentro dos grupos é um item de menu. Um item pode apontar para uma página CMS, categoria, produto, uma URL customizada como whatsapp, email, entre outros.
É possível atribuir um título personalizado para SEO, alterar o layout de acordo com a quantidade de colunas (caso o seu item tenha um sub-item dentro, é imprescindível que o layout se adeque a isso. Exemplo: se eu tenho 1 sub-item eu preciso de um layout de 1 coluna no mínimo)
Aplicando alterações no menu
O menu possui um cache próprio para garantir que ele seja carregado de maneira rápida na sua loja, garantindo uma melhor experiência para o usuário.
Após realizar qualquer alteração no menu, lembre-se de acessar CMS>>Menu de Navegação Pro>>Configuração do Menu de Navegação Pro>>Super Cache e clique em Publicar.
