Content Options

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.

c1

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.

c2

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.

c3

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 %

c5

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

c6

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

c7

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

c8

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

youtube1

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.

c9

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.

c10

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

c11

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

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration is now open: New Member Registration

Membership is now open: Existing Member Login

Visit the: Forum and Feedback

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

Leave a Reply

Connections

Connect with Us
Follow Digital Mobile on Twitter Join Digital Mobile on Facebook
Share

Meet the Author

Articles by Digital Raindrops
Digital Raindrops admin is the author of the posts and this theme, WordPress development is a hobby taking more time than it really should.
Read More

Related Posts