Shogun’s drag/drop page builder lets anyone create sophisticated web pages without writing any code. Once Shogun has been integrated into your website, pages in the page builder will look exactly the same as they will on your site.

Using the drag and drop functionality

When you first open the page builder, you should see your site layout with no content appear:

On the right hand side of the page builder, there is a library of elements that you can use to build pages.

Dragging elements into the page will highlight the area that the element will occupy when you release the mouse.

Many elements can be changed once they are on the page. Hovering over text and images reveals editable sections.

Styling elements on a page

All elements can have advanced styling properties applied to them in the right hand sidebar.

Moving elements on a page

You can move an existing element around by dragging its move icon.

Deleting elements on a page

You can delete elements by clicking on the trashcan icon that appears next to the element name on the right hand sidebar.

Saving changes

When you are happy with your changes, Save the page. Pages must have unique names and paths. You will see an error message if you try and save a page with a path that has already been used.

Previewing Pages

The Preview button opens a new tab showing a preview of the page in your own website. This is a useful way of testing out the design of pages without the page builder controls being in your way.

Publishing Pages

When you are happy with your pages, it’s time to publish them. Publishing pages will make them live on your website. After you hit the Publish button, a loading indicator will display while the changes are made.

It can take up to 10 seconds for the page to be live on your website after this loader disappears.

Un-publishing pages

When a page is published, you can unpublish it (remove it from your website) by hitting the Unpublish button. A loading indicator will display while the changes are made. It can take up to 10 seconds for the page to be removed from your website after this loader disappears.

Duplicating pages

The Duplicate button lets you copy the contents of a page into a new, unsaved page. This page can then be modified independently of the original page. This handy feature can save you a lot of time if you are creating multiple similar pages.

Page Versions

The Versions button opens a dialog showing a history of all the times the page was saved.

You can go back to any previous version by clicking “Revert to this version”.

Did this answer your question?