How To Use The Ontraport Page Inspector Chrome Extension

QUICK QUESTION: How creative have you gotten with your new Ontraport pages since they dropped v3?

Have you taken your design game to the next level yet?

No?

Well, let me show you a quick CSS trick that should give you some food for thought.

Between completed Ontraport page templates & the ones currently with the design team we’re fast approaching 50 plug-&-play options…

But until recently we shied away from dealing with designs that featured any overlapping elements because without a simple way to add custom CSS IDs or classes it was a major pain.

We would have to open the page inspector, look for the info and really play around with things to get it right.

That was until we got fed up with having to deal with the inspector every time we wanted to get our ClickFix shortcodes to work or add some custom CSS to really make things pop.

So the devs got to work in the lab and came up with a Chrome Ontrapage Inspector Extension that shortened the process to a couple of clicks.

In fact, it made our lives so much simpler we decided to give it away for free.

Just search for “ClickFix” on the Chrome Web Store and you can install it if you want.
In a nutshell, it highlights the identifiers used for field names, bump offers, blocks, columns, & elements so you can reference them with our shortcodes, custom objects, CSS and more.

But, how did this help me create an overlapping element?

Well, once I had my page set up in the page builder remember I needed to figure out what to reference for my style.

So I published the page and told the ClickFix Chrome extension to give me the column ID I wanted to target so that the entire thing would overlap.

Once it identified the column in question as “10” all I needed to do was drop the CSS into the header area, click done, save & voila!
div [Page//opt-id=”10″] {margin-bottom: -45px;}
Now, I just showed you one possible application for what you can do with an easy way to identify the pieces of your Ontraport pages.

Are there any other uses for these identifiers that will make your life any easier?
Drop us a line if you have any awesome ideas you’d like to try.