Pages (Website Builder)

Your e-commerce store needs more than just product listings. It needs a voice. Whether it’s an “About Us” story, a “Privacy Policy,” or a high-converting landing page for your Black Friday sale, the Pages module lets you build it from scratch—no coding degree required.

Sevenledger features a powerful drag-and-drop page builder that gives you pixel-perfect control over your website’s content.

Managing Your Pages

To access your site content, navigate to the Pages dashboard.

Here you can see a bird’s-eye view of all your static content. The list displays the Title, the URL Slug (e.g., /about-us), and the current Status (Draft vs. Published).

Creating a New Page

Click the Add Pages button in the top right corner.
Your new page will initially appear as a DRAFT. This ensures customers won’t see your work-in-progress until you are ready.

The Page Editor (Canvas)

Once you open a page, you enter the Visual Editor. This is a “What You See Is What You Get” (WYSIWYG) interface.

The Canvas: The large white area in the center is your workspace. “Drag and drop elements here to customize the page”.
Device Toggle: Use the dropdown in the top left (e.g., Device Desktop) to preview how your page looks on tablets and mobile phones while you build.
Toolbar: The top bar provides quick tools to Undo, Redo, Preview, and Save your progress.

Building Your Layout (Blocks)

The sidebar on the right is your toolkit. Click the Blocks Icon (four squares) to reveal the components you can drag onto your canvas.

1. Structure (Layout)

Always start with structure. The builder uses a grid system to keep things aligned.

Section: The base container for a distinct area of your page.
Container: Keeps your content centered and bounded.
Columns: Use Row, 2 Columns, or 3 Columns to create side-by-side layouts (e.g., text on the left, image on the right).

2. Content (Basic)

Once your structure is in place, drag in the actual content.

Text: Headings and paragraphs.
Image: Product photos or banners.
Link & Button: Call-to-action buttons (e.g., “Shop Now”).

Styling & Customization

Want to change the font size, add a background color, or add some breathing room (padding)?

Click on any element in your canvas, then click the Paintbrush Icon in the top right sidebar to open the Style Manager.

General: Control the Display settings (block vs flex) and Float alignment.
Dimension: Set precise Width, Height, Margins, and Padding.
Typography: Change font families, sizes, weights, and text alignment.
Decorations: Add background colors, borders, or rounded corners.

Sevenledger Tip: Use the Classes field at the top of the Style Manager to apply the same style to multiple elements. Create a “primary-button” class once, and re-use it everywhere for consistent branding.

Publishing

When your masterpiece is ready:

Click Save in the top toolbar.
Return to the dashboard and ensure the status is flipped to PUBLISHED. Your page is now live and accessible via its Slug.