{"id":3831,"date":"2022-11-18T17:48:45","date_gmt":"2022-11-18T17:48:45","guid":{"rendered":"http:\/\/kevinbk.com\/?p=3831"},"modified":"2022-11-18T18:13:59","modified_gmt":"2022-11-18T18:13:59","slug":"como-ocultar-parte-da-pagina-por-um-periodo-de-tempo","status":"publish","type":"post","link":"https:\/\/kevinbk.com\/ar\/\u0643\u064a\u0641-\u064a\u0645\u0643\u0646-\u0625\u062e\u0641\u0627\u0621-\u062c\u0632\u0621-\u0645\u0646-\u0627\u0644\u0635\u0641\u062d\u0629-\u0644\u0641\u062a\u0631\u0629-\u0645\u0639\u064a\u0646\/","title":{"rendered":"\u0643\u064a\u0641 \u064a\u0645\u0643\u0646\u0646\u064a \u0625\u062e\u0641\u0627\u0621 \u062c\u0632\u0621 \u0645\u0646 \u0627\u0644\u0635\u0641\u062d\u0629 \u0644\u0641\u062a\u0631\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u0632\u0645\u0646\u061f"},"content":{"rendered":"<p>Voc\u00ea est\u00e1 montando sua p\u00e1gina de vendas VSL e deseja exibir apenas o v\u00eddeo por alguns minutos? Quer ocultar o bot\u00e3o de compra ou algum elemento da p\u00e1gina por um tempo? Neste artigo vamos apresentar uma simples solu\u00e7\u00e3o. <\/p>\n\n\n\n<p>\u00c9 incr\u00edvel a dificuldade de achar algo t\u00e3o simples na internet, talvez por falta de expressar o termo correto. \u00c0s vezes nos deparamos com plugins ou c\u00f3digos enormes, para realizar algo muito simples. <\/p>\n\n\n\n<p>O que queremos aqui, \u00e9 ocultar um elemento CSS, e exibi-lo apenas depois de um per\u00edodo de tempo. Isso pode ser facilmente criado com um simples Javascript com menos de 4 linhas. <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"\u0643\u064a\u0641 \u064a\u0645\u0643\u0646\u0646\u064a \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0628\u0627\u0642\u064a \u0645\u0646 \u0627\u0644\u0635\u0641\u062d\u0629 \u0644\u0641\u062a\u0631\u0629\u061f VSL - \u0635\u0641\u062d\u0629 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/fs6uR1bdZP0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Como ocultar um elemento por alguns minutos?<\/h2>\n\n\n\n<p>A primeira coisa que voc\u00ea precisa entender, \u00e9 qual elemento vai ocultar. Caso seu desejo seja ocultar quase a p\u00e1gina inteira, deixando apenas o v\u00eddeo, basta criar uma DIV com HTML, colocar uma classe CSS de sua escolha, e fecha-la no final da p\u00e1gina. <\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\"><code lang=\"css\" class=\"language-css\">.classname {display:none;}<\/code><\/pre>\n\n\n\n<p>Caso esteja usando o editor de blocos do WordPress, voc\u00ea tamb\u00e9m pode ocultar facilmente elementos indo em configura\u00e7\u00f5es avan\u00e7adas de cada bloco e definindo a classe CSS. <\/p>\n\n\n\n<p>Ap\u00f3s escolher a classe CSS e adicion\u00e1-la aos elementos que deseja ocultar, voc\u00ea precisa adicionar o Javascript no Header. Tudo isso depende do tema ou plugin que estiver utilizando. <\/p>\n\n\n\n<p>Adicione o seguinte c\u00f3digo no Header: <\/p>\n\n\n\n<pre class=\"wp-block-code data-no-translation\" data-no-translation=\"\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script>setTimeout(function() {\n  $('.classname').show()\n}, 400000);\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>Em ClassName, voc\u00ea coloca o nome da classe que deseja ocultar. No n\u00famero 400000 voc\u00ea determina o tempo de espera para o elemento se tornar vis\u00edvel. Trata-se de milissegundos. <\/p>\n\n\n\n<p>A cada 1000, temos um total de 1 segundo. Ent\u00e3o os 400000 encontrados no c\u00f3digo equivale a cerca de 6 minutos. Voc\u00ea pode usar essa informa\u00e7\u00e3o para calcular o tempo desejado. <\/p>\n\n\n\n<p>Viu como \u00e9 simples ocultar um elemento ou metade da p\u00e1gina por um per\u00edodo? Um simples c\u00f3digo, perfeito para criar sua VSL, p\u00e1gina de vendas ou qualquer outra coisa na qual deseja manter o foco. <\/p>","protected":false},"excerpt":{"rendered":"<p>\u0647\u0644 \u062a\u0642\u0648\u0645 \u0628\u0625\u0639\u062f\u0627\u062f \u0635\u0641\u062d\u0629 \u0645\u0628\u064a\u0639\u0627\u062a VSL \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0643 \u0648\u062a\u0631\u063a\u0628 \u0641\u064a \u0639\u0631\u0636 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0641\u0642\u0637 \u0644\u0628\u0636\u0639 \u062f\u0642\u0627\u0626\u0642\u061f \u062a\u0631\u064a\u062f \u0625\u062e\u0641\u0627\u0621 \u0627\u0644<\/p>","protected":false},"author":1,"featured_media":3832,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/kevinbk.com\/wp-content\/uploads\/2022\/11\/javascript.jpg","_links":{"self":[{"href":"https:\/\/kevinbk.com\/ar\/wp-json\/wp\/v2\/posts\/3831"}],"collection":[{"href":"https:\/\/kevinbk.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kevinbk.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/ar\/wp-json\/wp\/v2\/comments?post=3831"}],"version-history":[{"count":3,"href":"https:\/\/kevinbk.com\/ar\/wp-json\/wp\/v2\/posts\/3831\/revisions"}],"predecessor-version":[{"id":3836,"href":"https:\/\/kevinbk.com\/ar\/wp-json\/wp\/v2\/posts\/3831\/revisions\/3836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/ar\/wp-json\/wp\/v2\/media\/3832"}],"wp:attachment":[{"href":"https:\/\/kevinbk.com\/ar\/wp-json\/wp\/v2\/media?parent=3831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kevinbk.com\/ar\/wp-json\/wp\/v2\/categories?post=3831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}