How to use the Drag & Drop Page Builder

In this article you will find detailed information about the tools and the features you can use in creating new pages for your store. The Drag & Drop Page Builder allows you to create a fully customized design for pages and then use those pages as landing pages your business needs, as Home page for your store, or as a Thank You page visualized after successful order. Find all details below.

Log in to your control panel and enter section My Store -> Static pages -> Add new page and choose Drag & Drop Page Builder.

Your page will contain rows and widgets which you could add, combine, edit, copy and fully customize. Before adding widgets, you need to choose the layout of the rows.

Adding new row

  1. Click on the green Add new row button to choose the layout of the row.
  2. Choose the structure of the row you would like to add by clicking one of the tables. On this step you will set the amount and the structure of the columns this row will be created from.

Each row you add could be contained by columns with different sizes. After you choose, for example, that you’d like to have 2 columns, first of which filling 1/6 part of the row and the second filling the rest 5/6 parts of the row, you could start adding widgets to those columns. Every widget will adopt the space of the column you are adding it in.

Editing rows

CloudCart Team endeavours to provide you unlimited opportunities by developing tools and features which you can use with ease! Here’s the options you can apply to each row.

  1. Row settings
    This tool allows you to choose background type for the row. The background could be an image or a color you can choose by adding its code or selecting it with the Color picker. You can set the paddings and the margins for the row and this would change the distance between the rows.
  2. Copy row

    You can copy each row (with all the widgets in it if already added some) without adding a new one with the same layout. This allows to work quicker and easily accomplish the best design of the page you are creating.
  3. Reorder row
    Use this button to move each row using drag & drop.
  4. Remove row
    Use the button to delete the row.

Adding widgets

The image above shows a row with layout contained by two columns filling 1/6 and 5/6 parts of the row. You can add as many widgets you need in each of the column. You can currently add 8 types of widgets and use the tools in each of them to customize everything.

  1. Add Title
    Use the drop-down menu to choose the type of the Heading and fill the name of the Title in the empty field
  2. Add Text
    Use the empty field to add text and customize it with the text editor options provided
  3. Product showcases
    You can create product showcase and then customize it by setting its title, use the tools to order the products and set if the showcase will contain new, sale, featured products. Filter the products for the showcase and specify the products count and the products per row the way you would like to be visualized in the showcase.
  4. Category or Brand showcases
    Use this widget to add a showcase with categories or brands and set how many items per row you want to be visualized in this showcase.
  5. Show Images
    Add this widget if you want to upload images to your page. You can set the amount of images, the images to be shown per row and you can set if the images would lead to a section of your store or to other link.
  6. Add Video
    Choose this widget if you want to add a video on your page. You can simply select the video type from the drop-down menu and put the link or the embed code in the field below
  7. Add code snippets
    Add a simple code to your page. You can add Javascript or HTML snippets to display it on your page.
  8. Add Separator
    Add line, dotted or dashed separator to separate different sections and rows of your page. You can set colors, paddings and width.

Editing Widgets

You can edit, copy, reorder and remove each of the added widgets on your page.

  1. Edit the widget
    With just a click you can change each setting of the widget you’ve added.
  2. Copy widget
    Use this quick button to copy an existing widget with all its already set options
  3. Reorder widget
    Use this option to reorder each widget with drag & drop and put locate it in another column or row
  4. Remove widget
    Use the button to quickly delete each widget

Default sections on the page

On the main menu at the Drag & Drop Page Builder, you will find activated by default the Header and the Footer of your store. You can manage those sections from My Store -> Navigation at your control panel. If you use this page as Home page it’s better to leave those sections activated. If you’d like to use a page as a landing page, you could deactivate the Header and the Footer in order to avoid distraction from the information you want to provide to your customers with this page.

Page Settings

After you have the page ready, use the menu in the right side of the page builder in order to set the page some main settings.

  1. Name of the page – you can type a name of the page which would be for your internal use.
  2. Page link – you can type a name of the page link here. The link will alsways have the components
  3. SEO title – type an unique SEO title for you page
  4. SEO description – fill the SEO description of the page
  5. Page history changes – you can use this tool like an undo button going back to different states of the page
  6. Preview – use the button to check the current vision of the page. You should keep in mind that the link from the preview will not be available for customers or users who are not logged in to your control panel.
  7. Publish changes – this button will activate you page with the current vision

Assign the page

Use the Back to pages button in order to go back to your control panel and the listing with all the pages.

  1. Name – in this column you can see the name of the pages and a button to their link
  2. Assigned to – use the drop-down menu to assign the page as a:
    Static page – you can use this assignment to create a link to this page, for example, from the main navigation menu
    Home page – use this assignment if you want to set this page as a home page for your store
    Thank you page – choose this assignment if you want this page to be seen from your customer as a Thank you page after a successful placed order
  3. Active – use the button to quickly activate and deactivate each of the pages in your store

Was this article helpful?

Related Articles