GroovePages Tutorial – 20 Tips & Tricks

If you’re just getting started with GroovePages, then you’re going to love this Groovepages tutorial.

Here are 20 GroovePages tips and tricks I wish I knew sooner 🙂

If you’re new to Groove, create your free GroovePages account to follow along to this video.

GroovePages Tutorial – 20 Tips You Wish You Knew

Unlike my other posts, this is best watched on video as I go through step-by-step on where to click.

I’ve added timestamps below for you to jump to specific tips and you can always revisit this post to implement as you learn.

Timestamps:

  • 00:24 – Tip #1: Adding spacing to all devices
  • 01:28 – Tip #2: Using “breadcrumbs” to navigate to each element
  • 02:28 – Tip #3: Centering an image or text inside a column
  • 03:05 – Tip #4: Adding a clickable phone number or email address
  • 03:53 – Tip #5: Changing background input label for opt-in forms
  • 04:34 – Tip #6: Changing an icon by typing in the word…
  • 05:03 – Tip #7: Changing the text color for a specific word in a heading or sentence 
  • 05:35 – Tip #8: Saving blocks for reuse in their own categories
  • 06:11 – Tip #9: Saving a page template for reuse
  • 06:28 – Tip #10: Inverse an image and text on mobile
  • 07:53 – Tip #11: Changing the text element to H1,H2, H3 or paragraph easily
  • 08:44 – Tip #12: Using mockups for showcasing digital products 
  • 09:47 – Tip #13: Adding an animation to an element
  • 10:30 – Tip #14: Drag handles to resize elements
  • 11:06 – Tip #15:Tools when you are funnel hacking
  • 12:07 – Tip #16: Adding an audio file in GroovePages
  • 13:07 – Tip #17: Email marketing integration not listed?
  • 13:53 – Tip #18: Global styles to reuse a element style
  • 14:27 – Tip #19: Hiding blocks or elements on mobile
  • 15:03 – Tip #20: Sharing funnels when performing client work
  • 15:31 – Please Like this video :)

CSS Code For Inverse Image & Text On GroovePages

Step 1: Click on pages, locate the page you want to inverse image and text.

  • Let’s say it’s the home page, click on the three dots > edit settings.
  • Under “custom css”, paste the below code underneath all the existing code:
@media (max-width: 760px) {
div.inverseColumn div {
flex-direction: column-reverse !important;
display: flex !important;
}
}

Step 2: Select  “layout-2-2” in the breadcrumb and that will highlight the 2 columns.

Step 3: Click on the pencil icon, over on the right styling bar, locate the heading “Custom Attributes” and type in “inverseColumn

inverse code for groovepages

Embedding a Audio Player In GroovePages or GrooveBlog

This is useful if you have a podcast and like to use Groove to host your audio file and embed it on your blog.

Step 1: head to GrooveMember app, click on “Content” and “files” on the left sidebar

Step 2: Click “Upload File” and upload your mp3 file

Step 3: locate the file name you just uploaded, in actions, under drop down arrow > click on “Copy URL” (paste that on a notepad)

Groovemember upload file url

Step 4: Replace [ [ URL ] ] with your URL from the GrooveMember file url below:

<center>
<audio controls="">
 <source src="[[ URL ]]" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</center>
audio player embed code on Grooveblog

Step 5: Head back to GroovePages and drag in a code embed element

Step 6: Click on the cogwheel, paste the above code (make sure you change the [[URL]] with your URL) and press save.

audio player embed code for grooveblog or groovepages

Chrome Extensions For Funnel Design

WHAT FONT chrome extension:

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en

COLORPICK EYEDROPPER extension:

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en

Creating a Page Template In GroovePages

Here’s the training video for Tip #9 – creating a page template in GroovePages.

Want To Increase Sales Conversions On GroovePages?

I recommend writing great copy with relevant custom graphics on your sales page.

In this day and age, people don’t read long blocks of copy.

They’re usually skimming and only stop scrolling when they see a compelling image.

The banner below was created WITHOUT any design skills and under 60 seconds.

Just point-and-click, drag-and-drop, then export!

Click the banner to learn how you can create custom website, blog and funnel graphics without any design skills.

Clickdesigns review
Photo of author

Aimee Vo

Aimee Vo is a digital marketing expert with over 12 years hands-on experience in SEO and paid traffic. She publishes content on sales funnels, lead generation, and content marketing with insights from personal experience.