Skip to main content
Skip table of contents

Step-By-Step Build an Email Layout

This feature is only available to the Designer role

Follow this Step-by-Step guide to build an Email Layout from scratch.

The Layout you are about to build should look close to this when you are done:

BCS-Layout contruction

image-20240801-055532.png

Step-By-Step

Step 1: Insert a Layout Container in the canvas. This will place a Row Container inside it. Select the Layout Container.

image-20240801-055809.png

Style the Layout container:

Field: “BCS-16”

Padding:

  • Top = 15px

  • Bottom = 15px

Screenshot 2024-07-31 102038.png

Step 2: Select the 1st Row Container.

Style

Padding:

  • Top = 0px

  • Bottom = 0px

  • Right = 30px

  • Left = 30px

Screenshot 2024-07-31 104934.png

Step 3: Insert a Column container into the Row container.

image-20240801-055730.png

Style

Padding:

  • Top = 0px

  • Bottom = 15px

Screenshot 2024-07-31 105412.png

Step 4: Add a Text element to the Column container:

image-20240801-055917.png

Style

Field: “Header”

Font:

  • Font Family = Arial

  • Font weight = Regular

  • Font size = 26

  • Line Height = 28

  • Color = rgb(4, 96, 169) / #0460a9

Padding:

  • Top = 0px

  • Bottom = 0px

  • left = 0px

  • right = 0px

Screenshot 2024-07-31 105648.png

Make the text BOLD using the floating text editor. Double click the text on the canvas to select it:

image-20240801-092737.png

Step 5: Add another Text element to the Column container, or copy the existing one using CTRL+C, CTRL+V / CMD+C, CMD+V.

image-20240731-091401.png

Style

Field: “Subheader”

Font

  • Family= Arial

  • Weight = Regular

  • Size = 20

  • Height = 24

Padding:

  • Top = 8px

  • Bottom = 0px

  • Left = 0px

  • Right = 0px

Screenshot 2024-07-31 111423.png

Step 6: Add the 2nd Row container to the Layout container:

image-20240801-060400.png

Style

Padding:

  • Top = 15px

  • Bottom = 15px

  • Right = 30px

  • Left =30px

Screenshot 2024-07-31 112447.png

Step 7: Add 3 Column containers into the Row container.

image-20240731-095719.png

Style - From top and down:

  • Justify = Start on all

  • Column width = 48.5% on the first Column

    • Padding = 0 on all sides

  • Column width = 3% on the second Column

    • Padding = Top/bottom = 8px

  • Column width = 48.5% on the third Column

    • Padding = 0 on all sides

Screenshot 2024-08-01 081007.png

Screenshot 2024-08-01 081140.png

image-20240801-082749.png

Step 8: Add an Image container in the first Column.

image-20240801-082850.png

Style

Field: “Artwork Left”

  • Size= 262px

Screenshot 2024-07-31 120519.png

Step 9: Insert an Image container in the third Column - You can copy the left you already insertedto save time on styling it. CTRL+C, CTRL+V / CMD+C, CMD+V.

image-20240801-083147.png

Style

Field: “Artwork Right”

  • Size= 262px

image-20240731-102045.png

Step 10: Add a 3rd Row Container to the Layout Container.

Screenshot 2024-07-31 122230.png

Padding:

  • Top = 15px

  • Bottom = 15px

  • Right = 30px

  • Left =30px

Screenshot 2024-08-01 082410.png

Step 11: Insert a Column container into the Row container.

image-20240801-062621.png

Style

Padding:

  • Top/bottom = 0

  • Left/right = 0

Step12: Insert a text element in the Column container.

image-20240801-062904.png

Field: “Paragraph”

Text:

  • Family = Arial

  • Weight = Regular

  • Size: 16

  • Line height = 24

Padding:

  • Top/bottom = 0

  • Right/left = 0

Screenshot 2024-08-01 082923.png

Settings: Make this paragraph mandatory:

Screenshot 2024-08-01 083550.png

Step 13: Insert additional paragraphs in the same column container - use copy paste to save time on styling. CTRL+C, CTRL+V / CMD+C, CMD+V.

image-20240801-063422.png

Settings: Make these paragraphs optional. Ensure the checkmark is not present.

image-20240801-102422.png

Step 14: Insert a Button element into the Column container.

image-20240801-064024.png

Style

Field: “Button label”

Size:

  • H / Height = 44px

Text:

  • Family = Arial

  • Weight = Regular

  • Size = 16

  • Line height = 150

  • Background

  • Color = rgb(4, 96, 169) / #0460a9

Padding:

  • Top = 30px

  • Bottom = 0px

  • Right = 12px

  • Left = 12px

Inner Padding:

  • Top = 10px

  • Bottom = 10px

  • Right = 16px

  • Left = 16px

Border:

Radius = 0px

Screenshot 2024-08-01 084119.png

Step 15: Insert a 4th Row container in the Layout container.

image-20240801-065445.png

Style

Padding:

  • Top = 15px

  • Bottom = 4px

  • Right = 30px

  • Left = 30px

Screenshot 2024-07-31 122421.png

Step 16: Add a Column container to Row container.

image-20240801-065936.png

Style

Padding:

  • Top/Bottom = 0px

Screenshot 2024-07-31 122823.png

Step 17: Add a Text element to the Column container.

image-20240801-071043.png

Style

Field: “Bullet List Header

Font:

  • Family = Arial

  • Weight = Regular

  • Size = 20px

  • Height = 24

  • Color = rgb(4, 96, 169) / #0460a9

Padding:

  • Top = 0px

  • Bottom = 4px

  • Right = 0px

  • Left = 0px

Screenshot 2024-07-31 123026.png

Double click on the text. Make text BOLD using the floating text editor.

Screenshot 2024-08-01 105212.png

Step 18: Add another text element inside the column container - Copy the previous one to save time on styling.

image-20240801-071547.png

Style

Field: “Bullet 1

Font:

  • Family = Arial

  • Weight = Regular

  • Size = 16px

  • Height = 24

  • Color = rgb(4, 96, 169) / #0460a9

Padding:

  • Top = 0px

  • Bottom = 0px

  • Right = 0px

  • Left = 16px

Screenshot 2024-07-31 124729.png

Floating text editor

  • Make text regular

  • Make text a Bullet Point. Use Unordered List

Screenshot 2024-08-01 091808.png

Step 19: Copy as many as you need into the Column container.

image-20240801-072249.png

Make the first bullet point Mandatory in Settings:

image-20240731-110025.png

Step 20: Insert a 5th Row container in the Layout container.

image-20240801-072527.png

Go to Settings for the Row and enable “Show Field in editor mode”.

image-20240731-110709.png

Style

Field: “Notes Block”

Padding:

  • Top = 15px

  • Bottom = 0px

  • Right = 30px

  • Left = 30px

Screenshot 2024-08-01 092715.png

Step 21: Add a Column container to the Row container.

image-20240801-073226.png

Style

Padding:

  • Top = 0px

  • Bottom = 0px

Screenshot 2024-08-01 093306.png

Step 22: Add a Text element to the Column container.

image-20240801-074220.png

Style

Field: “Notes or Captions

Font:

  • Family = Arial

  • Weight = Regular

  • Size = 10px

  • Height = 14

Padding:

  • Top/bottom = 0px

  • Right/left = 0px

Screenshot 2024-08-01 094246.png

Step 23: Copy the Text element inside the same Column container.

image-20240801-075227.png

Make the first text element mandatory and the rest optional. This is done in the Settings menu:

image-20240801-082443.png

Step 24: Final touches.

  • Add descriptive text or actual content to the text fields.

  • Ensure that the fields have suitable names

  • Ensure that mandatory fields are enabled if needed

image-20240801-090211.png

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close