[Música] fala pessoal vamos para mais um vídeo hoje um vídeo bem interessante a gente vai estar explicando como alterar imagens das páginas clonadas utilizando a nossa ferramenta de substituição de conteúdo tá é uma dúvida muito frequente tá ela é bem simples eh de se utilizar a ferramenta e o que é um pouquinho mais complicado é entender como buscar no código esses links para fazer a substituição tá então a a ideia que a gente explicar esse passo a passo Então vamos lá vamos primeiro logar acessar nosso dashboard vou pegar a minha a página que já tá
clonada certo e aqui eu vou mostrar como fazer a alteração dessa imagem aqui tá Então a maneira mais simples a maneira mais tranquila de fazer isso como é eu vou clicar com direito o mouse com botão direito em cima da imagem e vou colocar aqui ó Copiar link de imagem certo aí é é importante vocês abrirem um bloquinho de notas para vocês irem anotando esses links tá então Ó esse aqui é o link dessa imagem tanto que se eu abrir aqui uma AB e colocar só o o link ele vai abrir só a imagem tá
certo que é o que tá na rede aí vocês agora vão precisar do link da imagem que vocês vão substituir certo então o ideal é que vocês tenham essa imagem salva no computador de vocês aí vocês venham aqui em Mídias e adicione Clic aqui e selecione a imagem que vocês querem incluir aqui tá bom aí basta selecionar ela vai vir para cá eu vou usar aqui no exemplo essa imagem quando você clica na imagem aqui ó ele mostra a URL dessa imagem tá vocês vão pegar essa URL e vão copiar E aí vocês podem fechar
e nós vamos aqui então colocar no nosso bloco de notas a a URL da imag que eu quero substituir Ou seja eu vou substituir essa imagem por essa imagem certo então agora aqui a gente vai lá em substituir conteúdo eu vou pegar o link o da primeira página da primeira imagem vou colar aqui e vou vir aqui e vou copiar o link da imagem na qual eu quero que que substitua a primeira imagem venho aqui colo e adiciono e pronto você já substituiu a imagem aqui tá vendo porém eh a substituição como eu falei ela
é bem simples é um processo bem tranquilo né E se você coloca o o a imagem já dentro da sua mídia aqui você já consegue fazer isso com maior facilidade Qual que é o problema que muita gente enfrenta E aí é onde que complica um pouco a ter que entender bem o código para você conseguir fazer isso E aí acaba também gerando um processo um pouco mais complexo algumas páginas que são feitas páginas de origem tá que são feitas no WordPress o próprio WordPress ele Ele pega a mesma imagem e ele cria automaticamente vários tamanhos
várias dimensões para que ela consiga se adaptar a diferentes tamanhos de telas tá então o que que acontece as pessoas normalmente vem aqui substitui a imagem vem aqui e substitui Pô legal já tá funcionando aí na hora que abre o site né em outro local né abrir uma outra aba funcionou beleza tá aqui a imagem substituída só que quando a tela ela é Men Menor De acordo com o tamanho da da tela aqui ainda ainda aqui ainda se adaptou mas vamos vamos fazer uma simulação se fosse num celular por exemplo para fazer aqui eu vou
dar um um f12 tá E vou colocar aqui eu quero fazer uma visualização em versão móvel é no meu caso aqui essa imagem ela ela se adaptou a todas as opções tá Mas pode acontecer de vocês fazerem uma substituição de uma imagem na qual quando ela ficar na versão mobile ela não não não ela altera e volta paraa imagem original Por que que isso acontece porque existem mais de uma imagem da mesma porém com dimensões diferentes e vocês precisam fazer a substituição de todas elas para que elessa imagem que vocês substituiram elas funciona em qualquer
dispositivo tá então por exemplo no caso do meu site aqui não foi necessário eu fiz uma simples alteração e mesmo na versão mobile quanto na versão né desktop computador normal a substituição ocorreu tá eh Vamos tentar trocar essa imagem aqui vamos ver como é que ela se comporta deixa eu ver se tem alguma outra vamos vamos vamos trocar essa daqui vamos ver como é que fica vou fechar aqui vamos lá a mesma coisa vou fazer o processo novamente vou clicar com direito em cima da imagem eu vou copiar o link da imagem vou no bloquinho
de notas aqui esse aqui agora eu posso eu vou eu vou usar mesm imagem de baixo tá só vou substituir a de cima colo aqui e aí a imagem que eu vou substituir vai ser a mesma tá como exemplo mas no caso vocês refar o processo colocaram coloquem a outra imagem aqui em mídias peguem o link E aí cola aqui de novo só para vocês não esquecerem tá eu falo eu dou o exemplo a dica do bloco de notas para vocês não esquecer mas eh cada um salva os links da forma como como desejar Tá
bom então eu venho aqui em substituir conteúdo e mais uma vez eu vou colocar aqui o link original certo venho aqui no bloquinho de notas e vou colocar o link da imagem que eu quero substituir vou adicionar vamos ver como é que vai se comportar ó alterou Ok vamos vamos ver agora na versão mobile se ele também vai alterar vamos fazer aqui uma simulação ah ok Olha que o exemplo agora ficou interessante essa imagem aqui ó na versão mobile Ela voltou para pra imagem original tá eu vou voltar agora pra versão do computador e ó
tá que eu substituí Como eu faço essa correção como é que eu faço para poder localizar todas as imagens de todas as dimensões para fazer essa alteração eu venho aqui agora na na nossa na nossa plataforma vou copiar aqui a vou pegar né Essa aqui lembre-se que é a a imagem original né aqui ó se a gente pegar pelo pelo endereçamento dela aqui ó tá banner about JPEG Então vamos vamos usar como referência o nome desse arquivo tá eu não vou pegar o ponto JPEG Porque isso pode diminuir na hora que eu vou fazer a
pesquisa vou pegar só o nome do arquivo mesmo tá bom sem o ponto sem nada copiei eu vou vir aqui em código fonte aqui na parte de código fonte vai mostrar toda a parte de código do da página colonada eu vou dar um control F para poder loc para abrir o localizador e vou dar um control V para colar o nome do arquivo tá vendo que ele aparece três vezes dentro da do site e na verdade ele aparecia quatro né só que um eu já fiz alteração Então eu preciso fazer alteração dos outros três e
observem que olha só esse aqui ele ficou é 300 por 300 esse aqui ele é 768 por 768 esse aqui ele é 150 por 150 Ou seja ainda tem três arquivos desse aqui com outras dimensões que eu preciso fazer a substituição Tá certo então eu vou o quê eu vou precisar vou abrir o meu bloquinho de notas aqui certo e vou listar vou colocar todos eles aqui pra gente poder fazer substituição então o primeiro aqui eu já troquei vamos aqui pegar o segundo Então vou pegar o nome do arquivo inteirinho tá vendo ó https dois
pontos barra barra até JPEG que é o nome do arquivo 300 por 300 vou copiar vou colar aqui pulo uma linha vamos voltar agora tem ó 768 vou vir aqui vou copiar esse código CTR C vou colar aqui e por fim faltou 150 por 150 aqui né então vamos aqui ó https até JPEG e colei vou dar um espacinho só para ficar mais clara a visualização e esse aqui é o link que eu quero substituir tá então esse aqui eu já troquei vamos agora precisar trocar os outros três E aí o processo é simples né
é só copiar vem substituir conteúdo atual E aí como eu vou usar a mesma imagem eu posso só copiar daqui mesmo tá adiciono vou pegar agora aqui o o terceiro substituir conteúdo a mesma coisa vou vir aqui vou copiar esse mais um e por fim o última a última dimensão vem aqui substitui conteúdo mais um e vou usar a mesma imagem para fazer a substituição Então tá vendo que o processo é a primeira imagem como ela é de ela se adapta né a programação da página de origem ela se adapta então só tem uma imagem
não tem outras agora essa daqui ele já o próprio WordPress da página de origem criou automaticamente mais de uma dimensão para aquela pudesse se adaptar em qualquer dispositivo E aí acaba que você precisa fazer substituição de todos esses links para que você consiga de fato substituir a imagem não só na versão desktop né vou voltar para pra versão PC que é aqui ó ela tá alterada aqui como também vou atualizar agora vamos ver se deu certo na versão mobile Olha só agora na versão mobile também fez a substituição certo então é isso gente quando tiver
essa necessidade de fazer alteração de imagens Vocês precisam prestar atenção se a imagem que vocês estão substituindo elas elas no no código que o que importa é o que tá no código se ela possui mais de uma versão ou não se é só uma nesse caso aqui dessa primeira imagem só tinha uma versão então precisei substituir apenas uma vez aqui que é esse primeiro código aqui já essa segunda imagem eu precisei fazer a substituição mais de uma vez aqui no caso quatro vezes para poder alterar todas as versões dessa imagem dentro dessa página né ou
seja agora sim ele vai abrir a mesma eh imagem em qualquer dispositivo Tá certo gente é isso e qualquer dúvida nosso suporte tá aí à disposição beleza valeu obrigado até o próximo vídeo
