GroovePages Tutorial – 20 Tips & Tricks You Wish You Knew Sooner

Just getting started with GroovePages and not sure where to start?

Here are 20 tips and tricks in GroovePages that will help boost your time and productivity when using the app.

If you’re new to GrooveFunnels, sign up to your free account below and you’ll receive over 40 step-by-step GrooveFunnels training from me as a bonus.

20 GroovePages Tips & Tricks Tutorial

This post will go on forever if I screenshot every step in this training video.

For your convenience, I’ve added timestamps below for you to jump to a specific tip.

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

groovepages inverse code for image and text

Embedding a Audio Player In GroovePages or GrooveBlog

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>

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.

Chrome Extensions for Funnel Hacking

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.

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.