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.
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.
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:
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.
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.
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.
With Emphasize, you may notice there is a shadow graphic just below the full banner and navigation area, which shows up on every page.
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:
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.
Emphasize Pro does not have a built-in portfolio 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.