Introduction
Welcome to our Drag & Drop Builder! This feature is designed to make content creation easier, faster, and scalable. Whether you're a marketer or developer, this feature helps you build dynamic, personalized content at scale with just a few clicks.
Think of the Drag & Drop Builder as a Content Marketing tool—but built for large-scale content creation. You can:
- Drag & Drop Custom Fields: Match the fields you need with your design template effortlessly.
- Generate Unique Content: Use our advanced features like Variables, Spin Syntax, and Generative AI to make content dynamic, personalized, and completely non-duplicated.
- Export Your Content: Export your data as JSON for front-end integration or CSV for CMS uploads.
Before You Start: Have Your Design Template Ready
To use the Drag & Drop Builder effectively, you’ll need your design template ready. Think of it as the frame that holds all the content you’ll create with our tool.
Here’s why it’s important:
- Your template determines what fields (like text, images, rich text..) you’ll need to drag and drop.
- It helps you stay organized and ensures your final export (JSON or CSV) integrates seamlessly with your CMS or front end.
If you don’t have a design template yet, no problem! Just sketch it on paper or use a simple tool to map out the fields you need. Once that’s done, you’re ready to start building!
How to Use the Drag & Drop Builder
Follow these simple steps to get started:
- Prepare Your Design Template: Identify the fields (text, images, rich text..) you need and have your template ready as a guide.
- A title for the page (e.g.,
{{section1_heading_text}})
). - A banner image (e.g.,
{{section1_image}}
). - A description of the page (e.g.,
{{section1_subheading_text_area}}
). - etc..
Let’s take an example: Imagine you’re creating a Services Page.
![Notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F5fb572d2-770f-49c7-a4d7-b6c70e91d63e%2Fa4dfad65-66fd-487e-84ce-ec3d598a9389%2FGroup_28.png?table=block&id=183a396c-7ca6-8093-b931-cf3c81e8bb12&cache=v2)
You’ll need:
- Drag & Drop Fields: Add the necessary fields into the workspace and arrange them to match your design.
- Use the default Single Line Text field for the title:
{{section1_heading_text}}
. - Drag an Image URL field for the banner:
{{section1_image}}
. - Drag a Multiline Text field for the description:
{{section1_subheading_text_area}}
. - etc.
- If you have 1 variable with 9 rows in your dataset, it will generate 9 pages.
- If you have 2 variables (e.g., city and service), it will generate 81 pages (9 rows × 9 rows).
- etc.
- Rename each field to match your content.
- Use snake_case naming (lowercase words separated by underscores).
- Make sure each field name is unique to avoid conflicts.
Continuing with our example: For the Services Page, you’ll:
![Notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F5fb572d2-770f-49c7-a4d7-b6c70e91d63e%2Febfd7d1d-6bf6-4c83-bddc-3bc5c912c7af%2FXnapper-2025-01-22-16.12.41.png?table=block&id=183a396c-7ca6-8092-9826-f9acabc2b6ef&cache=v2)
Important Note:
The title field is critical and cannot be renamed or deleted. This field determines the number of pages that will be created based on your variables.
For example:
For all other fields, you must:
- Create Content: Use features like Variables, Spin Syntax, and Generative AI to create dynamic, unique, and personalized content.
Still using the Services Page example: Fill in your fields with content:
![Notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F5fb572d2-770f-49c7-a4d7-b6c70e91d63e%2F87c462b5-d81b-48f5-aa2d-cb6084358b68%2FXnapper-2025-01-22-16.21.13.png?table=block&id=183a396c-7ca6-80ee-85bf-d62463d16301&cache=v2)
- Preview & Export: Review your work, then export it as JSON or CSV based on your needs.
- As JSON: This format is perfect for front-end integration, allowing your developers to dynamically render the page. Here's an example of how the output might look:
- As CSV: This format is ideal for uploading to your CMS or managing data in bulk. Here's an example of how the output might look:
Wrapping up the example: Once your content template for the Services Page is ready, export your content:
[
{
"section1_heading_text": "Experience Top-Rated Yoga Classes in Chicago",
"section1_image": "https://example.com/chicago.jpg",
"section1_subheading_text_area": "Start your yoga journey in Chicago with our experts instructors and peaceful studio atmosphere."
},
{
"section1_heading_text": "Experience Top-Rated Yoga Classes in Los Angeles",
"section1_image": "https://example.com/losangeles.jpg",
"section1_subheading_text_area": "Start your yoga journey in Los Angels with our experts instructors and peaceful studio atmosphere."
},
{
"section1_heading_text": "Experience Top-Rated Yoga Classes in New York",
"section1_image": "https://example.com/newyork.jpg",
"section1_subheading_text_area": "Start your yoga journey in New York with our experts instructors and peaceful studio atmosphere."
},
...
]
section1_heading_text | section1_image | section1_subheading_text_area |
Experience Top-Rated Yoga Classes in Chicago | https://example.com/chicago.jpg | Start your yoga journey in Chicago with our experts instructors and peaceful studio atmosphere. |
Experience Top-Rated Yoga Classes in Los Angeles | https://example.com/losangeles.jpg | Start your yoga journey in Los Angels with our experts instructors and peaceful studio atmosphere. |
Experience Top-Rated Yoga Classes in New York | https://example.com/newyork.jpg | Start your yoga journey in New York with our experts instructors and peaceful studio atmosphere. |
… | … | … |
Here’s how the pages might look once the data is used to generate your content:
![Notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F5fb572d2-770f-49c7-a4d7-b6c70e91d63e%2Fea5d720e-1225-4476-b471-53c5590649eb%2Fscreencapture-nocodebuilders-fr-service-best-yoga-services-in-chicago-2025-01-03-17_56_05_1.png?table=block&id=183a396c-7ca6-8016-bc6a-e18010bbdcc3&cache=v2)
![Notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F5fb572d2-770f-49c7-a4d7-b6c70e91d63e%2F5a47d381-7bda-4a40-9435-d7e2046cd960%2Fscreencapture-nocodebuilders-fr-service-best-yoga-services-in-los-angeles-2025-01-03-17_55_48_1.png?table=block&id=183a396c-7ca6-80a1-8602-c65c2e6bb4bd&cache=v2)
![Notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F5fb572d2-770f-49c7-a4d7-b6c70e91d63e%2F4d752226-fd50-499d-b585-22b2eb9fb73d%2Fscreencapture-nocodebuilders-fr-service-best-yoga-services-in-new-york-2025-01-03-17_55_29_1.png?table=block&id=183a396c-7ca6-80df-9549-eeeceb23d1b0&cache=v2)
Contact and Support
For further assistance, feel free to reach out to our support team. Contact us at contact@seomatic.ai or via chat.