Como Criar Facilmente um Slider Responsivo no WordPress

Você já acessou um site e ficou impressionado com uma bela galeria deslizante na página inicial? É uma ótima maneira de destacar seu melhor conteúdo, mas fazer com que ele fique bom em todos os dispositivos pode ser uma dor de cabeça.

Sabemos o quão frustrante é quando um slider fica perfeito no seu computador, mas é desajeitado ou quebrado em um smartphone. Uma má experiência móvel pode facilmente afastar os visitantes.

Depois de testar dezenas de ferramentas em nossos próprios sites, encontramos as maneiras mais simples de criar sliders que funcionam perfeitamente em todos os lugares. Você não precisa de nenhuma habilidade de codificação para construir um que chame a atenção dos seus visitantes.

Neste artigo, mostraremos alguns métodos fáceis para adicionar um slider responsivo ao seu site WordPress.

Por que Adicionar um Slider Responsivo do WordPress ao Seu Site?

Um slider de conteúdo ou apresentação de slides é uma ótima maneira de destacar seus produtos WooCommerce mais populares, os últimos vídeos do YouTube, avaliações de clientes e muito mais.

Alguns sliders são automáticos, então eles se movem entre os slides automaticamente. Isso permite que você exiba muitas informações em um pequeno espaço, deixando bastante espaço para outro conteúdo.

Lembre-se apenas que a chave para um ótimo slider é usar imagens de alta qualidade, mas bem otimizadas. Isso manterá seu slider com uma aparência nítida sem desacelerar seu site. 👍

Por esse motivo, muitos sites usam sliders em suas páginas mais importantes, como uma landing page, página inicial ou página de vendas.

Mesmo que um slider seja configurado para reprodução automática, os visitantes geralmente podem navegar entre os slides manualmente usando botões de navegação. Dessa forma, um slider incentiva os visitantes a interagir com seu site, tornando-o mais envolvente.

Você pode ver no GIF abaixo o quão dinâmico um slider de vídeo pode tornar uma página.

Dito isso, vamos ver como você pode criar facilmente um slider responsivo no WordPress. Simplesmente use os links rápidos abaixo para pular direto para o método que você deseja usar.

• Método 1. Crie um Slider Responsivo para WordPress Usando um Plugin (Rápido e Fácil)
• Método 2. Crie um Slider Responsivo Usando um Page Builder (Mais Personalizável)
• Método 3. Crie um Slider Usando o Smash Balloon (Melhor Para Posts e Avaliações Sociais)
• Perguntas Frequentes Sobre Sliders Responsivos
• Recursos Adicionais

Método 1. Crie um Slider Responsivo para WordPress Usando um Plugin (Rápido e Fácil)

Se você deseja criar um slider simples que fique bom em desktop e mobile, recomendamos o uso do plugin Soliloquy.

Este plugin de slider para WordPress permite que você crie slides usando imagens da sua biblioteca de mídia e também pode exibir vídeos hospedados em plataformas de terceiros como o YouTube.

Você também pode adicionar texto alternativo e legendas a cada slide, o que é ótimo para criar conteúdo amigável para SEO.

Primeiro, você precisará se inscrever para uma conta Soliloquy. Depois disso, você pode instalar e ativar o plugin Soliloquy em seu site. Para mais detalhes, siga nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, vá para Soliloquy » Configurações no painel do WordPress e insira sua chave de licença.

A chave pode ser encontrada fazendo login em sua conta no site Soliloquy. Após inserir essas informações, clique no botão ‘Verificar Chave’.

Com isso feito, você pode adicionar um novo slider ao seu site WordPress indo para Soliloquy » Adicionar Novo.

Você pode começar digitando um título. Isso é apenas para sua referência, então você pode usar qualquer coisa que o ajude a identificar o slider em seu painel do WordPress.

Em seguida, é hora de adicionar imagens e vídeos ao slider. Você pode arrastar e soltar arquivos no editor ou clicar em ‘Selecionar Arquivos de Outras Fontes’.

Se você quiser usar imagens, poderá adicionar esses arquivos da mesma forma que você adiciona imagens no editor de blocos do WordPress.

Se você quiser incluir vídeos, recomendamos carregá-los em um site de hospedagem de vídeos como YouTube ou Vimeo. Carregar vídeos diretamente no seu site não é uma boa ideia, pois pode deixar seu site lento e consumir muito espaço de armazenamento.

Enquanto isso, plataformas como o YouTube são otimizadas para vídeo, então você pode exibir vídeos de alta resolução em seus sliders sem afetar negativamente seu site.

Após escolher uma plataforma de hospedagem de vídeos, você terá que carregar todos os vídeos que deseja incluir no slider do WordPress. Se você não tem certeza de como carregar vídeos, recomendamos ler a documentação oficial ou o manual do usuário para a plataforma de vídeo escolhida.

Com isso feito, basta clicar no botão ‘Selecionar Arquivos de Outras Fontes’ e depois selecionar ‘Inserir Slide de Vídeo’.

Agora você pode prosseguir e colar o URL do vídeo no campo ‘URL do Vídeo’.

O Soliloquy mostra todos os formatos de link suportados no lado direito, portanto, certifique-se de que seu link usa um desses formatos.

Uma vez feito isso, você pode digitar um título no campo ‘Título’. Isso é apenas para sua referência, então você pode usar o que quiser. Você também pode adicionar texto alternativo, que ajudará os mecanismos de busca a entenderem do que se trata este slide.

Depois disso, você pode digitar uma legenda opcional no campo ‘Legenda’. Isso será exibido em uma barra cinza na parte inferior do vídeo antes que o visitante pressione ‘Reproduzir’.

Se você não quiser mostrar esta barra, simplesmente deixe o campo ‘Legenda’ vazio.

Quando estiver satisfeito com as informações que inseriu, você pode criar mais slides clicando em ‘Adicionar Outro Slide de Vídeo’.

Para configurar este novo slide, basta seguir o mesmo processo descrito acima.

Depois de ter criado todos os seus slides, prossiga e clique em ‘Inserir no Slider’.

Agora você verá todos os seus slides na seção ‘Atualmente no Seu Slider’.

Em seguida, você pode clicar na aba ‘Configuração’ e usar as configurações do slider para personalizá-lo. Por exemplo, você pode escolher um novo tema de slider, alterar o tamanho da imagem e alterar a posição do slider e das legendas.

Você também pode personalizar as setas do slider e o botão de pausar/reproduzir, ajustar a velocidade de transição, alterar o tempo de atraso e muito mais.

Em seguida, você vai querer garantir que seu slider fique tão bom em dispositivos móveis quanto em computadores e laptops.

Dito isso, clique na aba ‘Mobile’ e marque a caixa ao lado de ‘Criar Imagens de Slider para Dispositivos Móveis’.

Você pode então digitar os tamanhos que deseja usar para as imagens e vídeos em dispositivos móveis. Ao tomar essas decisões, pode ser útil visualizar a versão móvel do seu site WordPress em um desktop.

Por padrão, o Soliloquy ocultará legendas para usuários móveis. Frequentemente, isso ajuda os slides a se ajustarem mais confortavelmente em telas menores, tipicamente usadas por smartphones e tablets.

Por esse motivo, recomendamos deixar essa configuração desativada, mas você pode marcar a caixa ao lado de ‘Mostrar Legendas em Dispositivos Móveis’ se preferir.

Com isso feito, clique na aba ‘Misc’. Aqui, você pode adicionar CSS personalizado ao seu slider, editar o título e o slug do slider, e exportar o slider.

Quando estiver satisfeito com a configuração do slider, clique no botão ‘Publish’.

O Soliloquy criará automaticamente um shortcode que você pode adicionar a qualquer página, post ou área pronta para widgets.

Para mais informações sobre como inserir o shortcode, consulte nosso guia sobre como adicionar um shortcode no WordPress.

Para usuários avançados, o Soliloquy também fornece trechos de código que podem ser adicionados diretamente aos arquivos do seu tema WordPress. Este método oferece um controle mais preciso, mas é recomendado apenas se você se sentir confortável editando código. Para a maioria dos usuários, usar o bloco ou o shortcode é a maneira mais fácil e segura!

Para instruções passo a passo, consulte nosso guia sobre como adicionar facilmente código personalizado no WordPress.

A maneira mais fácil de adicionar o slider ao seu site é usando o bloco Soliloquy no editor Gutenberg. Simplesmente vá para a página ou post onde você deseja exibir o slider e clique no botão '+'.

No pop-up que aparece, digite 'Soliloquy'.

Quando o bloco correto aparecer, clique para adicioná-lo ao seu blog ou site WordPress.

Depois disso, abra o bloco Soliloquy e selecione o slider que você acabou de criar.

Agora você pode clicar no botão 'Atualizar' ou 'Publicar' para tornar o slider ativo.

Método 2. Crie um Slider Responsivo Usando um Page Builder (Mais Personalizável)

Se você deseja criar um slider simples de vídeo ou imagem, um plugin como o Soliloquy é uma ótima opção. No entanto, se você deseja integrar um slider perfeitamente em um design de página totalmente personalizado, como uma página de destino ou página inicial, recomendamos usar um plugin de construtor de páginas em vez disso.

SeedProd é o melhor construtor de páginas WordPress com arrastar e soltar. Ele permite que você crie páginas de destino personalizadas e até mesmo crie um tema WordPress personalizado sem ter que escrever uma única linha de código.

Ele também possui um bloco de Carrossel de Imagens que você pode usar para criar sliders impressionantes.

Você pode simplesmente arrastar e soltar este bloco pronto em qualquer lugar de uma página e, em seguida, personalizá-lo usando o poderoso editor de arrastar e soltar.

Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Após ativar o plugin, o SeedProd solicitará sua chave de licença.

Você pode encontrar esta chave de licença em sua conta no site do SeedProd. Após inserir as informações, clique no botão 'Verificar Chave'.

Com isso feito, vá para SeedProd » Landing Pages no seu painel do WordPress.

1. Escolha um Modelo de Página

O SeedProd vem com mais de 180 modelos projetados profissionalmente que são agrupados em categorias. Na parte superior, você verá categorias que permitem criar belas páginas de em breve, ativar o modo de manutenção, criar uma página de login personalizada para o WordPress e muito mais.

Todos os modelos do SeedProd são fáceis de personalizar, então você pode usar qualquer design que desejar. Quando encontrar um modelo que goste, basta passar o mouse sobre ele e clicar no ícone de marca de seleção.

Agora você pode digitar um nome para sua página de destino no campo 'Nome da Página'. O SeedProd criará automaticamente um 'URL da Página' usando o nome da página.

É inteligente incluir palavras-chave relevantes neste URL sempre que possível, pois isso ajudará os mecanismos de busca a entender do que se trata a página. Isso pode, muitas vezes, melhorar seu SEO para WordPress.

Para alterar o URL gerado automaticamente da página, basta digitar no campo 'URL da Página'.

Quando estiver satisfeito com as informações que inseriu, clique em ‘Salvar e Começar a Editar a Página.’ Isso carregará a interface do construtor de páginas do SeedProd.

2. Personalize o Layout da Sua Página

O construtor de arrastar e soltar do SeedProd mostra uma prévia ao vivo do design da sua página à direita. À esquerda, há um menu com todos os diferentes blocos e seções que você pode adicionar à página.

Quando encontrar um bloco que deseja adicionar, basta arrastá-lo e soltá-lo em seu modelo.

Para personalizar um bloco, basta clicar para selecioná-lo no editor do SeedProd. O menu à esquerda será atualizado para mostrar todas as configurações que você pode usar para personalizá-lo.

Enquanto você constrói a página, pode mover os blocos pelo layout arrastando e soltando-os. Para instruções mais detalhadas, consulte nosso guia sobre como criar uma landing page com WordPress.

3. Adicione e Projete Seu Slider Responsivo

Para criar um slider responsivo usando o SeedProd, basta encontrar o bloco Carrossel de Imagens no menu à esquerda e arrastá-lo para o seu layout.

Em seguida, clique para selecionar o bloco Carrossel de Imagens no editor da página.

Agora você pode adicionar todas as imagens que deseja exibir no slider. Para começar, clique no item ‘Imagem 1’ que o SeedProd cria por padrão.

Agora você pode usar uma foto da biblioteca integrada do SeedProd ou clicar em ‘Usar Sua Própria Imagem’ e escolher um arquivo da biblioteca de mídia do WordPress.

Após escolher uma imagem, você pode adicionar uma legenda que aparecerá abaixo dela. O SeedProd não exibe legendas por padrão, mas mostraremos como ativá-las mais adiante neste post.

Quando estiver satisfeito com a configuração do slide, clique no botão ‘Adicionar Imagens’ para criar outro slide.

Para adicionar mais slides, basta seguir o mesmo processo descrito acima.

Após adicionar todas as imagens ao seu slider, é hora de personalizar como esse slider se parece e funciona.

No menu à esquerda, clique para expandir a seção ‘Configurações do Carrossel’.

Para começar, você pode alternar entre os modos claro e escuro para os botões de navegação do slider.

Para experimentar esses modos diferentes, clique nos botões ao lado de ‘Modo de Cor da Navegação’. A pré-visualização ao vivo será atualizada automaticamente para que você possa ver qual modo você mais gosta.

Por padrão, o carrossel exibe um único slide, e os visitantes precisarão usar os controles de navegação para ver mais conteúdo.

No entanto, você pode querer exibir vários slides de uma vez abrindo o menu suspenso ‘Slide a Exibir’ e escolhendo um número na lista. Isso pode ser útil se o slider tiver muito conteúdo e você estiver preocupado que os visitantes não cliquem em todos os slides.

Por padrão, os visitantes precisarão clicar para ver o próximo slide. Com isso em mente, você pode querer habilitar a reprodução automática, pois isso geralmente aumenta a quantidade de slides que um visitante vê.

Para fazer isso, clique para habilitar o interruptor ‘Reprodução Automática’ e, em seguida, especifique quanto tempo cada slide deve permanecer na tela digitando um número em ‘Velocidade de Reprodução Automática’.

Se você adicionou legendas às suas imagens, certifique-se de clicar no controle deslizante ‘Exibir Legenda’ para mudá-lo de ‘Não’ para ‘Sim’.

Você também pode alterar o alinhamento da legenda.

Dependendo da cor de fundo, você pode precisar alterar a cor da legenda antes que ela fique visível para os visitantes.

Para fazer isso, clique na aba ‘Avançado’ e, em seguida, use as configurações de ‘Cor da Legenda’.

Você pode estilizar ainda mais o texto clicando no botão ‘Editar’ ao lado de ‘Tipografia da Legenda’.

Isso adiciona algumas configurações onde você pode alterar o tamanho da fonte, altura da linha, espaçamento e muito mais.

Quando você estiver satisfeito com a aparência das legendas, você pode adicionar diferentes sombras de caixa aos slides usando o menu suspenso ‘Slider Image Styles’.

Essas sombras podem realmente fazer os slides se destacarem, então vale a pena experimentar diferentes sombras para ver se elas se encaixam no design da sua página.

Na aba ‘Avançado’, você também encontrará configurações que permitem adicionar uma borda, alterar o espaçamento e até criar uma animação de entrada.

Sinta-se à vontade para explorar essas configurações avançadas para ver todos os diferentes efeitos que você pode criar. Por exemplo, você pode adicionar uma borda para destacar seu slider ou usar animações para chamar a atenção do seu visitante! ✨

4. Publique sua Landing Page

Quando estiver satisfeito com a aparência do slider, você pode continuar trabalhando no restante da página. Simplesmente arraste blocos para o seu design e, em seguida, personalize-os usando as configurações no menu do lado esquerdo.

Se você quiser excluir um bloco, basta passar o mouse sobre ele e clicar no ícone de lixeira quando ele aparecer.

Quando solicitado, clique em ‘Sim, exclua’.

Quando estiver satisfeito com a aparência da página, clique no botão ‘Salvar’ para torná-la ativa. Por fim, selecione ‘Publicar’ para tornar seu slider ativo.

Método 3. Crie um Slider Usando o Smash Balloon (Melhor Para Posts e Avaliações Sociais)

É mais provável que tentemos coisas que vemos outras pessoas comprando, usando ou recomendando. É por isso que é uma boa ideia mostrar prova social em seu site, incluindo avaliações de clientes, depoimentos ou até mesmo comentários positivos nas mídias sociais.

A maneira mais fácil de mostrar prova social em seu site é usando Smash Balloon. O Smash Balloon possui plugins que permitem incorporar conteúdo do Instagram, Facebook, Twitter e YouTube.

Ele também possui um plugin de Feed de Avaliações que você pode usar para exibir avaliações do Facebook, Tripadvisor, Yelp, Trustpilot, WordPress.org e Google.

No entanto, exibir muitos comentários e avaliações positivas em sua loja online ou site pode ocupar muito espaço.

É por isso que o Smash Balloon vem com layouts e modelos de carrossel integrados que você pode usar para criar sliders responsivos. Isso permite que você crie apresentações de slides de mídias sociais e avaliações com apenas alguns cliques.

Melhor ainda, o Smash Balloon buscará novo conteúdo automaticamente para que o slider sempre mostre as postagens mais recentes.

Outra opção é exibir o conteúdo de suas próprias contas de mídia social.

Se os visitantes gostarem do que veem, eles podem decidir segui-lo nas mídias sociais.

Para ajudá-lo a obter mais seguidores, o Smash Balloon vem com botões de call to action prontos que você pode adicionar aos seus sliders.

Para instruções detalhadas passo a passo, consulte nossos guias sobre como adicionar feeds de mídia social ao WordPress e como exibir avaliações do Google, Facebook e Yelp no WordPress.

Perguntas Frequentes Sobre Sliders Responsivos

Nossa equipe recebe muitas perguntas sobre o uso de sliders no WordPress. Abaixo estão as respostas para algumas das mais comuns que ouvimos de nossos leitores.

O que é um slider responsivo para WordPress?

Um slider responsivo é um componente de apresentação de slides que ajusta automaticamente seu tamanho e layout para se adequar a qualquer tela. Isso garante que ele tenha uma ótima aparência e seja fácil de usar em desktops, tablets e smartphones.

Sliders são ruins para SEO?

Embora sliders mal codificados possam desacelerar seu site e prejudicar o SEO, plugins modernos são construídos com o desempenho em mente. Por exemplo, um plugin como o Soliloquy usa carregamento preguiçoso (lazy loading) e estrutura HTML adequada para ser amigável ao SEO.

Também é importante adicionar texto alternativo descritivo às imagens dos seus slides. Isso ajuda os motores de busca a entender seu conteúdo.

Sliders desaceleram seu site?

Sliders podem afetar os tempos de carregamento da página se contiverem arquivos de imagem grandes e não otimizados. No entanto, os melhores plugins de slider para WordPress são leves e otimizados para velocidade.

Para garantir que seu slider não desacelere seu site, recomendamos compactar suas imagens antes de carregá-las no WordPress. Isso reduz o tamanho do arquivo sem sacrificar a qualidade.

Qual é o melhor plugin de slider responsivo para WordPress?

O melhor plugin depende das suas necessidades específicas. Recomendamos o Soliloquy como a melhor opção geral por sua facilidade de uso e desempenho rápido.

Se você deseja criar layouts de página personalizados, o bloco Carrossel de Imagens do SeedProd oferece mais flexibilidade de design. Para exibir feeds de mídia social ou avaliações de clientes em um slider, o Smash Balloon é a ferramenta perfeita.

Recursos Adicionais

Esperamos que este artigo tenha ajudado você a aprender como criar facilmente um slider responsivo no WordPress. Você também pode conferir estes outros guias em nosso site:

• Como Criar um Slider de Vídeo e Imagem no WordPress (O Jeito Fácil)
• Melhores Plugins de PDF para WordPress (Visualizador, Incorporar e Downloads)

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.