“The details are not the details. They make the design.” — Charles Eames
Many of our product features are the direct result of the feedback we’ve gathered through user interviews, customer support, or blog comments. Why? Because your feedback has proven to be the most meaningful and effective way we’ve found to improve our landing page platform.
A couple of our most-recent feature upgrades were created based entirely on your requests. Like your call for more font options to match your high design standards — so we developed direct integrations with Google Fonts and Adobe Typekit. You wanted more ways to reinforce your brand with clients — so we introduced Branded Email Notifications.
Today we’re answering your call again.
During UX research interviews of users with advanced awareness of web development, our product team repeatedly heard from power users that they would appreciate the ability to make fine adjustments to their landing page elements. Specifically, to directly adjust CSS styling and make the final 1% of visual design tweaks necessary to make their landing pages pixel-perfect.
We’re happy to announce that our new CSS editor is now available to Premium users!
What is the CSS editor module?
The CSS editor module (aka Inline Editor) allows Premium users to add custom styling to a variety of landing page elements. Specifically, the Inline Editor allows editing, creating, and deleting of any CSS property. Now, Premium users can make fine-level adjustments that will more accurately reflect their brand (and their client’s brand, too).
Simply put, this feature will allow experienced designers with web development skills to get maximum flexibility and precision from Instapage, such as:
- Text and padding
- Custom alignment
- Transforms and transitions
When the CSS module is enabled, the normal editing panel becomes inactive. And as you can see here, the module comes pre-filled with the standard CSS options you’ve grown accustomed to:
How is the CSS editor unique?
The editor is unique because it enables users to isolate CSS styling to individual page elements, as opposed to the entire page. Plus, you can add additional properties that were previously unavailable in the editing toolbar.
Below is an example using the CSS editor adding the text padding property and specifying a value. Notice that when you disable the module, the page element returns to its primary state before styling was applied:
Or if you want to add the custom text alignment property, “justified”, to your paragraph copy:
Or how about a drop shadow on a button:
Furthermore, if you reset the Inline Editor to default, the element returns the styling to its previous state. Content (links or pop-ups, for example) is not affected by resetting to default.
(Keep in mind, changes made in the Inline Editor work just like changes made using the regular styling tools — they only apply to the currently-selected variation.)
How will you use the CSS module?
Gain a higher level of control of your landing pages and ensure your pages are designed on brand and as perfect as you want it to be — down to the very last detail.
Starting today, Premium Instapage users have access to our new online CSS editor!
Not an Instapage premium user? Go here to upgrade your account. Then start designing your fully customizable landing page knowing you have the freedom to design that last 1% perfectly. Because as you know, one missed detail can be the difference in earning — or losing — a conversion.