One of my Genesis Club members saw an impressive landing page on someone else’s website and wanted to know how to build something similar.
The landing page he saw was a sales page by Michelle Martello of Minima Designs. She is a talented web designer, knowledge provider and online business consultant from Virginia.
One way to achieve a page like Michelle’s is to use the Beaver Builder toolset.
Beaver Builder has to be the best page builder available right now. And if page builders are what you want to use, it is the one to get.
I like to build landing pages using HTML and CSS. It just depends on the situation. If a site brings in steady traffic and you only need a simple landing page, then I find it easiest to do this using my standard tools of choice, which are
- Any Genesis child theme
- Genesis Club Pro plugin. (This is our plugin)
- Genesis Dambuster plugin. (Also our plugin)
- Genesis Extender plugin
The reason we developed the plugins above, and the reason I like to use them in conjunction with Genesis Extender, is because I can do most things I need to do with those tools. In fact, this is what this site – Genesis Blueprints – is all about.
Genesis Blueprints demonstrates how you can do a lot with just a small toolkit.
Note – in cases where you need to hammer a lot of traffic through a funnel and do lots of testing – probably because you are using paid traffic – you might want to skip page builders and manual methods and use a service like ClickFunnels.
In this case study I go through how to look at another sales page – in this case Michelle’s – and use the ideas she presents to achieve something similar.
Michelle kindly gave me permission to analyse her web design site and use it for inspiration. If you’re a web designer you can learn a lot from her and I suggest you go and sign up to her list to find out more.
The clever thing achieved by Michelle’s page is her content – that plus the formula she uses to ensure key information and conversion elements are included on the page, in the right order.
So when my Genesis Club member looked at her page and thought – “oh boy I’d like to do that” – I’m sure he realised that without Michelle’s content the layout is just an empty bag.
Content is what will make your sales page work for your product/business culture combination. Of course you can’t use other people’s content nor the unique essence of their offer – that is theirs alone. But we can look for clues in their success and try to learn.
For example, one of the reasons the Minima sales page looks so good is due to the quality of the hero image. If you want the same look, you’ll have to get a similar photo of yourself or your client. That’s the hard part – not the page itself. That photo is content, not layout.
- Genesis Extender plugin is used to add the custom CSS.
- Genesis Club Pro plugin is used to add various aspects of the content.
- Parallax Pro theme was used in the demo.
View Demo Site
Blueprint For Minima Designs Inspired Sales Page
Please follow these steps.
- Create A Page
- From the WordPress dashboard click on Pages / Add New
- Call the Page Sales Page 1
- Type some words – for example type Mary had a little lamb into the page.
- Select the layout with no sidebars and the Default template OR select the Landing Page template
- Type sales-page-1 into the Custom Body Class box
- Publish the page
- Take a look at it and you will see it looks like a normal page with a short sentence on it.
- Switch On Dambuster
When we build a sales page or a landing page, we normally like to remove most of the naturally occuring page elements. This is where the Genesis Dambuster plugin comes in.
The Genesis Dambuster plugin is supported for all standard Genesis child themes – i.e any of the ones that appear on the StudioPress site.
In order to remove most of the superfluous parts of the page, you’ll need to check some boxes on the Dambuster plugin.
- Edit the page you just created and at the bottom look for the Genesis Dambuster tab
- On the Enable tab, check the Enable Tweaks check box.
- On the Template Width tab, check the Full Width Page check box.
- On the Header tab, check every box.
- On the Above Content tab, check every box.
- On the Below Content tab, check every box.
- On the Footer tab, uncheck the Remove Footer box and check the Remove Widgets box.
- On the Background tab, Remove Background should be checked.
- On the Helper Classes tab, check Enable Helpers and change the values in the content padding box to 80px 30px.
- Review The Page
- Go and look at your page now in a browser
- You should see a blank white page with the words Mary had a little lamb at the extreme top left, and if you have created a footer using Genesis Club Pro as I have in the demo, you will also see a footer.
Dambuster has done its job and removed all formatting from the page leaving you a blank canvas where you can build a sales page.
- Decide The Basic Structure
- Decide how many horizontal rows there are to be on your sales page. In mine there are going to be seven. There will be hero, problem, solution, benefits, cta2, social proof and cta1. You can have as many or as few as you want. Make a list of yours and write them down in order.
- Create Required Areas
If the genesis Club Pro plugin can be used for some of your content, you may need a widget area for that content to be dragged into. As you know there are no widget areas available for ordinary pages in standard themes, so you have to create them yourself if they are required. In my case I wanted to use Genesis Club Pro for the Hero section and the Benefits section.
However the plugin does provide a shortcode for sliders – so I did not need a widget area for the slider. But I wanted to use the Genesis Club Post Icon widget and for that, I need a physical widget area into which to drag the widget (as there is no shortcode facility with that widget)
- Click on Genesis / Extender Custom and then on the Widget Area tab.
- Type Sales Page 1 Benefits into the Name box.
- Select Shortcode form the dropdown.
- Type benefits into the Class box.
- Type Sales Page 1 Benefits into the description.
- Click on Save Changes
- Go into Appearance/Widgets and check that the new widget areas is there.
- Add The Genesis Club Pro Content
- Create a slider for the hero section of your sales page using the Genesis Club Pro slider. If you need instructions for this, refer to this Genesis Blueprint.
- If you prefer you can download the one I created. The image inside this one is free to use which is why it is different to the one I used on the demo site. Once you have downloaded the the export file it can be imported into your Genesis Club Pro layerslider.
- Note the shortcode for the slider.
- Add The Genesis Club Pro Post Icons Widget
- Create a category called Benefits
- Write 8 posts and place them in this category, each representing one benefit.
- Make sure the title of each post is very short. If you cannot make the post title short use the Genesis Club Pro plugin to provide an alternate short title.
- Provide a short excerpt for each post of approximately the same length
- Set up a post icon for each post using Genesis Club Pro
- Drag a Genesis Club Posts Icon widget into the new widget area you just created
- Set the widget not to be clickable, to show the excerpt and to show 8 posts from the Benefits category.
- Add The Content
- Paste the following content into the sales page
- Replace the layerslider shortcode with your own
- Replace the post icons shortcode with your own
- Click on Update
- Add The CSS
- Copy the following CSS into your genesis Extender CSS editor.
- Click on Save Changes
- Review Your Work
- Check that you have a sales page. If not go back and watch the video!