How to create a custom page using SystemeScale

📅 Last updated: June 2026

⏱ 5 min read

✅ All plans

In this article, you will learn the foundational process for creating and structuring a completely custom page from scratch within SystemeScale.

To get started, you will need:

An active SystemeScale account.

Step 1: Create your Custom Funnel and Page

Initiate a New Funnel

Navigate to the Sales Funnels tab in your main dashboard and click the Create button to set up a new sales funnel. In the creation modal, choose the Custom option, and click Save.

Add the Page Step

Once you are inside your newly created funnel environment, click on the Add step button located on the left-hand navigation panel.

Define Page Parameters

A popup will appear requesting parameters. Enter an internal reference name for your page (3) and carefully select the required Page type from the dropdown menu (4).

Create step ✕

Name

Type

Sales Page▼

After saving your parameters, you will have the option to select a pre-designed template from the SystemeScale library. To build entirely from scratch, simply select the blank template and click Edit page to enter the canvas.

Step 2: Understand the Page Structure Hierarchy

To successfully build a custom page, you must understand the strict three-tier hierarchy that governs all web page architecture within the builder.

Sections: These are the fundamental, wide building blocks of your page. You must always start by placing a section onto the blank canvas. Sections house everything else.
Rows (Columns): Columns control vertical layout structure. You place rows directly inside a Section to dictate how elements sit next to one another.
Elements: These are the tangible visual components (text blocks, images, buttons, videos). Elements can only be placed inside a Column.

Text Block

Image

Visual demonstration of the strict hierarchy: Elements sit inside Rows, which sit inside Sections.

How to assemble the page

Follow this exact sequence to construct your layout:

Drag a Section: Pull the Section element from the left toolbar onto the canvas. A section automatically generates a baseline single-column row inside it.
Configure the Section (5): Click on the Section boundary (the green border) to expose its settings. Here you can change the global background color, modify the inner background tint, or upload a background image overlay.
Adjust Columns: If you need content side-by-side, drag a 2-column or 3-column Row element inside the section to split the area.
Inject Elements: Drag specific elements (such as text, images, or buttons) directly into your empty columns to populate the page visually.

Advanced Customization and Reset Protocols

Once your elements are placed, click on any individual element (e.g., a text box) to open its advanced configuration panel in the left sidebar. From here, you can manipulate typography, colors, padding margins, and dimensional sizing.

💡

Instant Parameter Reset

If you make an extreme modification to an element's style and want to revert to the default state quickly, you do not need to rebuild the block. In the left-hand settings panel, hover over the specific property label (e.g., "Color" or "Typography"). A small circular Reset arrow icon will appear next to the setting name. Click this icon to instantly revert that specific parameter to its default value.

Was this article helpful?

📄How to create a funnel→ 📄How to add an image to a page→ 📄How to add and edit text→