Os sliders da página inicial estão de volta! Ou, devo dizer, nunca saíram. Se você acredita na brigada antiderrapante, os controles deslizantes da página inicial são chatos, irritantes e prejudiciais às conversões. Mas a verdadeira prova prova o contrário. Os sliders modernos evoluíram além das apresentações básicas de slides que existiam em todos os lugares 7 anos atrás. Grandes marcas como SpaceX ou Microsoft apresentam controles deslizantes bem projetados em seus sites. Os sliders contemporâneos são lindos. Eles apresentam imagens impressionantes – geralmente fotografias de alta resolução – juntamente com ediçã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.
Subam a bordo! Junte-se aos nossos 142.416 assinantes! Receba as últimas notícias, tutoriais, guias, dicas e ofertas entregues em sua caixa de entrada. E-mail. Sem spam. Sem pagamento. Limpa e-mails. Por que usar um controle deslizante de página inicial em seu site? WordPress? Numerosos benefícios incluem: Foco. A capacidade de focar os usuários em suas mensagens-chave acima da pasta. Imagens visuais. Os utilizadores adoram imagens deslumbrantes. Os sliders permitem exibir mais de uma imagem. Urgências por acção. Os sliders oferecem oportunidades para exibir vários CTAs para o seu conteúdo. importante. Vamos dar uma olhada em alguns exemplos de como você pode usar os controles deslizantes da página inicial.
1. Barra deslizante de gradiente de largura total
e simplesmente navegar com um deslizamento do 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ê usá-lo no topo da página. É compatível com dispositivos móveis e fica bem em todos os dispositivos. Não é muito e contém apenas informações importantes, também é fácil de personalizar.
2. Cursos deslizantes 🎓 Disponível no Smart Slider 3 Pro – Cursos O Course Slider é um ótimo exemplo de um slider 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 se concentrar em imagens e conteúdo no centro. A estrutura é ótima e fica bem em dispositivos móveis também. 👍 Por que funciona: CTA se destaca do controle deslizante e, com isso, você pode navegar para uma página específica. Há todo o conteúdo que você precisa saber sobre o curso em si: aulas, tempo e você pode conferir um vídeo introdutório em uma lightbox.
3. Portfólio de página inteira 🎓 Disponível no Smart Slider 3 Pro – Portfólio de Página Completa O Smart Slider oferece um controle deslizante de portfólio de página inteira que pode realmente funcionar em sua página inicial. Pode ser usado como um cabeçalho de herói em seu site. web. Ele preenche toda a largura e altura do navegador e você pode alternar os seguintes slides rolando. Animações de camada tornam este slider de página inicial mais emocionante, a imagem principal carrega primeiro e, em seguida, o conteúdo é exibido. 👍 Porque funciona: adoro estas cores modernas e formas animadas! E há muitas coisas interessantes no controle deslizante, como o título destacado, que destaca 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 inicial da agência 🎓 Disponível em Smart Sl
ider 3 Pro – landing page da agência Você pode acreditar que com controles deslizantes você pode criar uma página inteira? Imagine colocar sliders um sob o outro e usá-los como landing page, como no modelo da 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 controles deslizantes passam uns para os outros e estão em harmonia. Na parte superior há uma navegação simples com links de onde você pode rolar para outro slider. Tudo que você precisa é de um modelo mínimo, personalize os controles deslizantes e use-o de uma maneira simples.
5. Vitrina Cramei 🎓 Disponível em Smart Slider 3 Pro – Winery O slider de adega é um ótimo exemplo do número de opções disponíveis para mostrar um produto. Este controle deslizante pode inserir vários produtos lado a lado e ajudá-lo a vender esses vinhos. O slide ativo está no meio e, clicando nos slides próximos ou anteriores, você pode avançar ou retroceder para ver os outros. 👍 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 graças a esse movimento, o visitante se concentrará nas garrafas.
6. Vídeo completo em sua página início 🎓 Disponível no Smart Slider 3 Pro – Full Page Video Block Quando você navega na web, você pode encontrar muitos vídeos na página inicial dos sites. Os vídeos podem atrair 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 ele 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 gosto
A arte deste controle deslizante é que ele é realmente tela cheia e por causa disso, pode ser um excelente ponto de partida para uma página.
7. Bloquear a página inicial do podcast 🎓 Disponível em Smart Slider 3 Pro – Bloco Podcast Para sua primeira impressão, este controle deslizante pode parecer lotado, mas se você olhar para ele mais de perto, você vai pensar que cada item é importante e bem organizado. Este slider de podcast sai da multidão e contém elementos interativos: um CTA, ícones indicando redes sociais 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 passar por cima do bloco e vai gostar.
8. Reprodução automática do controle deslizante estático 🎓 Disponível em Smart Slider 3 Pro – Autoplay Static Slider Apresentar slides em tela cheia com texto estático e fundos variados é uma maneira atraente de mostrar a você as informações que podem atrair pessoas. O slide estático está sempre acima dos outros sliders que se movem atrás dele. Neste caso, as camadas receberão mais atenção porque estão sempre visíveis. E o indicador Reprodução automática mostra que o controle deslizante está ativo e algo vai 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 algum texto lá que precisa de atenção, e a reprodução automática com animação em segundo plano torna-o mais visível.
9. Slider para a página inicial da equipe 🎓 Disponível no Smart Slider 3 Pro – Team Slider Este controle deslizante foca nos membros da equipe. Ele dá uma nota agradável e pessoal para o site de uma empresa e ajuda a construir confiança nos clientes.Você pode navegar com a seta na parte inferior ou com a miniatura
É do lado direito. Os números na parte superior ajudam o visitante a descobrir quantos slides estão disponíveis e quais são visíveis. 👍 Por que funciona: Este controle deslizante é lindamente composto. É óbvio que muito tempo e design foram colocados neste controle deslizante, cada um de seus elementos trabalhando juntos em harmonia. É um ótimo exemplo de um slider que leva o conceito de apresentar slides a um nível totalmente novo. 10. Exemplo de Layer Slider 🎓 Disponível no Smart Slider 3 Pro – Slider de camada de exemplo Todo mundo adora transições elegantes em seu site, elas ajudam a atrair a atenção dos visitantes. O objetivo desse cursor é chamar o visitante para uma ação, botões e ícones aguardam por um clique. É importante ter uma harmonia visual entre as camadas e o fundo, isso torna o controle deslizante completo. Talvez pareça fácil colocar camadas um no outro. No entanto, se o contraste entre as camadas e o fundo não for suficiente, você pode usar uma sobreposição de fundo gradiente para adicionar uma cor ao controle deslizante, como neste exemplo do Smart Slider. 👍 Por que funciona: o título animado atrai os olhos, e o visitante vai clicar em 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 faz com que o visitante faça alguma coisa. 11. Exemplo deslizante para a página inicial do hotel 🎓 Disponível em 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. Há um monte de diferentes tipos de camadas: título, texto, botão e um bom contador com animação. O fundo se move um pouco, este Ken Burns dá um movimento para o slider. Com as caixas, você pode navegar para os slides próximos e anteriores, e eles exibem uma imagem quando você passa o mouse sobre ela, o que é um efeito muito alto. 👍 Por que funciona o controle deslizante?
leader 3 Pro – Full Page Fashion Slider O que eu amo neste slider é que ele é um exemplo perfeito do que você pode alcançar com uma ótima foto, elementos deslizantes bem escolhidos e um design cuidadoso. O foco principal de cada slide é a imagem transparente à esquerda, mas atrás de cada padrão há uma forma fixa com um efeito de paralaxe sutil. O título, texto e CTA dão aos visitantes uma direção clara sobre onde clicar para comprar. Há também muitos controles disponíveis para mover slides, incluindo setas de navegação para a esquerda, números para a direita (que também indicam quantos slides existem) e uma miniatura da próxima imagem no slide, para que os visitantes saibam o que vem a seguir. próximo. 👍 Por que funciona: Cada camada tem seu próprio papel, o título atrai a atenção dos visitantes, setas e números ajudam a navegar e a miniatura mostra o que está no próximo slide. Os botões podem ser usados como itens de chamada para ação, onde você pode dar aos visitantes algo para clicar e navegar para outra página. 15. Exemplo de controle deslizante do produto na página inicial 🎓 Disponível em Smart Slider 3 Pro – Exemplo de controle deslizante de produto na página inicial Você não pensaria que este é um controle deslizante, mas é! À medida que você rola a página para baixo, cada página se anima, exibindo uma cor de fundo diferente em tela cheia, 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 trabalham em harmonia juntas, vêm uma após a outra. Faça o cursor limpo e moderno. Este não é um controle deslizante tradicional, você pode até mesmo usá-lo em sua página. a começar. A animação de rolagem para baixo ajuda o visitante a navegar e verificar mais informações e detalhes sobre o seu produto. 16. Barra deslizante colorida de largura total 🎓 Dis