15+ Excelentes Exemplos de Slider WordPress (Mostra)

Procurando alguma inspiração para o seu slider do WordPress? Os sliders permitem que os proprietários de sites exibam seu conteúdo mais importante em uma apresentação de slides envolvente e interativa, para que os usuários possam ver os destaques e agir imediatamente. Não é de admirar que tantos sites usem controles deslizantes com tudo o que podem fazer!

• Entregue conteúdo com eficiência e estilo
• Embale muitas informações em um pequeno espaço
• Adicione interação ao seu site
• Visitantes diretos para promoções e páginas importantes

Neste artigo, mostraremos mais de 15 excelentes exemplos de sliders do WordPress. Também mostraremos como criar rapidamente um lindo slider para seu próprio site.

Mostra de Inspiração do Slider

Aqui estão alguns dos melhores exemplos de controles deslizantes para sua inspiração. Os critérios que usamos para escolher esses controles deslizantes foram 1) criatividade e 2) usabilidade. Alguns projetos têm ambos, e alguns têm apenas um aspecto.

CNBC Prime

O controle deslizante da CNBC é legível e fácil de usar. Eles usam uma fonte grossa para os títulos do programa, por isso é fácil de ler. Colorir o texto realmente ajuda a se destacar no fundo também.

CBS

O controle deslizante da CBS usa imagens atraentes com fonte grande e muito espaço em branco para facilitar a leitura e o uso. As balas grandes deixam super claro o que acontecerá quando você clicar.

Universal Orlando

O controle deslizante da Universal tem um propósito simples: seduzi-lo a visitar seu parque de diversões. Embora os CTAs façam algumas ofertas atraentes, as fotos falam tudo.

Pomba de Saville Cotes

A Saville's usa uma fonte serifada elegante combinada com fotos que destacam a qualidade e o artesanato de suas copas de pombas. Eles também explicam seu amplo conhecimento de pombas, para que você possa ter certeza de que está comprando as melhores casas para seus amigos emplumados.

Padaria Magnólia

Magnolia Bakery é um ótimo exemplo de controle deslizante somente de imagem. Quando você tem doces deliciosos, quem precisa de bate-papo? Esses três mini-sliders parecem simplesmente deliciosos nesta página da web.

Desfiladeiro Flamejante

Flaming Gorge é uma atração popular de Utah. As manchetes em sua galeria dizem tudo: você pode apreciar a vastidão da vista sem agredi-la no resort Flaming Gorge.

Temas de progresso

Headway Themes faz uso criativo do controle deslizante. Em vez do controle deslizante típico do topo da página, eles colocaram o deles mais abaixo e o usaram para mostrar sites que usam seus temas. Esperto!

Galeria Smithsonian Freer Sackler

O Smithsonian Freer Sackler usa um controle deslizante de navegação simples para direcioná-lo às principais páginas do site. A aparência simples e limpa do controle deslizante, cercada por espaços em branco que o atrai para as imagens, é perfeita para uma galeria de arte.

Planeta solitário

O controle deslizante do Lonely Planet fica chique com uma imagem rotativa em tela cheia e animações atraentes. Este não é apenas um controle deslizante de aparência linda, mas também é fácil navegar para qualquer lugar que lhe agrade.

Baía do leste

O slider da Converse coloca todo o foco exatamente onde deveria estar: no produto. Os detalhes e texturas são tão claros neste slider que você quase pode alcançar e tocar o tecido.

Sheetz

O controle deslizante do Sheetz usa cores brilhantes e divertidas com botões interativos de avanço que deslizam quando você passa o mouse sobre eles. Sliders como este apenas imploram para serem jogados.

Xbox

O controle deslizante do Xbox busca simplicidade com imagens limpas de produtos, poucas palavras e muito espaço em branco. Este é definitivamente um caso em que menos é mais.

Tim Hortons

O slider de Tim Hortons é um exemplo clássico de ótima fotografia de comida no trabalho. Fique com água na boca, combine isso com ótimas ofertas e BOOM! Você tem um controle deslizante que é extremamente difícil de resistir.

Sony Crackle

Crackle fica com um esquema de cores simples em branco e laranja que chama a atenção para o controle deslizante giratório. As pequenas sinopses em cada slide dão a você a vontade de ligar o tubo e assistir a alguns programas de TV.

Instituto Smithsonian

O controle deslizante do Smithsonian usa setas grandes e visíveis para que você possa navegar de volta para um slide anterior que perdeu. Isso é importante neste caso, porque há muito texto para ler em cada slide.

Louvre

O slider do Louvre é exatamente o que você esperaria: histórico e elegante. Isso se deve ao amplo espaço em branco, fonte serif e ao desbotamento simples, mas dramático, para preto nas imagens. A outra grande coisa sobre este controle deslizante é o botão play/pause no canto inferior direito.

Como criar seu próprio slider WordPress

Agora você pode estar se perguntando: “ Esses controles deslizantes são incríveis, mas como posso criar um para o meu próprio site?”

Bem, felizmente, é bem simples graças ao plugin Soliloquy para WordPress.

Primeiro, você precisa instalar e ativar o plug-in Soliloquy Slider. Para mais detalhes, veja este guia passo a passo sobre como instalar um plugin no WordPress.

Em seguida, é hora de criar seu primeiro controle deslizante. Vá para Soliloquy » Adicionar novo para adicionar um controle deslizante. Você pode selecionar arquivos do seu computador se precisar fazer upload de imagens. Se você já carregou imagens em seu site, selecione arquivos de outras fontes.

Continue rolando para baixo. Você verá as imagens que você selecionou para o seu controle deslizante. A partir daqui, você pode clicar no ícone de lápis para editar imagens ou clicar no X vermelho para remover imagens do seu controle deslizante.

Você também pode configurar outros detalhes sobre seu controle deslizante selecionando a guia Config à esquerda. Você pode definir o tamanho da imagem, o tema do slider e a velocidade das transições dos slides. Sua posição de legenda de texto também pode ser alterada aqui. Revise essas configurações.

Quando estiver satisfeito com suas configurações, dê uma olhada na guia Mobile . Isso permitirá que você teste a aparência do seu site em um dispositivo móvel e ajuste suas configurações de resolução móvel conforme necessário.

(Além disso, consulte a guia Misc para importar ou exportar seu controle deslizante.)

Adicionar um controle deslizante a uma página ou postagem

Você terminou de criar seu controle deslizante! Agora é hora de adicioná-lo ao post ou página de sua escolha. Edite uma postagem ou página, clique no botão Adicionar controle deslizante e selecione seu controle deslizante. Lembre-se de publicar ou atualizar seu post/página para salvar as alterações.

Seu controle deslizante agora estará ativo em seu site:

É isso! Agora você tem seu próprio controle deslizante do WordPress. Esperamos que este artigo tenha inspirado você com mais de 15 excelentes exemplos de sliders do WordPress e o tenha ajudado a criar seu primeiro slider.

Você também pode conferir todos os recursos avançados que você pode usar ao projetar seus controles deslizantes. As possibilidades de personalizar seu controle deslizante são praticamente infinitas, então comece a usar o Soliliquy hoje mesmo! Aqui estão apenas alguns exemplos do que você pode fazer com um controle deslizante Soliloquy.

• Crie um controle deslizante de imagem de largura total no WordPress
• Alterar o tempo do controle deslizante no WordPress
• Crie um controle deslizante de vídeo responsivo no WordPress

Se você gostou deste artigo, siga-nos no Facebook e Twitter para mais tutoriais gratuitos do WordPress.