header image ≡ Menu

5 Things You Must Know When Building A Page With The OptimizePress 3.0 Builder

In my previous post, I answered some of the top FAQ’s that existing customers have on mind about OptimizePress 3.0. In this post, I’m going to share with you the 5 things you need to know when building your page with the new OP3 page builder. Let’s get started.

#1: Hierarchy Of The OptimizePress Lightning Builder

This is by far the most important thing you need to know when you’re building your pages using the OP 3.0 page builder. Unlike OP2 which only deal with Row and Column layouts, this is how the basic hierarchy looks like in OP3 (refer image below for the colors):

SectionRow → Column

  • Section: Think of it as a piece of land in the town. The section represents that land.
  • Row: This is similar to a development plan. How are you planning to use that land?
  • Column: This is where the properties (elements) are built on that piece of land.

Of course, this is just a simple analogy. Things will become a little more complicated if you want to build a more complex layout, e.g. it’s possible to insert a new Row into an existing Column so that you can have a different column layout within the Column.

Adding a new Row into a 3-Column layout to create a new split layout

TIP: It’s easy to get lost, especially when you’re building a more complex hierarchy. You can refer to the top navigation to know which layout element you’re working on. You can also click ‘^’ Focus Parent Element from the inline toolbar editor to know where you at.

#2: Spacing Around The Layout And General Elements

Even though the lightning builder offers inline editing experience, there are times when the sidebar can come in handy. It’s a good practice to refer to the Margin and Padding interactive diagram whenever you adjust the spacing around a layout/general element.

Modifying the left and right padding of the Row at the sidebar

You may have noticed that the only way to adjust the left and right margin/padding of an element is via the diagram (click cog icon Advanced Settings → Advanced Options).

#3: Adding Your Theme’s Header And Footer

Unlike OP2 which have its own header and footer navigation, the new OptimizePress 3.0 actually uses the header and footer from your WordPress theme (cool?). However, this is NOT the default setting when you’re building your pages in the lightning page builder.

To activate the header and footer on your OP3 page, you need to change the WordPress page template in the Page Attributes section. Here’s how you can do it:

  • In WP Dashboard, go to PagesAll Pages and click the Edit link under the page.
  • On the right, look for the Page Attributes meta box. Under the Template drop-down list, select OP3 – Full Width Template. Remember to Save the setting.

TIP: If you don’t see the Page Attributes meta box, you can enable it by going to Screen Options at the top right corner, then check the Page Attributes check box. You can also change the Page Template easily by going to SettingsPage Settings in OP3 builder.

UPDATE: In OptimizeBuilder version 1.0.9, you can now add the WP Menu element on your pages. You’ll be able to easily create a header menu to your liking.

#4: Adding The Elements Into Your Blog Posts

Besides pages, you can also incorporate the OptimizeBuilder elements into your blog posts just to touch up your blog content a little. Here’s how you can do it:

  • In WP Dashboard, go to PostsAll Posts and click the Edit* link under the post.
  • If you’re creating a new blog post, then click the Add New button. Give your post a title and save it as either Draft or Published.
  • Click the Big Blue Edit with OptimizePress button to launch the OP3 builder. You can insert any of the layout/general elements into your post.

*Please note that you can’t use the WP Gutenberg editor alongside with OptimizeBuilder.

#5: Mobile And Tablet Optimization In Real Time

The new OptimizePress 3.0 allows you to effortlessly customize your page to look good on desktop, mobile, and tablet all at the same time. If you’ve been using OP2 for a while, you’ll know how strenuous it is to make your page look good on mobile or tablet device.

With OP3, you can instantly optimize your pages in the editor. All you have to do is simply switch the Device Mode (Desktop/Tablet/Mobile) you would want to edit your page with.

Optimizing the Headline element in mobile preview mode

TIP: You can further optimize the Column element by going to the Responsive tab (click cog icon Advanced Settings → Advanced Options). From there, you can Wrap, Stack or even Reverse the specific column you’re working on – all done with a few mouse clicks!

That’s all I have for you. Of course, there are a lot MORE things I could share, but these are just the essential ones I think you should know when you start using the OP3 builder.

If you’re interested to see how fast and flexible OptimizePress 3.0 is, you can watch the step-by-step video (12:35) below where I built a quick landing page starting from scratch.

by KM Lee

KM Lee has been a self-employed geek since 2008. Currently he's working full-time from home online. You can also connect with him:

0 comments… add one

Leave a Comment