Deseja mostrar suas habilidades de edição de fotos de uma forma que pareça interativa e profissional? Um controle deslizante de fotos antes e depois permite que os visitantes arrastem uma alça para revelar a transformação, o que torna seu portfólio mais envolvente do que imagens estáticas lado a lado.
A melhor parte é que você pode adicionar esse efeito ao WordPress com uma solução simples e sem código, e eu o orientarei passo a passo.
Etapas rápidas para adicionar um controle deslizante de fotos antes e depois no WordPress:
Como funciona o efeito de foto antes e depois?
Um controle deslizante de fotos antes e depois permite que os visitantes arrastem um divisor para revelar uma imagem sobre a outra. Em vez de fotos estáticas lado a lado, os usuários controlam a quantidade de cada versão que veem, tornando a transformação mais envolvente.
Por exemplo:
- Os dentistas podem destacar os resultados antes e depois do tratamento.
- As marcas de produtos de beleza podem mostrar o impacto de um produto.
- As lojas de comércio eletrônico podem comparar os recursos dos produtos.
É uma maneira simples, mas poderosa, de mostrar as alterações diretamente em seu site. A seguir, mostrarei como adicionar esse efeito no WordPress.
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. Crie seu 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, blocos e seções que podem ser arrastados e soltos 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
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, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
