Building a Template from Scratch

Add Tab

Screen Shot 2019-12-19 at 9.48.49 AM

Sections

All templates use Sections as containers to house all of your content blocks. The Add tab conveniently offers you the four Section layout options as icons you can click and drag into the preview. Doing this creates a new section with the layout you chose.

If you start with a Second Street template, the layout will already have multiple sections with content in them, which you can then modify.

You must have at least one Section present in your template to add any content.

Empty Sections appear with an empty state graphic, indicating you should drag something into that space.

 

 

You can see an example of a single- and double-column empty Section below.

As you drag in a component, the Sections turn blue. Darker blue indicates the Section is selected. Lighter blue indicates it is a possible drop zone for the component.

Screen Shot 2019-12-19 at 10.46.22 AM

 

Drop Zones

Screen Shot 2019-12-19 at 10.45.25 AM

As soon as you start to drag a component, the template preview will show you where that content can be placed by highlighting drop zones in light blue. These drop zones will appear above and below any existing content. If the section has no content in it already, the entire Section will light up.

Notice when your cursor hovers over the preview, the content will select the nearest available drop zone. Once you've dropped the component into a selected drop zone, the content will appear.

You can see in the example above a selected and unselected drop zone on the left. Darker blue indicates the drop zone is selected. Lighter blue indicates it is a possible drop zone for the component.

Drop zones always appear above and below existing content. You will need a two-column Section if you want to put content side by side.

Content Blocks

2019-04-19_1013

If the component you drag and drop into the layout is a Text, Button, or Image, you will be immediately prompted to choose what content should fill this space with a list of available content blocks for that component type.

You can choose from existing content blocks by scrolling through the list of available options and clicking on it. Or, you can Create New at any time by scrolling to the bottom of the list.

2019-04-19_0905

If you start typing into the field, this filters the content block list to those that match the characters you typed.

Determining what content fills this space is important because:

- This tells the template which piece of content to put there

- This tells the preview if it should use generic placeholder content or an existing content default in the layout

- This content is going to appear later when you are creating your email.

As an example, if you drag in an Image component, you will be prompted to select from all existing Image content blocks or create a new custom one. If you select the existing Header Image content block for that space, the generic Header Image placeholder or real content you previously set as the default will appear in that space. If you choose to create a new custom content block, a generic image placeholder will appear for that space until you set a real default.

Tip! After selecting a content block, existing or new, you can always change it. Just click on the content area in the preview to open the attribute editor for that content block. Then click on the name of the content block in the blue bar at the top of the editor menu. There will be a pencil icon next to the name if you can edit it.

2019-04-19_1000

Section, Articles, Menu, Social Links, Divider, Spacer and Custom HTML components do not prompt you to select what content will fill that space.

Section, Divider, Spacer, and Custom HTML components will become static content once you use your template in the email designer. This means this content cannot be edited or turned off/on in the email designer.