How to Use a Drag and Drop Page Editor for the First Time

Systeme.io's drag and drop page editor works the same way every time: start from a ready-made template inside a funnel, then delete the blocks you don't need and edit the ones you keep.

This drag and drop page builder tutorial for beginners walks through the whole process on a real opt-in page, from creating the funnel to checking it on mobile before anything goes live.

Start Inside a Funnel, Not a Blank Page

Landing pages in Systeme.io don't exist on their own. They live inside a funnel, which is just a sequence of pages built to move a visitor toward one action.

To create one, I go to Sites, then Sales Funnels, then click the blue Create button on the right.

• Funnel Name: I name mine after the lead magnet itself, shortened to something quick to scan in a list, rather than typing out the full title every time.
• Funnel Domain: pick your own domain or subdomain if you've connected one. Otherwise it defaults to a systeme.io address.
• Funnel Goal: select Build an Audience. This tells the platform you're collecting leads rather than selling, and the step icons update to match.

Click Save and the funnel is created, ready for its first page.

Finding a Template Without Wasting Time

Clicking into the new funnel brings up the template gallery automatically. By default it only shows nine templates per screen, which makes comparing options slow.

I switch the view to 30 per page straight away, so I can see most of the opt-in options in one scroll instead of clicking through several pages.

• Preview Icon: a small square with a diagonal arrow, sitting on each template thumbnail. It turns blue on hover.
• Preview Click: opens a full-size version of the page before you commit to editing anything.
• Page Type: for this walkthrough I picked a plain opt-in template, not a sales page or a full landing page with extra sections.

Once I found a simple layout, I clicked Edit Page to open the actual editor.

The First Rule for Beginners: Strip the Template Down First

Every template arrives with more sections than a basic opt-in page needs. Before adding anything, I remove what I don't want.

Hovering over a section reveals a delete option, and confirming it clears the whole block in one click.

• Section: a full horizontal block of the page. Deleting one removes everything inside it at once.
• Row: the layout strip inside a section that elements sit in.
• Element: the individual piece, a text block, an image, or a button, that lives inside a row.

For a first opt-in page, I keep it to a headline, one short line of supporting text, the email capture form, and a button. Everything else gets deleted before I touch a single word of copy.

Editing the Headline, Button and Layout

Clicking directly on the headline text opens editing options on the left. I replace generic template copy with something specific to the offer, not a placeholder line.

The button gets the same treatment. Clicking it opens settings for the button text, the color, and the text size.

• Button Text: a label like "Submit" tells a visitor nothing about what happens next, so I write out the actual outcome instead, capitalizing the first word so it reads as an active choice rather than a form field.
• Button Color: a color picker slider sets it to match the rest of the page.
• Text Size: adjustable up or down a step at a time until it balances against the headline above it.

Templates don't always line the email field up neatly with the button next to it. When that happens, I adjust the margins on the field until the two sit level, since a form that looks slightly off catches the eye before anyone reads a word of the copy.

The Image Block Is Optional

Most opt-in templates ship with an image or video placeholder built in. I don't always keep it.

• Delete It: hovering over the block shows a trash icon, and confirming removes it cleanly if the page doesn't need one.
• Upload Your Own: clicking to add an image opens an upload option, where you can pull in a file from your device or reuse one already saved to the account's image library.
• Swap for Video: the same slot accepts a video embed instead of an image, if that suits the offer better.

Two Checks Before Publishing: Privacy Policy and Mobile View

Before I call any opt-in page finished, two checks happen every time, and neither is optional.

• Privacy Policy Link: I drag a text element to the bottom of the page, add a short privacy policy line, and link it to the actual policy page. Collecting an email address without one is a step I don't skip.
• Mobile Preview: the editor has a mobile view toggle. I switch to it and check spacing and button size before publishing, since most visitors will see the page on a phone first.

What Happens After Someone Opts In

Once the page collects an email address, the visitor should land on a thank you page next, explaining what to expect.

• Thank You Page: confirms the signup went through and sets expectations for what comes next.
• Delivery Email: usually carries the link to whatever the visitor just signed up for, sent automatically rather than by hand.

Publishing the page is one part of the picture. Turning it into a full sequence, launch a complete lead capture funnel, is the next step once the opt-in page and its delivery are both in place.

That's the whole drag and drop page builder tutorial for beginners, start to finish: template, delete, edit, align, check, publish. The same process carries over to sales pages and thank you pages too, so once it clicks once, it clicks every time after. Once your own opt-in page is live, build your first sales funnel free covers turning a page like this one into a complete funnel that actually follows up with the leads it captures.