GroovePages Block Background Update – Overlay, Pattern, Video & Image Background

Just a quick update on the GroovePages block background.

I couldn’t cover it in my GroovePages Tutorials for beginners video because these extra features weren’t available back then.

If you’re interested in Groove’s lifetime offer, check out my Groovefunnels review here.

In GroovePages, head to a block.

You know you’re in the block level by heading to breadcrumb and clicking on “block”.

Over in the formatting toolbar, click on “Background”.

This here explain’s the background “layer system” and the order of how things will be displayed:

  • You have your background color & overlay on the very top
  • Patterns in second layer
  • then background video
  • and background image is at the very bottom.

Let’s start with a block that has a blank background to see this in action:

It makes sense to start with the bottom layer – which is the background image.

Click on Image tab:

Choose image > we’ll use the free stock photo and type in “city” and enter, let’s choose this image and click add to my file

The click select.

Now if you notice that your image isn’t appearing, head to color, and increase the opacity.

Let’s also change this heading to white too.

Go back to the block level, the next level up is a video background.

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’s browser.

Under this drop down, you can either select a vimeo, wistia, youtube video and those can be retrieve by entering the video’s id. For example, if I selected youtube:

Paste in the youtube url and delete everything up to the = sign.

You can also select a video from groovevideo if you’ve uploaded any videos there.

I personally find videos distracting so I’m going to toggle off video background.

Next layer up is patterns, you can jazz up your background by selecting a pattern.

There are loads of patterns here that you can play around with but I like the isometric pattern.

I’ll change the primary color to this hex code: #1c2b42

Secondary color can be a light grey

We’ll reduce the opacity down to 19 and spacing can be left as is.

The final top layer is background color, scroll up and click on color:

  • Click on the circle
  • I’ll enter in this hex hex code: #1c2b42
  • Close out of this and reduce the opacity down to 6.

One last thing, you can make your background image a parallax which allows the scrolling effect.

GroovePages Block Background Video Tutorial

SUPPORT ME BY BUYING ME SUSHI AT: https://go.aimeevo.com/sushi

Aimee Vo

About the author

Hey, I'm Aimee -An online business and marketing strategist with over 12 years experience in running digital marketing campaigns. Sun, sand and beach is my zen. However I dig content marketing, lead generation and marketing automation too! You'll find me posting digital marketing training on Youtube to help entrepreneurs start and grow their business online.

Leave a Comment