Inserting border lines and padding into your campaigns and landing pages

Contents

Using EasyEditor's 'Borders & padding' tool
   » Adding borders
   » Adding padding

Summary

EasyEditor makes it simple to add border lines and padding into your campaigns.

Here's an example of using our borders and padding tool to create a dashed white border line separating two paragraphs in a campaign.

ee_dashed_white_dividing_line.png

Using EasyEditor's 'Borders & padding' tool

To create a dividing border line as shown above, and other effects like this:

  • go to the Styles section of the side panel
  • select the block you want to apply the style to
  • select the Borders & padding section of the accordion

ee_borders_and_padding_tool.png

Adding borders

In this particular scenario we're adding a dashed white line to the bottom of the text block, so we'll use the 'Borders' tool.

ee_borders_tool.png

The 'Borders' tool has four controls:

  • Style - to select whether the line is solid, dashed, or dotted
  • Weight - to select the thickness of the line
  • Colour - to select the colour of the line (this uses the colour picker and will remember your colours)
  • Location - to select which edge of the block the border should be applied to; you can click on the edge of the square that corresponds to the edge of the block where you want to have the line. Clicking again will remove the line.
If you want to, you can add different styles, weights and colours of line to each side.

When this campaign design is reviewed, the added dashed white line can be seen.

However, as you can see from the image below, the line in our example is too close to the text above it - so we'll add some padding.

ee_too_narrow_padding.png

Adding padding

Padding is the space between the edge of the block and its contents. In this example, we'll use the 'Padding' tool to add a 10 pixel space between the bottom edge (and the dashed white border line) of the block and its contents.

ee_padding_tool.png

Use the Size dropdown 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 block, we can either click on the bottom of the padding diagram, or on the down arrow. Clicking on the edge or arrow again will remove the padding.

If you want to, you can have different sizes of padding on different edges of your block.

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

ee_dashed_white_dividing_line.png

Have more questions? Submit a request

Comments

  • Avatar

    The line is dotted. And when we select a non dotted style then the line becomes thick. So there should be a separator (a horizontal line) to separate two boxes such that there is ample space between the two boxes when the "separator" is inserted.