If you wish to allow the advertisers to include their creatives organically within your newsletter, you should allow native advertising.
If you wish to allow the advertisers to include their creatives organically within your newsletter, you should allow native advertising. In Emperor, you allow native sizes by adding the size that suits you best in the Allowed native creative size(s) field.
IMPORTANT: You can only select 1 (ONE) allowed size for native ad formats for both Landscape and Portrait. If you wish to make room for multiple native ads in your newsletter, you have to create multiple layouts and match them to your email style.
From a dropdown menu, you can select dimensions for just the Landscape size or for Portrait size as well as the Landscape.
This action opens a preview on the left side of your screen, as well as the entire Native layout design studio you can access by scrolling down the screen.
IMPORTANT: You can edit both Landscape and Portrait representation separately, and you can do that by switching between Landscape and Portrait buttons before Main settings.
Now, let’s see what you can customize in Emperor’s Native layout design studio.
-
Native layout design studio – Main settings
The Main settings of Emperor studio include customizing the template, layout area padding, image area padding, text area margin, and layout border.
Customizing template
Template settings include the essentials to formatting an ideal ad space:
- Image orientation within the ad (top, bottom, left, right) – default Top image
- Image percentage within the ad – default 50%
- Background color of the template – default white #FFFFFF
- Background color of the text area – default white #FFFFFF.
The best part of it all is – you don’t have to guess what your ads will look like when delivered. You can see all the changes you make, as you make them, in the live preview on the left side of the screen.
All colors in the settings can be chosen by selecting a shade you prefer, or by typing the code out of your brand color palette.
Layout and image area padding
Layout area padding and Image area padding are two sections located next to each other. Here you can make sure that your ads match the design of your email perfectly.
NOTE: It is in this section that the Template background color changes will be visible, once you enable the template background to be visible by increasing the layout area padding (default paddings are 0px).
Text area margin
Text area margin is another fancy feature that enables you to match the ads to the visual identity of your branded newsletter. Default is 0px for left, right, and top margin. The bottom margin depends on the amount of text displayed per ad.
Layout border
Layout border is switched off by default, but you can turn the feature on and open a set of settings to customize the border.
Border transparency and rounded corners are set to 0px or 0% by default, but you can change that to adapt it to the newsletter style.
Furthermore, you can address the border color – however, pay attention to the difference of the Template background color and Border color to understand which one you need and ensure the two settings are not conflicted (see image below).
-
Native layout design studio – Headline
Next on our menu is setting up the headline of the ad – the font, size, color, and format of the headline from the ad creative.
The font is selected from a wide list of fonts we integrate, while the default is Helveticaneue bold, size 20 and color black #000000. If your brand includes a font that is not offered on our list, please contact support@passendo.com and we will be happy to include it for you.
Other elements you can customize are whether the text is underlined, presented in the upper cases, line and letter spacing, as well as the bottom margin.
Finally, you can decide on the text alignment (left, centered, right).
All fields are designed with a support info that presents itself when you move the courser over the field. So, in case you aren’t sure what is the functionality of a certain field, you can learn within the customization board.
Moreover, you can see the preview on the left side of the board that changes in real time as you adjust a certain setting. That way, you can always know what you are serving before the creatives come into play.
But, that’s not all! One ridiculously long headline from the advertiser can mess up the entire style and structure of your email. This is why Emperor has enabled you to select the maximum number of characters (with spacing!) you allow within the ad.
-
Native layout design studio – Body text
In the Body text settings, we are customizing the the font, size, color, and format of the ad creative text underneath the headline.
The font is selected from a wide list of fonts we integrate, while the default is Helveticaneue bold, size 15 and color black #000000.
Other elements you can customize are whether the text is underlined, presented in the upper cases, line and letter spacing, as well as the bottom margin.
Finally, you can decide on the text alignment (left, centered, right).
All fields are designed with a support info that presents itself when you move the cursor over the field. So, in case you aren’t sure what is the functionality of a certain field, you can learn within the customization board.
Moreover, you can see the preview on the left side of the board that changes in real time as you adjust a certain setting. That way, you can always know what you are serving before the creatives come into play.
Emperor has enabled you to select the maximum number of characters (with spacing!) you allow within the ad body text, in order to avoid advertisers with a tendency to suffocate your readers.
Emperor default is 1000 characters max, but you can shorten or extend it to match the style of your brands.
-
Native layout design studio – CTA
For your ad to come to life, you need a powerful CTA button. Create the button by inserting the CTA text in the textbox, and then customize the looks of it.
Select the text font from a dropdown menu, and set up the text size (default 16) and color (default black #000000).
Next aspects you can customize is whether the text is underlined, and what is the letter spacing. See how the changes you make reflect on the preview on the left side, and keep adjusting until you are happy with the outcome.
Choose the CTA color from the color menu, or by adding your color code from the brand guide.
Add the button border by increasing the border width from default 0px, select the border color, and decide on the roundness of the CTA button.
Other aspects of the CTA button you can address is the layout position (move the button to the left, center, or right), padding (vertical and horizontal), and the margins from all sides within the ad space.
One extra design feature Emperor has enabled for the CTA button is the drop shadow feature. It is switched off by default, but you can switch it on and set up the shadow color and opacity.
-
Native layout design studio – Ad icon
Default settings for native ads in Emperor do not include a disclaimer about the ad. If you wish to include it, you can do so under the Ad icon section by simply naming the icon.
On your left side, you will see the preview of what the icon looks like, and you will be able to customize the font, size, underline the letters or change the text color (default text color is black #000000).
Furthermore, you can adjust the line and font spacing, vertical and horizontal padding and margins, and the background color (default background color is white #FFFFFF).
Additionally, you will be able to choose the position of the ad icon within the ad space. Default setting is Above the image, while you can change the vertical alignment (Top, Middle, or Bottom) from the dropdown menu, as well as the horizontal alignment (Left, Center, Right).
Alternatively, you can place the ad icon above the headline and decide on the horizontal alignment only, or place the ad icon inline with the headline as a part of the text.
-
Native layout design studio – Horizontal line
Finally, if it matches your newsletter style, you can add a horizontal line to your ad by clicking the Horizontal line switch.
Use the preview to help you select the line thickness and width, as well as line color (default is black #000000).
Further below, you can select the position of the line. Default setting is Below body text, but you can also opt to place it Between the image and body text, as well as Above the headline. After that, select the alignment from the dropdown menu (Left, Center, Right).
The last step of adding a horizontal line is to define the margins: horizontal, top, and bottom.
Native layout design studio - Portrait
If you have a responsive native ad (both landscape and portrait native sizes), you will have to address the settings for mobile version of the ad placement as well. Here, you are allowed to add only one dimension for portrait and one for landscape.
Once you are finished setting up the landscape layout for your ad space, scroll the settings back to the top and switch the button to Portrait.
All the settings for ad space design are the same in Landscape and Portrait, as well as the default settings. For portrait version, you can set up the following:
- Main template, layout padding, text margins
- Headline and body text fonts, colors, alignment and spacing
- Design the CTA button
- Design the Ad icon
- Include a horizontal line as a divider between sections.
As you make changes in the settings, you can see the update in the preview on the left side in real-time. All the settings from Landscape apply to the Portrait version, so please refer to the sections above for a detailed step-by-step guide.
IMPORTANT: If you have a responsive ad placement, but you DO NOT make style changes for the Portrait version, DEFAULT settings will apply – Basic native ad, WITHOUT the CTA button and Ad icon.
Finally, when you are happy with your ad space design, click the Create button and your ad is ready to go!