Why Make Your Landing Page Or Website Responsive?
- With responsive design, you only need one set of content to view across multiple devices.
- As a result, you can save time and money that you would otherwise spend on creating content to display on different devices.
- With one website, your traffic and SEO won’t become diluted across multiple URLs
If you’re new to GroovePages, check out my GrooveFunnels review to discover all the apps available in your free account.
Responsive Website on GroovePages
GroovePages allows you to control your website’s appearances across 5 different devices without knowing how to code.
This is heaven if you’re a web designer (or a perfectionist).
1. Desktop view
2. Laptop view
3. iPad view
4. Tablet view
5. Mobile view
Before you start designing your GroovePages website or landing page, here’s a a time saving process when approaching responsive design.
So that you don’t spend ages formatting!
Time Saving Process When Approaching Responsive Website In GroovePages Tutorial
Tip#1: Active ALL devices, design, and format from desktop view FIRST.
- When you logged in to GroovePages, by default the only device that’s highlighted is the desktop view.
- To active all the devices, you’ll click on the desktop view again, which will activate all devices in pink.
- You want to start formatting and designing on the desktop first with all devices activate so that it will carry through across all devices.
- For example, if you click on the block, click on “background” on the right-hand panel and choose an image.
- You can choose any existing image you have or upload an image and click on “Select”.
- Since all devices are not activated in the beginning and the desktop was the only device highlighted.
- When you switch over to the laptop view and the tablet, as well as the mobile view, the old background is still in place.
Cliff notes: Design everything on the desktop view with all devices highlighted and that you don’t need to manually edit every device.
Whether you are using a template or designing from scratch, highlight ALL devices in the beginning when you start designing at your page.
Tip #2: Format on the mobile device but have the last 2 devices activated.
When you are absolutely finished designing your website on the desktop view…
That includes the website copy, changing fonts, adding images, etc.
The next step is to start formatting on the mobile view.
- Then click on the mobile device and start formatting from the mobile view with the 2 icons activated in pink.
- This just saves you so much time from manually going through and formatting each of these devices because they’re quite similar in terms of their layout.
- Since you started designing on the desktop view with all devices activated, this takes care of the responsive design on the laptop and sideway tablet view as well.
In essence, you format everything on the desktop view first.
And even though you have the last 2 devices activated , you are formatting on the mobile view.
If you are a perfectionist then what you can do is isolate each device by clicking on that specific device and it will be in highlighted in pink.
Therefore, whatever changes or formatting that you apply to the particular device, only is applied to that device.
Tip#3: Hiding blocks on mobile view.
- Click on the mobile icon and click on the block that you want to hide.
- Under Layout, in “Display”, click on the drop-down arrow and select “none”.
- That will hide that block from the mobile view.
Tip #4: Formatting 2 or more columns.
- Activate all devices then head under “Elements,” select the 3 columns and drag them to the canvas.
- One of my formatting tips from my first tutorial on “How to create a high converting opt-in page” is selecting the breadcumb.
- If you are stuck and not sure which element you’re in, just head down to the breadcrumb and click on it.
- Instead of using the existing 4 columns from this template, let’s say you only want 3 columns.
- Head to elements, and drag in the 3 column element into the canvas.
- Click on “layout” on the breadcrumb and over on the right side, add some spacing.
- Drag in the image elements from the 4 columns into the 3 columns.
- Delete the 4 column layout.
- Now the 3 columns looks good on the desktop but…
- If you click on the mobile view, you’ll see that the images are stacked upon each other and there is no margin.
- To add margins on the images, click on the element, and select “Spacing” then add a margin.
- Do the same for the rest of the images.
This is one thing that people tend to get caught up with.
Columns looks great on the desktop but always switches to the mobile view or tablet view to see if there is enough margin in between.
TIP: Preview your website on the different devices one by one and identify which areas need to be edited.
- For instance, the image is not centered on the tablet view.
- What you want to do is isolate that device.
- Click on that container level, select “layout” on the right panel.
Step-By-Step Video Tutorial On How To Make Your Website Responsive on GroovePages
Steps to Make Your Website Responsive on GroovePages
1. Log In To Your GroovePages
Now when you’re designing your landing pages as well as your sales funnels inside of GroovePages, you’re designing it on the desktop view.
When all devices are highlighted in pink, designs are instantly updated across 5 devices.
If you want to see the design of your landing page on each device, you would click on each icon individually.
Or you can control the design on specific devices by highlighting that device icon.
This allows you to see your design of your landing page or your sales funnel across different screen sizes.
2. Modify Your Design Per Device
Just click on the device that you want to format and then it will be highlighted.
This means that you can now format the design specifically for this device while the remaining devices that aren’t highlighted won’t be affected by the design.
To Format your Heading or Spacing:
- Click on the heading and make sure that the “Container” under the breadcrumb is highlighted in pink and then it will open a panel on the right side for you to customize it.
- In this case, let’s just add some spacing in order for the heading not to be too close to the screen.
- Scroll down the panel and head to spacing
- Give it some padding on the side by selecting the sides and then adjust it.
- Once it is set, we can also make the heading away from the image and give it some spacing.
- In order to do this, head back to the container on the breadcrumb.
- It will highlight the specific container you have selected only.
- This is a similar to the process above, click on “Spacing” in the formatting tab over on your right
- Add some margin on the top to pull the container down a bit and add padding to the side.
- Now, if you don’t like the look of this particular text, you can reduce this well by selecting the text then on the right panel you can customize it according to your personal preference.
To format the Opt-in form:
- This opt-in form is Activecampaign.
- Again make sure that on the breadcrumb you are on “activeCampaign-component” or on your marketing provider.
- Then go to spacing and double click on the active campaign block and just decrease the margin so that it spreads across the screen.
- And if you scroll back and have a look everything’s formatted nicely, you can go ahead and press save on the upper right corner.
Once it’s saved, you will see “Content Saved!” green alert pop-up on the lower right corner.
Wasn’t that easy?
Now let’s go and format the mobile device view by clicking on the mobile icon and you can see that only the mobile icon is highlighted in pink while the other are not.
You’ll notice right away that the heading is quite big.
- Click on the heading and you can reduce that down by changing the font size of the text in the formatting panel..
- Let’s add a space between the container and image by clicking on the Container element on the breadcrumb to highlight the whole container.
- You can give it some padding on the side of the container
- Reduce the text size by selecting the text container then edit it over in the formatting panel
- The last thing to do is make the opt-in form a bit wider
- In order to do that, click on the opt-in form, in the breadcrumb – click on the Activecampaign component
- Head to spacing and you can double click on both the left and right hand side of the margin, decrease it so that it’s spreads across.
Once you are done with formatting, double check the changes and click the “Save” button on the top right hand corner.
You would see “Content Saved!” notification bar on the lower right corner.
You can head back to the each device to view the design.
Once you’re happy with the design on each device and screen size and click “Publish”.
A green popup will appear to notify you that the content is saved.
Changes usually go live within a few minutes but may take longer.
You can preview your design by clicking on the eye icon on the upper right tab.
This will open up a new tab and you view your responsive design by dragging in your browser.
You can see your website design change as you move your browser in.
