Skip to main content
The Advanced Styling feature is intended for people with knowledge of CSS to allow them to customize the style of the our pop ups beyond what the editor allows. When using it, please check how the pop up renders in multiple browsers and types of devices (desktops, tablets, phones) to ensure that it looks correct on all devices and browsers.

​
Element Names

We use the  Block Element Modifier(BEM) methodology for naming (https://getbem.com/naming/),
  • Blocks: #<emotive-block-name>
  • Elements: #<emotive-block-name>__<element-name>
  • Two underscores are used to separate the block name and the element name
  • Modifiers: #<emotive-block-name>--modifier
  • Two dashes are used to separate the block name or element name and the modifier name
When you open the advanced styling editor, it is pre-populated with all the elements you can style. Find advanced styling Find advanced styling

​
Element Types

The naming of the css ids are emotive-_. There are 3 different sections, email/email_form), sms/sms_form, and success, corresponding with the different phases of the popup. The major elements make up each page and structurally look like:
  • logo
  • pre-headline (small headline above the big headline)
  • headline
  • post-headline (small headline below the big headline)
  • form-input (input field)
  • form-button (button the user presses)
  • form-disclaimer (Disclaimer at the base of the form)
To make an adjustment to the styling of the text input on the email field, the CSS for it would go into #emotive-email-form__form-input.
Advanced Styling is in beta. To have it enabled in your account, please send an email to [email protected] and submit a request.