Configure settings in Builder
Builder can be customized with settings that make your email development faster and more convenient for your workflow. Define your theme, font size, set auto-completion, format your code, and more!
To configure your settings in Builder, select the gear icon in the bar above your code. Once you save your settings configuration, these settings will be saved and maintained for any emails you work on. Your settings are unique to you though, other users on the same account can configure their own settings.
Presentation options
Switch theme
Select a code editor theme from the dropdown box. Once you’ve selected your code editor theme, choose the green Save Settings button in the lower right corner and your theme will be updated.
Font size
To increase or decrease the font size in the code editor, select a font size from the dropdown box. Once you’ve selected your font size, select Save Settings and your font size will be updated.
Soft wrapping
Toggle soft wrapping on or off depending on how you would like to view your code for new lines to follow its parent indentation instead of line wrapping by default. Select Save Settings after any changes.
Automations options
Inline CSS
Toggle the Inline CSS option on or off in your Builder project. CSS inlining is an individual setting and only applies to your projects.
Any embedded CSS in the <head> of a document or any CSS in the CSS tab will be automatically inlined in the preview pane. Your code in the code editor won’t actually change, only what you see in the preview pane.
NOTE: Some CSS won’t be inlined automatically, such as media queries. If you ever want to exclude CSS from being inlined, you can use the data-ignore-inlining attribute on any <style> or <link> tag so that CSS won’t be inlined.
| The Browser preview will display your inlined email with every edit you make in real-time. When you tab over to view Email Previews, we automatically capture the inlined version of your email. When you send a test email to yourself via the Share section, it will also send the inlined version. When you’re done testing your email, you can retrieve your final inlined HTML in two ways.
|
Litmus CSS inliner rules
|
Auto-completion
The code editor has several different forms of auto-completion enabled by default.
- HTML tags: every time you open an HTML tag with “<” auto-completion is then triggered. Every time you start to close an HTML tag with “
- CSS properties: regular CSS properties in the document or in the CSS tab have auto-completion on by default.
- Inline HTML attributes: auto-completion is triggered for all HTML attributes and if completed places the cursor automatically in the value field (i.e. width=”|”).
- Inline CSS properties: when you use inline styling (style=””) auto-completion is triggered.
- Pre-existing CSS: any existing CSS either in an embedded style block in the head, in the CSS tab, or in Partials will be available as auto-completion values.
- Pre-existing images: any existing images uploaded to an email will be available as auto-completion values for image tags or background properties.
Close tags
When Close tags is turned on, a closing tag will automatically be generated for any opening HTML tag written. For instance, if <table> is written, then a corresponding closing tag of </table> will be injected directly after it.
Formatting
Format document
Apply code formatting to the full email document with the keystroke trigger.
Format selection
Apply code formatting to text currently highlighted within the code editor with the keystroke trigger.
Format on paste
Toggle on so any time content is pasted into the document, the code formatter is applied.
Indentation
Set your indentation to either be Tabs or Spaces.
Tab width
Set a value of your tab width to be between 1-8.
Indent <head> / <body> tags
If enabled, when running the formatter, the <head> and <body> tags will be indented from the <html> tag.
<script> / <style> indentation
Apply special formatting to <style> and <script> tags.
Newline limit
When running the formatter, limit the maximum number of newlines that can exist between lines of content within the document.
End with newline
On formatting, adds a newline character if one isn’t present to the end of the document.