What is the On-Site Content Builder?

Here at Art Storefronts we take pride in the tools we provide to artists to give them the most flexibility in setting up their sites and putting material onto their pages.

The On-Site Content Builder is a new way to create unique pages in real-time. Instead of going back and forth between the WYSIWYG editor and your live site to view changes, you’ll now be able to edit all the content on a page dynamically. This tool is only available on standard and blog pages (for now), and has a number of pre-loaded templates that you can use and edit to create one-of-a-kind About Me, Contact, FAQ pages, and blog posts! In this article, we’ll go over the basic functionality of activating and creating pages with this exciting new tool.

How to enable the Content Builder on a page

1. Unlike the standard WYSIWYG editor, this is a feature you will manually enable on each page you wish to use it on. To do so, open your Site Manager and go to a Standard Page.
   
2. Click on the Content tab, and you’ll see a new field at the top of the page named Type of Content, which is sitting above the Number of Columns field.
   
3. When you click on this, you can switch between the Standard Editor and the new Content Builder.
   
   
   
   Please Note: After you have changed the editor you must click on the Save button in order to store your changes! If you don't click Save, the editor will not work correctly!
4. Once you have selected the Content Builder and clicked on Save to tell the site to use the Builder for this page in future, you can click on the link below the field, which loads the Builder UI for this page. (You can also access this by clicking on the Preview Site button at the bottom of the Site Manager window while you are on this page)
   
5. Any work you do on this page will be made in the Builder, and not in the Site Manager - in some ways this is similar to the Theme Editor (which is accessed by the Edit Design button on your live site), but it is both more powerful and also much easier to use.
   

Adding content to a page

1. Once you have it enabled for your page, adding something is as easy as clicking on the Click to add content section of an empty section, or you can click on the +ADD button on the right side of the page.
   
2. This opens a new dialogue window where you can select specific page elements that can be added to the empty builder segment. These are great if you just want to add a simple element to a page.
   
3. When you click on the More link at the bottom of the window, this will open a new overlay containing different templates which can be added to the page. This is a great place to get more complex elements that you can add to your page.
   
4. Adding a component to the page is as simple as clicking on the preview image.
   
5. And it will be loaded into the editor on the page. These will contain placeholder text and images, which you are free to modify once they are on your page.
   
6. And you can add additional elements by clicking on the +ADD button on the right, and this will allow you to select a new piece to be added.
   
7. Just remember, in the same way that you have to save your page after making changes in the Site Manager and Theme Editors, you will also need to Save your page after making changes to it. If you don’t do this, you will lose any changes made since the last time it was saved if you leave this page.
   

Removing content from a page

1. This is quite straightforward; you can open your page in the Content Builder and click on an element you wish to remove. For this example it’s the right-hand block of Lorem Ipsum text. As you can see, there is a small option block which has appeared just above it.
   
2. There’s an X at the right end of the pop-up which you can click on to tell the site to delete this element, bringing up a dialogue window asking if you’re sure.
   
3. After clicking on DELETE you will be returned to the page with the element removed from the page.
   

Removing all content from a page

You may have noticed the buttons on the right side of the screen when you were using the Builder. The Show HTML button gives you access to the code which has been generated by the Builder to make up the content on the page, and it also gives you an easy way to clear everything on a page if you want to delete it all and start over.

1. To do this, first click on the SHOW HTML button on the page you wish to clear.
   
2. This brings up a window showing all of the code used to display the Builder content on the page.
   
3. Select all of the code in this window.
   
4. Now delete the highlighted code and click on the OK button.
   
5. And this will return you to a clean page, ready to start over.
   

Copying content to a new page

If you would like to copy something you’ve created on your page onto another page, good news! With the Builder it’s now possible to duplicate page content easily.

Using the HTML button on the side of your page again, you can copy the code from your old page, open another page into the Builder, and paste the code into this page.

1. In practice it works like this. First, open the page with the content you wish to duplicate in the Builder window, and click on the SHOW HTML button.
   
2. Now highlight and copy all of the code in this window.
   
3. In the Site Manager open the page where you wish to duplicate this.
   
4. Open the Builder view of the page, and click on the SHOW HTML button.
   
5. Paste the code from the original page into this window, and click on OK.
   
6. And you should see the content from the original page showing up on the new page.
   

Backing up content

Much like copying the layout to a page you’re happy with, it’s also now possible to make a backup on your computer of the code that generates the page. This means you can keep a copy on your computer of a layout you’re happy with and would like to reuse later.

1. Doing this is much like the first half of the process used to copy Builder content to a new page. You will open the SHOW HTML window, and copy the code as it is displayed.
   
2. Now paste this into a program on your computer such as Notepad on Windows or TextEdit on a Mac, which can then be saved to your computer.

How to Embed a Video Using the On-Site Content Builder