What we have done here is give each page the ability to have up to five rows of content, with up to three columns, we thought that someone might want 15 thumbnails for a photo portfolio, so we have up to 15 content areas on a page.

The logistics of this took a little thinking about, so we can work on one page row at a time, and once we change the page and row we cannot load the previous row back again, this may come in a later release, but lets look at creating the content for ‘Page 1′.

We start with the Page and Row sections, we will create a simple single row to start, we need to tell our plugin where this content belongs, so on the page and row sections we choose ‘Page 1′ and ‘Row 1′.

Notice the Column %, we can have up to three columns but we want all our content in the first column, at 520px, full Template width.

We do not want our content to fit the whole page unless we had a simple white background, so we add a little padding, we can revisit this if we want as long as we have not changed the page and row, we later changed this to 10px Padding All.

To add our content to column 1, which is HTML we have copied from our website editor, we select the page Row Content, we can add a YouTube video which we will do in the next row, we may have to adjust the HTML once we have preview the page in the HTML Preview.

That is Row 1 finished, we would preview and make any adjustments before we move to “Row 2″, for row 2 we are going to have a small YouTube Video and a text box, we visit the Page and Row screen again and set the Row to ‘Row 2‘ notice the 300:220:0 that is because our small YouTube video is 290 * 220, so we give it a 300px container.

Notice the Column %

Before we add our video, as we have two columns lets style the second column, we add a little padding

We will add a margin as we will be adding a border, so we want our container to have a margin.

Next we want a border so we add our border settings as well.

Now we go back to our Row Content page and add our YouTube video ID, we can find this in the YouTube video link.

Notice the YouTube Image, Facebook requires an image for the video, when our visitor clicks the image the video loads, this is the way that Facebook works, the video thumbnail is not very good so we create one our self, this one is 290 * 220

We upload or copy the image to the images folder, then we select it from the image lookup, add in the video ID, and select align and size.

We have two columns in this section so lets add our HTML in Colum 2, we could have a video above or with the text in the same row or column.

That is row two so how does it look, we load the Template Layout, our plugin writes the pages and we preview in HTML?

In the next post we will have a quick look at the Footer