Docs > Marketing Chain > Building > Landing Event

Landing Event

How to create a Landing Event

Landing Events

The Landing Page is the very first page that the Business Subscriber’s customers will see, as they are taken through each step of the Marketing Chain. Landing Events allow the Business Account Holder to design a bespoke landing page to suit their niche. This could be a single property page, a static page, destination page or a lead capture page.

Text, buttons, images, videos and audio can be incorporated into the Business Account Holder’s Landing Page through Lapture’s Landing Event Builder.

To build a new Landing Event, please see the Creating Events support document.

To get started, work your way through the subsequent list:

Editing a Landing Event

In order for the Business Account Holder to add text, buttons, images, videos and audio to their Landing Event, they must edit the Landing Event they previously created by following the Creating Events support document.

To edit a Landing Event for a Marketing Chain, follow the subsequent steps:

  1. Follow the steps in Creating Events before moving onto step 2.
  2. Scroll down to the bottom and locate the “Marketing Events” section.
  3. In the Event Name column, locate the Landing Event you wish to edit and select it by clicking the checkbox on the left-hand side.
  4. Once the checkbox of the desired Landing Event has been selected, locate and click the blue “Edit Selected Event” button.

Creating Sections for your Landing Event

On the Event Builder, you will have to complete several stages of instructions in order to complete the Landing Event.

To generate sections for your Landing Event, follow the subsequent steps:

  1. Follow the steps in Landing Events before moving onto step 2
  2. In the input field, “Section Name”, type in your desired section name for your Landing Event.
  3. Locate and click the “Generate Section” button and the section will be added to the left-hand side of the App Builder.
  4. Repeat steps 1-3 until you have generated all of the sections needed for your Landing Event.

    5. Sections are stacked vertically, and the order of sections can be modified using the arrows in the left-hand side of the App Builder.

  5. Once you have generated all of the sections needed for your Landing Event, you can begin adding Section Modifiers to each generated section.

Section Modifiers

Your app is split into sections and elements: put simply, elements are the text, buttons, images, videos or audio that are part of a section of your app. You can create as many sections as you need for your Landing Event.You may need to adjust certain features of your section such as the background colour, height or display. This section will show you how to add Section Modifiers for each section generated in your Landing Event.

Your sections can be modified using the following modifiers: Background Gradient Colour [RGB] [Easy], Remove Development Border [Show, Hide] [Easy], Display [Direction, Spacing, Height] [Easy], Spacing [PX] [Advanced], Font Include, Background Colour [RGB] [Easy], Display [Direction, Y Position, X Position] [Advanced], Height Fixed [PX] [Easy].

See the Section Modifiers Directory for an explanation of each modifier and its function.

To modify a section of your Landing Event, follow the subsequent steps:

  1. Follow the steps in Creating Sections for your Landing Event before moving onto step 2.
  2. Locate the section you wish to modify and locate and click the “Section Builder” button in the left side bar of the Landing Event builder.
  3. Locate and click “Add Modifiers”. From here, you can add Section Modifiers.

    4. For a full list of section modifiers, see the Section Modifiers Directory.

  4. 5. Locate and click the modifiers you wish to apply to your section. You can select as many as you need.
  5. 6. Once you have selected all of the Section Modifiers you need for your section, locate and click “Add Selected Modifiers”.

    6. See the Section Modifiers Directory for instructions on how to apply each Section Modifier and the information that is required for modifier activation.

  6. 7. Once you have followed the instructions on how to apply each Section Modifier, locate and click the “Update Framework” button to see your changes in real-time on a mock phone display.

Section Modifiers Directory

Background Gradient Colour [RGB] [Easy]

This section modifier will create a full gradient background. Enter the “Background First” using RGB units and “Background Second” also using RGB units. Select the Gradient Position to: Top, Top Left, Top Right, Bottom, Bottom Left, Bottom Right.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To adjust the background of the section to a gradient colour, follow the subsequent steps:

  1. In the input field “Background First”, enter the RGB unit of the first background colour.
  2. In the input field “Background Second”, enter the RGB unit of the second background colour.
  3. From the drop-down list, select the gradient position: top, top left, top right, bottom, bottom left, bottom right.
  4. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Remove Development Border [Show, Hide] [Easy]

By default, the Red Development Border will show around each generated section. When in production or development, you can set the Development Section to “Show” or “Hide”.

Fallback: The Red Development Border will always be set to “Show” so there is no need to add this section modifier if you are happy with this setting.

To remove or show the Red Development Border, follow the subsequent steps:

  1. You will be presented with two option boxes: “Show” and “Hide”. Select “Hide” if you want to hide the Red Development Border in the mobile framework. Select the box “Show” if you want to display the Red Development Border in the mobile framework or skip this section modifier.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Display [Direction, Spacing, Height] [Easy]

To adjust the display [Direction, Spacing, Height] of your section, follow the subsequent steps:

  1. To set the display direction, locate and click the switch “Vertical Direction” to set the direction of the content to vertical. For a central direction, locate and click the switch “Centered”.
  2. In the input field “Spacing Value”, enter the pixel value for your spacing or use the arrows to reach the required pixels.
  3. In the input field “Height Value”, enter the pixel value for your height or use the arrows to reach the required pixels.
  4. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Spacing [PX] [Advanced]

This section modifier will add white space around each child. With this modifier, you have the ability to choose separate values for spacing at the top, bottom, right and left of each child within the parent generated section using pixels (PX).

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To adjust the space at the top, bottom, right and left of each element within the generated section, follow the subsequent steps:

  1. In the input field “Top Space”, enter the pixel units of the top space required.
  2. In the input field “Bottom Space”, enter the pixel units of the bottom space required.
  3. In the input field “Right Space”, enter the pixel units of the right space required.
  4. In the input field “Left Space”, enter the pixel units of the left space required.
  5. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Font Include

To set the font for each text element within the generated section, follow the subsequent steps:

  1. In the input field “@Import URL”, enter the URL of the desired font for the text elements within the generated section.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Background Colour [RGB] [Easy]

This Section Modifier will set a block background colour in RGB format for the generated section.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To set a block background colour for your generated section, follow the subsequent steps:

  1. In the input field “Background”, enter the RGB units of the desired block background colour.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Display [Direction, Y Position, X Position] [Advanced]

This Section Modifier will modify the direction of each child within the parent generated section. You can set the Display Direction as vertical or horizontal which will change the direction of the content. You can also set the “Display Y Position” and “Display X position” to left, centre or right for each child within the parent generated section.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To adjust the Display Direction and set the Display Y and X positions, follow the subsequent steps:

  1. For the Display Direction, check the “Vertical” or “Horizontal” box depending on your desired Display Direction. This will change the direction of the content within the generated section.
  2. To set the “Display Y position”, locate and click the box for your desired position: “Left”, “Centre” or “Right”.
  3. To set the “Display X position”, locate and click the box for your desired position: “Left”, “Centre” or Right”.
  4. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Height Fixed [PX] [Easy]

This Section Modifier will set a fixed height that the generated section will display at. Enter a “Height Value” using Pixels PX units. The generated child elements will scroll within the parent.

Fallback: this section will automatically fill any white space if no fixed height modifier has been added.

To set a fixed height for the generated section, follow the subsequent steps:

  1. In the input field “Height Value”, enter the pixel units to fix the height of the generated section or use the arrow key to reach the desired pixels.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Element Settings

To build the various elements in each generated section for a Landing Page, the Business Account Holder must select one of the following elements in turn (text, button, image, video, audio), completing all instructions in full.

The steps in Adding Elements and Selecting an Element must be completed before the Business Account Holder can move onto the next step.

Adding Elements

To begin adding elements to your generated sections, follow the subsequent steps:

  1. In the left side bar of the Landing Event builder, locate the generated section you wish to edit.
  2. Locate and click the “Section Builder” button within the generated section.
  3. Locate and click “Build Elements”.

Selecting an Element

To select an Element for your Landing Event, follow the subsequent steps:

  1. Follow the steps in Adding Elements before moving onto step 2.
  2. Select the element you are going to build first. This could be a text element, button element, image element, video element or an audio element.
  3. Locate and select the relevant box of your desired element: text, button, image, video or audio.
  4. Locate and click the “Generate Elements” button to generate your selected element.

Repeat step 4 until you have as many elements as you require in your selected category.

Text Elements

To add text to a generated section of your Landing Event, you need to complete the steps in Adding Elements and Selecting an Element before moving onto step 2.

To add text to your generated section, follow the subsequent steps:

  1. Follow the steps in Adding Elements and Selecting an Element before moving onto step 2. Ensure you select the Text Element Type.
  2. Locate and click “Generate Elements” to generate a Text Element.
  3. Locate and click “Generate More Elements” until you have all of the Text Elements that you require.
  4. In the input field “Add Text”, enter the desired text that will appear in your generated section.
  5. When you have entered the desired text, the mobile framework on the right-hand side will update to give you a preview of your created element. Locate and click “Close” to view the preview of the mobile framework.
  6. Locate and click “Element Settings” to resume adding text elements.
  7. The “Marketing Chain Detectable Elements” allows the system to detect this created element within your Marketing Chain. Locate and click the “Detectable Elements” switch if your text is a detectable element in your Marketing Chain.
  8. Complete steps 4-7 for all the text elements you have created for your generated section.
  9. Locate and click “Close” to view your changes in the mobile framework preview.

To modify the text elements, follow the subsequent steps:

  1. Follow the steps in Adding Elements and Selecting an Element and the mandatory Element Settings above before moving onto step 2.
  2. Locate and click the “Elements Modifier” section in the left-side bar to style all of the text elements created in the Element Settings section.
  3. Locate and click “Add Modifiers” to begin adding modifiers to change the design of your text. The following Text Element Modifiers can be added: X Position [Left, Centre, Right] [Easy], Text Highlight [RGB] [Easy], Text Ellipsis, Text Colour [RGB] [Easy], Font [Family, Weight, Size], Width Percent, Width REM.
  4. Locate and click the required modifiers from the list. For example, you may wish to change the text colour, font or position. When you have selected all of your desired modifiers, locate and click “Add Selected Modifiers”.

Text Element Directory

X Position [Left, Centre, Right] [Easy]

This modifier will align the text across the X axes of each child within the generated section. Choose from the X Position Options of left, centre, or right.

Fallback: The text will be aligned to the left child within the generated section.

To set the X position of your text, follow the subsequent steps:

  1. From the options presented, locate and click “Left”, “Centre” or “Right” to set the X position of your text.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Text Highlight [RGB] [Easy]

This modifier will highlight the text using an RGB colour for each child within the generated section. In Text Highlight, enter a value in RGB units.

Fallback: Text Highlight will display with the value black.

To add a text highlight, follow the subsequent steps:

  1. In the input field “Highlight Value”, enter the text highlight value in RGB format.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Text Ellipsis

This modifier will add ellipsis to each child within the generated section. In Text Ellipsis, choose Ellipsis.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To add text ellipsis, follow the subsequent steps:

  1. To add text ellipsis, locate and click the “Ellipsis” box. If you do not wish to add text ellipsis, locate and click the “Overspill” box.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Text Colour[ RGB ] [ Easy ]

This modifier will change the text colour using RGB units for each child within the generated section. In “Text Colour Value”, enter a value using RGB units.

Fallback: Text colour will display with the value black.

To change the text colour, follow the subsequent steps:

  1. In the input field “Text Colour Value”, enter the RGB unit of the desired text colour.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Font [Family, Weight, Size]

This modifier will add a Font Family, Font Weight and Font Size. To add your Custom Family, choose Font Family Options Custom Value and enter the font value. To inherit from an Element Event, add “Font Family Custom Value N/A” and choose “Font Family Options - Inherit From Section”. In Font Weight, enter a value available within the font family. In Font Size, enter a value using REM.

To change the font of your text [Family, Weight and Size], follow the subsequent steps:

  1. In the input field “Font Family Custom Value”, type in the name of your desired font.
  2. For “Font Family Options”, locate and check the box “Custom Value” or “Inherit from Section”.

    3. To inherit a font from an Element Event, in the “Font Family Custom Value” input field, type “N/A” and in the Font Family Options, select “Inherit From Section”.

  3. In the input field “Font Weight”, enter a value available within the font family. The larger the number, the heavier the font will display.
  4. In the input field, “Font Size”, enter the desired font size in REM or use the arrows to increase the REM in increments.
  5. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Width Percent

To set the width of the text in percent, follow the subsequent steps:

  1. From the “Width Options”, select one of the following options by clicking the box: Full, Half, Thirds, Quarters, Fifths.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Width REM

To set the width of the text in REM, follow the subsequent steps:

  1. In the input field “Width Value”, enter the width in REM, or use the arrows to increase the REM in increments.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Button Elements

To create buttons for a generated section of your Landing Event, you need to complete the steps in Adding Elements and Selecting an Element before moving onto step 2.

You must complete both of these mandatory sections before elements can be modified.

To finalise adding buttons to your generated section, follow the subsequent steps:

  1. Follow the steps in Adding Elements and Selecting an Element before moving onto step 2. Ensure you select the Button Element Type.
  2. Locate and click “Generate Elements” to generate a Button Element.
  3. Locate and click “Generate More Elements” until you have all of the Button Elements that you require.
  4. In the input field “Button Text”, enter the desired name of your first button.
  5. When you have entered the text for your button, the mobile framework on the right-hand side will update to give you a preview of your created element. Locate and click “Close” to view the preview of the mobile framework.
  6. Locate and click “Element Settings” to resume adding details of your app buttons.
  7. The “Marketing Chain Detectable Elements” allows the system to detect this created element within your Marketing Chain. For a button, this is very important as we want customers to be able to click the button and be taken through the Marketing Chain. To turn this on, locate and click the “Detectable Elements” switch so it displays blue.
  8. Complete steps 4-7 for the number of buttons you have created for your generated section. The Button Text and “Detectable Elements” switch needs completing for each button created.
  9. Locate and click “Close” to view your changes in the mobile framework preview.

To modify the button elements, follow the subsequent steps:

  1. Follow the steps in Adding Elements and Selecting an Element and the mandatory Element Settings above before moving onto step 2.
  2. Locate and click “Elements Modifier” to style all of the button elements created in the Element Settings section.
  3. Locate and click “Add Modifiers” to begin adding modifiers to change the design of your buttons. The following Button Element Modifiers can be added: Button Ellipsis [ON, OFF] [Easy], Button Width [Fixed] [Easy], Button Width [PX] [Advanced], Button Font [Family, Weight, Size] [Easy], Button Text Colour [RGB] [Easy], Button Border Radius [PX, 50%, 100%] [Easy], Button X Position [Left, Centre, Right] [Easy], Button Border [Size, Colour, Type] [Easy], Button Spacing [PX] [Easy], Button Height [PX] [Easy], Button Background [RGB] [Easy].
  4. Locate and click the required modifiers from the list. For example, you may wish to adjust the button width, border radius and button font. When you have selected all of your desired modifiers, locate and click “Add Selected Modifiers”.

See the Button Element Directory for instructions on how to complete each Element Modifier.

Button Element Directory

Button Ellipsis [ON, OFF]

This modifier will add ellipsis to each child within the generated section. In Text Ellipsis, choose Enable.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To enable button ellipsis, follow the subsequent steps:

  1. Click the “Enable” switch so it displays blue to enable button ellipsis. Do not complete this step if you wish to keep button ellipsis off.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Button Width [Fixed] [Easy]

This modifier will change the width using pre-defined options. In Width Options, choose Full 100%, Half 50%, Thirds 33.3%, Quarters 25%, and Fifths 20%, to modify each child within the generated section.

Fallback: automatically set the height of the button to fit with the given font size value.

To change the button width through this fixed, simple method, follow the subsequent steps:

  1. Scroll along to view all width options: Full, Half, Thirds, Quarters, Fifths.
  2. Click the box of the desired width for your button.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Button Width [PX] [Advanced]

This modifier will change the width using PX value for each child within the generated section. In Width Value, enter a value using pixel PX unit.

Fallback: automatically set the height of the button to fit within the given font size value.

To change the button width using this advanced pixel method, follow the subsequent steps:

  1. Use the arrows to increase the pixel width value or type in the desired value.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Button Font [Family, Weight, Size]

This modifier will add a Font Family, Font Weight and Font Size. To add your Custom Family, choose Font Family Options Custom Value and enter the font value. To inherit from an Element Event, add “Font Family Custom Value N/A” and choose “Font Family Options - Inherit From Section”. In Font Weight, enter a value available within the font family. In Font Size, enter a value using REM.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To change the button font, follow the subsequent steps:

  1. In the input field “Font Family Custom Value”, type in the desired font family.
  2. Select one of the relevant Font Family Options: “Custom Value” or “Inherit From Section.”

    3. To inherit a font from an Element Event, in the “Font Family Custom Value” input field, type “N/A” and in the Font Family Options, select “Inherit From Section”.

  3. In the input field “Font Weight”, enter a value available within the font family. The larger the number, the heavier the font will display.
  4. In the input field, “Font Size”, enter the desired font size in REM or use the arrows to increase the REM in increments.
  5. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Button Text Colour [RGB] [Easy]

This modifier will change the text colour using an RGB for each child within the generated section. In Text Colour, enter a value using RGB units.

Fallback: Text colour will display with the value white.

To modify the button text colour, follow the subsequent steps:

  1. In the input field “Text Colour”, enter the desired text colour in RGB format.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Button Border Radius [PX, 50%, 100%] [Easy]

This modifier will add a radius to the top, bottom, right and left of each child within the generated section. Choose Border Radius Value and enter a value using pixel PX units and select the “Custom” Border Radius Type to generate a PX radius. Choose Border Radius Value: 0 and Border Radius Type Half to generate a 50% radius. Choose Border Radius Value: 0 and Border Radius Type Full to generate a 100% radius.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To set a half button border radius to each button within the generated section, follow the subsequent steps:

  1. To generate a 50% radius, in the input field “Border Radius Value”, enter the value 0.
  2. For the “Border Radius Type”, click the “Half” box.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

To set a full button border radius to each button within the generated section, follow the subsequent steps:

  1. To generate a 100% radius, in the input field “Border Radius Value”, enter the value 0.
  2. For the “Border Radius Type”, click the “Full” box.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

To generate a custom PX radius, follow the subsequent steps:

  1. In the input field “Border Radius Value”, enter the button radius value in pixels (PX).
  2. For the “Border Radius Type”, click the “Custom” box.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Button X Position [Left, Centre, Right] [Easy]

This modifier will align the button text across the X axes of each child within the generated section. Choose from the X Position Options of left, centre or right.

Fallback: The text will be aligned to the left child within the generated section.

To set the X position of the buttons within the generated section, follow the subsequent steps:

  1. From the “X Position Options”, select left, centre or right, depending on where you wish to align the button text.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Button Border [Size, Colour, Type] [Easy]

This modifier will add a border around each child within the generated section. With this modifier, you have the ability to choose a Border Size Value using pixel PX units, Border Colour Value using RGB units and a Border Type, which can be dotted, dashed, solid, double, groove, ridge, inset, outset or hidden.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To modify the button border in terms of its size, colour, type, follow the subsequent steps:

  1. In the input field “Border Size Value”, enter the border size in pixels or use the arrows to reach the required pixels.
  2. In the input field “Border Colour Value”, enter the border colour in RGB units.
  3. From the options provided, select your border type from the following list by clicking the desired box: Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, Hidden.
  4. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Button Spacing [PX] [Advanced]

This modifier will add white space inside each child. With this modifier, you have the ability to choose separate values for spacing at the top, bottom, right and left of each child within the parent generated section. In Top Space, Bottom Space, Right Space, Left Space, enter a value using pixel PX units.

Fallback: adds spacing of 10px to the top, bottom, right and left of each child within the generated section.

To use the advanced method to modify the spacing surrounding a button, follow the subsequent steps:

  1. In the input field “Top Space”, enter the desired top space in pixels or use the arrows to reach the required pixels.
  2. In the input field “Bottom Space”, enter the desired bottom space in pixels or use the arrows to reach the required pixels.
  3. In the input field “Right Space”, enter the desired right space in pixels or use the arrows to reach the required pixels.
  4. In the input field “Left Space”, enter the desired left space in pixels or use the arrows to reach the required pixels.
  5. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Button Height [PX] [Easy]

This modifier will set the height of the child buttons within the generated section. In “Button Height Value”, enter a value using pixel (PX) units.

Fallback: automatically sets the height of the button to fit with the given font size value.

To adjust the button height in pixels, follow the subsequent steps:

  1. In the input field “Button Height Value”, enter the desired button height in pixels.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Button Background [RGB] [Easy]

This modifier will set the colours of the child buttons within the generated section. In Background Colour, enter the RGB units.

Fallback: automatically sets the background colour to blue.

To change the button background colour, follow the subsequent steps:

  1. In the input field “Background Colour”, enter the desired background colour in RGB units.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Image Elements

To add image elements to a generated section of your Landing Event, you need to complete the steps in Adding Elements and Selecting an Element before moving onto step 2.

To add image elements to your generated section, follow the subsequent steps:

  1. Follow the steps in Adding Elements and Selecting an Element before moving onto step 2. Ensure you select the Image Element Type.
  2. Locate and click “Generate Elements” to generate an Image Element.
  3. Locate and click “Generate More Elements” until you have all of the Image Elements that you require.
  4. Under “Media Element”, locate and click the “Add Image” button and select your desired image.
  5. In the input field “Element Alternative Name”, enter the alternative name for your image element.
  6. The “Marketing Chain Detectable Elements” switch allows the system to detect this created element within your Marketing Chain. Ensure this is switched on if your image is a detectable element. To turn this on, locate and click the “Detectable Elements” switch so it displays blue.
  7. Complete steps 4-6 for all the image elements you have created for your generated section. The Media Element, Element Alternative Name and “Detectable Elements” switch needs completing for each image element created.
  8. Locate and click “Close” to view your changes in the mobile framework preview.

To modify the image elements, follow the subsequent steps:

  1. Follow the steps in Adding Elements and Selecting an Element and the mandatory Element Settings above before moving onto step 2.
  2. Locate and click the “Elements Modifier” section in the left-side bar to style all of the image elements created in the Element Settings section.
  3. Locate and click “Add Modifiers” to begin adding modifiers to change the design of your image. The following Image Element Modifiers can be added: Image Opacity [1-0.3] [Easy], Image Border Radius [PX, 50%, 100%] [Easy], Image Width [PX] [Easy], Image Height [PX] [Easy], Image Background [RGB] [Easy], Image Border [Size, Colour, Type] [Easy], Height 1, Width REM 1.
  4. Locate and click the required modifiers from the list. For example, you may wish to change the image border radius, image background or image width. When you have selected all of your desired modifiers, locate and click “Add Selected Modifiers”.

See the Image Element Directory for instructions on how to complete each Element Modifier.

Image Element Directory

Image Opacity [1-0.3] [Easy]

This modifier will set the opacity of the child images within the generated section. In Opacity Type, choose one of the opacity values: Opacity @ 1, Opacity @ 0.9, Opacity @ 0.8, Opacity @ 0.7, Opacity @ 0.6, Opacity @ 0.5, Opacity @ 0.4 or Opacity @ 0.3.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To set the opacity of the image elements within your generated section, follow the subsequent steps:

  1. From the drop-down list, select your desired Opacity Type: Opacity @ 1, Opacity @ 0.9, Opacity @ 0.8, Opacity @ 0.7, Opacity @ 0.6, Opacity @ 0.5, Opacity @ 0.4, Opacity @ 0.3.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Image Border Radius [PX, 50%, 100%] [Easy]

This modifier will set the radius of the top-left, top-right, bottom-left and bottom-right child images. Border Radius Value works in conjunction with the Custom Border Radius Type. This will set a custom radius of your choosing. Border Radius Type half will set an absolute 50% radius, whereas Border Radius Type Full will set an absolute radius of 100%.

To use the half and full Border Radius Types, the Border Radius Value must be set to 1 and a width and height modifier should be added to prevent image stretching.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To set a custom image border radius, follow the subsequent steps:

  1. In the input field “Border Radius Value”, enter the desired border radius value in pixels or use the arrows to reach the required pixels.
  2. For the Border Radius Type, locate and click “Custom”.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

To set a half image border radius, follow the subsequent steps:

  1. In the input field “Border Radius Value”, enter the value 1.
  2. For the Border Radius Type, locate and click “Half”.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

To set a full image border radius, follow the subsequent steps:

  1. In the input field “Border Radius Value”, enter the value 1.
  2. For the Border Radius Type, locate and click “Full”.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

A width and height modifier should be added to prevent image stretching.

Image Width [PX] [Easy]

This modifier will set the width of the child images within the generated section. In Image Width Value, enter the image width using pixel (PX) units. If you have no parent section modifiers, then the child images will overflow, scroll horizontal (x).

The fallback will automatically set the width of the image to fit within the screen. Image Width=auto

To set the width of the image elements within the generated section, follow the subsequent steps:

  1. In the input field “Image Width Value”, enter the desired image width in pixels or use the arrows to reach the required pixels.

  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Image Height [PX] [Easy]

This modifier will set the height of the child images within the generated section. In Image Height Value, enter the image height using pixel (PX) units.

The fallback will automatically set the height of the image to fit within the screen. Image Height Value =“auto”

To set the height of the image elements within the generated section, follow the subsequent steps:

  1. In the input field “Image Height Value”, enter the image height in pixels or use the arrows to reach the required pixels.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Image Background [RGB] [Easy]

This modifier will set the background of the image for preloading and transparent images. You could use the Image Opacity modifier to test your background. In Background Colour, enter the RGB units.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To set the background colour for the image elements in the generated section, follow the subsequent steps:

  1. In the input field “Background Colour”, enter the RGB units of the desired image background colour.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Image Border [Size, Colour, Type] [Easy]

This modifier will set the width of the child images within the generated section. If you have no parent section modifiers, then the child images will overflow, scroll horizontal (x). Enter a Border Size Value using pixel PX units. Enter a Border Colour Value using RGB units. Choose the Border Type value: Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset or Hidden.

Fallback: There are no fallbacks, simply add or remove the modifier if required. It is important that your Border Colour is set as an RGB in order to show.

To set the size, colour and border type of the image elements within the generated section, follow the subsequent steps:

  1. In the input field “Border Size Value”, enter the border size in pixels or use the arrows to reach the required pixels.
  2. In the input field “Border Colour Value”, enter the border colour in RGB units.
  3. Select a border type from the list by locating and clicking the box of your desired option: Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset or Hidden.
  4. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Height 1

To set the image element height in REM, follow the subsequent steps:

  1. In the input field “Height”, enter the desired image element height in REM or use the arrows to reach the required REM value.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Width REM 1

To set the image element width in REM, follow the subsequent steps:

  1. In the input field “Width Value”, enter the desired width value in REM or use the arrows to reach the required REM value.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Video Elements

To add video elements to a generated section of your Landing Event, you need to complete the steps in Adding Elements and Selecting an Element before moving onto step 2.

To add video elements to your generated section, follow the subsequent steps:

  1. Follow the steps in Adding Elements and Selecting an Element before moving onto step 2. Ensure you select the Video Element Type.
  2. Locate and click “Generate Elements” to generate a Video Element.
  3. Locate and click “Generate More Elements” until you have all of the Video Elements that you require.
  4. Under “Media Element”, locate and click the “Add Video” button and select your desired video.
  5. In the input field “Element Alternative Name”, enter the alternative name for your video element.
  6. The “Marketing Chain Detectable Elements” switch allows the system to detect this created element within your Marketing Chain. Ensure this is switched on if your video is a detectable element. To turn this on, locate and click the “Detectable Elements” switch so it displays blue.
  7. Complete steps 4-6 for all the video elements you have created for your generated section. The Media Element, Element Alternative Name and “Detectable Elements” switch needs completing for each video element created.
  8. Locate and click “Close” to view your changes in the mobile framework preview.

To modify the video elements, follow the subsequent steps:

  1. Follow the steps in Adding Elements and Selecting an Element and the mandatory Element Settings above before moving onto step 2.
  2. Locate and click the “Elements Modifier” section in the left-side bar to style all of the video elements created in the Element Settings section.
  3. Locate and click “Add Modifiers” to begin adding modifiers to change the design of your video. The following Video Element Modifiers can be added: Video Background [RGB] [Easy], Video Border [Size, Colour, Type] [Easy], Video Border Radius [PX, 50%, 100%] [Easy], Video Width [Fixed] [Easy].
  4. Locate and click the required modifiers from the list. For example, you may wish to change the video border radius, video background or video width. When you have selected all of your desired modifiers, locate and click “Add Selected Modifiers”.

See the Video Element Directory for instructions on how to complete each Element Modifier.

Video Element Directory

Video Background [RGB] [Easy]

This modifier will set the colours of the child buttons within the generated section. In Video Background, enter the RGB units.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To set the video element background colour within the generated section, follow the subsequent steps:

  1. In the input field “Background Colour”, enter the RGB code of the desired video background colour.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Video Border [Size, Colour, Type] [Easy]

This modifier will set the width of the child images within the generated section. If you have no parent section modifiers, then the child images will overflow, scroll horizontal (x). Enter a Border Size Value using pixel (PX) units. Enter a Border Colour Value using RGB units. Choose the Border Type value, either Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset or Hidden.

Fallback: There are no fallbacks, simply add or remove the modifier if required. It is important that your Border Colour is set as an RGB in order to show.

To set the size, colour and border type of the video element, follow the subsequent steps:

  1. In the input field “Border Size Value”, enter the border size in pixels or use the arrows to reach the required pixels.
  2. In the input field “Border Colour Value”, enter the border colour in RGB units.
  3. Select a border type from the list by locating and clicking the box of your desired option: Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset or Hidden.
  4. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Video Border Radius [PX, 50%, 100%] [Easy]

This modifier will set the top-left, top-right, bottom-left and bottom-right radius of the child images. Border Radius Value works in conjunction with the Custom Border Radius Type. This will set a custom radius of your choosing. Border Radius Type half will set an absolute 50% radius, whereas Border Radius Type Full will set an absolute radius of 100%.

To use the half and full Border Radius Types, the Border Radius Value must be set to 1 and a width and height modifier should be added to prevent image stretching.

To set a custom video border radius, follow the subsequent steps:

  1. In the input field “Border Radius Value”, enter the desired video border radius value in pixels or use the arrows to reach the required pixels.
  2. For the Border Radius Type, locate and click “Custom”.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

To set a half video border radius, follow the subsequent steps:

  1. In the input field “Border Radius Value”, enter the value 1.
  2. For the Border Radius Type, locate and click “Half”.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

To set a full video border radius, follow the subsequent steps:

  1. In the input field “Border Radius Value”, enter the value 1.
  2. For the Border Radius Type, locate and click “Full”.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

A width and height modifier should be added to prevent image stretching.

Video Width [Fixed] [Easy]

This modifier will change the width using pre-defined options. From the Width Options, choose Full (100%), Half (50%), Thirds (33.3%), Quarters (25%) or Fifths (20%), to modify each child within the generated section.

Fallback: automatically sets the width of the button to fit with the given font size value.

To set the width for the video elements within the generated section, follow the subsequent steps:

  1. From the Width Options, select one of the following options by clicking the relevant box: Full, Half, Thirds, Quarters, Fifths.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Audio Elements

To add audio elements to a generated section of your Landing Event, you need to complete the steps in Adding Elements and Selecting an Element before moving onto step 2.

To add audio elements to your generated section, follow the subsequent steps:

  1. Follow the steps in Adding Elements and Selecting an Element before moving onto step 2. Ensure you select the Audio Element Type.
  2. Locate and click “Generate Elements” to generate an Audio Element.
  3. Locate and click “Generate More Elements” until you have all of the Audio Elements that you require.
  4. Under “Media Element”, locate and click the “Add Audio” button and select your desired audio.
  5. In the input field “Element Alternative Name”, enter the alternative name for your audio element.
  6. The “Marketing Chain Detectable Elements” switch allows the system to detect this created element within your Marketing Chain. Ensure this is switched on if your audio is a detectable element. To turn this on, locate and click the “Detectable Elements” switch so it displays blue.
  7. Complete steps 4-6 for all the audio elements you have created for your generated section. The Media Element, Element Alternative Name and “Detectable Elements” switch needs completing for each audio element created.
  8. Locate and click “Close” to view your changes in the mobile framework preview.

To modify the audio elements, follow the subsequent steps:

  1. Follow the steps in Adding Elements and Selecting an Element and the mandatory Element Settings above before moving onto step 2.
  2. Locate and click the “Elements Modifier” section in the left-side bar to style all of the audio elements created in the Element Settings section.
  3. Locate and click “Add Modifiers” to begin adding modifiers to change aspects of your audio. The following Audio Element Modifiers can be added: Audio Width [Fixed] [Easy], Audio Border Radius [PX, 50%, 100%] [Easy], Audio Border [Size, Colour, Type] [Easy], Audio Background [RGB] [Easy].
  4. Locate and click the required modifiers from the list. When you have selected all of your desired modifiers, locate and click “Add Selected Modifiers”.

See the Audio Element Directory for instructions on how to complete each Element Modifier.

Audio Element Directory

Audio Width [Fixed] [Easy]

This modifier will change the width using pre-defined options. From the Width Options, choose Full (100%), Half (50%), Thirds (33.3%), Quarters (25%) or Fifths (20%), to modify each child within the generated section.

To set the width of the audio player element within the generated section, follow the subsequent steps:

  1. Select one of the fixed audio player width options: small, medium, large.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

If the audio player width is not set, the width defaults to 100%.

Audio Border Radius [PX, 50%, 100%] [Easy]

This modifier will set the top-left, top-right, bottom-left, bottom-right radius of the child images. Border Radius Value works in conjunction with Custom Border Radius Type. This will set a custom radius of your choosing. Border Radius Type half will set an absolute 50% radius whereas Border Radius Type Full will set an absolute radius of 100%.

To set a custom border radius for the audio elements within the generated section, follow the subsequent steps:

  1. In the input field “Border Radius Value”, enter the desired border radius value in pixels or use the arrows to reach the required pixels.
  2. For the Border Radius Type, locate and click “Custom”.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

To set a half audio border radius, follow the subsequent steps:

  1. In the input field “Border Radius Value”, enter the value 1.
  2. For the Border Radius Type, locate and click “Half”.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

To set a full audio border radius, follow the subsequent steps:

  1. In the input field “Border Radius Value”, enter the value 1.
  2. For the Border Radius Type, locate and click “Full”.
  3. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Audio Border [Size, Colour, Type] [Easy]

This modifier will set the width of the child images within the generated section. If you have no parent section modifiers, then the child images will overflow, scroll horizontal (x). Enter a Border Size Value using pixel (PX) units. Enter the Border Colour Value using RGB units. Choose the Border Type value, either Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset or Hidden.

Fallback: There are no fallbacks, simply add or remove the modifier if required. It is important that your Border Colour is set as an RGB in order to show.

To set the size, colour and border type of the audio element, follow the subsequent steps:

  1. In the input field “Border Size Value”, enter the border size in pixels or use the arrows to reach the required pixels.
  2. In the input field “Border Colour Value”, enter the border colour in RGB units.
  3. Select a border type from the list by locating and clicking the box of your desired option: Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset or Hidden.
  4. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.

Audio Background [RGB] [Easy]

This modifier will set the colours of the child buttons within the generated section. In Background Colour, enter the RGB units.

Fallback: There are no fallbacks, simply add or remove the modifier if required.

To set the background colour of the audio elements within the generated section, follow the subsequent steps:

  1. In the input field “Background Colour”, enter the RGB code of the desired audio background colour.
  2. To view your changes, locate and click the “Update Framework” button. Locate and click “Close” to view the mobile framework with your changes.

If you receive a red validation notification, follow the steps on-screen then locate and click the “Update Framework” button again to view your modifications.