Welcome to our help center article on building your first template with Nexl Engage! In this article, we will walk you through the process of creating your template, covering the basics of setting up your template.

Our drag-and-drop template builder simplifies the process of designing custom templates, making it both intuitive and efficient. With a few easy clicks, you can seamlessly add and arrange text, images, and various elements to craft a visually engaging and professional template.

1. Settings

2. Rows

3. Content:

4. Mobile Design Mode

Whether you're a beginner or an experienced user, this guide will provide you with the essential steps to get started.

This is where you can apply your configurations to the entire design.

Content Area Width: Email is an effective way to reach customers. But if your emails aren't formatted properly, they might not get the attention they deserve. Correct dimensions ensure your content looks good on any device, improving user experience and making your emails more professional and appealing.

The ideal width for email templates is around 600-800px. This ensures a comfortable reading experience on most devices and prevents your content from being cut off on smaller screens.

How to adjust area width:

Go to Settings: Access the settings tab. To adjust the width, drag the slider to set your content area width.

Content Area Alignment: The content of the text can be aligned to the left or center. This affects the whole body of the design.

Background Color: the default background color for the design.

Content Area Background Color: the default background color for the content area only.

Default Font: the default font family that all content elements in the design will inherit. You can overwrite this selection at the content block level.

Link Color: the default link color that all links will inherit unless you overwrite it for individual elements.

Note: You can still override the settings at the row, column, and content block levels when setting properties for those elements.

Rows are the fundamental building blocks for any email or page you create in Nexl Engage. Every content block you drag and drop onto the builder stage is placed within a row.

Rows are structural units that shape the horizontal layout of a design section through the use of columns. Rows can be added, removed, copied, or moved.

A row can contain one to six columns. By using multiple columns, you can place different content elements side by side.

You can add as many structural elements as needed to your design, regardless of the template you initially selected.

Insert a Row: Drag an empty row into the stage from the rows section.

To select a Row, just click on either the left or right side of the row. The row properties will appear on the right panel where you can customise its properties such as row background color, content area background color, borders, corners, layout, and column structure where you can delete or add columns, column background, and padding.

This section features a variety of tiles that represent different types of content you can incorporate into your design, with more options to be added in the future.

To use it, simply drag it into a column, and it will automatically adjust to the column’s width.

Each content block comes with its own settings, including detailed control over padding. The right-side panel will automatically switch to a property panel for the selected content element.

Content Properties allow you to tailor your content within the builder. Every content block you add to your design comes with a set of customisable options, giving you control over the appearance and interaction of your content within the overall design.

Adding an Image to your design is super easy! You can either upload your image or

search for free photos.

Insert Image Block: Drag the image content block from the content panel to the stage.

Upload Image: Click "Browse" to open the file manager, upload your image or search free photos and select "Insert."

Resize Image: Unlock auto width and use the slider to set the image dimensions. Set it to your preferred alignment.

Change Background Color: Set the background color from the color picker or enter the hex code.

The Title content block lets you assign H1, H2, or H3 tags without using custom HTML, allowing you to structure your design in accordance with web accessibility standards.

Use Paragraph content block to insert text and links into your email, and customize the font styles and settings as needed. Once you've added or selected a Paragraph block, you can either type your text directly or paste a copied text.

For additional formatting, both title and paragraph blocks have a similar text toolbar. This is also where you can insert hyperlink to text, apply formatting to certain text or insert emojis.

Adding links to your email lets you guide recipients to external websites and sources. You can either insert the URL directly into your email or convert an existing phrase into a hyperlink.

To insert a hyperlink, highlight the text you wish to insert a link. Then click on insert/edit link option.

Enter the URL in the pop-up box. Click on ok.

The divider and spacer content blocks can be used to create natural breaks in your design. While they may appear quite similar in the final design, each block offers a distinct set of options in the sidebar. Depending on your needs, you might choose the divider over the spacer, or the other way around.

The video content block makes it simple to include video content in your emails. Just copy and paste the URL from YouTube or Vimeo, and the builder will handle the rest. It will fetch the video's cover image, add a play icon on top, and link it directly to the video.

Insert Video Block: Drag a video content block into the stage.

Add Video Link: Insert the YouTube or Vimeo link of your choice.

The Button Content Block is a customisable HTML element that directs users to a specific URL or triggers an action when clicked.

It represents what we refer to as a "CTA" or "call to action," encouraging and guiding your audience to interact with your message or offer or what to do next.

Customise Button: Select the button block. Under Button Options, you can change the button formatting in the content properties panel such as button background color, alignment, font size, padding, line height, letter spacing, border radius, content padding, and border color.

Add a Trigger or Action: With the button block selected, navigate to the content properties where it says Action. From there, you can enter the URL and set the link whether to open a page, send an email, make a call, or Send an SMS.

Customising your social media icons is a breeze!

Nexl Engage provides built-in social media icon collections to choose from. Once you have selected the appropriate social icons, enter the social URL in the configure icon collection option in the right panel. You may add or delete icons as you see fit.

If your brand uses custom social media buttons, you can use the ICONS content block and upload your own icons from the configure icon collection option in the right panel.

Adding and editing social media icons is quick and simple in Engage. After formatting your icons, you can drag and drop them into the header or footer and test their placement to find the best position for your company and audience.

The builder offers numerous options to optimize your designs for mobile devices. For instance, you can choose to hide content on specific devices or control how elements stack on smaller screens if you prefer not to hide them.

We understand that constantly switching between the builder stage and preview mode can be tedious. That’s where mobile design mode comes in! This feature lets you easily toggle between a desktop and mobile design stage.

When you switch to the mobile view, the content area shrinks to 320px.

While in mobile view, you can continue designing with all the same features and options, except for the content area width adjustment. Note that the mobile design mode includes a grey backdrop, which is not part of your design.

In mobile design mode, you can make adjustments that apply exclusively to the mobile version of your design. This option is available for select design settings, which can be identified by the mobile indicator in the sidebar.

Mobile-only optimization options:

As previously noted, you can find these settings by looking for the Mobile icon in the sidebar. When no mobile-specific design settings are applied, this icon appears in gray. However, if you make changes to any of these elements, the icon will turn blue, indicating that the adjustments have been made exclusively for the mobile version only of your design and will not affect the desktop settings.

You’re now ready to start creating templates with Nexl Engage! Experiment with different elements to design a template that fits your needs. Happy Nexl-ling!