Se você está buscando formas de melhorar a experiência do usuário em seu site WordPress, o Layout Switcher do JetEngine é uma ferramenta poderosa que permite alternar entre diferentes layouts de listagens. Neste guia, vamos explorar como ativar e configurar esse widget, proporcionando aos visitantes uma interface mais dinâmica e personalizável. Vamos juntos nessa jornada de aprendizado!
O que é o Layout Switcher?
O Layout Switcher é um componente que permite alternar entre diferentes layouts de listagens, como grid e lista. Você pode criar uma loja virtual ou um catálogo que exiba produtos em colunas. Por exemplo, imagine ter um layout com quatro colunas e, ao clicar em um botão, mudar para um layout de três colunas ou uma lista vertical. Essa funcionalidade não apenas melhora a estética do seu site, mas também oferece uma experiência mais rica para o usuário.
Configurando o Layout Switcher
Para começar a usar o Layout Switcher, siga os passos abaixo:
- Ativar o Layout Switcher: Acesse o painel do JetEngine e habilite a opção de layout. Isso tornará o componente disponível para construção de páginas.
- Criar os layouts: Você precisará criar pelo menos dois layouts de listagem. Por exemplo, um layout vertical que inclua título, foto e botão, e outro layout horizontal que apresente a foto ao lado do título e do botão.
Esses layouts podem ser personalizados de acordo com suas necessidades. Você pode criar quantos layouts quiser, desde que tenha pelo menos dois.
Passo a Passo para Criar e Configurar os Listings
Depois de ativar o Layout Switcher e criar seus layouts, é hora de integrá-los em uma página. Aqui está um passo a passo:
- Criar uma nova página: Vá para o Elementor e crie uma nova página. Defina o modelo como “Element Canvas” para evitar menus e rodapés indesejados.
- Adicionar o Layout Switcher: Arraste o componente Layout Switcher para a página. Não se preocupe em configurá-lo ainda; vamos fazer isso em seguida.
- Adicionar a Listing Grid: Logo abaixo do Layout Switcher, insira uma Listing Grid. Escolha qual layout inicial você gostaria que fosse exibido, como o layout de quatro colunas.
- Configurar CSS ID: No painel avançado da Listing Grid, adicione um CSS ID, como “result”, que será utilizado para referenciar este layout em outros componentes.
Com esses passos, você já terá a base para trabalhar com o Layout Switcher.
Configurando os Botões do Layout Switcher
Agora que você tem os layouts prontos, é hora de configurar os botões do Layout Switcher. Cada botão corresponderá a um layout diferente, e você pode personalizá-los da seguinte maneira:
- Configurar o botão Grid: No Layout Switcher, configure o primeiro botão para o layout de grid. Defina o slug e o label de acordo com sua preferência, como “grade”. Marque a opção “is layout” para garantir que ele funcione corretamente.
- Configurar o botão Lista: O segundo botão deve ser configurado para o layout de lista. Desmarque a opção “is layout” e selecione o layout que deseja carregar.
- Adicionar mais botões: Você pode adicionar quantos botões quiser. Por exemplo, um terceiro botão para um layout de três colunas. Lembre-se de definir o slug e o label corretamente.
Essa flexibilidade permite que você crie uma interface que atenda às necessidades dos seus usuários, tornando a navegação mais intuitiva.
Estilizando o Layout Switcher
Além de configurar os botões, você também pode estilizar o Layout Switcher para que ele se encaixe no design do seu site. Aqui estão algumas dicas:
- Alinhamento: Você pode alinhar os botões à esquerda, ao centro ou à direita.
- Fonte e Ícones: Customize a fonte dos botões e adicione ícones para torná-los mais atraentes.
- Cor e Efeitos: Defina as cores de fundo e do texto para os estados normal e ativo. Isso ajuda a criar uma identidade visual consistente.
Estilizar o Layout Switcher não só melhora a aparência, mas também a usabilidade do seu site.
Testando a Funcionalidade
Após configurar e estilizar o Layout Switcher, é hora de testar sua funcionalidade. Visualize a página e interaja com os botões. Você deve conseguir alternar entre os diferentes layouts sem perder os filtros aplicados. Isso significa que, se você estiver filtrando por categoria, por exemplo, a visualização mudará, mas os resultados permanecerão consistentes.
Considerações Finais
O Layout Switcher do JetEngine é uma ferramenta incrível que pode transformar a maneira como os usuários interagem com o seu site. Com ele, você pode criar uma experiência personalizada, permitindo que os visitantes escolham como desejam visualizar as informações. Além disso, a integração com filtros e a capacidade de manter a consistência dos dados tornam essa funcionalidade ainda mais valiosa.
Por fim, lembre-se de que a personalização é a chave. Experimente diferentes layouts e estilos para descobrir o que funciona melhor para o seu público. E se você ainda não está utilizando o JetEngine, considere adquirir a versão oficial para garantir acesso a todos os recursos disponíveis.
Compre o JetEngine na Full
Aprenda JetEngine com o JetMaster
FAQ
O que é o Widget Layout Switcher do JetEngine?
O Layout Switcher é um recurso do plugin JetEngine que permite aos usuários alternar entre diferentes layouts de listagem no front-end do site, como exibições em grade ou lista.
Como ativar o Widget Layout Switcher no meu site?
Para ativar o Layout Switcher, acesse sua conta Crocoblock, baixe o widget e instale-o como um plugin padrão no WordPress, navegando até “Plugins” > “Adicionar Novo” e fazendo o upload do arquivo ZIP.
Quais são as principais configurações do Layout Switcher?
Após adicionar o widget à sua página no Elementor, você pode selecionar o Listing Grid correspondente e configurar layouts personalizados, definindo rótulos, slugs e ícones para cada opção de layout.
Posso adicionar mais de dois layouts ao Layout Switcher?
Sim, você pode adicionar quantos layouts desejar ao Layout Switcher, permitindo que os usuários escolham entre diversas opções de exibição.
Como definir um layout padrão no Layout Switcher?
Ao configurar cada layout, há uma opção chamada “Is Default Layout”. Ative-a no layout que deseja definir como padrão para que ele seja exibido inicialmente aos usuários.
O Layout Switcher é compatível com o JetSmartFilters?
Sim, o Layout Switcher funciona em conjunto com o JetSmartFilters. Quando um filtro é aplicado e o layout é alterado, os resultados filtrados permanecem consistentes.
É possível estilizar os botões do Layout Switcher?
Sim, você pode personalizar a aparência dos botões do Layout Switcher, ajustando alinhamento, fontes, ícones, cores e efeitos para se adequar ao design do seu site.
Como adicionar ícones aos botões do Layout Switcher?
Nas configurações de cada layout, há uma opção para adicionar ícones. Você pode escolher entre não usar ícone, fazer upload de um SVG ou selecionar um ícone da biblioteca do Elementor.
O Layout Switcher afeta o desempenho do site?
A mudança entre layouts que utilizam a listagem padrão ocorre instantaneamente. No entanto, ao alternar para layouts com listagens diferentes, pode haver um breve atraso devido ao carregamento via AJAX.
Onde posso encontrar mais informações ou suporte sobre o Layout Switcher?
Para obter mais detalhes e suporte, visite a base de conhecimento da Crocoblock ou participe da comunidade no Facebook, onde especialistas compartilham experiências e soluções.
