Create Stunning Landing Pages in OpenCart with Visual Designer

This is a guest post by Dreamvention.

Landing pages are web pages that are laser focused on capturing visitor’s attention and persuading them into completing a single goal. A goal can be a sale, subscription, or collecting visitors contact information like names and emails.

With an E-Commerce website you would use landing pages to drive more sales. Although OpenCart offers a robust cart system for online sales, it is lacking the features for creating landing pages.

Many custom themes offer layout builders and modules to optimize the homepage, which is usually not enough for a full-featured online shop.

Visual Designer is the first drag-and-drop page builder that is meant for creating stunning landing pages.

You can use Visual Designer anywhere on your OpenCart shop: homepage, products, categories, information and if used together with Blog Module – in your blog posts and blog categories.

Visual Designer is supported by almost any custom theme. It is built on top of Bootstrap, uses the built-in description parameters and OpenCart’s module system to function.

10 Tips for Creating a Perfect Landing Page

Here are some important tips you should take into account when creating a landing page:

   1. Write attention grabbing headlines

   2. Keep contextual bond with the source

   3. One strong Call-to-Action

   4. Keep your Call-to-Action above the fold

   5. If the landing page is long, repeat Call-to-Action

   6. Use Images and videos

   7. Use reviews and testimonials

   8. Add social media presence, but don’t make it another a Call-to-Action

   9. User colors to identify Calls-to-Action

   10. Keep your attention ratio as low as possible

Attention Ratio is the ratio of the number of things you can do on a given page, to the number of things you should do. When talking about marketing campaigns, you should only have a single goal (or you’re doing it wrong), and thus the Attention Ratio should be 1:1.

How to Create a Beautiful Landing Page with the Visual Designer

Now that you have installed and configured Visual Designer and the necessary VD extensions, you can start creating your first landing page.

We will start with the homepage.

Since the homepage does not have a description, we can add Visual Designer Module to it:

   1. Go to Admin / Extension / Module / Visual Designer Module and create a new module.

   2. Name the VD module as “Homepage” and save it. Leave the description empty for now.

   3. Go to Admin / Design / Layouts and edit Home page layout.

   4. In the Content Top add newly created Visual Designer Module.

   5. Now go back to the Visual Designer Module and click Front End editor.

A new window will open with your Front End editor. You can now begin designing your landing page.

How to Create a Layout for the Landing Page with Visual Designer

First we define the layout of your landing page. You can use predefined templates to do that or create it from scratch.

   1. Add a row by clicking on the “plus” button.

   2. Pick the Row block.

   3. Save and close the popup.

Now you have a row. A row will always have a column inside. You can edit the row settings and define more columns.

Once done with the row, you can edit the settings of the column to set different width and offset.

Now that you have added your first row and column, let’s add a headline. As you have read above, you should put your headline and Call-to-Action above the fold to maximize your conversion.

How to Add a Headline with Visual Designer

   1. Click the green “plus” button in the column you want to place the heading.

   2. Select Custom Heading block.

   3. Add the title “Our Crazy Annual Sale. Up to 70% OFF”.

   4. Save.

Now let’s add a clear Call-to-Action button below the heading.

How to Add a Button with Visual Designer

   1. Click the green “plus” button in the column you want to place the button.

   2. Find Button block.

   3. Style it.

   4. Save.

Now that you have a headline and a Call-to-Action, you can color the Call-to-Action to any color, change the size and width of the button directly in Visual Designer.

Let’s spice up our landing page with a full width background image.

Add a Full Width Parallax Background Image with Visual Designer

First find a large image that we can use as a background. Remember, that it should not only be wide enough, but also the height of the image should be enough for the parallax effect to look right. It should be at least 2000px x 1000px.

   1. Edit the row settings.

   2. In General tab select “starch row”.

   3. Go to design tab, scroll down and find background image.

   4. Add your image via the image manager.

   5. In style background image select “parallax”.

You have just added a background image with parallax effect. Congrats!

Summary

This is just the tip of the iceberg. Visual Designer has 48 building blocks and lots of custom features, which allows you to create stunning landing pages.

We also have outstanding templates ready to be used. They show how powerful Visual Designer can be.

Try out the demo and learn more about Visual Designer Complete here.