Inserting borders, padding and dividing lines into your campaign

Inserting borders, padding and dividing lines into your campaign

Our Drag-and-Drop Editor makes it simple to add borders, padding and dividing lines into your campaigns.

Here's an example of using our borders and padding tool to create a dashed grey line separating two news items in a newsletter.

 border-and-padding-1.png

To do this, and effects like this:

  • go to the Style section of the sidebar
  • select the element you want to apply the style to
  • select the Borders and Padding section

border-and-padding-2.png 


In this particular scenario we are adding a dashed grey line to the bottom of the element, so we will use the Borders tool.

border-and-padding-3.pngThe Borders tool has four controls:

  1. Style - to select whether the line is solid, dotted or dashed
  2. Weight - to select the thickness of the line
  3. Color - to select the colour of the line (this uses the colour picker and will remember your colours
  4. Location - to select which edge of the element the border should be applied to; you can click on the edge of the square that corresponds to the edge of the element you want to have the line; clicking again will remove the line

Note that if you wanted to, you can add different colors and weights of line to each side.

This looks great, and when we review our email design we can see the grey line. However, as you can see from the image, the line in our example is too close to the text - so we will add some padding.

 border-and-padding-4.png

border-and-padding-5.png is space between the edge of the element and its contents. In this example we will add a 20 pixel space between the bottom edge (and dashed grey border) of the element and its contents.

Use the size drop-down to select how big the padding should be, and then click on the diagram to select which edge should have the padding. In this example, as we want a space at the bottom of the element, we can either click on the bottom of the padding diagram, or on the down arrow. Clicking on the edge again will remove the padding.

Note that you can have different sizes of padding on different edges of your element.

When we review the email we can now see that the border and padding have created a nice neat divider between our two news elements.

border-and-padding-6.png

    • Related Articles

    • How do I change the campaign settings?

      Campaign settings can be changed using the Summary option available either from the Overview screen (if the campaign was recently edited). Or the settings can be changed using the My Campaigns screen. Click the Summary option so that the Campaign ...
    • Previewing your campaign

      The preview tool can be accessed using the preview button above the main ribbon, and from various other parts of the application. When you use the Preview option, a new window opens to show how your email will look. You can review both the HTML and ...
    • Changing the default padding of building blocks in EasyEditor

      Please note: This information also applies to EasyEditor for landing page templates. All new building blocks have a default value for their padding property. To change the default padding of your building blocks: Add the following internal stylesheet ...
    • Using dynamic rules and personalization on subject lines and 'from names'

      Summary In the same way that you can use personalisation and dynamic content in your email content, you can also use personalisation and dynamic rules to determine what subject line and 'from' name a contact should see. Personalisation — inserts data ...
    • Adding buttons to your campaign

      Summary EasyEditor allows you to easily add buttons to your responsive campaign by dragging and dropping in the Button building block. Contacts clicking on the button will be taken to wherever or whatever you set the button to link through to. Adding ...