Page Builder Management

---

Part 1: Accessing the Page Builder

1.1 Page Builder Page

Go to the Page Builder section from the navigation menu of the Lokzon dashboard.

From this page, you can view and manage all the web pages you have created.

At the top of the page, you will see:

• A Search Pages field for finding pages.
• A Create Page button for creating a new page.
• A list of previously created pages.

To create a new page, click the "Create Page" button in the top-right corner.

---

Part 2: Creating a New Page

2.1 Create Page Dialog

When you click the Create Page button, a dialog will open.

You will need to provide three pieces of information:

• Title: The page name (e.g., "Summer Collection", "About Us", "Eid Campaign").
• Slug: The final part of the page URL — use lowercase letters, hyphens between words, no spaces. Example: summer-collection.
• Page Type: Choose Landing Page or General Page.

2.2 Page Title

Enter the page name in the Title field.

This name will appear in the Page Builder and, when needed, on the storefront.

2.3 Page Slug

The slug is the final part of the page URL.

Example:

• Page Title: Summer Collection
• Slug: summer-collection
• The page URL may look like: your-store.lokzon.com/summer-collection

When writing the slug:

• Use lowercase English letters.
• Use hyphens between words.
• Do not use spaces.
• Use a simple and short name.

Both the Title and Slug are required. You can change them later from Page Details.

2.4 Selecting the Page Type

Two Page Types are available:

Landing Page: A page created for a specific promotion, offer, product, or campaign.

Examples:

• Summer Collection
• Eid Sale
• New Product Launch
• Special Discount Campaign

General Page: A page containing general information about the store.

Examples:

• About Us
• Contact
• Delivery Policy
• Return Policy
• Terms and Conditions

2.5 Completing Page Creation

After entering all the information, click the "Create" button.

If you do not want to create the page, click "Cancel" or the X icon at the top.

After clicking Create, the Page Builder Editor will open.

---

Part 3: Introduction to the Page Builder Editor

The Page Builder Editor is divided into several main sections:

• Page Details: Title, slug, and URL path.
• Navigation: Show in Navbar, Show in Footer, label, section, and order settings.
• Status, Tools & Preview: Save status, Undo/Redo controls, and device preview buttons.
• Add Blocks: The left panel listing all available block types.
• Page Canvas: The main area in the centre where blocks are arranged.
• Block Configuration Panel: The right panel showing settings for the selected block.
• Storefront Preview: A button to view the page as a customer.

---

Part 4: Page Details

4.1 Changing the Page Name and URL

The Page Details section appears in the top-left area of the Editor.

It shows:

• Current page Title.
• Page Slug.
• Current URL Path (e.g., /summer-collection).

To change the Title or Slug, enter the new information in the related field.

Changes are saved automatically.

4.2 Back to Pages

Click the "Back to Pages" button to return from the Editor to the Page Builder list.

Before leaving, check the Saved status at the top to make sure your changes have been saved.

---

Part 5: Navigation Setup

From the Navigation section, you can decide whether the page will appear in the store's Navbar or Footer.

5.1 Show in Navbar

Turn on the "Show in Navbar" toggle to display the page in the store's main navigation menu.

If the toggle is turned off, the page will not appear in the Navbar even if it is published. Customers can still visit the page using its direct URL.

5.2 Show in Footer

Turn on the "Show in Footer" toggle to display the page in the store's Footer Menu.

5.3 Navigation Label

Enter the name you want to display in the Navbar or Footer in the Label field.

Example:

• Main Page Title: Summer Collection 2026
• Navigation Label: Summer

If you do not enter a Label, the system may use the page Title.

5.4 Footer Section

Select the Footer section where the page will appear using the Footer Section option.

If you select Auto (Infer), the system will choose a suitable Footer section based on the page information.

5.5 Nav Order

Use the Nav Order field to set the order in which the page will appear in the Navbar.

Pages with lower numbers will appear first.

5.6 Footer Order

Use Footer Order to set the page's position in the Footer Menu. Pages with lower numbers will appear first.

---

Part 6: Adding Blocks to the Page

The Add Blocks panel appears on the left side of the Page Builder.

The blocks will appear on the storefront in the same order as they appear on the Page Canvas.

Available blocks include:

• Hero Banner
• Product Info
• Features
• Image Gallery
• Testimonials
• Call to Action
• Text / Rich Text
• Spacer

To add a block, click its name in the left panel. The block is added to the bottom of the Page Canvas.

---

Part 7: Using the Blocks

7.1 Hero Banner

Use this block to create a large banner or main introduction section at the top of the page.

You can usually add:

• Main title
• Short description
• Background image
• Button Text
• Button Link
• Content alignment

Example:

• Title: Summer Collection 2026
• Description: Special clothing for the new season is now available.
• Button: Shop Now

7.2 Product Info

Use this block to display a specific product on the page.

After adding the block, select the product from the Configuration Panel on the right.

It may usually show:

• Product image
• Product name
• Price
• Short description
• Buy Now or View Product button

7.3 Features

Use the Features block to display the special benefits of a product, service, or store.

Examples:

• Fast delivery
• Secure payment
• Easy returns
• Customer support

You can add a Title, Description, and Icon or Image for each Feature.

7.4 Image Gallery

Use this block to display multiple images in a grid or gallery.

It is useful for:

• Product collections
• Fashion lookbooks
• Store images
• Campaign photos
• Photos of customers using products

7.5 Testimonials

Use the Testimonials block to display customer feedback or reviews.

Each Testimonial may include:

• Customer name
• Photo
• Rating
• Comment
• Position or identity

You can add multiple Testimonials blocks if needed.

7.6 Call to Action

Use a Call to Action (CTA) block to encourage customers to take a specific action.

Examples:

• Shop Now
• View Collection
• Contact Us
• Order Today
• Sign Up

A CTA block usually includes:

• Title
• Short message
• Button Label
• Button Link
• Background settings

7.7 Text / Rich Text

Use this block to add long text, policies, introductions, or detailed information.

Using the Rich Text Editor, you can usually:

• Add headings
• Write paragraphs
• Use bold and italic text
• Create lists
• Add links
• Change text alignment

7.8 Spacer

Use a Spacer to create empty space between two blocks.

When you select the Spacer block, the Spacer Height (px) field will appear in the Configuration Panel on the right.

Example:

32

This means the block height will be 32 pixels. Increase the number for more space and reduce it for less space.

---

Part 8: Managing Blocks on the Page Canvas

The Page Canvas is the main section in the middle where all page blocks are displayed.

If a new page does not contain any blocks, the following message will appear:

"Your page is empty"

After adding blocks from the left panel, they will appear as a list on the Canvas.

8.1 Selecting a Block

Click a block to select it. The settings for the selected block will appear in the Configuration Panel on the right.

8.2 Moving a Block Up

Click the upward arrow icon on the right side of the block to move it one position higher.

8.3 Moving a Block Down

Click the downward arrow icon to move the block one position lower.

8.4 Duplicating a Block

Click the copy or Duplicate icon to create a copy of the selected block. This is useful when you want to use the same design or content structure more than once.

8.5 Deleting a Block

Click the trash icon to delete the block. Before deleting it, make sure you no longer need the block's content.

---

Part 9: Configuring a Block

When you select a block, the Configure panel will appear on the right side of the Editor.

The settings change depending on the selected block:

If no block is selected, a message similar to the following will appear on the right:

"Select a block from the canvas to edit its settings."

---

Part 10: Auto Save and Draft

Changes made in the Page Builder may be saved automatically.

The Status section at the top may show:

• Saved: The latest changes have been saved.
• Draft: The page has not been published yet.

After making changes, wait until the Saved status appears.

When the page is in Draft status, it will remain available in the Page Builder, but regular customers will not be able to see it on the storefront.

---

Part 11: Undo and Redo

The Editor's History section contains two controls:

• Undo (left arrow): Reverse the latest change.
• Redo (right arrow): Apply an undone change again.

A badge in the History section may show how many actions are currently saved.

---

Part 12: Previewing on Different Devices

From the Preview Size section, you can check how the page will look on different screen sizes.

Available views:

• Desktop: Large computer screen layout.
• Tablet: Canvas size changes to match a tablet screen.
• Mobile: Check how the page looks on a mobile phone.

Before publishing, check the following in all three views:

• Whether the text is displayed properly
• Whether images are being cut off
• Whether buttons are easy to use
• Whether there is enough space between blocks
• Whether any content is moving outside the page

---

Part 13: Storefront Preview

Before publishing the page, click the "Preview" button to see the complete storefront view.

In Preview Mode, you can view the page as a regular customer.

Check the following:

• Page Title
• Hero Banner
• Images
• Product information
• CTA Button
• Navbar and Footer links
• Mobile responsiveness
• Whether all links open the correct pages

Viewing the Preview does not mean the page has been published.

---

Part 14: Publishing the Page

After checking the page content, design, and preview, click the "Publish" button.

After publishing:

• The page will no longer remain in Draft status.
• The page will become live on the storefront.
• The page can be opened using the selected Slug.
• It will appear in the Navbar if Show in Navbar is enabled.
• It will appear in the Footer if Show in Footer is enabled.

Before publishing the page, make sure that:

• The Title and Slug are correct.
• All required blocks have been added.
• The images are loading correctly.
• The Button Links are working.
• Desktop, Tablet, and Mobile Previews have been checked.
• The Navigation Order is correct.
• The Footer Section is set correctly.

---

Part 15: Updating a Published Page

You can change a published page later.

Open the page from the Page Builder list and make the required changes:

• Change the Title.
• Change the Slug.
• Add new blocks.
• Delete old blocks.
• Change the order of the blocks.
• Change images and text.
• Update Navbar or Footer settings.

After the changes are automatically saved, publish the page again if needed.

Important: If you change the Slug of a published page, the old URL may no longer work. Update all previously shared links with the new URL.

---

Part 16: Example — Creating a Landing Page

A page for a Summer Collection can be created in the following order:

---

Part 17: Quick Reference

Steps for Creating a Page

Block Controls

Available Blocks

---

End of Guide

Using Lokzon's Page Builder, you can create professional Landing Pages and General Pages for your store without any coding.

Add different types of Content Blocks, arrange them in the correct order, and check the Desktop, Tablet, and Mobile Previews before publishing the page. This will help customers use your page clearly and easily on all types of devices.