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

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

Last updated on August 2, 2016 by Brandon Weaver in Instapage Updates
Show Me The 10 Best Reasons to Create with Instapage

“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 Style Editor) allows Premium users to add custom styling to a variety of 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 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 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 landing pages and ensure your page is 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.

Show Me The 10 Best Reasons to Create with Instapage
Sign Up for a 30 Day Free Trial
Join 250,000+ other businesses who rely on Instapage.
Get Started