Ontraport Tutorial: Custom CSS & Device Triggers For Ontraport Pages

Have you ever wished that you could spice up your Ontraport Pages with special design features like overlapping elements, text effects or simply the ability to fine tune how your pages look on tablets and larger screens?

Well over here at ClickFix.io we decided that in order to make sure our marketplace templates stand out from the crowd we needed to do something to help break the mold a little bit.

After building more than 100 templates in the last 6 months, our designers begged us to figure out how to unleash more of their creativity so we got busy trying to figure out what could be done to take advantage of some of the latest design trends.

What we ended up with was so cool, that we felt like we just had to share it with everyone.

That’s why we’ve released 2 new sets of shortcodes that are literally going to take your Ontraport Page designs beyond anything you’ve been able to do so far.

… Oh and they’re 100% FREE so nobody has any excuses for ugly pages now LOL

The first is our CSS shortcode which can target elements, columns, rows or even entire blocks:

[CSS #blockID “style: definition;”]

[CSS elementID of #blockId “style: definition;”]

[CSS columnID of #blockId “style: definition;”]

But, no conversation about CSS would be complete without mentioning media queries.

For those of you just getting started, those are simply lines of code that tell the webpage how to act based on the size of the device being used.

Ontraport has built-in controls for portrait mobile layouts where you can adjust the breakpoints along with standard desktop design support.

But that can leave a lot to be desired on some of the more creative designs our clients are after.

An iPad is considerably bigger than an iPhone and my 23inch monitor is completely different than my 15inch MacBook Pro.

That’s why we also decided to make sure you can control how your pages will display down to the pixel with our [IfScreen] conditional shortcode.

It works just like normal media queries where you can define:

[IfScreen min-width:ABCpx] DESIRED ACTION [/IfScreen] = What to do if the device is EQUAL TO or GREATER THAN ABCpx wide

[IfScreen max-width:ABCpx] DESIRED ACTION [/IfScreen] = What to do if the device is EQUAL TO or LESS THAN ABCpx wide

[IfScreen min-width:ABCpx and max-width: XYZpx] DESIRED ACTION [/IfScreen] = What to do if the device is BETWEEN ABCpx and XYZpx wide

But rather than just limit you to CSS definitions based on screen size…

We though that the ultimate flexibility for creative thinkers would be to allow you to execute ANY shortcode based on screen size.

For example, Ontraport’s built-in controls allow you to show/hide entire blocks based on size… but now you can do the same with individual elements.

Or…

Maybe you want to show specific text or trigger a time delay, but only on tablets or bigger.

Or…

Maybe you just need to dial in your CSS effects for those devices that are hard to build for with the “out-of-the-box” controls.

Whatever the usecase, now the sky’s the limit.

If you have any questions drop them below or feel free to reach out to me directly and if you want to see the live examples feel free to visit https://clickfix.io/css.

Post Author: hatefull