Enhanced Mobile Templates: Designing Responsive Layout Banner

Once you land on the Design step of the enhanced mobile template, you can customize it with the available styling options.

This guide explains how to customize the Responsive Layout Banner.

To start with designing your template, follow these steps:

1. Configure the banner position

1.1. Click the Position button on top of the page to locate your banner on the screen.

1.2. On the Position window, toggle on the Use Margins to set the position of your banner in pixels. For example, you can add 50 pixels on the bottom margin to position it.

2. Add elements and layout

On the left hand screen, you can see the elements that come by default on the banner. These elements are Layout, Text, Countdown Elements, Button, and Close Button. You can add more elements or layout, or change the existing layout of the banner.

To add an element or a layout:

2.1. Hover on the banner itself to see the + (plus) buttons appear where you can add an element or a layout to your canvas. Select the element you want to add: Text, Image, Coupon Code, or Button.

When you select the Layout element from the left menu, you can change the Element Layout with the layout options displayed on the right hand screen. You can also see a tool bar that allows you to add an element on the banner itself.

To change the layout, you can also click the Change Layout button on the toolbar to select your layout.

2.2. To change the order of the elements, click the Switch Order button to switch it with the previous or next element. You can also drag and drop the elements on the left menu to change their order.

2.3. To delete an element, select it to click the Delete button. You can delete all the elements till one element remains.

3. Edit the layout

To customize the look of your layout, you can:

Change the width and size of the entire banner,
Change the position of its default background image, or replace the background image with a new image you will upload or an existing one from the Image Library,
Change its background color,
Add borders, and change their color,
Add overlay behind the banner.

Clicking on the Layout element on the list, you can also apply the same Style changes to your entire layout.

4. Edit elements

4.1. You can edit the text on your banner, and configure its alignment and text settings.

You can position your text aligned to the left, in the middle, or to the right. You can change the font family, text color, font size, font weight, text decoration, and text alignment of your copy.

Your title goes here

To use custom fonts, you need to add them via Settings > Inone Settings > Custom Fonts. Those added via Mobile App Settings > Custom Fonts are available for the Basic Mobile App Templates.

Lastly, you can add spacing to your text. If you want these changes to be applied to all text elements on your campaign, you can click the Apply to All Texts button in the right corner.

4.2. You can change the alignment of the parent Countdown Element vertically or horizontally.

4.3. You can select a Countdown design, and define if it should have a separator.

Once you select your design, you can customize its color, text color, number color, spacing, and border. You can adjust your countdown as a Date. Accordingly you can set the duration, and decide if it should show seconds, or hide days information when they reach zero.

4.4. You can enable/disable the countdown text (days, hours, minutes, seconds). If the text elements are enabled, you can change their font family, text color, font size, font weight, text decoration, and text alignment.

4.5. If you have a button on your banner, you can:

Align your button vertically or horizontally,
Change its style in color and border, or add a background image,
Change its font family, text color, and font size,
Add spacing and border to its sides,
Define its action with one of the available options: Close on Tap, Open Settings, Push Permission, Deep Link, and Feedback,
Set a user attribute you select,
Track an event you select.

4.6. If you enable the close button, you can change its text color and font size.

The banner can also auto-close. If you set a duration in seconds, the Inapp will be automatically closed in that time.

5. Configure advanced settings

The Advanced Settings on the top bar allow you to edit the HTML, CSS, and JS of your app template.

5.1. Click the HTML, CSS, or JS option.

5.2. Edit/add your code and click the Save Code button.

6. Save your campaign

Once you complete designing your banner, click the Save button in the top right corner to proceed with the following steps: