Layout Breakdown
A breakdown of the different fields/tabs.
Tabs
As stated on the previous page, there are 9 layouts to choose from.
Depending on the layout, the tabs and fields will be different. However, the ‘Settings’ and ‘Spacing’ tabs are the same on all layouts. However, on the ‘Settings’ tab, a couple of fields will switch out depending on an image or text-based layout.
This pages provides a breakdown of the fields and how/what they are used for.
Tab: Settings
Article name Text-based field. This field is to name the article which then helps when re-ordering articles if needed.
Anchor point (Logo or Banner layout only) This field allows you to add an anchor point to an image article layout. Please only use letters and numbers with no spaces.
Background colour Sets the background colour for the article block.
You can either click on the colour swatch to open the colour picker or type in the hex code (make sure there is a # to set the colour correctly).
Default text colour (copy-based layouts, not Logo or Banner layouts) This article is to set the main copy colour from the options you set in the ‘Template Options’. You will either choose your light or dark option depending on the background colour you have chosen.
Do you want to add a separator at the bottom of this article? This will add a separator line underneath your article. Selecting ‘yes’ will show another field below to select the separator line colour.
Separator Colour Shows if the above field has been ticked ‘yes’. Use the colour picker to select a colour.
Do you want to add a separator gap at the bottom of this article? This will add a gap at the bottom of your article of the main background colour. Selecting ‘yes’ will show another field below to set the height of the gap.
Gap height Shows if the above field has been ticked ‘yes’. Use the slider to select the gap height.
Tab: Spacing
This tab is where you set the spacing around the article. You can move the slider left/right to set the spacing for each edge. The spacing is set in 5px increments.
If you set the spacing to 0 for any edge, the mobile spacing will not be applied for that edge.
If you wish to keep the spacing selected on mobile you can turn off the mobile spacing settings (set in the template options) at the bottom of the tab. Just check ‘yes’.
Layout: Logo
Tab: Logo
Logo Insert your logo image here.
Image alignment Align the logo left, center or right. If also using logo 2 the alignment doesn’t apply, and Logo aligns left and Logo 2 aligns right.
Logo link Link your logo image
Link friendly name Help with link tracking in the mailout.
Tab: Logo 2
Logo 2 Insert your logo image here.
Logo link 2 Link your logo image
Link friendly name 2 Help with link tracking in the mailout.
Layout: Banner
Example of a banner full width (no spacing)
Tab: Image
Image desktop Insert banner image. Max image width is based on the spacing settings.
Image mobile Insert a mobile image if applicable. If not required leave blank the and desktop will scale to fit mobile screens.
Image alignment If the image uploaded doesn’t fit full-width of the email, you can change the alignment on where you want the image to sit in the article.
Image link You link the image if you wish to do so.
Link friendly name Help with link tracking in the mailout.
Layout: Copy + navigation
Tab: Copy
Copy Here you will insert your intro copy. Copy will wrap around navigation if long enough.
Tab: Navigation
Nav style Choose between the navigation sitting on a solid background colour or have an outline.
Solid/Outline colour Choose the colour of navigation box/outline.
Nav alignment Choose if the navigation sits on the left or right.
Navigation Add to the navigation. Using the navigation element block, you can add each nav item. If linking to other parts of the email, it is recommended that you set up those articles first, add an anchor point to the article, then come back to add that article to the navigation.
Breakdown of navigation element block Text: Link copy Text colour: Colour of link copy Link: The link Link friendly name: If using a url, this will help with link tracking
Layout: Navigation bar
Tab: Navigation
Font size Use the slider to select the font size.
Navigation This is the same field from the copy + navigation layout and works the same way. Each navigation item is separated by a pipe ‘|’
Layout: Text only
Tab: Copy
Copy Using the CK Editor you can insert your article copy, style the headings and change colours etc. If you want to link to this article via the navigation, you can an anchor tag here. Place the cursor where you want the anchor tag (We recommend at the very beginning) and hit the anchor icon in the options.
Tab: CTA
CTA layout If you plan to have more than 1 CTA (call to action) button, you can choose to display the buttons either horizontally or vertically. NB: if chosen horizontal, there is so much space (as the buttons won’t break onto a new line) and the button copy can break onto two lines and the buttons could push out the width of the email.
CTA alignment Choose if you want the buttons aligned left, center or right.
Call to action This field is another Element block field which allows you to add multiple CTA’s.
Breakdown of the Call to action article field Button text: Copy for the button Button link: Button url Button text colour: Select the button text colour Button background/outline colour: Select base colour Button style: Select either if the button is solid colour or an outline Button corners: Select to either have square, curved or round button edges Link friendly name: If using a url link this helps with link tracking
Layout: Image side/Image flush/Image wrap
All three image/text based layouts use the same fields, except the image wrap article, which doesn’t use the ‘Image vertical alignment’ field. The difference between the layouts is the how each layout is displayed in the email.
Layout Image side: displays with the ability to add spacing all around the article (top, bottom, left and right), the CTA’s are sit underneath the copy and display vertically.
Layout Image flush: display the image hard against the edge and the spacing settings are applied around the copy and CTA’s. CTA’s are also sit underneath the copy and display vertically.
Layout Image wrap: Like the Image side layout, however this layout is recommended if there is a lot of copy which in turn will wrap around the image. The CTA’s sit underneath the copy and can be displayed either vertically or horizontally.
Tab: Copy
Copy This is the same field as the ‘Text only’ layout and the same principles apply.
Tab: Image
Image desktop Insert image. Max image width is set to 2/3 of the allocated space.
Image mobile
Insert image if you wish to display a different image than desktop (e.g. you might want to use a more landscape image vs portrait image that you may have used on desktop). Leave blank if not required.
Image alignment Display image either on the left or right side.
Image vertical alignment Set the vertical alignment (top, middle or bottom) if the image shorter than the copy. If copy is shorter than the image the copy will vertically align to the middle.
Image link If you wish to link your image. We recommend that you do link the image if you are also going to have a CTA. Recommend linking to the same place as the first CTA. Leave blank if not required.
Link friendly name If using a url link this helps with link tracking
Tab: CTA
This tab uses the same fields as the ‘Text only’ layout and the same principles apply.
Layout: Footer
Tab: Logo
Logos Use an element block field to enable you to use up to three logos.
Breakdown of the Logos element block fields Logo: Insert image. Max image width of the logo is 200px. Link: You can link your logo Link friendly name: To help with web tracking
Tab: Copy/Links
Font size Select the font size you wish the footer copy to be. We recommend selecting a font size that is slightly smaller than your main body copy.
Copy Uses the CK Editor as other layouts and same principles apply. We recommend center aligning the copy as every other field in the footer layout is aligned to the center.
Footer links This is an element block to allow you to add multiple links horizontally to the footer. We recommend placing your unsubscribe/opt out link here if the email is a marketing email. The links are separated by a pipe ‘|’.
Breakdown of fields Text: Link copy Text colour: Link copy colour Link: Where your links goes Link friendly name: To help with link tracking
Tab: Social
Social Another element block where you can add the social icons and links you use.
Breakdown of the fields Icon: Insert social icon image. Max image width is 30px. Link: Link to your social page Link friendly name: Helps with link tracking
Last updated
Was this helpful?