Creating Forms & Landing Pages - Phase 2: The Drag & Drop Editor

Structured AI → Creating Forms & Landing Pages Phase 2: The Drag & Drop Editor

Creating Forms & Landing Pages - Phase 2: Drag & Drop Editor

Estimated Time

~10 minutes

Current Phase

Phase 2 of 3

What You'll Accomplish

• Learn how to configure landing pages using the Structured AI Page Editor
• Follow step-by-step instructions to build landing pages

• Use editor tools to create clear and visually appealing pages
• Build functional and well-structured landing pages efficiently

Before you begin — open your account
This is a hands-on, learning-by-doing session. Open app.structured.ai in your browser and log in to your Tenant Account so you can follow along and apply each step in real time.

Direct Links to the Next Phases in this Training Series

This module is part of a 3-part series. Each session builds on the last, and reviewing them in order ensures you don't miss any critical steps and get a complete understanding of the workflow.

Phase 1 Setup & Framework	Start Training ➡
Phase 2 Drag & Drop Editor	Current Phase ✔
Phase 3 Confirmations & Activation	Start Training ➡

---

Follow Our Step-By-Step Training

1. Introduction

Building on Phase 1, this guide helps both beginners and experienced users optimize landing pages for better engagement and conversions.
 

 

2. Name Your Landing Page

To personalize the name of your Landing Page, simply click inside the name entry field.  By doing so, you can ensure that your Landing Page name is unique and tailored to your preferences.
 

 

3. Rename Landing Page

For the purpose of this training, fill the page title field with "My Practice Landing Page" to personalize your Landing Page.
 

 

4. Select Manual Editing Mode

Select the Manual editing option to choose manual editing mode for detailed customization.
 

 

5. Landing Page Editor Tour

A quick tour is necessary before we dive in to creating! 

In the left panel of the interface, you will find a comprehensive collection of Drag & Drop elements. These elements are designed to be easily selected and pulled into your email layout, allowing you to customize your email content with great flexibility. 

By simply dragging these components from the panel and dropping them into your email template, you can tailor the design and structure to suit your specific needs and preferences. 
 

 

6. Element Properties Panel

In the right panel, you will see the editing Properties of the element you add to your Landing Page. This will be different based on the element you are editing.
 

 

7. Edit Heading

Let's begin editing this Landing Page.

To edit your banner, click inside the banner section and select the Parent Section Button from the bottom tray. If needed, update the number of columns to accommodate your design layout.
 

 

8. Editing Text Element

Edit the Text element to update your headline. You can use the toolbar to bold your text, center it, and change the font color. For this training, please Center and Bold your headline.

 

9. Editing an Image

When updating an image, double click the image, and upload a new image. For this training, please select a different image for your Landing Page. 
 

 

10. Upload or Add New Image

You can also choose an image from the image library.

 

11. Add Selected Items

Click Add Selected to include chosen elements into your Landing Page.

 

12. Open Image Properties

Within the image Properties panel, use the cropping tool to adjust the size of your image. Use the Properties panel to refine your banner, by adjusting spacing, settings and more.

 

13. Edit Vendor X Description

For editing the body of the email, you have a few options and can update existing sections or elements or you can also drag in a new Section from the Drag & Drop elements.
 

 

 

14. Access Additional Settings

Adding a new section, allows you to drop any new additional elements onto the canvas.
 

 

15. Translation Feature

The Translate button is available to you as well! This allows you to translate the text into up to 130 languages.
 

Great job! You have successfully configured and customized your landing page using the Structured AI Page Editor. Review your changes to ensure all elements are correctly set, then publish or share your page as needed for your audience.

You've Completed Phase 2 - Move to Phase 3 →