1. Home
  2. Email Campaigns
  3. Design a Campaign

Design a Campaign

With Pepo Campaigns easy and fast to use drag and drop template builder, and our library of proven responsive templates, it is possible to create and design gorgeous campaigns without any hassle.

Templates Library

Template library and Code tab

We have curated a library of our most proven templates and made them available to be used to realize beautiful winning email marketing campaigns.

The template library is always growing with new winning templates of ready to use designs. All these templates are fully responsive and have layouts designed to include all possible variations of winning campaigns including full text and full image layouts.

You can browse the Template section in the new Campaign setup. Choose the template that works best for you requirements and customize it in minutes.

Pepo templates are built using vertical “Containers” which define the layout for a section. The “Containers” contain “Content Elements”:

Once in the builder tool, to modify the layout of template utilize the “Containers” in the related tab, drag and drop “Containers” elements with different columns and responsiveness settings.

Then, fill them with “Content Elements”. Easily define the style you need for each “Content” element using content tools. Customize the look and feel of the overall template using ‘Template Settings’ and then proceed to the recipient section.

A detailed step by step tutorial on customization of templates using Template Builder is presented in the next section.

Templates Builder

Template builder 

The template builder allows flexibility and style customization of every single element of the campaign. Its highly intuitive drag & drop, image library and automatic resizing to fit helps to design gorgeous high-performing winning templates in minutes. For more advanced editing you can access the HTML code for every element. 

On the left section of the editor are listed three tabs – Content, Containers, and Template Settings. The left panel contains tools to create and change styles for your email. Under content, you can you drag and drop content boxes into containers. In the containers section, you can add new containers to create your layout. The settings tab allow you to control your email design settings (default font and colors). 

The right section of the tool represents the working area where you can drag and drop containers and content and reorder them as per preference. In the same section of the tool, every content and style change is applied automatically and you can view the changes in the preview pane.

You can see how your email will look like on different email clients using the advanced preview section, available in the top navigation bar.

Content

The ‘Content’ Tab in the left panel contains the tools to customize the email content. Depending on the template you will be able to see few or all of these in the design:

Text, Image, Button,Divider, HTML Code

In order to add these to your email, you can simply drag and drop the content in the containers to outline the layout. Then fill it with your assets and refine the style.

Text

Editing a text content is as simple as clicking on it. In the left panel will open up a card with two sections for editing text and style of the content.

In the ‘Content’ tab you can edit the font family, font size, add attributes for personalization in the text among the other options. In the ‘Style’ tab you can edit the padding for the text in pixels settings.

Images

An image can be edited or replaced by clicking it. On the left panel, a card will open with two sections for editing the image and the style of the content. In the ‘Content’ tab you can add an image from the image library or upload new images from your computer into the image library.

Simply click on the Library button in the Image content tab. This will open the library where new multiple images can be uploaded and used directly in the template builder. Once the image desired is uploaded, simply click insert to place it into the image content.

We are trying to give your users a seamless and beautiful user experience. In order to achieve that, we made our email campaigns as light as we could. This ensures that your emails are quickly received for that your readers want to come-back-for-more by having a good user experience. For this reason, only images below 1MB can be uploaded and user. And we would encourage you to aim to be even lighter than that.

It is possible to insert a link in the image and to associate an alt name, a piece of text describing your image, to it. The presence of alt name for images is highly important in emails, as an alt positively affect the deliverability of the campaign.

In the ‘Style’ tab you can edit the image padding in pixels and the size of the image. In order to maintain responsiveness the size of the image is expressed in percentage. To reduce the image size reduce the percentage in the Size box and see the reflected effect in the right working area.

Button

A button can be edited by clicking it. In the left panel will open up a card with two sections for the button content and the style of the element. Customizing a button is simple and comes with many options.

In the ‘Content’ tab you can edit the font family, font size, color, and other options. Here you can also declare target URL for your button. In the ‘Style’ tab you can customize the button color, radius, border, padding, and size in pixels.

Divider

The divider content element can be customized in seven different fashion: solid, dashed, dotted, double, groove, outset, inset. The thickness can be changed from 1 to 8 pixels and the color also is editable to suit your brand.

Customize the padding space on top and bottom of the divider, and if you only need space, just select None among the different Divider style.

HTML

The last content element is the HTML Code. To make this experience convenient you it is possible to add an HTML section to your layout in the Pepo Campaigns template builder.

When using it be careful in order not to affect the overall responsiveness of the template. Adding a Code Content is equal to add an empty <table> </table> to your template in a specific container position, you have full control over the content of this section.

On the top right of the navigation menu are present all the tool needed to access the advanced preview and send test emails. When the template is previewed or you run a send test your email is automatically saved.

Containers

Containers are basically row elements preconfigured into different columns configuration. You can stock different of them to compose your email message. In order to add a container to your email, you can simply drag it over to the working area into the desired position.

There are two types of containers:

Responsive containers

come in 3 versions: one column, two columns, and three columns. These responsive containers automatically resize to fit the available space based on the device screen size.

Flexible containers

come in 2 versions: one column and two columns. These containers are not responsive and can be edited by holding and sliding the columns separator based on the space on the row that want to allocate to each column.

Template Settings

Via ‘Template Settings’ the general setting of a template can be edited, from the width and the colors to the default fonts and the side paddings. Changes will be immediately effective in the right area that also behaves as a live preview for all changes.

Working Area

The right section of the tool is populated by the containers being added and you get a real-time preview of the customization. It is possible to drag and drop containers and after selection also move up and down existing ones.

By moving your mouse over a content type i.e. Text, Image, Button, Divider and selecting it will show a set of commands to edit, duplicate and delete the content element.

The content elements can also be moved around within a container or from one container to another in the template by simply clicking on the content to select it and releasing it where desired.

HTML Code

In the Template section, it is possible instead of selecting a template, to move to the Code Tab and choose to input or copy and paste directly your own HTML code.

Clicking on ‘Code’ tab will open up the code editor. The left panel is your code area. The right zone is where HTML code  will be loaded once the code is saved. Save your updated HTML code also before previewing it or send a test email.

There is no global standard for HTML and CSS in email, so email clients such as Outlook, Gmail, Yahoo, etc., will vary in how they render the HTML campaign code. We want your designs to look consistently fabulous across each client, so testing is key.

In order to add an image in the HTML code section, simply click on the Library button in the page footer. This will open the library where new multiple images can be uploaded and used directly in the HTML. Once the image desired is uploaded, click on copy link and then once back in the HTML right section, simply paste it where needed.

In the default footer of all the templates, there is an ‘unsubscribe‘ link that must be included in every email in order to allow your recipient to easily unsubscribe. Also, the footer contains other information useful to the recipient. This information needs to be updated with the account values i.e. company name, website and company address.

Updated on December 7, 2016

Related Articles