Divi Plugin Highlight - Anything Slider

O módulo deslizante Divi padrão é um controle deslizante poderoso. Os recursos incluem título, botão, texto, mídia, link, plano de fundo, sobreposição e muito mais. E se você quisesse criar layouts com o Divi Builder e colocá-los dentro do slide? Isso é exatamente o que o Anything Slider faz.

Anything Slider é um plugin de terceiros do CakeWP que permite usar layouts Divi dentro dos slides. Você pode fazer muito mais com ele do que apenas controles deslizantes. Ele também inclui o módulo Menu AS que pode ser usado em conjunto com o módulo deslizante para criar:

• Abas
• Carrosséis
• Seções interativas
• Preços alternativos
• Galerias filtráveis
• CTAs interativos
• Produtos Filtráveis
• Uma página da web

Anything Slider funciona com Divi, Extra e o plugin Divi Builder. Neste destaque do plugin, daremos uma olhada no que o Anything Slider pode fazer. As imagens são de Unsplash.com.

• Consulte CakeWP.com para obter informações de compra.

Instalando Anything Slider

Carregue e ative o plugin como faria com qualquer plugin premium. Depois de ativado, passe o mouse sobre o menu Plug-ins no Painel e selecione Licença Anything Slider. Digite sua chave de licença e selecione Ativar licença. Em seguida, selecione Salvar alterações.

Dois novos módulos foram adicionados ao Divi Builder: Anything Slider e AS Menu. Juntos, eles podem criar alguns designs interessantes.

Configurações do módulo Anything Slider

As configurações incluem novos slides, controles próximo / anterior, controles de ponto, mostrar controles ao passar o mouse, controle deslizante de loop, animação, altura, arrastar do mouse, etc. A guia Design inclui estilos personalizados para os controles Próximo e Anterior, número de slides por tela, margem entre slides, cores de pontos e muito mais.

Anything Slider Slide Settings

Clique em Adicionar novo slide. Aqui você verá uma lista suspensa chamada Layout do slide, onde escolherá os layouts dos slides. Podem ser layouts predefinidos, layouts que você construiu e salvou na biblioteca ou layouts que você carregou.

Configurações do módulo deslizante do menu AS

As configurações incluem orientação de menu, alinhamento, etc. A guia Design inclui fontes, espaçamento, planos de fundo, cores e muito mais. Você criará os itens de menu clicando em Adicionar Novo Item de Menu. Você colará o URL, escolherá um ícone, escolherá uma imagem, etc.

Anything Slider Starter Kits

Anything Slider usa layouts para criar os slides. Para ajudá-lo a começar, há muitos kits de iniciante e pacotes de layout gratuitos que você pode baixar do site do desenvolvedor. Importe-os para a Biblioteca Divi para usá-los.

Criação de um controle deslizante personalizado

Eu criei alguns layouts próprios e selecionei cada um como um slide. Você pode adicionar quantos slides desejar. Acho que é melhor rotulá-los para que você saiba qual slide é qual, se quiser fazer alterações.

Este slide inclui uma imagem e um contador de barra. Você pode ver a navegação por pontos no canto esquerdo e os controles deslizantes em ambos os lados. Neste exemplo, meu mouse está pairando sobre o botão de navegação esquerdo. Todos os estilos são personalizáveis.

Animações

Os slides podem ser animados e você pode fazê-los deslizar automaticamente ou não. Inclui animação para entrada e saída. Possui cerca de 80 animações, incluindo todos os fundamentos, como salto, elástico, gelatina, pulso, agitação, tada, oscilação, balanço, fade, flip, rotação, zoom e muito mais. Você pode fazer com que a animação pare ao pairar.

Botões de Navegação

Os botões de navegação podem ser estilizados de forma independente. Estilize normal e flutuante para os ícones, bordas, cores, etc.

Neste exemplo, estilizei o botão de navegação de forma independente e aumentei o tamanho dos pontos (você pode especificar qualquer tamanho em pixels que desejar para os pontos). A animação flutuante muda a cor e o raio da borda. Inclui os mesmos recursos de estilo da maioria dos módulos Divi.

Os botões e pontos foram movidos para a direita com os botões na parte superior e os pontos na parte inferior. Você pode colocá-los em ambos os lados ou à esquerda, no centro ou à direita para cima ou para baixo. Você também pode desativar cada um deles, se preferir. Entre os botões e pontos, há várias combinações para as opções de layout.

Módulo de Menu AS

O módulo Menu AS é ótimo para adicionar mais opções de navegação e pode usar ícones e imagens. Inclui opções de orientação horizontal e vertical e pode ser estilizado como qualquer outro módulo.

O módulo Menu AS cria um menu para que os visitantes possam navegar pelos slides. Os próprios slides incluem uma tag de navegação no final do URL (na barra de endereço do seu navegador). Use esta tag para cada item do menu. Neste exemplo, a tag de URL do slide é # s_1.

Coloquei o menu na parte inferior, aumentei o tamanho da fonte e adicionei um fundo para destacá-lo. As palavras são clicáveis, mas neste exemplo elas não se parecem com botões. Isso é fácil de mudar.

Eu adicionei algum preenchimento personalizado e ajustei as cores de foco e plano de fundo.

Também removi os botões de navegação do controle deslizante e coloquei o módulo Menu AS na parte superior. O menu é exibido na orientação horizontal. O preenchimento com cores de fundo cria caixas ao redor do texto. Usando o preenchimento, você pode tornar os botões do tamanho que desejar.

Ajustei o layout para 2 colunas (3/4 + 1/4) e coloquei a orientação do menu na vertical.

O menu ao lado cria algumas possibilidades interessantes, especialmente quando você considera os recursos de imagem e ícone do módulo. Vamos ver o que podemos fazer com isso.

Criação de uma página única

Você pode criar páginas inteiras usando o controle deslizante e, em seguida, deslizar entre elas automaticamente, com a navegação de botões e pontos, ou com o módulo de menu. Para este exemplo, criei uma nova página de largura total com um módulo Menu AS em 1/4 à esquerda e o Anything Slider em 3/4 à direita. Eu adicionei uma imagem de plano de fundo à seção com uma sobreposição para ajudar a descrever visualmente o site.

Para este exemplo, eu queria usar o recurso de imagem do módulo Menu AS. Para este menu, estou adicionando imagens para cada um dos itens do menu. Também inclui ícones, que podem ser usados ​​com as imagens ou sozinhos.

Para os slides, criei layouts com um único módulo de blog com uma única categoria selecionada.

O módulo AS Slider mostrará todos os layouts de blog como slides individuais. Desativei os controles próximo / anterior e de ponto.

O controle deslizante exibe o módulo de blog para cada categoria, enquanto o menu à esquerda, que está configurado para orientação vertical, exibe imagens para as categorias e funciona como navegação entre os slides. O controle deslizante é definido para girar pelos slides para exibir a postagem mais recente de cada categoria. Isso significa que toda a página inicial, com exceção da navegação, é um controle deslizante. Claro que o menu também pode ser colocado acima, abaixo ou à direita.

Documentação do Anything Slider

A documentação é fornecida no site do CakeWP e inclui uma visão geral com imagens e vários vídeos, incluindo um guia de introdução e um tutorial. Também inclui demonstrações para ajudá-lo a dar ideias de como usar os módulos.

Licença, suporte e atualizações

O plugin pode ser usado em sites para você e seus clientes com base na licença que você escolher. Existem três licenças para escolher:

• 1 local - $ 30,00
• 5 sites - $ 50,00
• Sites ilimitados - $ 120,00

Todas as licenças incluem um ano de suporte e atualizações.

• Consulte CakeWP.com para obter informações sobre a compra.

Pensamentos finais

Anything Slider é um módulo interessante. A capacidade de usar layouts Divi como slides abre muitas possibilidades de design. Gosto especialmente de usar imagens no módulo de menu. Os módulos são fáceis de usar e a documentação fornece instruções passo a passo para você começar.

Se você estiver interessado em expandir seus controles deslizantes além do controle deslizante Divi padrão, Anything Slider pode ser o plug-in que você deseja.

Gostaríamos de ouvir de você. Você usou o Anything Slider? Conte-nos sobre sua experiência nos comentários.

Imagem em destaque via VectorsMarket / shutterstock.com