[HideElement 63,79,81 in #of287d31c9f68] [HideBlock #o942820a82b1e,#of488b8566cc2,#oac194626b056,#o117a6b2f7fce,#o8f77864e209a,#o3457cd8ba795,#oba22041a98f4,#oa18172d56e26,#ob9de86bd6b49,#o87b2124cd2ec] [IfAnchor #feature.overview][ShowElement 69,73,70 in #of287d31c9f68][HideElement 63,79,81 in #of287d31c9f68] [ShowBlock #o8b725d199808][HideBlock #o942820a82b1e,#of488b8566cc2,#oac194626b056,#o117a6b2f7fce,#o8f77864e209a,#o3457cd8ba795,#oba22041a98f4,#oa18172d56e26,#ob9de86bd6b49,#o87b2124cd2ec] [Redirect #o7a7b02f01a90] [/IfAnchor] [IfAnchor #demo][ShowElement 63,79,70 in #of287d31c9f68][HideElement 69,73,81 in #of287d31c9f68] [ShowBlock #of488b8566cc2,#oac194626b056,#o117a6b2f7fce,#o8f77864e209a,#o3457cd8ba795,#oba22041a98f4,#oa18172d56e26,#ob9de86bd6b49,#o87b2124cd2ec][HideBlock #o8b725d199808,#o942820a82b1e] [Redirect #o7a7b02f01a90] [/IfAnchor] [IfAnchor #how.to.implement][ShowElement 63,73,81 in #of287d31c9f68][HideElement 69,79,70 in #of287d31c9f68] [ShowBlock #o942820a82b1e][HideBlock #o8b725d199808,#of488b8566cc2,#oac194626b056,#o117a6b2f7fce,#o8f77864e209a,#o3457cd8ba795,#oba22041a98f4,#oa18172d56e26,#ob9de86bd6b49,#o87b2124cd2ec] [Redirect #o7a7b02f01a90] [/IfAnchor] [CSSElement 6 in #o87b2124cd2ec "margin-bottom:-75px;"] [CSSColumn 5 in #ob9de86bd6b49 "margin-top:-50px;"] [CSSElement 5 in #oa18172d56e26 "text-shadow: 2px 2px 4px #000000;"] [CSSElement 9 in #oba22041a98f4 "transform: rotate(20deg);"] [CSSElement 9 in #o3457cd8ba795 "-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);"] [CSSElement 9 in #o8f77864e209a "-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */ filter: blur(5px);"] [CSSElement 9 in #o117a6b2f7fce "border-radius: 50%;"] [IfScreen max-width:512px] [HideElement 7,8,9,10,11 in #oac194626b056] [ShowElement 5,6 in #oac194626b056] [/IfScreen] [IfScreen min-width:768px and max-width:1024px] [HideElement 5,6,9,11 in #oac194626b056] [ShowElement 7,8,10 in #oac194626b056] [/IfScreen] [IfScreen min-width:1025px] [HideElement 5,6,7,8,10 in #oac194626b056] [ShowElement 9,11 in #oac194626b056] [/IfScreen]
💡 ClickFix | CSS
settings

LOGIN

CSS
Unlock the full potential of customization with ClickFix's CSS shortcodes. Tailor the look and feel of your Ontraport pages effortlessly, from blocks to elements. With this feature, you have the creative freedom to apply custom styling to different parts of your pages, ensuring they align perfectly with your brand's identity.

Whether you're a design enthusiast or simply want to fine-tune the appearance of your content, CSS shortcodes put the power in your hands. Craft visually appealing layouts, adjust typography, control spacing, and fine-tune colors—all with the simplicity of shortcode integration.

Here are some creative ways to harness the CSS shortcodes:

  • Unique Page Elements: Highlight specific blocks or elements by applying unique styling. Draw attention to important content or calls to action with customized visual cues.

  • Responsive Design: Ensure your pages look great on any device. Use CSS shortcodes to create responsive designs that adapt to various screen sizes.
     
  • Interactive Elements: Enhance user engagement by adding hover effects, transitions, or animations to elements on your pages.
     
  • Highlight Key Information: Make critical information stand out by changing the color, size, or style of specific text elements.
     
  • Layout Control: Create unique layouts by adjusting padding, margins, and positioning of blocks and columns.
     
  • Personalized Styling: Tailor the appearance of fields and rows for advanced personalization, ensuring each visitor's experience is unique.

Unleash your creativity and elevate the visual appeal of your Ontraport pages with CSS shortcodes from ClickFix. Your designs, your rules!

CSS shortcodes can be used to add custom styling to the different parts of your Ontraport Pages:

Blocks
Columns
Elements
Fields*
Rows*

*NOTE: To target Fields & Rows, you’ll need an advanced understanding of how CSS selectors & the inspector panel works.

[ CSS] - Targets Blocks

[ CSS #%id_of_target_block_01%,#%id_of_target_block_02% “%css-property01%:%value01%;%css-property02%:%value02%;”]

The declaration block contains one or more declarations separated by semicolons ; .

Each declaration includes a CSS property name and a value, separated by a colon : .

A CSS declaration always ends with a semicolon ; , and the shortcode declaration is surrounded by square brackets [ ].

DEMO

CSS Applied

Overlapping Elements

[ CSSElement 6 in #o87b2124cd2ec "margin-bottom:-75px;" ]

CSS Not Applied

In order to get something you've never had, you have to be willing to do something you've never done...

Overlapping Columns

[ CSSColumn 5 in #ob9de86bd6b49 "margin-top:-50px;" ]

In order to get something you've never had, you have to be willing to do something you've never done...

CSS Applied

CSS NOT Applied

Make It Pop!
Text Effects

[ CSSElement 5 in #oa18172d56e26 "text-shadow: 2px 2px 4px #000000;" ]

Make It Pop!

CSS Applied

CSS NOT Applied

CSS Applied

Rotate Elements

[ CSSElement 9 in #oba22041a98f4 "transform: rotate(20deg);" ]

CSS NOT Applied

CSS Applied

Box Shadows

[ CSSElement 9 in #o3457cd8ba795 "-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);" ]

CSS NOT Applied

CSS Applied

Image Filters

[ CSSElement 9 in #o8f77864e209a "-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);" ]

CSS NOT Applied

CSS Applied

Image Styles

[ CSSElement 9 in #o117a6b2f7fce "border-radius: 50%;" ]

CSS NOT Applied

Your screen is a mobile

Your screen could be a really large mobile or a tablet

Your screen is likely a laptop/desktop

Device Specific Tricks

[ IfScreen max-width:512px ]
  [ HideElement 7,8,9,10,11 in #oac194626b056]
  [ ShowElement 5,6 in #oac194626b056]
[ /IfScreen ]

[ IfScreen min-width:768px and max-width:1024px ]
  [ HideElement 5,6,9,11 in #oac194626b056]
  [ ShowElement 7,8,10 in #oac194626b056]
[ /IfScreen ]

[ IfScreen min-width:1025px ]
  [ HideElement 5,6,7,8,10 in #oac194626b056]
  [ ShowElement 9,11 in #oac194626b056]
[ /IfScreen ]

tablet_mac
laptop_mac
chevron_right
Documentation
arrow_drop_down_circle
Divider Text
Enter Your Email Below and Join 700+ Ontraport Users on their ClickFix Journey.
If you need help to implement this into your account or you need more information, hit "Consult an Expert" down there, send your request and we'll take it from there.
arrow_drop_down_circle
Divider Text
settings
OR
chevron_right
Consult an expert
And let us figure out together if ClickFix is right for you
arrow_drop_down_circle
Divider Text

"The Team at ClickFix are the ultimate Ontraport hackers. They make the impossible possible, and have helped out a ton of our clients with their tools."

Landon Ray
Ontraport CEO

© [TheYear] ClickFix.io | Terms of Service | Privacy Policy
[bot_catcher]