Inline Style Editor (CSS Editor Module)

The CSS editor module (Inline Style Editor) allows 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. You can make fine-level adjustments that will more accurately reflect your brand (and your client’s brand, too).

The editor 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.

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

Using the CSS Editor Module

1. Click on an element on your page and select Edit CSS Styles:

image of the inline style editor option when selecting an element

2. Enable Inline Style Editing and you're good to go:

image of the inline style editor module

Another component of the CSS editing module is that you can see the element ID for the item when 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.



If you want to reset the Inline Style Editor to default, the element returns the styling to its previous state. Content like links or pop-ups, for example, is not affected when taking this action. To do this just click on the "Reset to Default" button.

In case you need help with a custom functionality or any code customization that is not provided through our Help Center articles we have an Implementation Services team that can help our Converting users. The Converting Solution includes Implementation Services as well as additional features and services that can be seen here: