Using the page builder

Every page you build in The Viking Stack — funnel step or website page — uses the same drag-and-drop page builder. Understanding its layout hierarchy makes the difference between a page that's easy to adjust later and one that fights you every time you try to move something.

#The layout hierarchy

Pages are built from four nested layers, from largest to smallest:

1. Section — a full-width horizontal band of the page (a hero banner, a features area, a testimonials block, the footer).
2. Row — a horizontal strip inside a section. A section can hold multiple rows stacked vertically.
3. Column — a vertical slice inside a row. A row can be split into multiple columns (two columns for an image-and-text layout, three for a feature grid, etc.).
4. Element — the actual content: headlines, body text, images, buttons, forms, videos, icons, dividers, countdown timers, and so on.

To place an element on the page, you need a section, a row, and a column underneath it — the builder usually creates these automatically as you drag.

Tip: Think of it like a table: sections are the whole table, rows are horizontal stripes, columns split each stripe vertically, and elements are what actually sits in each cell.

#Adding and arranging content

1. Click the + (plus) icon, usually in the top-left of the builder, to open the Add Element panel.
2. Drag an element onto the canvas. If you drop it on an empty part of the page, the builder automatically creates the section, row, and column needed to hold it.
3. To add more elements to an existing row, drag them into an existing column, or drag a new column divider to create space.
4. Reorder elements, columns, rows, or sections by dragging their selection handles — hover over an area until you see the outline and drag handle for that layer, then drag it up or down.
5. Click any layer (section, row, column, or element) to select it and open its settings in the right-hand panel.

#Styling sections, rows, columns, and elements

Each layer has its own settings panel, typically split across a few tabs:

• Content/Style — background color or image, text color, fonts, borders, corner radius.
• Spacing — margin (space outside the block) and padding (space inside the block, between the content and its edge). Getting margin and padding right is most of what makes a layout feel intentional instead of cramped or scattered.
• Advanced — custom CSS classes, animations, visibility rules, and sizing (height/width controls for precise layouts).
• Visibility — show or hide an element on desktop vs. mobile, or delay its appearance using a timer (useful for a popup or offer that should appear a few seconds after the page loads).

Note: Background settings, spacing, and visibility can all be set differently per breakpoint (desktop, tablet, mobile) — see the mobile editing section below.

#Mobile editing

The builder edits desktop and mobile as separate views of the same page, not two separate pages.

1. Look for a device switcher, usually near the top of the builder (desktop / tablet / mobile icons).
2. Switch to the mobile view. Your desktop layout carries over automatically, but columns typically stack vertically on narrow screens.
3. Adjust anything that looks cramped or broken on mobile: font sizes, image sizing, spacing, and whether certain elements should be hidden entirely on small screens (a large background video, for example, is often better hidden on mobile for load-time reasons).
4. Check the visibility toggle for individual elements — most builders let you hide any element on mobile without affecting the desktop version, and vice versa.
5. Always preview on an actual phone, not just the narrow browser window, before publishing — real device rendering can differ slightly from the in-builder preview.

Warning: Never assume a desktop layout "just works" on mobile. The single most common launch mistake is a page that looks great on a laptop and has overlapping text or oversized images on a phone. Since most traffic to a landing page is mobile, this is worth the extra five minutes every time.

#Saving your work and versions

• The builder autosaves as you work in most cases, but it's good practice to watch for a save indicator or explicitly save before navigating away.
• Publish and save as draft are different actions — saving keeps your changes in the builder, but nothing changes on the live URL until you publish.
• Some accounts have access to page version history, letting you roll back to an earlier saved state if an edit goes wrong. If your page has this option, it's usually under a history/clock icon near the publish button.
• Before making a big structural change (rearranging entire sections, swapping a template), it's worth duplicating the page first as a backup if version history isn't available — cloning a page is quick and gives you an easy way back.

#What done looks like

A page is ready to publish when:

• The section/row/column structure is clean — no empty rows or orphaned columns left over from earlier edits.
• Spacing is consistent between similar sections (don't let one section crowd its neighbor while another has huge gaps).
• You've checked and adjusted the mobile view separately from desktop.
• Any timed or conditional elements (popups, delayed offers) have been tested by reloading the page and watching them trigger correctly.

#Related articles

• Funnels vs. websites: which to use and how they work
• Build a website
• Pop-ups, countdown timers, and forms on pages
• Page settings and SEO meta

#Frequently asked questions

#Why did the builder create an extra section I didn't ask for?

The auto-hierarchical layout creates sections, rows, and columns automatically based on where you drop an element. If you drop something in empty space rather than into an existing row, it'll wrap it in a new section by default. Drag it into an existing row/column instead if you wanted to add to what's already there.

#What's the difference between margin and padding?

Margin is the space outside a block, controlling distance from its neighbors. Padding is the space inside a block, between its content and its own edge. If two sections feel too close together, adjust margin; if the content inside one section feels cramped against its background, adjust padding.

#Can I copy a section from one page to another?

Most builders support copying a section (or saving it as a reusable/global section) and pasting or reusing it on another page, which is much faster than rebuilding it from scratch.