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 the 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. Right-click on an element on your page and select Edit CSS:

Screenshot_2023-03-22_at_11.10.58.png

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

Basics_-_enable_ISE.gif

Another component of the CSS editing module is that you can see the unique 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.

image of the unique element-ID in the inline style editor

 

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.

Note: While we enable our customers to use custom code to implement various non-standard or custom functionality, we do not guarantee the functionality of such code. Instapage's Support Team cannot offer any coding assistance or troubleshoot the way third-party or custom code behaves. If you need help in regards to a third-party snippet that you tried implementing, please contact the provider of the code.

In case you need help with a custom functionality or any code customization that is not provided through our Help Center articles we have a Professional Services team that can help our Convert users. The Convert plan includes Professional Services as well as additional features and services that can be seen here: https://instapage.com/convert-benefits