# Layout Breakdown ### 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

Logo sample.

#### **Tab: Logo**

Logo tab.

**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)

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 ![Copy and navigation](https://resources.ubiquity.co.nz/Images/layout-copy-nav.jpg) #### **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 desktop vs mobile](https://resources.ubiquity.co.nz/Images/article-image-mobile.jpg) **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 ![Footer layout.](https://resources.ubiquity.co.nz/Images/layout-footer.jpg) #### **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 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.ubiquity.co.nz/documentation/channels/email/email-templates/layout-breakdown.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.