Content Builder

Overview
The Content Builder allows you to create and edit your website's content without writing traditional HTML code. The Content Builder uses a grid system of rows and columns. You can define the options for the grid, and then drag and drop widgets into the grid. These widgets range from simple text editors, to image slideshows, to Products from your catalog. 

Getting Started

To enable the CMS feature, contact your sales representative or call 1-800-376-9174.

Launching the Content Builder

The Content Builder is launched from the Edit Post or Edit Page screen. Login to the Administrative side of your database, open the CMS Menu, and choose either Posts or Pages.


Select the Page or Post that you would like to edit, or click to add a new Page or Post.


Once the Page or Post has been saved for the first time, you can click the "Content Builder" button to launch the tool.

Adding a Row

Upon launch of the Content Builder, you will be prompted to define the Alignment for your rows. If you want your columns to be aligned left to right (default normal layout flow), then choose align left. If you want your columns to flow from right to left, then choose align right. And to align columns in the center of the screen they would choose align center. Make your selections, and click the "OK" button.


You will see the Content Builder screen. Hovering over your row will display several row controls. Note, if you don't see these controls, click to Show Visual Aids. You can:

 Move Row

move your row's position relative to other rows

 Clone Row

clone your row

 Edit Options

edit the alignment options

 Delete Row

delete the row

 

add a row above his row 

 

add a row below this row

Adding a Column
Click the Add Column button contained inside your row. 

You will be presented with a screen to define size, mobile size, and alignment of the column.

Tip: The Mobile Size sets the width on screens smaller than 768px (tables portait and smaller) if you wanted a 2 column layout on mobile you would set it to 50%.

Now, there will be a column within your row. The same controls that are available for rows are also available for columns.

Adding a Content Block

Now that you have a row and a column, you can add a Content Block by clicking the "Add Content Block" button. 


You will be presented with a screen to select which type of Content Block you would like to add. After you have added one, click the Save button. Below are descriptions for each of the type of Content Blocks that you can add.




Basic Content

 Text Editor

Add a block of editable text

 Image

Insert a previously uploaded image, or link to an externally hosted image. If the reader clicks on the image, then they will be sent to that URL's destination.

 Slideshow

Bundle multiple images into a slideshow

 Icon

Select from a bank of icons, and define the icon's size, shape, and color. Also, add a link URL and choose whether to open that page in the a new browser tab.

 Button

Add a button. Input the text for on the button, define a URL, choose which button color scheme to use or define a new color scheme, choose to round the button's corners, and define the button's size.

 Separator

Add a solid line to separate content.

 Video Embed

Input a video embed code to play a video from another site on your site.

Advanced Content

 Products

Add a list of Products from your catalog, and define how it displays.

 Posts
Create a Post feed, define what kind of Posts will be part of the feed, and define the sort order and height of the feed.

 Login

Add a login link, and define it's height.

 Code

Add HTML, CSS, or Javascript code. To add CSS, wrap it in a <style></style> HTML tag. To add Javascript, wrap it in a <script></script> HTML tag.

 iFrame Embed

Add pages from other sites by embedding an outside URL, and define the height of the iFrame window that the content will be displayed in.