{"id":253889,"date":"2022-08-06T13:02:00","date_gmt":"2022-08-06T10:02:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=253889"},"modified":"2021-10-29T03:56:40","modified_gmt":"2021-10-29T00:56:40","slug":"como-tornar-imagens-e-videos-responsivos-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-tornar-imagens-e-videos-responsivos-no-wordpress\/","title":{"rendered":"Como tornar imagens e v\u00eddeos responsivos no WordPress?"},"content":{"rendered":"<p>Em 2015, o Google fez uma grande mudan\u00e7a em seus algoritmos de mecanismo de busca, o que tornou o design responsivo um dos fatores para a classifica\u00e7\u00e3o do <strong><a href=\"https:\/\/www.ggtaskers.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">site<\/a><\/strong>. Pela primeira vez em 2016 em dispositivos m\u00f3veis, a navega\u00e7\u00e3o na web ultrapassar\u00e1 a \u00e1rea de trabalho e \u00e9 mais cr\u00edtico do que nunca que seu site possa acomodar todos os tamanhos de tela sem sacrificar a usabilidade e a funcionalidade. Esse fato pode justificar por que o Web design responsivo \u00e9 importante para uma empresa. Voc\u00ea pode criar um site responsivo aqui. Se voc\u00ea j\u00e1 tem um site, mas precisa torn\u00e1-lo responsivo, voc\u00ea pode procurar uma consultoria especializada.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/XWTAJLAJrK8\" frameborder=\"0\"><\/iframe><\/div>\n<p>Quando voc\u00ea est\u00e1 usando o WordPress, existem diferentes plug-ins que podem ajud\u00e1-lo a tornar suas imagens e v\u00eddeos responsivos. Mas alguns plug-ins podem comprometer sua seguran\u00e7a, ent\u00e3o \u00e9 melhor tornar as imagens e v\u00eddeos responsivos usando c\u00f3digo CSS. Neste blog, vou mostrar como voc\u00ea pode tornar a imagem e os v\u00eddeos do seu site WordPress responsivos.\u00a0<\/p>\n<p><strong>Etapa um:<\/strong> voc\u00ea precisa ir para o back-end do seu site ou para WordPress, \u00e9 conhecido como wp-admin. Este \u00e9 o login universal para o site WordPress. Suponha que seu site seja www.example.com, ent\u00e3o voc\u00ea precisa digitar o URL como <a href=\"http:\/\/www.example.com\/wp-admin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">www.example.com\/wp-admin<\/a>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8697a96.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8697a96.png\" alt=\"Como tornar imagens e v\u00eddeos responsivos no WordPress?\" ><\/a><\/p>\n<p><strong>Etapa dois:<\/strong> voc\u00ea precisa certificar-se de fazer login como administrador. Existem diferentes fun\u00e7\u00f5es no WordPress que voc\u00ea pode atribuir ao usu\u00e1rio e tamb\u00e9m h\u00e1 um login de administrador. Voc\u00ea tamb\u00e9m pode atribuir aos usu\u00e1rios acesso de administrador. Portanto, voc\u00ea precisa ter certeza de fazer login como administrador ou qualquer usu\u00e1rio que tenha acesso de administrador.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d87b64e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d87b64e9.png\" alt=\"Como tornar imagens e v\u00eddeos responsivos no WordPress?\" ><\/a><\/p>\n<p><strong>Etapa tr\u00eas:<\/strong> em seu painel, voc\u00ea ver\u00e1 uma guia chamada apar\u00eancia. Esta guia \u00e9 respons\u00e1vel por todos os tipos de tarefas relacionadas a design em seu site.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d89071a8.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d89071a8.png\" alt=\"Como tornar imagens e v\u00eddeos responsivos no WordPress?\" ><\/a><\/p>\n<p><strong>Passo Quatro:<\/strong> Abaixo da apar\u00eancia, voc\u00ea encontrar\u00e1 uma op\u00e7\u00e3o chamada editor. Esta se\u00e7\u00e3o \u00e9 respons\u00e1vel pelos c\u00f3digos manuais para o design do seu site. Clique no editor.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8a5b2e1.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8a5b2e1.png\" alt=\"Como tornar imagens e v\u00eddeos responsivos no WordPress?\" ><\/a><\/p>\n<p><strong>Passo Cinco:<\/strong> Depois de clicar no editor, uma nova janela ser\u00e1 aberta, conhecida como style.css. Este arquivo cont\u00e9m todos os c\u00f3digos CSS.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8b9ec9c.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8b9ec9c.png\" alt=\"Como tornar imagens e v\u00eddeos responsivos no WordPress?\" ><\/a><\/p>\n<p><strong>Etapa seis:<\/strong> voc\u00ea precisa rolar para baixo e chegar \u00e0 parte inferior para adicionar c\u00f3digo extra no arquivo style.css.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8cdcd00.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8cdcd00.png\" alt=\"Como tornar imagens e v\u00eddeos responsivos no WordPress?\" ><\/a><\/p>\n<p><strong>Passo Sete:<\/strong> Adicione este c\u00f3digo: embed, iframe, img, object, video, {max-width: 100} e pressione Enter.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8e10f8d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8e10f8d.png\" alt=\"Como tornar imagens e v\u00eddeos responsivos no WordPress?\" ><\/a><\/p>\n<p><strong>Etapa Oito:<\/strong> Se o seu c\u00f3digo estiver ok, ele deve aparecer verde. Se estiver verde, clique em Atualizar arquivo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8f3047f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8f3047f.png\" alt=\"Como tornar imagens e v\u00eddeos responsivos no WordPress?\" ><\/a><\/p>\n<p><strong>Passo Nove:<\/strong> Se o arquivo for atualizado com sucesso, voc\u00ea receber\u00e1 uma mensagem de confirma\u00e7\u00e3o de que &#8216;Editado com sucesso&#8217;<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d9085c89.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d9085c89.png\" alt=\"Como tornar imagens e v\u00eddeos responsivos no WordPress?\" ><\/a><\/p>\n<p><strong>Passo Dez:<\/strong> Por fim, verifique uma de suas postagens para ver se as imagens e v\u00eddeos respondem ou n\u00e3o. Se voc\u00ea seguiu as etapas, ele deve responder.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d917fc3d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d917fc3d.png\" alt=\"Como tornar imagens e v\u00eddeos responsivos no WordPress?\" ><\/a><\/p>\n<p>Se voc\u00ea seguir essas etapas, poder\u00e1 facilmente tornar as imagens e os v\u00eddeos do seu site WordPress responsivos.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.ggtaskers.com\" class=\"external external_icon\">www.ggtaskers.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando voc\u00ea est\u00e1 usando o WordPress, existem diferentes plug-ins que podem ajud\u00e1-lo a tornar suas imagens e v\u00eddeos responsivos.<\/p>\n","protected":false},"author":1,"featured_media":263211,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[655],"tags":[848],"class_list":["post-253889","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-como-fazer","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/253889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=253889"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/253889\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/263211"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=253889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=253889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=253889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}