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 [ ].
CSS Applied
[ 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...
[ 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
[ CSSElement 5 in #oa18172d56e26 "text-shadow: 2px 2px 4px #000000;" ]
CSS Applied
CSS NOT Applied
CSS Applied
[ CSSElement 9 in #oba22041a98f4 "transform: rotate(20deg);" ]
CSS NOT Applied
CSS Applied
[ 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
[ CSSElement 9 in #o8f77864e209a "-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);" ]
CSS NOT Applied
CSS Applied
[ 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
[ 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 ]
