Create Pixel-Perfect Landing Pages with the New Instapage CSS Editor

“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 post-click 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 post-click landing page elements. Specifically, to directly adjust CSS styling and make the final 1% of visual design tweaks necessary to make their post-click 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 Style Editor) allows Premium users to add custom styling to a variety of post-click landing page elements. Specifically, the Inline Style 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 shape 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 Style 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.

The second exciting component of the CSS editing module is that we prominently display the element ID for the item being edited. This allows power users to invoke specific elements on the post-click landing page in custom code, triggering custom JavaScript actions based on an element by referencing it directly — without having to dig through the page source of the application.

(Keep in mind, changes made in the Inline Style 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 post-click 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? Sign up for an Instapage Enterprise demo today.