{"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\/en\/how-to-hide-part-of-the-page-for-a-period-of-time\/","title":{"rendered":"How to hide part of the page for a period of time"},"content":{"rendered":"<p>Are you putting together your VSL sales page and want to show just the video for a few minutes? Want to hide the buy button or some page element for a while? In this article we will present a simple solution. <\/p>\n\n\n\n<p>It&#039;s incredible how difficult it is to find something so simple on the internet, perhaps due to lack of expressing the correct term. Sometimes we come across plugins or huge codes to accomplish something very simple. <\/p>\n\n\n\n<p>What we want here is to hide a CSS element, and only display it after a period of time. This can easily be created with a simple Javascript of less than 4 lines. <\/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=\"How to hide rest of page for a while? VSL - Sales page\" 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\">How to hide an element for a few minutes?<\/h2>\n\n\n\n<p>The first thing you need to understand is which element you are going to hide. If you want to hide almost the entire page, leaving only the video, just create a DIV with HTML, put a CSS class of your choice, and close it at the bottom of the page. <\/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>If you&#039;re using the WordPress block editor, you can also easily hide elements by going to each block&#039;s advanced settings and setting the CSS class. <\/p>\n\n\n\n<p>After choosing the CSS class and adding it to the elements you want to hide, you need to add the Javascript in the Header. This all depends on the theme or plugin you are using. <\/p>\n\n\n\n<p>Add the following code in the 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>In ClassName, you put the name of the class you want to hide. In the number 400000 you determine the waiting time for the element to become visible. It&#039;s about milliseconds. <\/p>\n\n\n\n<p>Every 1000, we have a total of 1 second. So the 400000 found in the code equals about 6 minutes. You can use this information to calculate your desired time. <\/p>\n\n\n\n<p>See how simple it is to hide an element or half of the page for a period? A simple code, perfect for creating your VSL, sales page or anything else you want to focus on. <\/p>","protected":false},"excerpt":{"rendered":"<p>Are you putting together your VSL sales page and want to show just the video for a few minutes? want to hide the<\/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\/en\/wp-json\/wp\/v2\/posts\/3831"}],"collection":[{"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/comments?post=3831"}],"version-history":[{"count":3,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/posts\/3831\/revisions"}],"predecessor-version":[{"id":3836,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/posts\/3831\/revisions\/3836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/media\/3832"}],"wp:attachment":[{"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/media?parent=3831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kevinbk.com\/en\/wp-json\/wp\/v2\/categories?post=3831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}