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

by Brandon Weaver in Instapage Updates

“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:

This picture shows marketers how they can use Instapage's new CSS editing module to make fine-styling changes to post-click landing pages.

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:

This gif shows marketers how to add text padding to individual page elements using Instapage's new CSS editing module.

Or if you want to add the custom text alignment property, “justified”, to your paragraph copy:

This gif shows marketers how to adjust text alignment to individual page elements using Instapage's new CSS editing module.

Or how about a drop shadow on a button:

This gif shows marketers how to add a drop shadow to individual page elements using Instapage's new CSS editing module.

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.

This gif shows marketers how resetting the CSS editing module to "default" returns the page element's styling to its original state.

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.

blog CTA enterprise demo illustration

See the Instapage Enterprise Plan in Action.

Demo includes AdMap™, Personalization, AMP,

Global Blocks, heatmaps & more.

Brandon Weaver

by Brandon Weaver

Brandon Weaver is one of the worlds leading experts on digital advertising, CRO, & personalization, with more than a decade in the industry.

Ready to turn more ad clicks into conversions?

Try the world's most advanced landing page platform today.

We use cookies to give you the best experience on our website, deliver our services, personalize content, and to analyze traffic. By continuing to use our website you agree to allow our use of cookies. To know more please refer to our Cookie Policy.
Got it close