Layout
Before adding content, you can set the layout when creating a page. We provide seven types of layouts:
1 column: Adds a layout with one section in a single row extending on the page compose.
2 column: Adds a layout with two columns of equal size in one section on the page compose.
3 column: Adds a layout with three columns of equal size in one section on the page compose.
4 column: Adds a layout with four columns of equal size in one section on the page compose.
Wide left: Adds a layout with two columns, with the left column larger than the right in one section on the page compose.
Wide right: Adds a layout with two columns, with the right column larger than the left in one section on the page compose.
Wide middle: Adds a layout with three columns, with the middle column larger than the right and left columns in one section on the page compose.
You can drag and drop to arrange the layout per section as needed.
Component
You can add components within the page being created. The components we provide are as follows:
Text
You can add text components. You can configure text settings including:
Content: Configure text color, font type, font size, and line height.
Background & Spacing: Configure background color, padding, and margin.
Links: Configure link color and underline.
Image
You can add image components. Image settings include:
Action: Assign an action to the image, such as displaying an action when the visitor clicks the image.
Content
Image: Action button to upload an image.
Shape: Three options for shaping the image: circle, square, or no masking.
Size: Options for image size: Original, Custom, and edge to edge.
Align: Set image alignment (center, left, right).
Background & Spacing: Configure background color, padding, and margin.
Note: The maximum image size allowed is 5MB.
Button
You can add button components to link to specific URLs. Button settings include:
Content
Title: Configure text color, font type, and font size for the button.
Button: Configure button title, radius, background color, width, and line height.
Border: Configure border color and size.
Align: Set button alignment.
Background & Spacing: Configure background color, padding, and margin.
Links: Define where the button directs.
Web: Direct to a URL.
Mailto: Direct to email with predefined email address, subject, and body.
Form
You can add form components that you previously created through the Form API or create a new form from this component.
Creating a new form?
Click Create New. Then enter the desired form name and configure the Save to Contact option. If set to "Yes," the data from form submissions will be automatically saved in contacts with a designated label. If set to "No," data will not be saved in contacts.
Using an existing form?
Select a form from the list of available forms by clicking Select.
Form settings include:
Form Detail: Change the form used or edit the form.
Content: Configure text color, font type, font size, and background color.
Background & Spacing: Configure background color, padding, and margin.
Button: Configure button color, text size, alignment, background color, radius, padding, and margin.
Image Text
You can add components consisting of both images and text in one component.
Product
You can add components consisting of images, text, and buttons in one component.
Social Media
You can add social media button components that link to your social media profiles by pasting the profile URLs.
Content
You can generate content from a web page by copying and pasting the URL. Content settings include:
Generate Content: Generate content with the URL. Choose to load or not load JavaScript.
Style contents: Configure content alignment.
Show Image: Display the image.
Show Description: Display the description text.
Image
Source: Upload image.
Align: Set image alignment.
Title: Configure title text, color, font type, font size, and line height.
Description: Configure description text, color, font type, font size, and line height.
Background & Spacing: Configure background color, padding, and margin.
Code
You can embed any HTML code into the MTARGET page, such as YouTube videos, Instagram posts, tweets, etc.
To add components, you can add them directly or create the layout first. You can add components within the layout columns. Add components by clicking the plus button or dragging and dropping the component. Multiple components can be added within a single column.
Catalog
You can generate a catalog from a web page by copying and pasting the URL. Catalog settings include:
Content: Generate catalog with URL. Choose to load or not load JavaScript.
Style contents: Configure product alignment.
Image: Display product images.
Product Name: Display product names.
Price: Display product prices.
Rating: Display product ratings.
Description: Display product descriptions.
Button: Display product buttons.
Image
Source: Upload image.
Align: Set image alignment.
Product Name: Configure product name text, color, font type, font size, and line height.
Price: Configure price text, color, font type, font size, and line height.
Rating: Configure rating text and icon.
Description: Configure description text, color, font type, font size, and line height.
Button: Configure product buttons.
Background & Spacing: Configure background color, padding, and margin.
Separator
You can add separator components. Separator settings include:
Content
Color: Change separator color.
Size: Change separator thickness.
Length %: Change separator length.
Style: Change separator style.
Countdown
You can add countdown components. Countdown settings include:
Content
Expiration Date: Set the countdown expiration date and time.
Style: Change countdown style.
Size: Change countdown size.
Align: Set countdown alignment.
Color: Change countdown color.
Label: Change countdown date label.
Text Formatting Configure text color, font type, font size, and line height.
QR Code
You can add QR Code components. QR Code settings include:
Content
Color: Change QR Code color.
Background: Change QR Code background color.
Align: Set QR Code alignment.
Width (%): Set QR Code width as a percentage.
URL: Add URL to generate the QR Code.
Background & Spacing
Background: Change background color.
Padding: Set background padding.
Margin: Set background margin.
Barcode
You can add Barcode components. Barcode settings include:
Content
Color: Change Barcode color.
Background: Change Barcode background color.
Align: Set Barcode alignment.
Width (%): Set Barcode width as a percentage.
Data: Add data to generate the Barcode.
Background & Spacing
Background: Change background color.
Padding: Set background padding.
Margin: Set background margin.
Podcast
You can add a podcast player to your Page by embedding it. Two sources available are Anchor and Soundcloud.
Note: You need to embed the code, not the link. We recommend changing the width to 100% for better display. For example:
<iframe src="https://anchor.fm/mtarget/embed/episodes/Tingkatkan-Konversi-dengan-Memanfaatkan-Video-di-Landing-Page---EP5-ee081t/a-a26aprm" height="102px" width="400px" frameborder="0" scrolling="no"></iframe>
Change width="400px" to width=100%.
Navigation
Add a navigation menu to link to desired pages.
Content
Two types available:
Button Only: Displays only the text menu.
Logo & Button: Displays the menu with the logo.
Three position options:
Left: Displays the menu on the left.
Center: Displays the menu in the center.
Right: Displays the menu on the right.
Block: Displays the menu on the right and the logo on the left (if 'Logo & Button' is selected).
Logo (available if 'Logo & Button' is selected)
Image
Max width: Set navigation width as a percentage.
Height mode: Auto uses Max Width, Specific uses Max Height.
Max Height (if Specific height mode is selected): Set navigation height in pixels.
Button
Wrap Mode: Configure button navigation for responsiveness.
Background: Set background color.
Radius: Set radius.
Border: Configure border color and size.
Links Add and configure navigation buttons to desired links or created Pages.
Google Map
Add a Google Maps location to your Page by embedding the map code.
To find the embed code on Google Maps:
Search for the location on Google Maps.
Click the 'Share' button.
Click the 'Embed a Map' tab and copy the HTML code.
Read more detailed steps here.
Inline Image
Add images in a row using this component. Detailed steps can be read here.
Collapse
Add categorized text to make it neat and informative.
Testimonial
Add a testimonial section to your Page. Detailed steps can be read here.
Carousel
Add images in a slideshow format.