HostGator Web Hosting

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…Fusion Theme Tutorial

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.

Fusion theme “TestimonialsCapture” Section

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.

Under the “page exclusion” menu, you can also turn off drop downs and the Home linElegant Themes Tutorial – Customizing Fusion Theme's Navigation and Layoutk.

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

Post 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.

Page Settings

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.

HostGator Web Hosting

20 COMMENTS

    • Gabe,

      I’m not 100% sure what you mean. Can you be more specific? It looks like the default color is a dark blue. To change it you have to alter the sites CSS in the style sheet.

  1. me interesa cambiar el top-area de las paginas, pero no encuentro en donde poder cambiar la imagen de top-area de cada una de las paginas.
    muchas gracias por la ayuda, de ante mano.

    • Hi Victoria,

      Thanks for your question on the Fusion theme and complements on your site, it’s looking good! Regarding your question on changing the image at the top of each page of the Fusion theme… Are you referring to the image highlighted in the screen capture below?

      Fusion theme images

      If so, let me know and we’ll take a closer look and hopefully find an easy way to change that out for each page.

      Thanks,

      Adam

    • Hi Frank, Thanks for your question and I’m glad to hear you decided to go with WordPress. I’m not sure that I completely understand your question regarding having just one content area in the middle of the Fusion theme. Are you referring to the homepage? Please provide more information and we’ll do our best to help.

      Thanks,

      Adam

  2. Hello..!!! need your help..can you guide me…
    My problem : if i don't want the home page main content area at all on my page then how can i turn that feature off. please reply ASAP.
    Thank you.

  3. Thank you for your tutorials! GREATLY APPRECIATED!
    I googled like crazy to find out how to get rid of the tags and attributes under my comment box with no avail. Here is what it says.

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    I tried this code at the bottom of my style css, as well as my comment php and nothing changed. Here is the code I copied that I found on the wordpress feed help.
    .form-allowed-tags { display:none; }
    This did not work. Any help would be greatly appreciated.

  4. Hi Adam,

    Great tutorial and thanks for sharing it. Did you know how to enter social media details on Twitter and Facebook icons on the top?

    Cheers,
    sam.

  5. HI! Thanks for the info, I would apreciate if you let us know how to put our facebook page and twitter account on the social media icons that appear on the top right, I've been trying to find out and still have no clue about it… THANKS A LOT.

  6. Hi there!

    I have a question regarding Elegant Themes epanel. I am currently using The Professional theme. How can I remove the text on the Featured Slider? I only want to show pictures that I upload on the Featured Image.

    Thanks heaps!

    • Hi Kezia,

      Thanks for your question. There should be a check-box option to "display text on featured image slider" under slider settings. Make sure that box is Not checked and that should solve the issue.

      • HI
        Thank you so much for your attempting
        I wanna change each page top image as u highlighted as response for Victoria. But I can not find how can I do that. Please help me.
        With Best Regards
        Saman

  7. Hi, how I can add images to each page at the top? similar to the slider on the home page but with static images? Thank you.

  8. Hi! Where can I find the options for disabling the breadcrumbs and featured image? I read this site http://mysitemyway.com/docs/index.php?title=Post_Options#Disable_post_features but unfortunately I can't see those settings

    Please help me, my main problem is the image on feature image slider was also appeared on my post, I would like to insert different image on my post and not the one that I used on Feature Image Slider.

    Thank you hope anyone could help me. 😀

    • Hi thanks for reading! Does the image appear in the rich text editor? If so you should be able to delete it and add a new one while leaving the featured image that you set in place.

      If it's not there, you probably have to edit the single.php file and maybe a few more, looking for and removing lines like this :

      "the_post_thumbnail()" or
      "get_the_post_thumbnail()"

      Be very careful if you go this route, I have not tested it as I currently don't have access to the Fusion theme. This will be universal as well, that is it will affect all your posts. If you go into your PHP files remember to make a back up first.

  9. Hi, i wanna thank you for those tutorials about this Elegant Fusion theme becouse without this, i couldnt modify what i want but, i still have to know how to change the text colour pleasein the slide home page and background colour in main content area in the same home page please.

  10. I use elegant theme fusion on my website
    I could change home page slider images, but as I go an another page I can not change the default image on the top of each page, please guide and help me how can I change it, I do not know changing direction.
    Whit Best Regards
    Saman

  11. Everything looks good on our site other than the image in the header section of each individual page. The slider makes HOME look good, but every other page has the Fusion blue. How do I insert a unique image or plain color on each page to replace the template?

LEAVE A REPLY