Workshop Replays Getting StartedUnderstanding Projects

Understanding Projects

In this tutorial you will learn about all of the different elements in the cover page as well as the inner pages of a project. Most of these can be edited, however only a few can be re-sized.

1. Elements of the Cover Page

The cover page consists of the 'Div Container', which when activated is the entire image in the background. It also has a small gray square box in the upper right hand corner that appears when the 'Div Container' is activated. You click on this to open the media manager and change the background image, color or pattern.

Here is the tutorial on 'How to Change the Cover Page' - click here to view it now.

IMPORTANT: Please do not re-size the cover page.

1. Elements of the Cover Page

The cover page also includes a 'Heading' element. This is where you will see the title of your project populated after adding your URL. The text is fully customizable. You can change the text by activating the element and then double clicking inside to open the floating toolbar. Here you can edit the font family, color, size, and so on.

Behind the heading element where you see the box is yet another element. This is called a 'Container'. By clicking anywhere in the box you will activate it. Once activated you can change the color, opacity, add a pattern, or even add another image.

If you delete this container it will also delete the heading as the heading element resides inside of the container. This container also allows you to move and re-size your heading.

There is also a second 'Div Container' about half way down the page. You can easily find this by clicking anywhere in the lower half of the cover page. This can be deleted if you like, but can also work as a lower half element that you can add color, styles, or again another image to.

Next we have the footer 'Container'. Here you can add color, opacity, a pattern, and again another image. To activate the element simply click on it making sure that it is activated and not the text element. You will know that it is activated when you see the word 'Container' in the upper left corner.

IMPORTANT: You should NOT re-size the footer element. If you do this it will offset the rest of the cover and push the other elements upward.

Lastly we have the heading element. This is where you will add your footer text. Click on the element to activate it and then double click once inside to open the text toolbar.

2. Elements of a Page

The uppermost element is a 'Container'. Click on it anywhere inside of the header area to activate it. You will know that it is activated when you see the word 'Container' in the upper left hand corner. You will also see a small gray box in the upper right hand corner. Do not confuse the two elements even though they are both visible. Clicking on the small gray square will activate the entire page not just the container.

Once you have activated the top container you can change the color, opacity, add a pattern or image.

IMPORTANT: You should NOT re-size or delete this container.

2. Elements of a Page

Next you have the heading element. This is where you have your text. Click on the text to activate the heading container. You will know that the container is activated when you see the word 'Heading' in the upper left corner. Double click once activated to open the toolbar. If the toolbar does not open you can also use the pencil icon. Continue to make your edits.

In order of elements the next one you will see is the container for the page (below the header and above the footer). You can add styles to the background of any page as well. However, in most cases you will choose to have this the same color throughout the project. You can also click on any of the paragraph elements within the page and edit those.

The footer also has a 'Container' element. Click on it to activate it. Again, here you can change the background color, add patters, images, and so on.

IMPORTANT: You should NOT re-size or delete this container.

Lastly, you have the text inside of the footer. This text is usually linked to the URL of the article. Most likely you will see the word 'Link' when activating the element. However, in some cases you may also see the word 'Locked'. If you want to make changes to the text or link activate the element, double click, or click on the pencil icon to open the tool bar and then proceed with editing.