Custom Sections are the building blocks of our custom made builder.
They are meant to help you to build pages and expanding existing ones by adding, arranging, and editing sections (and elements).
Each section has its own purpose, structure, and styling controls, but the editing logic behind them is consistent.
What a Section Really is
A section is one self-contained block inside a page or builder environment.
It can contain text, images, buttons, repeated items, layout settings, and styling controls – but the main idea is simple: one section equals one manageable piece of the page.
When you combine multiple sections, you can build the full page structure or turn a existing page, like the product page, into a highly converting sales page.
Section Names Are Suggestions, Not Limitations
The section names describe the most common intended use, but they are not hard limits on what the section can communicate.
For example, a section called Benefits could also be used for features, reasons to trust, or use cases. A Process section could explain a product journey, a service flow, or a simple step-by-step idea.
Important: Especially on the homepage, many sections can be repurposed. The default section name is there to help guide editors, not to restrict them.
Sections Can Be Renamed
Sections can be renamed inside the builder interface.
This is useful because the default section label is not always the best working name once a page becomes larger or more customized.
Renaming helps you:
- organize repeated or similar sections more clearly,
- understand the purpose of a section at a glance while editing,
- work more comfortably on long pages.
Note: This builder-level rename does not appear on the front-end. It helps editors to manage their back-end page view more effectively.
To rename a section, simply hover over the name of the section and a pen icon will appear. Click on the icon and you can rename the section. After this, confirm it and you are done.
Different Environments Have Different Rules
Probably the most important part you need to understand about the builder is that it is not in use everywhere. The builder is currently in use in 3 different “environments” and they have their own rules.
Here are the three environments in where you can add sections:
- The Home/Pages Environment: this is the most flexible one because you have the freedom to add, arrange and reuse sections in creative ways. You can use these sections on the homepage and all of the WordPress page types (not posts). They allow you to build pages from the ground up.
- Products Environment: these apply to the product pages. They can be added to fixed locations on the product pages and follow a set structure. These sections (and elements) are meant to increase the conversion of the product pages – they turn a default product page into a real “sales page”.
- General Environment: These are sections/elements and settings field that reside under the Website Settings. They apply either all over the page, like the header and footer elements, and/or offer settings for specific parts of the website.
The Home environment is structured in a way where the sections are stacked on top of each other (like a normal page-flow), while the Products and General environments separate sections/elements by tabs.
Sections Can Be Minimized and Expanded
As pages grow, sections can become visually heavy in the editor. That is why the builder allows sections to be minimized and expanded.
This helps for a practical reason: it reduces clutter and lets you focus on one part of the page at a time.
Minimizing is especially useful when:
- you are working on a long page with many sections,
- some sections have many repeater items or advanced settings,
- you only need to focus on one or two sections at a time.
Sections Can Be Reordered
The order of sections in the home environment is not fixed. You can move sections up or down to change the page flow.
This is important because it makes the reordering simple – lets you test and change the story, logic, or conversion path of the page effortlessly.
In practical terms, this means you can test things like:
- should trust content appear before the CTA,
- should benefits appear before product listings,
- should FAQ come earlier or later in the page.
It allows you to test different approaches without having to redo the whole/half of the page.
Sections Can Be Duplicated
Many sections can be duplicated, which saves time when you want to reuse the same structure with slightly different content.
Duplication is helpful when:
- you want a second version of a section with small changes,
- you want to keep a layout consistent across multiple content blocks,
- you want to build faster without recreating a section from nothing.
Remember: Duplication copies structure and content state, so it is a speed tool. It is especially useful for sections that already look close to what you need.
Sections Can Usually Be Removed
Most sections can be removed when they are no longer needed. That means editors can experiment more freely, because a section does not have to stay just because it was added earlier.
Note: Some sections can be treated as mandatory depending on the environment or page setup, so not every section behaves exactly the same in every context.
Section Fields are Optional
You do not need to fill out all of the fields inside a section to display it. You can leave fields empty and they simply won’t show on the front-end. This gives you the flexibility to use only the fields you need.
In some cases, it even makes sense to skip one field in favor of the other. For example, our recommendation is to use either only the kicker field OR subheading alongside the heading field, but not both.
Fields Can Often Be Hidden
Many sections support visibility toggles for optional fields.
This is a useful feature because it means you do not have to display fields you do not intend to use. This helps you to reduce clutter inside the editor.
In simple terms, toggles let you:
- show a field when you need it,
- hide it when you do not,
- keep the section cleaner.
Please be aware: hiding a filled field does not hide it from the front-end.
Repeaters Make Many Sections More Flexible
Many sections are powered by repeaters. A “repeater” means the section can contain a list of repeated items instead of just one fixed content block.
This is how sections like FAQ, Feedback, Benefits, Process, Image Text, and many others can grow or shrink depending on the page.
Repeaters also often support their own visibility logic, so repeated items can stay adaptable instead of rigid. Toggling a field inside a section only hides it for you! If you have filled it out, it will display on the front-end.
Content and Design Are Related, but Separate
Sections usually separate content editing from design refinement. In practice, that means the editor can usually:
- enter the content,
- decide which parts are visible,
- set the order and structure,
- then refine layout and styling.
This makes the system easier to understand because writing and design adjustments do not have to happen all at once. The design is usually hidden under each sections “Styles” tab (except the General environment). When clicking it, it will open a whole section based design system.
To read more about styling settings, please visit: The Styling System Overview
Responsive Layout in Sections
Many sections are designed with responsive controls in mind. These sections give you the freedom to show multiple items (like images) per different viewports.
So it is very important that you set the items amount for every screen size, not only by how it looks on a wide desktop screen.
Editors should usually think about it this way:
- how many items show on desktop,
- how many show on tablet,
- how many show on mobile,
- whether the section still feels readable and balanced on small screens.
Sections that have these responsive controls have fields called Breakpoints. These let editors decide how many items or columns should appear at different screen widths.
A breakpoint means: when the screen is this width or smaller, use this setting instead of the desktop setting.
Because the system shows breakpoints as pixel widths, it can help to think of them with practical names:
Base / Desktop
This is the default layout for larger screens. Use this for the fullest version of the section. For grids, this might be 3 or 4 columns depending on how large each item needs to feel.
Width ≤ 1199px – Small Desktop / Large Tablet
This is usually still close to desktop. In many cases, the same number of columns can remain here. If the items start to feel tight, reduce the layout by one column.
Width ≤ 991px – Tablet
This is a common point where desktop layouts need to simplify. A 3-column grid often becomes 2 columns here. This keeps cards, text, and images from becoming too narrow.
Width ≤ 767px – Large Mobile
This is where many sections should become much simpler. Content-heavy cards usually work best as 1 column. Smaller visual grids may still use 2 columns if the items are simple and easy to scan.
Width ≤ 479px – Small Mobile
This should usually be the most readable version of the section. In most cases, use 1 column so each item has enough space.
Editors can adjust the responsive behavior in a few ways:
Change a breakpoint
Change how many columns or items should show at that screen width. This is useful when the section feels too crowded or too empty on a specific device size.
Add a breakpoint
Add another rule when the default breakpoints are not specific enough. For example, a section may look good with 2 columns on a large phone but need 1 column on a smaller phone.
Remove a breakpoint
Remove a rule when it is not needed. If a breakpoint is removed, the section will use the next available rule or fall back to the base desktop setting.
Reset breakpoints
Reset the section back to its default responsive setup. This is useful if the layout has become confusing or if the section should return to the recommended starting point.
Some Sections Can Use Shared Global Content
Some sections – especially shared global sections like CTA, FAQ, and Feedback – can work with reusable content logic.
That means a section may use local content entered directly in that page section or shared Website Settings content.
This feature allows editors to reuse shared sections without rewriting the same content again and again.
Final Note
If the individual section articles explain what each section does, then this is the bigger picture: sections are flexible, structured building blocks that all follow a shared editing system. What changes is the purpose and output of the section. What stays consistent is how editors work with them.