This tutorial will help take you through the creation of a front page like the live demo site for Emphasize has. This one will be broken down into tutorial sections.
Setup Emphasize Pro
Create an Icon Box
Creating an icon box in Emphasize is based on using HTML snippets, but we will also use third party plugins. The bad news is that adding icons into content and widgets is not really that easy when it comes to WordPress, so we still have some work to do.
Create an Image Box
This theme comes with two image box styles, both of which use HTML snippets to get you started with the structure of either one. In your original downloaded theme package is a folder named “Snippets”. Inside this you will find a variety of text files, but this tutorial is for the image box. The two styles we have to work with look like this:
Create a Contact page like the demo site
This tutorial will help you get a contact page just like the demo website. For the actual form part, I will base this tutorial on the Jetpack method that I used.
Create The Team page like the demo
This will require some careful setup because you will need to use the “Text” tab of the content editor when you do this page. The reason is because you need to be careful not to delete any of the HTML code that this layout uses. The good news is that once you create your page, you won’t have to worry about it later. I’m also going to show you how you can create this page with two methods, one using just a page and the other is using a page, but using text widgets to create each team member’s box of info.
Create a Call to Action like the demo site
If you want to have a Call to Action style like the online Demo, this tutorial will show you how, including adding the animated button.
Hide the banner shadow
With Emphasize, you may notice there is a shadow graphic just below the full banner and navigation area, which shows up on every page.
Add animation to your page elements
An ongoing trend with many themes nowadays is to incorporate animation to a website, such as page elements that bounce, fly in or out, drop in, etc. Emphasize Pro offers a 50 animation resource that you can use for many things. To give you an idea of what animation can do to an element, check out these few examples:
Introduction to HTML Snippets
I’m kind of breaking my rules here by offering HTML snippets for the Emphasize Pro theme. However, I will have a blog article about this shortly as to why, but to also explain the solution that is best suited for handling all those cool little content elements you see in themes, things like icon boxes, tabs, accordions, etc.
Create a Portfolio using Jetpack
This tutorial shows how you can use the WordPress Jetpack portfolio options in our Emphasize Pro theme to create sleek looking portfolio items on a page. Our theme does not have a built-in portfolio post type because if you were to change themes, you would lose it. However, if you use or plan to use Jetpack, there is a Custom Content Type module in it that lets you activate and create a portfolio. You can see a sample of the custom styling Emphasize offers you, should you use the portfolio feature.