You can find all the components that are available in the editor on the left hand side. You can configure the general settings under the General tab. You can style certain elements individually from one another if desired, such as colors. When you click on the General tab, the following options will appear:
- Select a brand: in the settings or within the editor it is possible to define a brand identity. You can read more about this in the article: How do I create brand guidelines in the message editor?
- Update branding: have you selected a brand identity? This is immediately applied to your message when you click on the update branding button.
- Page title: the page title is what is shown in the tab of your browser. For the digital accessibility of your web page, it is better to change this title to a more specific description. That makes it easier, for example, to switch tabs by voice.
- Template width: it is set to 600 pixels by default. This is the recommended size for email so your reader doesn't have to scroll from left to right. This editor will be useable for web pages in the future as well where a broader width is more common, so you will be able to adjust the width here.
- Text color: select your brand's text color by using a hex code or use the color picker to select a color from the color block.
- Background color: the background is white by default, but you can select any color you want.
- Font: you can choose between a variety of web safe fonts.
- Content background color: this background color is also set to white by default. You can choose any color, such as light blue:
- Enable background image: move the slide switch to the right to get more options for setting a background image. Read more under the heading: Setting a background image.
- Content align: choose how you want to align the content. It is set to center alignment by default because this is most common in emails.
- Content padding: the spacing of the content in relation to the background. Let's say you change the padding at the top, then the content will move down.
An example of 0 content padding:
An example of content padding set to 20 pixels:
By clicking on the icon shown below, you can edit the padding of each side individually:
- Link color: make a link stand out by giving it a different color than your other text.
- Link underline: use the switch slide to underline all links.
Setting a background image
If you want to insert a background image, move the switch slide to the right. Extra options for setting up a background image will appear.
- Background image: select which image you would like to use from the Images module or upload a new image.
- Repeat: by turning the switch slide on or off, you can choose whether the background image should be repeated when it's not large enough to cover the whole width, when someone views the email on a large screen for instance.
It is advisable to use an image that blends in when repeated, such as a pattern.
- Custom position: you can change the position of the background image, vertically as well as horizontally, based on pixels or percentages.
- Alignment: you can align the background image in relation to your content. It depends on the image whether a left, right or center alignment is best.
- Auto width: this option is set by default, but you can choose to position the image or scale the image manually.
- Auto height: this option is set by default, but you can choose to position the image or scale the image manually.
Desktop and Mobile
It is possible to have different settings for desktop and mobile views. When it comes to the difference in the General tab settings, you can adjust the padding. Padding refers to the space between the content and the background in this case.
Padding is set to 0 by default. If you're working with background colors, this is what it will look like on a mobile screen:
When you add padding, it will look like this: