On TIEIT, you will be able to create your own landing page from scratch or choose one of our premade templates. To learn how, watch the video below.

For more information on how to create and edit landing pages, please see the guide below:

1.0 What is a Landing Page

2.0 How to Create a Landing Page

3.0 How to Edit a Template or an Existing Landing Page

• 3.1 How to Edit Text
• 3.2 How to Edit Images
  • 3.2.1 How to Resize an Image
  • 3.2.2 How to Swap an Image
  • 3.2.3 How to Link an Image

4.0 Navigating the Toolbar

• 4.1 Toolbar Functions

5.0 What are Blocks

• 5.1 How to Add Blocks
• 5.2 How to Edit Blocks
• 5.3 Types of Blocks
• 5.4 Built-In Blocks
• 5.5 Types of Built-In Blocks

6.0 How to Preview a Landing Page

• 6.1 Device Views

7.0 How to Publish a Landing Page

• 7.1 General Settings - Required Settings
• 7.2 General Settings - Optional Settings
• 7.3 Publish Now
• 7.4 Publish Later
• 7.5 How to locate the live Landing Page URL

 

1.0 What is a Landing Page

The Landing Page module allows the creation of single-page websites. They can be used to market products, services or host a TIEIT Form.

TIEIT Landing Pages are easy to create with our templates and the ability to drag & drop new elements on a page. Published Landing Pages are compatible with desktops, tablets and mobile devices.

To create a Landing Page, see the information below.

 

2.0 How to Create a Landing Page

1. Go to the Landing Page module by selecting the icon on the left-side menu.
   
   
   📌 Please Note: If the Landing Page module isn't shown, it means that the module hasn't been activated in the TIEIT account. To add the Landing Page module, please contact us at help@tieit.ai.
   
   
2. Click the green +Landing Page button.
   
   
   
   
3. Select a template design, or start from a blank canvas by mousing-over one of the squares, click Create and enter the desired title for the Landing Page.
   
   

📌 Please Note: All template content, layouts, images and colours, can be edited in the Landing Page editor.

To edit a template or existing Landing Page, see the instructions below:

 

3.0 How to Edit a Template or an Existing Landing Page

To edit an existing item on the canvas, select by clicking on it, and the designated options will appear on the right-sidebar. Some items, like images and text, require a double-click to display their options.

3.1 How to Edit Text

Double-click on the text to edit it. Once selected, the text section can be modified, and additional styling options are presented above the text, as shown in the image below: 

While the text is selected, there are additional options on the right-side under the Typography section, as shown in the image below:

3.2 How to Edit Images

Click on the image to highlight it. At the top-right of the selected image, there are five icons.

Access the Image Editor.

Move the selection to the box containing the image. 

Move the image by clicking the icon and dragging the image to another location.

Duplicate the image.

Delete the image.

3.2.1 How to Resize an Image

1. Click on the image to select it.
2. Click and drag one of the highlighted corners to the desired size.
   
   
   

📌 Please Note: There might be limitations of the scale of the image depending on the neighbouring items.

3.2.2 How to Swap an Image

1. Double-click the image.
2. In the popup, there are two ways to choose the replace photo:
   
   
   1. Clicking or drag and drop the image to the upload section.
   2. Select an existing image.

3.2.3 How to Link an Image 

1. Click the image to select it.
   
   
2. In the quick options, select the pen icon to access the Image Editor.
3. Enter the URL.
   
   
   
   
4. Click Add Link.
5. Click the Apply button to confirm the change.

 

4.0 Navigating the Toolbar

The Toolbar is located at the top-right of the canvas and gives quick access to different options for the Landing Page Editor.

📌 Please Note: Mousing-over the icons in the editor will display their titles.

For more information on each Toolbar function, see the Toolbar Functions section below:

4.1 Toolbar Functions

Show Borders

The Show Borders function shows the gridlines for all items on the Landing Page. Viewing the framework is helpful to see where the borders are for each Block or page element.

The Show Borders view is only visible in the editor and won't be visible on the publish Landing Page.

 

Preview

The Preview button opens a new tab that displays how the Landing Page will appear when published. All links, Forms and Blocks will be fully functional.

 

Fullscreen 

The Fullscreen button will make the editor view fullscreen. To exit fullscreen mode, click the button again or press the ESC key.

 

Code View & Export

Code View & Export gives access to the HTML and CSS code of the Landing Page.

 

Import Template

Import a template by pasting the HTML/CSS code.

 

Change Template

Change Template will display TIEIT's Landing Page templates and saved user Templates. Selecting a new template will replace the current template in the Landing Page Editor. When switching templates, the old content will be erased for the new template. The action can be reversed with the Undo button.

 

Undo

The Undo button reverses the latest edit. Clicking the Undo button multiple times will undo the latest changes sequentially.

 

Redo

The Redo button reverses the latest Undo. Clicking the Redo button multiple times will redo the latest changes sequentially. 

 

Clear Canvas

The Clear Canvas button clears everything on the canvas. When clicking this button, there is a dialog box confirming the action. The Clear Canvas function can be reversed with the Undo button.

 

5.0 What are Blocks

Blocks are the containers that contain the page's elements, such as text, images, videos and more. The Landing Page canvas is built on Blocks, allowing each item to have its own designated space on the page. Blocks can be modified, rearranged, cloned and deleted.

5.1 How to add Blocks

1. At the top of the right-side section, select the Blocks button.
2. Add a block by dragging one of the icons to the canvas.
3. As the mouse hovers over different areas, a highlighted bar will appear, indicating where the Block can be placed.
4. Release the mouse button to confirm the location of the Block.

5.2 How to Edit Blocks

1. Click on the Block to select it.
2. The quick edit options will appear alongside the selection. The options include:
   

   Move the selection to the box containing the image. 

   Move the Block by clicking the icon and dragging it to another location.

   Duplicate the Block.

   Delete the Block.

3. The Block can be resized by dragging the corners.
4. Additional options will be present on the right-side.

📌 Please Note: Each Block has its own unique functions and options located on the right-side.

 

5.3 Types of Blocks

• Columns
• Text
• Image
• Video
• Map

Columns

The Columns are used for formatting and segmenting items on the Canvas. Other Blocks can be placed inside the Columns. There are four types of Column Blocks:

• 1 Column
• 2 Columns
• 2 Columns 3/7
• 3 Columns

Columns can be used to organize different Blocks into the same row, such as images and text, as shown in the image below:

Text

The Text Block is for entering a body of text into the canvas. Double-clicking the Text section on the Canvas will display additional options to edit the text:

📌 Please Note: For more information on editing text, see section 3.1 How to Edit Text.

Image

The Image Block adds an image to the Landing Page. When placing the Image Block to the canvas, a dilaog box will appear. 

In the popup, there are two ways to choose the photo:

1. Clicking or drag and drop the image to the upload section.
   or
2. Select an existing image.

📌 Please note: For more information on the Image Block, see section 3.2 How to Edit Images.

Video

The Video Block allows playback from YouTube, Vimeo and an HTML5 source.

To add a video to a Landing Page, follow the steps below:

1. Drag and drop the Video Block on the Canvas.
2. Select the Video Block to access the Video Settings.
   
   
   
   
3. On the right-side menu under Video Settings, select the Provider.
4. Enter the Video ID.

📌 Please note: Different settings will display depending on the selected Provider.

Map

The Map Block adds an interactive Google Map with a specified location. To add an interactive to a Landing Page, follow the steps below:

1. Drag and drop the Map Block on Canvas.
2. Select the Map Block to access the Map Settings.
   
   
   
3. Enter the address.
4. There are two Map Types to choose from, Roadmap or Satellite.
5. Drag the Zoom slider to zoom into the map location.

5.4 Built-In Blocks

Built-in Blocks are pre-created webpage sections that can be added to a Landing Page. 

How to use Built-in Blocks

1. Select the Built-in Blocks button at the top of the right-side options.
   
   
   
   
2. In the right-side options, select one of the Block types to initiate the dropdown.
3. Add a block by dragging the desired Block to the canvas.
4. As the mouse hovers over different areas, a highlighted bar will appear, indicating where the Block can be placed.
5. Release the mouse button to confirm the location of the Block.

For more information on the types of Built-in Blocks, see the section below:

5.5 Types of Built-in Blocks

• Headers
• Banners
• Contents
• Forms
• Buttons
• Testimonials
• Footers

Headers

Headers are usually at the top of a Landing Page. Header Blocks contain the organization's logo and sometimes social media icons that can be linked.

Banners

Banners are generally placed underneath the Header and are often similar to a book/magazine cover, giving the visitor an impression of the page's content.

Contents

The Content Blocks contain different layouts for the page's content. All images and text are editable and can be linked.

Forms

The built-in Form Blocks are more stylized than the regular Form Block and can be used with a TIEIT Form. All submissions from the Landing Page, either published or in preview, will be added to your TIEIT account.

 

📌 Please Note: The Forms module is required to add Forms to a Landing Page. To add the Landing Page module, please contact us at help@tieit.ai.

Buttons

Buttons are a great way to initiate a call for action. There are multiple styles of buttons, each with text and a link that can be modified.

Testimonials

The Testimonial Blocks are to add testimonials from customers. This Block can also be used as an About Me/Us section or to highlight a VIP.

Footers

Footers are normally placed at the bottom of the Landing Page and can contain social media icons, legal copy, and additional links. 

 

6.0 How to Preview a Landing Page

Previewing Landing Pages allows users to view how the Landing Page will appear once it's published. There are two ways to preview a Landing Page:

From the Landing Page Editor:

1. Go to the top menu and click the Eye icon.
   
   

From the Landing Page module:

1. Go to the Landing Page module and click the Landing Page title.
   
   
   
   
2. Mouse-over the preview image, and click the Preview button.
   
   

The Preview will appear in a new window.

6.1 Device Views

Device Views change the canvas size to represent how the Landing Page will appear on desktops, tablets, and mobile devices. To change the device view, at the top left of the Landing Page editor, select one of the three device icons.

 

The three device views are:

Desktop view

Tablet view

Mobile View

📌 Please Note: Editing the Landing Page is still available while switching between different views.

 

7.0 How to Publish a Landing Page

Before publishing a Landing Page, the General Settings need to be completed. To access the General Settings, click on the gear icon at the top-right of the editor:

📌 Please note: The General Settings only apply to the Landing Page that's being edited.

7.1 General Settings - Required Settings

These settings need to be completed to publish a Landing Page:

1. Page Name: This is the internal name of the Landing Page and can only be viewed by TIEIT users in the same company account.
2. Page Title: The Page Title will appear at the top of the browser.
   
   
3. Page Slug: This will be the last section of the URL. Once entered, a preview will appear below in the Page Publishing URL section.

📌 Please note: Once these three fields are complete, the Landing Page can be published by clicking the blue Publish Now button.

7.2 General Settings - Optional Settings

These settings are optional and are not required to publish a Landing Page.

1. Favicon: Upload an icon to be displayed alongside the website title in the browser tab, browser history and bookmarks.
   
   
2. Meta Description: Search engines sometimes use the Meta Description for summarizing the page's content for visitors.
   
   
   
   
3. Header Code: Allows web developers to add code to the 'head' tag of the page. This is often used for tracking traffic.
4. Footer Code: Allows web developers to add code right before the 'body tag of the page.

7.3 Publish Now

Once the Required Settings are complete, the Landing Page can be published by clicking the blue Publish Now button.

7.4 Publish Later

The Landing Page can be published at a scheduled date and time by using the Publish Later function.

1. Click the arrow to the right of the Publish Now button.
   
   
   
   
2. In the popup, select Publish Later.
   
   
   
   
3. Select the desired publish date.
   
   
   
   
4. Select the desired publish time.
   
   
   
   
5. Click the blue Schedule button to confirm.
   
   

The status of scheduled Landing Pages will appear in the Landing Page module.

 

7.5 How to locate the live Landing Page URL

Once a Landing Page is Published, it can be shared with others with its link. There are two ways to access the live URL, from the Landing Pages module listing or in the Landing Page Overview.

 

URL from the Landing Pages Module:

1. Go to the Landing Page module.
2. Locate the desired Landing Page.
3. Select the three-dot menu at the end of the row.
   
   
   
   
4. Select Copy Live URL. This will copy the URL to your clipboard and can be pasted elsewhere.

 

URL from the Landing Page Overview:

1. Go to the Landing Page module.
2. Locate and click the name of the desired Landing Page.
3. From the Landing Page overview, there are two ways of locating the URL for the live Landing Page:
   
   
   1. Click the blue View Live Page button, and copy the URL from the browser.
      or
   2. Copy the URL from the 'clicking here' link.

📌 Please Note: A Landing Page needs to be published before users can view it outside of TIEIT. To publish a Landing Page, see 7.0 How to Publish a Landing Page.