Deseja adicionar um controle deslizante de fotos antes e depois ao seu site WordPress?
Um controle deslizante de comparação de imagens pode ajudar a mostrar como seus produtos ou serviços funcionam antes e depois de serem usados pelos clientes. Isso dá mais credibilidade à sua marca e pode levar os clientes em potencial a fazer uma compra.
Neste artigo, mostraremos como adicionar facilmente controles deslizantes de imagem antes e depois ao WordPress sem código.
Como funciona o efeito de foto antes e depois?
O efeito de foto antes e depois permite que os visitantes do site cliquem em um divisor interativo que faz a transição de uma imagem para outra.
Digamos que você tenha duas versões da mesma foto com pequenas diferenças: foto A e foto B. Um controle deslizante de antes e depois as coloca lado a lado ou em cima uma da outra com uma linha divisória central.
Ao mover a direção do controle deslizante, você verá mais de uma imagem e menos da outra.
Essa é uma maneira fantástica de comparar imagens diferentes lado a lado. Por exemplo, os sites de odontologia podem demonstrar os dentes de um cliente antes e depois do trabalho odontológico. Ou você pode comparar os efeitos de antes e depois de um tratamento de beleza específico.
Como alternativa, os sites de comércio eletrônico podem usar controles deslizantes de fotos antes e depois para comparar os recursos de diferentes produtos.
A pergunta que fica é: como adicionar controles deslizantes de fotos antes e depois no WordPress? Vamos descobrir.
Como adicionar controles deslizantes de fotos antes e depois no WordPress
Normalmente, adicionar widgets de controle deslizante de fotos e apresentações de slides ao seu site envolve o uso de Javascript, Jquery, HTML, CSS e outras linguagens de codificação. Muitos proprietários de sites não sabem como escrever esse código, por isso recorrem a desenvolvedores da Web para obter ajuda, o que pode ser bastante caro.
Felizmente, há maneiras mais econômicas de adicionar novos recursos ao seu site WordPress. Com alguns dos melhores plug-ins do WordPress, você pode aprimorar facilmente seu site sem gastar uma fortuna.
O tutorial abaixo mostra como adicionar controles deslizantes de fotos antes e depois com o SeedProd.
O SeedProd é o melhor construtor de sites WordPress com funcionalidade de arrastar e soltar. Ele permite que você use modelos predefinidos e um construtor de páginas visual para criar layouts flexíveis do WordPress sem código.
Com seus blocos de arrastar e soltar do WordPress, você pode aprimorar seu site com recursos valiosos, incluindo:
- Controles deslizantes antes e depois
- Galerias de imagens avançadas
- Tabelas de preços
- Formulários Optin
- Botões de chamada para ação
- Temporizadores de contagem regressiva
- Conteúdo com guias
- Brindes
- Formulários de contato
- E muito mais.
Você também pode usar o SeedProd para criar uma página de lançamento em breve e colocar o WordPress em modo de manutenção. Além disso, tudo o que você cria é 100% responsivo para dispositivos móveis, garantindo que seu site seja fácil de usar em todos os dispositivos móveis.
Clique no botão abaixo para fazer download do plug-in SeedProd e siga as etapas para incorporar um controle deslizante de fotos antes e depois em seu site.
Etapa 1. Instalar e ativar o SeedProd
Depois de fazer o download do plug-in, localize a guia Downloads em sua conta do SeedProd e copie sua chave de licença.
Agora, vá em frente e carregue o plug-in em seu site do WordPress. Se precisar de ajuda, você pode seguir este guia passo a passo sobre como instalar um plug-in do WordPress.
Depois que o SeedProd estiver instalado, navegue até SeedProd " Settings (Configurações ) no administrador do WordPress e cole a chave de licença que você copiou anteriormente.
Clique no botão Verify Key (Verificar chave ) para ativar sua licença e, em seguida, passe para a etapa 2.
Etapa 2. Criar o layout do WordPress
Depois de instalar o SeedProd, você precisará decidir que tipo de layout deseja criar. Você pode criar um tema personalizado do WordPress ou criar páginas de destino de alta conversão com o editor de soltar e soltar do SeedProd.
A opção Theme Builder é uma ótima maneira de substituir o design de seu site existente por um novo tema do WordPress adaptado às necessidades de sua empresa. Ele gera todos os arquivos de modelo de um tema típico do WordPress e permite que você personalize cada parte visualmente com seu poderoso construtor de páginas.
Siga este tutorial para criar um tema WordPress personalizado com o SeedProd.
Como alternativa, você pode usar o Landing Page Builder para criar páginas de destino independentes que funcionam perfeitamente com seu tema atual do WordPress. Ele usa o mesmo editor visual que o construtor de temas e é uma tática fantástica de geração de leads para qualquer site.
Aqui está um guia sobre como criar uma página de destino no WordPress usando o SeedProd.
Depois de criar um novo layout, você pode passar para a etapa 3 e adicionar um controle deslizante de antes e depois ao seu design.
Observação: para este guia, criaremos um tema personalizado do WordPress e editaremos o modelo da página inicial.
Etapa 3. Adicionar o bloco Antes e Depois do WordPress
Depois de criar seu layout, abra a página que deseja editar com o construtor de páginas do SeedProd.
Como estamos editando a página inicial do nosso tema do WordPress, acessaremos SeedProd " Theme Builder e clicaremos em Edit Design no modelo Homepage.
Na tela seguinte, você verá um layout semelhante ao mostrado abaixo:
À direita, há uma visualização ao vivo do modelo escolhido na etapa 2 e, à esquerda, há blocos e seções que você pode arrastar e soltar no design.
Personalizar qualquer elemento é muito fácil.
Por exemplo, você pode editar os cabeçalhos clicando neles e digitando o novo conteúdo diretamente na visualização ao vivo.
Ou você pode editar o texto no painel de configurações no lado esquerdo, que inclui inúmeras opções de personalização.
Portanto, personalize seu modelo até que ele comece a ter a aparência que você deseja.
Agora vamos ver como adicionar recursos que seu modelo pode não incluir automaticamente. Por exemplo, o Website Kit que escolhemos não tem um controle deslizante de fotos antes e depois, portanto, precisaremos adicioná-lo nós mesmos.
Para fazer isso, percorra os blocos do WordPress à esquerda até encontrar o Before After Toggle. Em seguida, arraste-o para a posição em sua visualização ao vivo.
Ao clicar no bloco, você abrirá suas opções de personalização no painel de configurações do lado esquerdo. É aqui que você pode adicionar suas imagens de antes e depois, alterar o estilo e muito mais.
Vamos começar adicionando a primeira imagem, que normalmente será sua foto "antes". Para fazer isso, clique na opção Use Your Own Image (Usar sua própria imagem ) e carregue uma nova foto ou escolha uma da biblioteca de mídia do WordPress.
Agora repita essa etapa para a imagem "depois". Você pode editar os rótulos de cada imagem substituindo os nomes nos campos de texto.
Com suas imagens no lugar, vamos examinar mais algumas configurações.
No cabeçalho Orientation (Orientação ), é possível tornar o controle deslizante antes e depois vertical em vez de horizontal.
Você também pode fazer com que o controle deslizante se mova ao passar o cursor sobre a imagem e aplicar uma sobreposição de cores às fotos.
Ao abrir o título Comparison Handle (Alça de comparação ), você verá configurações para alterar a cor, a largura, o tamanho do pixel do raio do controle deslizante e muito mais.
Você pode encontrar ainda mais configurações clicando na guia Advanced (Avançado ). Por exemplo, você pode alterar a tipografia e a cor do rótulo, ajustar o espaçamento e os atributos do bloco e ocultar determinados elementos em telas de dispositivos móveis.
Quando estiver satisfeito com a aparência do controle deslizante de fotos antes e depois, clique no botão Save (Salvar ) no canto superior direito da tela e clique em Publish (Publicar).
Se estiver criando uma landing page, agora você pode visualizar sua página e ver o controle deslizante de imagens antes e depois em ação. Mas se estiver criando um tema personalizado do WordPress, precisará concluir a etapa 4.
Etapa 4. Ativar suas alterações
Mesmo que suas alterações tenham sido salvas e publicadas, você ainda precisa ativar o tema do WordPress. Não se preocupe; essa etapa é rápida e fácil.
Acesse SeedProd " Theme Builder no painel do WordPress e coloque a opção Enable SeedProd Theme na posição "Yes" (Sim). É isso aí!
Agora você pode acessar o front-end do seu site e dar uma olhada no novo controle deslizante de imagem.
Perguntas frequentes sobre o controle deslizante de fotos antes e depois
Não, normalmente não são necessárias habilidades de codificação para usar um plug-in de controle deslizante de fotos antes e depois no WordPress. Esses plug-ins são projetados para serem fáceis de usar e geralmente oferecem uma interface visual para carregar imagens e personalizar o controle deslizante.
A maioria dos plug-ins de controle deslizante de fotos antes e depois é projetada para ser responsiva a dispositivos móveis. Isso significa que eles se ajustam automaticamente para se adequar ao tamanho da tela do dispositivo em que o site está sendo visualizado.
Normalmente, você pode usar vários controles deslizantes antes e depois na mesma página. No entanto, o processo exato para fazer isso pode variar dependendo do plug-in específico que você estiver usando.
Aí está!
Agora você sabe como adicionar controles deslizantes de fotos antes e depois ao seu site WordPress. Há muitas maneiras de fazer esse recurso funcionar para o sucesso de sua empresa.
Então, o que está esperando?
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
