Avada WordPress Theme

I have spent approximately 16 hours working within the WordPress theme at this point. I have followed the documentation index.html that came with the download from ThemeForest.

Downloading the Demo Data XML File
I initially was not sure that I wanted to import the demo data. I am glad that I did. One of the things that I appreciate about the Avada theme is that the developers took the time to make screencasts of each step. The videos are posted on YouTube. Their written directions are very clear and include links to the associated YouTube video. Despite the fact that there are clear written directions, have listened to most of the screencasts. This is a great example in relation to good teaching in general. They give their "students" multiple ways to learn.

The video helped me quickly set up the menu, home page, post page, and widgets. The XML import does include all of the menu items and is really a sales page for the Avada them. It will not take too long to modify my initial content and pare away all of the demo words, links, and images.

The First New Page

I set up the basic layout of the home page in my first attempt to learn how to apply the theme. The index.html file has great documentation. By signing on to the Theme Fusion website I was able to access more video tutorials. The tutorial quickly led me to understand how to select among different types of pages. For the home page I wanted to use the full screen. The Page Attributes on the right side of the screen gave me ready access to Full Width and many more other options that I will explore as I build more pages.

The first problem I encountered was figuring out where the shortcodes were located. Shortcodes are macros that generate snips of HTML code that enable the editor to create pages within the Avada theme.

The video tutorial explains that once you edit the page and select the visual editor a series of short codes appear. I did not see the short codes so I went over to the Theme Fusion forum. I did a search for short code and quickly found a thread with a discussion revolving around my exact problem. It had been posted just a half day earlier. One of the replies said to look for the Kitchen Sink. 

Clicking the Kitchen Sink icon still did not lead me to what I was hoping to find, but as I hovered my mouse over the new set of icons, I noticed the ThemeFusion Shortcodes drop down list.

At this point, everything became easier.

The First New Page
In all honesty I am very glad that I understand the basics of HTML. When you choose a shortcode it dumps a bunch of HTML into the editor. When I begin to teach HTML to my middle school students I explain why they might find the knowledge useful in the future. Here in my own life is a clear example.

The tutorial demonstrates how to add a tagline. I used the school's philosophy as the tagline. The shortcode looks like this:

[tagline_box backgroundcolor="" shadow="no" border="1px" bordercolor="" highlightposition="left"  title="Saint Michael School Philosophy" description="Saint Michael School exists to promote the spiritual, academic and personal formation of the whole child. As witnesses to the teachings of Roman Catholic doctrine, the students are challenged to achieve excellence in their relationship with God and in all they do. The challenge of the Saint Michael student is to live these teachings beyond our doors into the local and world community. Faculty, parents, and students are the cornerstone upon which we build our faith-based, academic environment. The deepened awareness of the presence of Jesus Christ in our lives is fundamental to life at Saint Michael School. "][/tagline_box]

while the actual output looks like this:

The words I highlighted in light purple above amount to HTML codes with options embedded. It was easy to understand how the tags equated to the final product on the screen. The default shortcode includes a link and a button. I did not want those so I removed them from the shortcode. If you care to compare the original shortcode with my edited version up above, you can see how much I removed or replaced:

[tagline_box backgroundcolor="" shadow="no" border="1px" bordercolor="" highlightposition="right, left, top or bottom" link="http://themeforest.net/user/ThemeFusion" linktarget="" button="Purchase Now" title="Avada is incredibly responsive, with a refreshingly clean design" description="And it has some awesome features, premium sliders, unlimited colors, advanced theme options and so much more!"][/tagline_box]

With a tiny bit of playing I realized the highlightposition was the think line on the tagline box.

We will be calling our "blog posts" School News. The tutorial gave very simple directions for using the Recent Posts and Title shortcodes. With these features underway the website began to take shape.

I learned that there would be more work to actual put the photo slider on the screen so I saved that for another day.