{"id":371818,"date":"2023-04-25T12:32:00","date_gmt":"2023-04-25T09:32:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371818"},"modified":"2023-04-25T12:32:14","modified_gmt":"2023-04-25T09:32:14","slug":"a-maneira-facil-de-adicionar-o-controle-deslizante-antes-e-depois","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/a-maneira-facil-de-adicionar-o-controle-deslizante-antes-e-depois\/","title":{"rendered":"A maneira f\u00e1cil de adicionar o controle deslizante Antes e Depois"},"content":{"rendered":"\n

As imagens antes e depois s\u00e3o amplamente utilizadas para fins de marketing em uma ampla gama de ind\u00fastrias<\/strong>. N\u00e3o h\u00e1 palavras que possam descrever melhor o efeito de um determinado processo do que uma imagem que mostra precisamente como algu\u00e9m ou algo parecia antes e depois desse processo. Mesmo em neg\u00f3cios que n\u00e3o giram em torno de produtos cujos efeitos s\u00e3o vis\u00edveis, \u00e9 poss\u00edvel usar esse recurso de forma bem-humorada.<\/p>\n

Digamos que voc\u00ea esteja administrando um restaurante \u2013 voc\u00ea pode mostrar como uma pessoa fica antes de comer em seu pal\u00e1cio e como ela fica encantada depois de provar suas iguarias. As possibilidades antes e depois do slider em termos de apresenta\u00e7\u00e3o dos benef\u00edcios e vantagens dos seus produtos\/servi\u00e7os s\u00e3o ilimitadas<\/strong>. Tudo depende da sua imagina\u00e7\u00e3o.<\/p>\n

Assim como adicionar efeito de paralaxe<\/a> \u00e0s suas p\u00e1ginas faz com que seu site pare\u00e7a moderno, o controle deslizante antes e depois dificulta o esquecimento, pois as imagens contam mais do que 1000 palavras.<\/p>\n

Al\u00e9m disso, voc\u00ea pode adicionar esse recurso ao seu site sozinho. Neste artigo, mostraremos como criar um controle deslizante antes e depois com o popular widget de compara\u00e7\u00e3o antes\/depois<\/a> gratuito .<\/p>\n

Fique ligado para ler mais sobre:<\/p>\n<\/p>\n

Adicionando o slider antes e depois com Qi Addons para Elementor<\/h2>\n

Qi Addons for Elementor<\/a> \u00e9 uma ferramenta intuitiva que permite adicionar uma ampla variedade de elementos lindos<\/strong> ao seu site sem esfor\u00e7o. Ele vem com uma interface muito pr\u00e1tica e amig\u00e1vel<\/strong>, e tanto os novatos quanto os usu\u00e1rios avan\u00e7ados achar\u00e3o f\u00e1cil de usar. O que \u00e9 particularmente \u00f3timo no Qi \u00e9 o fato de que, al\u00e9m de tantos recursos \u00fateis, ele tamb\u00e9m oferece uma pitada de eleg\u00e2ncia contempor\u00e2nea.<\/p>\n

O processo de instala\u00e7\u00e3o<\/a> dos QI Addons for Elementor n\u00e3o \u00e9 diferente de qualquer outra instala\u00e7\u00e3o de plug-in. Se voc\u00ea tiver alguma d\u00favida sobre isso, verifique o link que fornecemos acima e voc\u00ea tamb\u00e9m pode escrever para n\u00f3s na se\u00e7\u00e3o de coment\u00e1rios.<\/p>\n

\"A<\/a><\/p>\n

Como este \u00e9 um plug-in Elementor, certifique-se de alternar para o editor Elementor ao criar uma nova postagem<\/strong>. Todos os widgets Qi Addons ser\u00e3o exibidos ordenadamente no menu de elementos do lado esquerdo<\/strong>. Basta rolar o menu para encontr\u00e1-los.<\/p>\n

O widget Slider Antes e Depois<\/a> oferece uma maneira simples e eficaz de mostrar duas imagens no mesmo quadro<\/strong>. Encontre-o no menu da barra lateral \u00e0 esquerda, digitando o nome do widget no campo de pesquisa ou navegando pelos widgets no menu.<\/p>\n

\"A<\/a><\/p>\n

Para adicionar o Slider de compara\u00e7\u00e3o Antes\/Depois, arraste e solte o elemento Elementor no local desejado. Quando o widget for adicionado, todas as configura\u00e7\u00f5es estar\u00e3o do lado esquerdo<\/strong> e dentro das abas Conte\u00fado e Estilo est\u00e3o todas as op\u00e7\u00f5es relacionadas ao controle deslizante<\/strong>.<\/p>\n

\"A<\/a><\/p>\n

Agora, voc\u00ea precisa adicionar as imagens antes e depois ao controle deslizante<\/strong>. Primeiro, estamos adicionando a imagem anterior – passe o mouse sobre o campo da imagem e a op\u00e7\u00e3o Escolher imagem ser\u00e1 exibida ou apenas clique no pequeno \u00edcone de mais no meio do campo.<\/p>\n

\"A<\/a><\/p>\n

Voc\u00ea pode escolher uma imagem da biblioteca de m\u00eddia ou fazer upload de uma imagem para sua biblioteca de m\u00eddia, se necess\u00e1rio<\/strong>. Basta arrastar e soltar a imagem selecionada e na biblioteca de m\u00eddia, se ainda n\u00e3o estiver l\u00e1, selecione-a e escolha.<\/p>\n

\"A<\/a><\/p>\n

Depois de inserir as imagens desejadas, voc\u00ea pode continuar personalizando o controle deslizante antes\/depois alterando o texto que ser\u00e1 exibido no c\u00edrculo no meio do controle deslizante<\/strong>. Voc\u00ea pode escrever uma instru\u00e7\u00e3o aqui, ou uma mensagem mais cativante, depende de voc\u00ea e do estilo do seu site. Voc\u00ea tamb\u00e9m pode escolher se deseja que o texto seja alinhado verticalmente ou horizontalmente.<\/p>\n

Se voc\u00ea deseja ajustar onde a borda entre a imagem anterior e posterior aparecer\u00e1 no controle deslizante, voc\u00ea pode inserir o valor de deslocamento desejado no campo<\/strong>. O valor padr\u00e3o \u00e9 50%, o que significa que a borda padr\u00e3o est\u00e1 bem no meio da imagem. Esta \u00e9 a apar\u00eancia do controle deslizante se voc\u00ea ajustar o deslocamento:<\/p>\n

\"A<\/a><\/p>\n

Agora, \u00e9 hora de mais ajustes do controle deslizante antes e depois. Vamos ver o que mais voc\u00ea pode personalizar para deixar o controle deslizante exatamente como voc\u00ea precisa. Clique na guia Estilo para explorar mais op\u00e7\u00f5es<\/strong>.<\/p>\n

\"A<\/a><\/p>\n

Se voc\u00ea quiser mover a al\u00e7a circular do centro da imagem, basta usar o controle deslizante para ajustar o valor Handle Top Offset<\/strong>. Voc\u00ea ver\u00e1 imediatamente as altera\u00e7\u00f5es ao vivo para que possa decidir facilmente o que funciona melhor para voc\u00ea. Voc\u00ea tamb\u00e9m ajustar\u00e1 o tamanho do c\u00edrculo da mesma maneira, assim como a borda entre a vers\u00e3o antes\/depois da imagem<\/strong>.<\/p>\n

\"A<\/a><\/p>\n

Voc\u00ea tamb\u00e9m pode clicar na Cor do Texto Nabdle para criar seu tom de cor para o texto no c\u00edrculo<\/strong>, tamb\u00e9m escolha a fonte do texto da mesma maneira<\/strong>. Por fim, voc\u00ea tamb\u00e9m pode personalizar a cor do c\u00edrculo<\/strong> da mesma maneira.<\/p>\n

\"A<\/a><\/p>\n

Explorando as op\u00e7\u00f5es avan\u00e7adas<\/h2>\n

Na guia Avan\u00e7ado, voc\u00ea encontrar\u00e1 muito mais op\u00e7\u00f5es para tornar o controle deslizante mais atraente e cativante. Essas op\u00e7\u00f5es n\u00e3o s\u00e3o exclusivas apenas para este widget, elas s\u00e3o op\u00e7\u00f5es padr\u00e3o do Elementor que voc\u00ea pode usar para editar outros widgets em uma p\u00e1gina tamb\u00e9m.<\/p>\n

Vamos ilustrar alguns dos mais interessantes. Sinta-se \u00e0 vontade para testar todas as op\u00e7\u00f5es, pois voc\u00ea ver\u00e1 todas as altera\u00e7\u00f5es feitas ao vivo, para que possa aprender instantaneamente o que cada op\u00e7\u00e3o faz com o controle deslizante e se funciona para voc\u00ea.<\/p>\n

\"A<\/a><\/p>\n

Se voc\u00ea abrir o menu Avan\u00e7ado, ver\u00e1 as op\u00e7\u00f5es para definir margem e preenchimento<\/strong>. Voc\u00ea notar\u00e1 um pequeno \u00edcone de laptop ao lado de cada op\u00e7\u00e3o que permite definir valores diferentes para margem e preenchimento em diferentes dispositivos – laptop, tablet ou celular.<\/p>\n

\"A<\/a><\/p>\n

Efeitos de movimento s\u00e3o particularmente interessantes e voc\u00ea tem uma escolha muito ampla de mais de 35 efeitos de movimento para selecionar. Voc\u00ea tamb\u00e9m tem a possibilidade de definir diferentes anima\u00e7\u00f5es para serem exibidas em diferentes dispositivos<\/strong>. Depois de escolher o tipo de anima\u00e7\u00e3o, voc\u00ea tamb\u00e9m pode ajustar sua dura\u00e7\u00e3o e atraso, se achar necess\u00e1rio.<\/p>\n

\"A<\/a><\/p>\n

Agora clique na guia Transformar para descobrir mais efeitos que voc\u00ea pode usar<\/strong>. De girar para inclinar e invers\u00e3o horizontal e vertical, h\u00e1 muitas coisas que voc\u00ea pode fazer para alterar a exibi\u00e7\u00e3o do controle deslizante.<\/p>\n

\"A<\/a><\/p>\n

Na guia Borda, voc\u00ea encontrar\u00e1 op\u00e7\u00f5es que permitir\u00e3o decorar a lateral adicionando bordas de imagem de sombra nas cores que voc\u00ea selecionar<\/strong>. Voc\u00ea tamb\u00e9m pode optar por adicionar um efeito de sombra ao redor da caixa de slide e definir a sa\u00edda do efeito de sombra.<\/p>\n

\"A<\/a><\/p>\n

As op\u00e7\u00f5es na guia M\u00e1scara s\u00e3o muito \u00fateis. Voc\u00ea pode definir aqui para que o controle deslizante seja exibido em diferentes formas<\/strong> – c\u00edrculo, flor, esbo\u00e7o, tri\u00e2ngulo, bolha, hex\u00e1gono ou at\u00e9 mesmo adicionar uma forma personalizada. Tamb\u00e9m \u00e9 poss\u00edvel ajustar o tamanho e a posi\u00e7\u00e3o da forma selecionada.<\/p>\n

\"A<\/a><\/p>\n

Preste aten\u00e7\u00e3o especial \u00e0 aba Responsivo<\/strong>, pois \u00e9 muito importante que voc\u00ea escolha o controle deslizante para n\u00e3o ser exibido nos dispositivos selecionados<\/strong>.<\/p>\n

\"A<\/a><\/p>\n

Esta \u00e9 a apar\u00eancia do controle deslizante na p\u00e1gina depois que o ajustamos para nossas necessidades:<\/p>\n

\"A<\/a><\/p>\n

Para mais informa\u00e7\u00f5es d\u00ea uma olhada neste v\u00eddeo:<\/p>\n