16 exemplos inspiradores de impressionantes controles deslizantes modernos de página inicial
Publicados: 2020-09-07Os controles deslizantes da página inicial estão de volta! Ou, devo dizer, eles nunca saíram em primeiro lugar. Se você acredita na brigada anti-slider, os sliders da página inicial são chatos, irritantes e ruins para conversões. Mas a evidência real prova o contrário.
Sliders modernos evoluíram além das apresentações de slides básicas que estavam em toda parte há 7 anos. Grandes marcas como SpaceX ou Microsoft apresentam controles deslizantes bem projetados em seus sites. Sliders contemporâneos são lindos. Eles apresentam imagens impressionantes – geralmente fotografias de alta resolução – juntamente com redação cuidadosa, CTAs bem posicionados e elementos de design que garantem que as informações sejam oportunas para que os usuários possam absorver o conteúdo de cada slide.
Por que usar um controle deslizante de página inicial em seu site WordPress? Os muitos benefícios incluem:
- Foco. A capacidade de focar os usuários em suas principais mensagens acima da dobra.
- Visuais. Os usuários adoram imagens impressionantes. Os controles deslizantes permitem exibir mais de uma imagem.
- Chamadas à ação. Os controles deslizantes oferecem oportunidades para exibir vários CTAs para seu conteúdo importante.
Vamos dar uma olhada em alguns exemplos de como você pode usar controles deslizantes da página inicial.
1. Controle deslizante de gradiente de largura total
🎓 Disponível no Smart Slider 3 Free - Full Width Gradient Slider
Na biblioteca de modelos do Smart Slider 3, você pode encontrar esse lindo modelo de slider gratuito. É uma maneira simples de mostrar as informações mais importantes com um título, um texto curto, um botão e uma imagem simples. Há mais oportunidades para navegar para outros slides, você pode usar os marcadores e as setas ou apenas navegar arrastando o mouse. O fundo gradiente o torna colorido e preenche 100% da largura da sua página.
👍 Por que funciona: o controle deslizante é simples e causa uma boa primeira impressão se você o usar no topo da sua página. É compatível com dispositivos móveis e fica bem em todos os dispositivos. Não é muito e contém apenas as informações importantes, também é fácil de personalizar.
2. Controle deslizante de cursos
🎓 Disponível no Smart Slider 3 Pro – Cursos
O controle deslizante Cursos é um ótimo exemplo de controle deslizante de página inicial de largura total. A apresentação de slides tem um fundo azul escuro com um divisor de formas que quebra e anima a estrutura da página inicial. Com isso, você pode focar nas imagens e no conteúdo no centro. A estrutura é ótima e fica bem em dispositivos móveis também.
👍 Por que funciona: O CTA se destaca do slider e, com isso, você pode navegar até uma página específica. Há todo o conteúdo que você precisa saber sobre o curso real: aulas, tempo e você pode conferir um vídeo de introdução em uma caixa de luz.
3. Portfólio de página inteira
🎓 Disponível no Smart Slider 3 Pro – Portfólio de página inteira
O Smart Slider oferece um slider de portfólio de página inteira que pode realmente funcionar em sua página inicial . Ele pode ser usado como um cabeçalho de herói em seu site. Ele preenche toda a largura e altura do navegador, e você pode alternar os próximos slides com rolagem. As animações de camada tornam este controle deslizante da página inicial mais interessante, a imagem principal é carregada primeiro e, em seguida, o conteúdo é exibido.
👍 Por que funciona: eu gosto dessas cores modernas e formas animadas! E há muitas coisas legais no controle deslizante, como o título destacado, que destaca um texto importante, o botão, que você pode navegar para o próximo controle deslizante ou os contadores que tornam o controle deslizante mais interessante.
4. Página de destino da agência
🎓 Disponível no Smart Slider 3 Pro – Página inicial da agência
Você acredita que com sliders você pode criar uma página inteira? Imagine que você coloca controles deslizantes um embaixo do outro e os usa como uma página de destino, como no modelo Agência. Use eventos para navegar para outros slides e você também não terá problemas com a capacidade de resposta. Este grupo de slides é claramente inspirado na ideia de construção e no lado tecnológico das presenças online.
👍 Por que funciona: Os sliders estão passando um para o outro e estão em harmonia. Na parte superior há uma navegação simples com links onde você pode rolar para outro controle deslizante. Tudo o que você precisa é de um modelo mínimo, depois personalize os controles deslizantes e use-o de maneira simples.
5. Vitrine da vinícola
🎓 Disponível no Smart Slider 3 Pro – Winery
O controle deslizante da vinícola é um ótimo exemplo de quantas opções estão disponíveis para exibir um produto. Este controle deslizante de vitrine pode apresentar mais produtos um ao lado do outro e ajuda você a vender esses vinhos. O slide ativo fica no meio e clicando nos slides seguintes ou anteriores você pode avançar ou retroceder para ver os demais.
👍 Por que funciona: não há nada confuso sobre este controle deslizante. O objetivo é que o visitante clique nos botões e compre o produto. As animações das camadas são únicas em cada slide e, devido a esse movimento, o visitante se concentrará nas garrafas.
6. Vídeo de página inteira para sua página inicial
🎓 Disponível no Smart Slider 3 Pro – Bloco de vídeo de página inteira
Ao navegar na web, você pode encontrar muitos vídeos na página inicial dos sites. Os vídeos podem chamar a atenção dos visitantes e são ótimos elementos de design. Neste bloco deslizante de vídeo, você pode navegar para outras páginas, para que possa ser usado como um bloco de navegação na parte superior da página.
👍 Por que funciona: O controle deslizante é simples, mas o visitante pode ver informações suficientes. O que eu realmente gosto neste controle deslizante é que ele é realmente em tela cheia e, por causa disso, pode ser um ótimo ponto de partida para uma página.
7. Bloqueio da página inicial do podcast
🎓 Disponível no Smart Slider 3 Pro – Bloco de podcast
Para a primeira impressão, este controle deslizante pode parecer cheio, mas se você olhar com mais atenção, você vai pensar que cada elemento é importante e bem organizado . Este slider de podcast se destaca da multidão e contém elementos interativos: um CTA, ícones que apontam para a mídia social e um arquivo de áudio que você pode reproduzir.
👍 Por que funciona: No fundo deste bloco de podcast você pode ver um efeito de partícula. Basta mover o mouse sobre o conteúdo e as partículas se moverão. Isso pode ser um efeito legal quando o visitante passa o mouse sobre o bloco, e eles vão gostar.
8. Controle deslizante estático de reprodução automática
🎓 Disponível no Smart Slider 3 Pro - Slider estático de reprodução automática
A apresentação de slides em tela cheia com texto estático e fundos variados é uma maneira atraente de exibir suas informações que podem atrair pessoas. O slide estático está sempre acima dos outros slides que se movem atrás dele. Neste caso, as camadas receberão mais atenção porque estão sempre visíveis. E o indicador de reprodução automática mostra que o controle deslizante está ativo e algo acontecerá.
👍 Por que funciona: um slide estático está sempre visível e você deve criá-lo uma vez. Esta é uma boa maneira de mostrar seu logotipo ou marca d'água, mas é uma boa maneira de colocar um texto que precisa de atenção. E a reprodução automática com a animação em segundo plano o torna mais perceptível.
9. Controle deslizante da página inicial da equipe
🎓 Disponível no Smart Slider 3 Pro - Controle deslizante de equipe
Este controle deslizante se concentra nos membros de uma equipe. Dá um toque agradável e pessoal ao site de uma empresa e ajuda a criar confiança nos clientes. Você pode navegar com a seta na parte inferior ou com as miniaturas do lado direito. Os números do topo ajudam o visitante a saber quantos slides estão disponíveis e qual está visível.
👍 Por que funciona: este controle deslizante é lindamente composto. É óbvio que muito tempo e design foram colocados neste controle deslizante com cada um de seus elementos trabalhando juntos em harmonia. É um ótimo exemplo de um slider que leva o conceito de apresentações de slides a um nível totalmente novo.
10. Exemplo de controle deslizante de camada
🎓 Disponível no Smart Slider 3 Pro - Exemplo de slider de camada
Todo mundo adora transições sofisticadas em seu site, elas ajudam a chamar a atenção dos visitantes. O objetivo desse controle deslizante é chamar o visitante para uma ação, os botões e ícones estão aguardando um clique. É importante ter uma harmonia visual entre as camadas e o fundo , isso deixa o slider completo.
Talvez pareça fácil colocar camadas umas nas outras. No entanto, se o contraste entre as camadas e o plano de fundo não for suficiente, você pode usar uma sobreposição de plano de fundo de gradiente para adicionar uma cor ao seu controle deslizante, como neste exemplo de controle deslizante inteligente.
👍 Por que funciona: O título animado chama a atenção e o visitante vai clicar nos botões e ícones. O último slide é o meu favorito, há um vídeo de fundo com uma camada HTML que contém um formulário de contato e leva o visitante a fazer algo.
11. Controle deslizante de exemplo de página inicial do hotel
🎓 Disponível no Smart Slider 3 Pro – Full Page Hotel
Este controle deslizante é um ótimo exemplo de como pode ser útil usar linhas e colunas e criar uma estrutura em um controle deslizante. Existem muitos tipos diferentes de camadas: cabeçalho, texto, botão e um bom contador com animação. O fundo está se movendo um pouco, esse Ken Burns dá um movimento ao controle deslizante . Com as caixas, você pode navegar para os slides seguintes e anteriores, e eles mostram uma imagem quando você passa o mouse sobre ela, o que é um efeito muito legal.
👍 Por que funciona: o controle deslizante pode ser usado como um controle deslizante inicial em sua página inicial. A linha na parte inferior contém todas as informações úteis de uma forma atraente. O divisor de formas dá a ilusão de que essa linha se sobrepõe ao slider, o que anima o design.
12. Mostra de histórias de clientes
🎓 Disponível no Smart Slider 3 Pro – Histórias de clientes
Este slider é um dos meus favoritos. Ele ocupa toda a largura do navegador, e nele há 2 seções: uma parte informativa com CTA e com navegação, e uma imagem com depoimento em uma caixa branca. A capacidade de resposta também é muito legal: as duas colunas ficam uma abaixo da outra em tablets e dispositivos móveis.
👍 Por que funciona: Observando o CTA podemos notar que seu fundo preto contrasta fortemente com o fundo pastel, chamando rapidamente a atenção do usuário.
13. Controle deslizante de grade quebrada
🎓 Disponível no Smart Slider 3 Pro - Broken Grid Slider
Este controle deslizante impressionante é uma nova adição à biblioteca de modelos do Smart Slider 3 e, embora pareça simples no início, existem alguns efeitos de design diferentes acontecendo. Para começar, ele tem um layout de grade quebrado, que se tornou uma tendência popular nos últimos meses e é improvável que desapareça tão cedo. Quando você passa o mouse sobre o controle deslizante, ele muda usando um efeito de paralaxe delicioso que dará vida às suas imagens estáticas. Depois, há o divisor de forma branca no fundo que ajuda a destacar as imagens. Além de tudo isso, há muitos controles para deslizar pelas imagens: setas de navegação, controles de marcadores na parte inferior e você também pode clicar e deslizar.
👍 Por que funciona: A camada de paralaxe dá um efeito especial que você não pode encontrar em cada segundo site. Isso torna o controle deslizante único e, com o layout da grade quebrada, seu site terá uma aparência moderna. Este controle deslizante pode ser um bom controle deslizante de herói no topo da sua página.
14. Apresentação de slides de moda de página inteira
🎓 Disponível no Smart Slider 3 Pro - Full Page Fashion Slider
O que eu amo nesse slider é que ele é um exemplo perfeito do que você pode conseguir com ótimas fotografias, elementos de slider bem escolhidos e design cuidadoso . O foco principal de cada slide é a imagem transparente à esquerda, mas atrás de cada um dos modelos há uma forma fixa com um efeito de paralaxe sutil. O título, o texto e o CTA dão aos visitantes uma direção clara sobre onde clicar para comprar. Há também muitos controles disponíveis para percorrer os slides, incluindo setas de navegação à esquerda, números à direita (que também indicam quantos slides existem) e uma miniatura da próxima imagem no slide para que os visitantes saibam o que está por vir a seguir.
👍 Por que funciona: cada camada tem sua função, o cabeçalho chama a atenção dos visitantes, as setas e números ajudam na navegação e a miniatura mostra o que está no próximo slide. Os botões podem ser usados como elementos de chamada para ação, pelos quais você pode dar aos visitantes algo para clicar e navegar para outra página.
15. Exemplo de controle deslizante de produto da página inicial
🎓 Disponível no Smart Slider 3 Pro – Exemplo de slider de produto na página inicial
Você não pensaria que isso é um controle deslizante, mas é! À medida que você rola a página, cada página é animada, exibindo uma cor de fundo de tela cheia diferente, imagens variadas, texto e um prompt final para baixar o aplicativo da Apple App Store. É um conceito simples com (literalmente) tantas partes em movimento e animadas.
👍 Por que funciona: As animações funcionam em harmonia juntas, vêm uma atrás da outra. Isso torna o controle deslizante limpo e moderno. Este não é um controle deslizante tradicional, você pode usá-lo sozinho em sua página inicial. A animação de rolagem para baixo ajuda o visitante a navegar e verificar mais informações e detalhes sobre seu produto.
16. Controle deslizante colorido de largura total
🎓 Disponível no Smart Slider 3 Pro - Slider colorido de largura total
Este controle deslizante colorido é um dos melhores exemplos de controle deslizante de largura total. O efeito de paralaxe de camada com o título destacado torna o controle deslizante poderoso e de conscientização. Com esse destaque você pode focar a parte mais importante do controle deslizante. As cores estão em harmonia e o título é mais legível porque há um forte contraste entre a cor do título e o fundo.
👍 Por que funciona: Com o destaque animado o visitante pode focar na mensagem mais importante o que deseja destacar, mas os botões de CTA também são a parte principal do controle deslizante. Clicar neles faz com que mais algumas camadas apareçam com uma bela animação e mostra mais informações sobre seu projeto.
Criando seu próprio slider de página inicial com o Smart Slider 3
Com o Smart Slider 3, você pode facilmente criar belos sliders de página inicial. Se você gosta de qualquer um dos exemplos do Smart Slider acima, você pode usá-los - basta importá-los para a instalação do WordPress ao se inscrever no Smart Slider 3 Pro.