How it works
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.
Support
The Advanced styling feature is currently in beta and available to any brand. Reach out to support to ask to be added to the beta.
List of elements
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.
Elements
The naming of the css ids are emotive-{section}_{element}. There are 3 different sections, email/email_form), sms/sms_form, and success, corresponding with the different phases of the pop up . 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)
So 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.