{"id":5160,"date":"2022-01-08T07:15:05","date_gmt":"2022-01-08T07:15:05","guid":{"rendered":"https:\/\/groovefunnels.review\/?p=5160"},"modified":"2022-05-20T06:09:58","modified_gmt":"2022-05-20T06:09:58","slug":"groovepages-block-background-image-video-pattern","status":"publish","type":"post","link":"https:\/\/groovefunnels.review\/groovepages-block-background-image-video-pattern\/","title":{"rendered":"GroovePages Block Background Update &#8211; Overlay, Pattern, Video &#038; Image Background"},"content":{"rendered":"\n<p>Just a quick update on the GroovePages block background.<\/p>\n\n\n\n<p>I couldn\u2019t cover it in my GroovePages Tutorials for beginners video because these extra features weren\u2019t available back then.<\/p>\n\n\n\n<p>Check out my <a href=\"https:\/\/groovefunnels.review\/lifetime\/\" data-type=\"page\" data-id=\"2553\">Groovefunnels review<\/a> here.<\/p>\n\n\n\n<p>In GroovePages, head to a block.<\/p>\n\n\n\n<p>You know you\u2019re in the block level by heading to breadcrumb and clicking on \u201cblock\u201d.<\/p>\n\n\n\n<p>Over in the formatting toolbar, click on \u201cBackground\u201d.<\/p>\n\n\n\n<p>This here explain\u2019s the background \u201clayer system\u201d and the order of how things will be displayed:<\/p>\n\n\n\n<ul><li>You have your background color &amp; overlay on the very top<\/li><li>Patterns in second layer<\/li><li>then background video<\/li><li>and background image is at the very bottom.<\/li><\/ul>\n\n\n\n<p>Let\u2019s start with a block that has a blank background to see this in action:<\/p>\n\n\n\n<p>It makes sense to start with the bottom layer &#8211; which is the background image. <\/p>\n\n\n\n<p>Click on Image tab:<\/p>\n\n\n\n<ul><li>Choose image > we\u2019ll use the free stock photo and type in \u201ccity\u201d and enter, let\u2019s choose this image and click add to my file<\/li><li>The click select. <\/li><li>Now if you notice that your image isn\u2019t appearing, head to color, and increase the opacity.<\/li><li>Let\u2019s also change this heading to white too.<\/li><\/ul>\n\n\n\n<p>Go back to the block level, the next level up is a video background.<\/p>\n\n\n\n<p>You would either use a background image OR a video image however it is recommend that you set a background image to be displayed while the video is loading on the user\u2019s browser.<\/p>\n\n\n\n<p>Under this drop down, you can either select a vimeo, wistia, youtube video and those can be retrieve by entering the video\u2019s id. For example, if I selected youtube:<\/p>\n\n\n\n<p>Paste in the youtube url and delete everything up to the = sign.<\/p>\n\n\n\n<p>You can also select a video from groovevideo if you\u2019ve uploaded any videos there.<\/p>\n\n\n\n<p>I personally find videos distracting so I\u2019m going to toggle off video background.<\/p>\n\n\n\n<p>Next layer up is patterns, you can jazz up your background by selecting a pattern. <\/p>\n\n\n\n<p>There are loads of patterns here that you can play around with but I like the isometric pattern. <\/p>\n\n\n\n<p>I\u2019ll change the primary color to this hex code: #1c2b42<\/p>\n\n\n\n<p>Secondary color can be a light grey<\/p>\n\n\n\n<p>We\u2019ll reduce the opacity down to 19 and spacing can be left as is.<\/p>\n\n\n\n<p>The final top layer is background color, scroll up and click on color:<\/p>\n\n\n\n<ul><li>Click on the circle <\/li><li>I\u2019ll enter in this hex hex code: #1c2b42<\/li><li>Close out of this and reduce the opacity down to 6.<\/li><\/ul>\n\n\n\n<p>One last thing, you can make your background image a parallax which allows the scrolling effect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">GroovePages Block Background Video Tutorial<\/h2>\n\n\n<!--presto-player:video_id=24--><figure class=\"wp-block-video presto-block-video  presto-provider-youtube\" style=\"--plyr-color-main: var(--presto-player-highlight-color, #00b3ff); --presto-player-logo-width: 150px; \">\n    <presto-player  id=\"presto-player-1\" src=\"\/\/www.youtube.com\/embed\/HpEvAeDPCLQ?iv_load_policy=3&amp;modestbranding=1&amp;playinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1\" media-title=\"E63: GroovePages BLOCK BACKGROUND UPDATE - BACKGROUND Overlay, Pattern, Video &amp; Image (Dec 2021)\" css=\"\" class=\"presto-video-id-24 presto-preset-id-5 skin-stacked\" skin=\"stacked\" icon-url=\"https:\/\/groovefunnels.review\/wp-content\/plugins\/presto-player\/img\/sprite.svg\" preload=\"\" poster=\"\" playsinline  >\n        \n\n    <\/presto-player>\n<\/figure>        <script>\n            var player = document.querySelector('presto-player#presto-player-1');\n            player.video_id = 24;\n                                                player.preset = {\"id\":5,\"name\":\"Youtube Optimized\",\"slug\":\"youtube\",\"icon\":\"youtube\",\"skin\":\"stacked\",\"play-large\":true,\"rewind\":true,\"play\":true,\"fast-forward\":true,\"progress\":true,\"current-time\":true,\"mute\":true,\"volume\":true,\"speed\":true,\"pip\":false,\"fullscreen\":true,\"captions\":false,\"reset_on_end\":true,\"auto_hide\":true,\"captions_enabled\":false,\"save_player_position\":false,\"sticky_scroll\":false,\"sticky_scroll_position\":\"bottom right\",\"play_video_viewport\":false,\"hide_youtube\":false,\"lazy_load_youtube\":true,\"hide_logo\":false,\"border_radius\":0,\"caption_style\":\"\",\"caption_background\":\"\",\"is_locked\":true,\"cta\":[\"\"],\"email_collection\":[\"\"],\"action_bar\":{\"enabled\":true,\"percentage_start\":0,\"text\":\"Subscribe To Our YouTube Channel\",\"background_color\":\"#1d1d1d\",\"button_type\":\"youtube\",\"button_count\":false},\"created_by\":1,\"created_at\":\"2021-07-24 02:58:13\",\"updated_at\":\"2022-02-16 19:29:48\",\"deleted_at\":\"\",\"watermark\":[\"\"],\"on_video_end\":\"select\",\"search\":[\"\"],\"show_time_elapsed\":false};\n                                                                player.chapters = [];\n                                                                player.overlays = [];\n                                                                player.tracks = [];\n                                                                player.branding = {\"logo\":\"\",\"color\":\"#00b3ff\",\"logo_width\":150};\n                                                                player.blockAttributes = {\"id\":24,\"src\":\"https:\\\/\\\/youtu.be\\\/HpEvAeDPCLQ\",\"preset\":5,\"video_id\":\"HpEvAeDPCLQ\",\"visibility\":\"public\",\"color\":\"#00b3ff\",\"mutedPreview\":{\"enabled\":false,\"captions\":false},\"mutedOverlay\":{\"enabled\":false,\"src\":\"\",\"width\":200,\"focalPoint\":{\"x\":0.5,\"y\":0.5}},\"mutedOverlayType\":\"text\",\"mutedOverlayText\":\"Click to play\",\"mutedOverlayImageWidth\":200,\"playsInline\":true,\"chapters\":[],\"overlays\":[],\"tracks\":[],\"title\":\"E63: GroovePages BLOCK BACKGROUND UPDATE - BACKGROUND Overlay, Pattern, Video & Image (Dec 2021)\"};\n                                                                                            player.skin = \"stacked\";\n                                                                player.analytics = false;\n                                                                player.automations = true;\n                                                                player.provider = \"youtube\";\n                                                                player.video_id = 24;\n                                                                                                                        player.provider_video_id = \"HpEvAeDPCLQ\";\n                                                                player.youtube = {\"noCookie\":false,\"channelId\":\"UChwKtxY94ROjH9wzMYmH3cw\",\"show_count\":false};\n                                    <\/script>\n        \n\n\n<h2 class=\"gb-headline gb-headline-2ed648b8 gb-headline-text\">Create Stunning Funnels That Sell Like Crazy?<\/h2>\n\n\n\n<p>If you want to create stunning funnels that sell like crazy, I recommend writing great copy with relevant CUSTOM graphics. <\/p>\n\n\n\n<p>In this day and age, people don&#8217;t read long blocks of copy.<\/p>\n\n\n\n<p>They&#8217;re skimming and only stop scrolling when they see a compelling image. <\/p>\n\n\n\n<p>You NEED unique custom 3d mockups, book covers, lead magnet images, online course mockups and funnel graphics to make your sales page convert. <\/p>\n\n\n\n<p>I&#8217;ve always struggled with design and could not justify hiring expensive graphic designers.<\/p>\n\n\n\n<p>Not anymore.<\/p>\n\n\n\n<p>The banner below was created <span style=\"text-decoration: underline;\">WITHOUT<\/span> any design skills and under 60 seconds. <\/p>\n\n\n\n<p>Just point-and-click, drag-and-drop, then export!<\/p>\n\n\n\n<p>Click the banner to learn how you can create stunning 3D digital product mockups and sales funnel graphics without any design skills.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/go.aimeevo.com\/clickdesigns-review\" rel=\"nofollow noopener\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/groovefunnels.review\/wp-content\/uploads\/2022\/05\/Groovefunnels.review_Banner-1024x536.webp\" alt=\"groovefunnels review banner\" class=\"wp-image-5452\" srcset=\"https:\/\/groovefunnels.review\/wp-content\/uploads\/2022\/05\/Groovefunnels.review_Banner-1024x536.webp 1024w, https:\/\/groovefunnels.review\/wp-content\/uploads\/2022\/05\/Groovefunnels.review_Banner-300x157.webp 300w, https:\/\/groovefunnels.review\/wp-content\/uploads\/2022\/05\/Groovefunnels.review_Banner-768x402.webp 768w, https:\/\/groovefunnels.review\/wp-content\/uploads\/2022\/05\/Groovefunnels.review_Banner.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Just a quick update on the GroovePages block background. I couldn\u2019t cover it in my GroovePages Tutorials for beginners video because these extra features weren\u2019t &#8230; <a title=\"GroovePages Block Background Update &#8211; Overlay, Pattern, Video &#038; Image Background\" class=\"read-more\" href=\"https:\/\/groovefunnels.review\/groovepages-block-background-image-video-pattern\/\" aria-label=\"More on GroovePages Block Background Update &#8211; Overlay, Pattern, Video &#038; Image Background\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":5370,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,8],"tags":[],"_links":{"self":[{"href":"https:\/\/groovefunnels.review\/wp-json\/wp\/v2\/posts\/5160"}],"collection":[{"href":"https:\/\/groovefunnels.review\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/groovefunnels.review\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/groovefunnels.review\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/groovefunnels.review\/wp-json\/wp\/v2\/comments?post=5160"}],"version-history":[{"count":4,"href":"https:\/\/groovefunnels.review\/wp-json\/wp\/v2\/posts\/5160\/revisions"}],"predecessor-version":[{"id":5607,"href":"https:\/\/groovefunnels.review\/wp-json\/wp\/v2\/posts\/5160\/revisions\/5607"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/groovefunnels.review\/wp-json\/wp\/v2\/media\/5370"}],"wp:attachment":[{"href":"https:\/\/groovefunnels.review\/wp-json\/wp\/v2\/media?parent=5160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/groovefunnels.review\/wp-json\/wp\/v2\/categories?post=5160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/groovefunnels.review\/wp-json\/wp\/v2\/tags?post=5160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}