Elegant Themes Tutorial – Customizing the Fusion Theme Home Page, Navigation and Layout
The Fusion Theme by Elegant Themes is a fully-responsive, sleek and modern design. Fusion features vibrant colors and eye catching animations. It is equally suited for design firms, tech companies and all types of start-ups looking for a cutting edge way to promote their products and services. In this UploadWP.com original tutorial we’ll walk you through setting up and customizing the Home page of the Fusion Theme so lets get started…
Customizing the Fusion Theme Home Page
Being a premium WordPress theme, Fusion offers a wealth of easily accessible customization options. Like the Nimble theme, each Elegant Theme is equipped with a handy Theme Options ePanel. Therefore, before completely jumping into this tutorial, we encourage you to visit the “ePanel” and take a look around after installing and activating the Fusion Theme.
To access the Elegant Themes ePanel go to Appearance > Fusion Theme Options.
Click around and explore the many options (this is a good thing to do with any theme when you first install it) to get a basic understanding of what is possible. When you’re done, return to the General Settings. From there you can change the Fusion theme logo, favicon, background image, social URLs and more.
Uploading a Custom Logo, Favicon, and Background Image to the Fusion Theme
Uploading a custom logo, favicon and background image is pretty self explanatory with Fusion. Visit the epanel and under the “General” tab the first three options are “Logo,” “Favicon,” and “Main Background Image.” From there, click the “Upload Image” button and upload your image. Scroll down to the bottom and save your changes as demonstrated in the tutorial video below.
Important Note: To keep everything inline layout wise, we recommend using a logo with dimensions of 175x59px, a favicon of 15x15px and a main background image of 2400x800px. These are the default dimensions provided by the Fusion Theme.
Setting Up the Fusion Theme “Featured Image Slider”
By default, the top section of the Fusion theme Home page is a large image slider. The featured image slider is a great way to promote your products and/or services. Here’s how setup the featured image slider and insert your custom slides.
Step 1: To start, create a slider specific Category for the posts that you wish to appear in the slider. You need to do this to prevent every post that you create going forward from showing in featured image slider. Control over what appears in the slider is very important which is why you’ll want to create a Category that will be used specifically for Posts that you want to feature in the image slider.
To create your Fusion Theme featured image slider category in the WordPress admin go to Posts > Categories and add a new category. Name it what ever you like, but we recommend “Featured” so it’s easy to remember if your taxonomy becomes advanced going forward.
Step 2: Return to the epanel by going to Appearance > Fusion Theme Options and select the “Featured Slider” tab from General Settings.
Step 3: Find the section titled “Featured Posts Category” and select “Featured” from the drop down > Scroll to the bottom and save your changes.
Any posts you assign to the Featured category will now appear in the slider at the top of the Home page. Make sure you assign an image as “Featured Image” in your post to display it on the slider. You may have to re-size your image to make it look good in the slider.
Recommended Sizes / Dimensions for the Fusion theme Featured Image Slider are: 535x519px or 535x471px
Fusion theme Home page “Main Content” Area
The Fusion theme refers to the section immediately below the featured image slider as the “Main Content Area,” and divides it into thirds. Follow the steps below to customize the 3 main content areas.
Step 1: First, create the pages that contain the information you would like to appear in this section.
Step 2: Next, visit the Homepage tab under your epanel and scroll down to “Content Area 1 Page” and select the page you created in the drop down. Repeat the process for “Content Area 2” and “Content Area 3” to finish out the rest of the section. Scroll to the bottom of the epanel and save your changes.
Testimonials is the next section of the Fusion Theme Home page to customize. You’ll notice that this areas is actually split into two separate sections when completed. The left side being “Testimonials” and the right side being “Recent News” which we’ll cover below.
Adding testimonials is a little different than the other content sections because the Fusion Theme adds a new option to your WordPress admin on the left hand sidebar called “Testimonials.” Visit this area and add your testimonials the same way you would add a new WordPress Page or Post. If you add a featured image it will appear in a little circle in the upper left hand corner of each testimonial.
To change the number of testimonials that appear in that section visit your epanel and scroll down to “Number of posts in the Testimonials slide” and make your changes.
Fusion theme “Recent News” Section
The “Recent News” section is pretty self explanatory except for one peculiarity which we’ll cover in a minute. By default, the section displays your three most recent posts. It also displays a thumbnail that is generated based on your featured image for the post. To change the number of posts displayed, visit your epanel and under the “Homepage” tab and scroll down to “Number of Recent Posts displayed on homepage,” make your changes and save them.
Now let’s discuss the peculiarity associated with the “Recent News” section. Under your recent posts, you will see a link to “Read More”. You need to assign a URL to this location. The easiest way to do this is by creating a category, and assigning all posts you want to appear here to that category. Then simply add the category URL to the proper field in your epanel.
Step 1: In your WordPress admin go to Posts > Categories and create a new category. You can name the category what ever you like, but “Recent News” will keep everything uniform.
Step 2: Assign all posts that you want to appear here to the Recent News category (assign all future posts to this category as well).
Step 3: Find the category page. Click on one of the posts from your homepage. At the top of the post you can see the bread crumbs (the list of where you’ve been on the site) the current post is highlighted, and the word before it contains a link to the category page. Click the link and copy/paste the URL into the “Recent News more link URL” section under the Homepage tab of your epanel. Scroll to the bottom and save your changes.
Fusion theme Home page “Logos Section”
The bottom section on the Home page of the Fusion Theme is called the “Logos Section.” A common usage for this section you may have seen online is a “as seen on” section where media clippings or partners are highlighted.
To add images to this section, again visit the Homepage tab in your epanel and scroll to the bottom where you will see 1st-4th logo Image fields. Upload your logo images here and add the URL to link to and an Alt description. Scroll to the bottom and save your changes.
Customizing the Fusion theme Top Navigation Menu
Tailoring your website site layout and navigation can go a long way in helping your visitors find the information they need quickly. The Fusion theme offers very basic customization options for Layout and Navigation in the epanel but they should be enough to achieve your usability and display goals. In the second part of this Fusion theme tutorial “The Basics”, we will show you how to quickly change the page navigation and some basic layout options like drop-down menus, post info, custom thumbnails and comments.
Customizing the Pages and Categories that Display in the Fusion Theme Navigation Menu
By default, the top navigation menu will display all pages and categories, with three drop-down tiers. Fortunately, all of this is changeable with only a few clicks.
To customize the pages that appear in the top navigation menu, visit the pages tab in your epanel at Appearance > Fusion Theme Options > Navigation > Pages.
At the top, you will see all of your published pages with green check marks next to them. To turn off individual pages simply click the green check marks next to each page.
In addition, you can set the criteria for ordering, change the order and set the amount of drop-down levels from this menu.
Note: To add drop-down menus, you need to give your page a “parent” from the page editor in your WordPress admin. Any page with a parent will appear under the parent as a drop-down in the menu.
You can change your settings for categories in the same way, by clicking the “categories” tab from the Navigation page in your epanel.
The “general settings” tab allows you to disable all drop-down menus if you so choose.
Customizing the Fusion Theme Layout Settings
You’ll find your post layout settings by visiting epanel under Appearance > Fusion Theme Options > Layout Settings, and clicking the Single Post Layout tab.
The Fusion theme displays Author, Date, and Categories under the post title in the “post info” section. You can turn any of these off by simply clicking the colored icon in the first section. You can also turn off thumbnails on posts as well as comments on posts, should you so choose.
From the Layout page in your epanel, click the “Single Page Layout” tab. Here you can enable thumbnails on pages and comments on pages. They are both disabled by default.
The “general settings” tab allows you turn off thumbnails on index pages and change what appears in the “post info” section elsewhere (such as the recent news section).
That’s it for setting up and customizing the Home page, Navigation and Layout elements of the Fusion Theme. Next week we’ll show you how to add advertisements and properly configure your site for search engine optimization. As always, please post any questions in the comments below.