Você é estilista, decorador, retocador de imagens ou outro profissional que precisa mostrar os resultados visuais do seu trabalho? Um slider de antes e depois, em destaque no seu site, é fácil de usar e comunica valor instantaneamente. Infelizmente, para os usuários do WordPress, a plataforma não tem um recurso de slider nativo.
Mas não é impossível adicionar um slider ao WordPress. Você tem três opções: usar um plugin de terceiros, usar um widget externo leve e gratuito ou criar um slider do zero escrevendo código personalizado.
Este artigo descreve como adicionar um slider de antes e depois no WordPress usando os três métodos, para que você saiba qual deles é o ideal para as suas necessidades.
Opção 1: instale um plugin de slider para WordPress
Uma das maneiras mais comuns de adicionar um slider de antes e depois é usar um plugin do WordPress. No entanto, essa abordagem traz algumas desvantagens.
Alguns plugins adicionam CSS e JavaScript extras em todo o seu site, o que aumenta o tempo de carregamento das páginas. Além disso, construtores de páginas “pesados”, como o Elementor, obrigam você a gerenciar o slider por meio de shortcodes complexos (códigos baseados em texto, específicos do WordPress), o que pode ser um pesadelo para usuários iniciantes. Se você excluir acidentalmente parte do código, o slider para de funcionar imediatamente. Além disso, alguns plugins adotam um modelo de negócios freemium, deixando recursos avançados disponíveis apenas mediante pagamento.
Os plugins não servem para todos os usuários, mas são uma solução sólida se você entende de tecnologia e se sente à vontade com o WordPress. Siga estas instruções para instalar um plugin de antes e depois para WordPress:
- Instale o plugin: acesse o painel do WordPress e clique em Plugins. Digite “before-and-after slider” na barra de Pesquisa e selecione o plugin que deseja usar nos resultados da busca. (Há dezenas deles. Confira uma lista dos melhores plugins do WordPress para outros tipos de tarefas.)
Siga as instruções na tela para instalar o plugin. (As instruções exatas de instalação dependem do plugin específico.)
Observe que, embora muitos plugins sejam gratuitos, outros têm um custo único. Na maioria dos casos, você só pode usá-los com um plano pago do WordPress.
- Crie o slider de antes e depois: abra o plugin no painel do WordPress. Selecione a opção para criar um novo slider de antes e depois. Faça o upload das suas imagens de antes e depois. Para seguir as melhores práticas, use imagens com o mesmo enquadramento e as mesmas dimensões.
- Personalize o slider de antes e depois: a maioria dos plugins permite ajustar configurações como legendas das imagens, posição inicial, aparência do controle deslizante e orientação do slider. Ajuste as configurações e salve.
- Adicione o slider de antes e depois ao seu site WordPress: abra a página do WordPress na qual você deseja que o slider apareça. Dependendo do plugin, você pode adicioná-lo criando um bloco dedicado do WordPress ou inserindo um shortcode na página.
Pro Tip
Precisa de mais orientações sobre como usar plugins do WordPress? “Como usar o WordPress” é um tutorial detalhado que oferece informações essenciais sobre o uso de plugins, formulários, temas e muito mais no WordPress.
Opção 2: use um widget de slider gratuito e sem código (recomendado)
Se você não quer lidar com shortcodes tediosos ou plugins pesados que deixam o seu site WordPress lento, a melhor opção é usar um widget de slider sem código. O Widget Slider de Antes e Depois da Jotform é totalmente gratuito e fácil de usar. Como o widget é serverless, ele não afeta em nada a velocidade do seu site. Além disso, funciona perfeitamente em computadores e smartphones.
O Widget Slider de Antes e Depois da Jotform oferece uma interface visual, sem necessidade de programação. Basta enviar duas imagens para o criador de widgets, personalizar as cores do controle de arrasto e definir a posição inicial padrão. Depois, é só copiar o código e colocá-lo no WordPress.
Veja mais detalhes:
- Adicione os pares de imagens: acesse a página do Widget Slider de Antes e Depois da Jotform e faça o upload das suas imagens de antes e depois na caixa de configurações do widget. Edite o título do widget e especifique o tipo de interação que deseja oferecer (arrastar e clicar ou passar o mouse). Clique ou toque em Continuar.
- Personalize as configurações do slider: você pode ajustar configurações como a proporção da imagem, o raio dos cantos, a espessura do divisor e as cores do slider. Role a página para baixo para selecionar todas as suas especificações.
- Obtenha o código de incorporação do widget de slider: clique ou toque em Try It on Your Website for Free (Experimente gratuitamente no seu site). A Jotform fornecerá um código de incorporação para o widget de slider. Clique ou toque em Copiar. A Jotform pedirá que você se cadastre ou faça login para obter o código.
- Cole o código de incorporação do slider no WordPress: acesse o seu site WordPress e adicione um bloco de HTML personalizado a partir do Inseridor de blocos. Cole o código de incorporação no bloco de HTML. Clique ou toque em Atualizar. O WordPress inserirá automaticamente o widget de slider de antes e depois no seu site WordPress.
Opção 3: programe um slider personalizado em HTML/CSS
Se você é um purista do WordPress e prefere evitar plugins de terceiros ou widgets externos, pode criar um slider do zero, usando código puro.
Embora esse método seja tecnicamente gratuito e nativo do WordPress, ele não é fácil. Você precisará ter experiência avançada em programação, principalmente se quiser que os visitantes do site consigam usar o slider no smartphone. Além disso, um único erro de código pode quebrar o slider e prejudicar a responsividade em smartphones, entre outros problemas.
Veja como adicionar um slider de antes e depois no WordPress com código personalizado:
- Faça o upload das imagens de antes e depois: adicione as duas imagens à Biblioteca de mídia do WordPress.
- Crie o código HTML/CSS personalizado para o slider: escreva o código HTML/CSS para estruturar e estilizar o slider. Talvez você também precise de JavaScript para adicionar interatividade de arrastar e deslizar.
Você pode escrever esse código por conta própria, pedir ajuda a um colega com experiência em programação ou usar uma ferramenta de IA para gerar o código.
Copie o código.
- Adicione o código ao seu site WordPress: no seu site WordPress, adicione um bloco de HTML personalizado e cole o seu código no bloco. Adicione CSS e JavaScript conforme necessário por meio do tema do WordPress ou da configuração do site.
Aprimore o seu site WordPress com widgets inteligentes e sem código
Se você quer priorizar a velocidade e a segurança do site, manter os custos baixos e evitar códigos complexos, o Widget Slider de Antes e Depois da Jotform é uma excelente maneira de adicionar conteúdo de mídia interativo e rico ao seu site. Ele é totalmente gratuito, ideal para iniciantes e profissionais, e não exige que você escreva nenhum código.
Mas isso não é tudo o que a Jotform tem a oferecer!
No diretório de Widgets para sites da Jotform, você encontra mais de 150 widgets gratuitos para sites que podem aprimorar o seu site WordPress. Por exemplo, o Widget Contador de Visitantes é uma ótima forma de mostrar a popularidade do seu site, enquanto o Widget Temporizador de Contagem Regressiva ajuda a criar senso de urgência em torno de eventos e campanhas importantes.
A Jotform também oferece milhares de formulários para WordPress, como formulários de contato, formulários de geração de leads e formulários de pedido. Adicione-os ao seu site para coletar informações importantes dos visitantes.
A Jotform tem um plano gratuito. Experimente para começar a explorar os widgets e ver como é fácil melhorar a funcionalidade do seu site WordPress sem comprometer o desempenho nem escrever código.
Este artigo é para blogueiros, donos de portfólios e agências que usam WordPress e querem mostrar transformações visuais (como retoque de fotos, redesigns de interface ou reformas) sem deixar o site lento com plugins pesados nem lidar com shortcodes complexos.
Enviar Comentário: