In this tutorial, we will cover sidebar setup and sidebar widget setup for Suffusion Theme
I believe that one of Suffusion theme’s strengths as a theme is its fully customizable sidebar settings and layouts. Suffusion theme offers its users an incredible variety when it comes to sidebar layout and customization.
For those who prefer to read, the following covers the content of the video above.
Before you modify any of your own sidebar widget settings here is what your side bar will probably look like. It will probably contain a section for categories of posts, archives, and meta. There are a couple of sections of the suffusion backend that need to be accessed and modified before you can begin customizing your sidebars.
First, you will need to set the layout for your default sidebar or sidebars. This will be done from the suffusion dashboard under layouts. Here as covered previously, you will define how many sidebars you want and exactly where you want them positioned on your pages and posts, and the styling for each sidebar. I prefer to use the main sidebar widget as a secondary left hand navigation.
Studies have shown that a left hand navigation listing the Tier 2 pages of a site outperform websites with other navigation types. The left hand sidebar navigation is one trait of profitable, high traffic websites that you really need to consider.
Now, while you’re at it, go ahead and set all of the sidebar settings in the layout section since you will probably be using these alternate sidebars or no sidebars within certain pages of your website. You can actually set different pages to display your sidebars in a variety of ways. Remember, I am talking about pages here. This does not apply to posts.
Let me quickly show you how this works. When you create a page there is an option on the right hand side that is titled “page attributes.” Click on the down arrow that says “Template.” Here you can choose which sidebar layout you would like to display for this particular page. The default setting will automatically be selected unless you choose to modify it.
Now, from the suffusion dashboard navigate to the sidebar section. Suffusion comes with eight widget areas where you can add widgets. You may choose to not use some of these widget areas depending on your requirements. By default Sidebar 1 and Right Header Widgets are enabled.
In addition you have a set of ad-hoc widget areas that can be invoked in your posts and pages using short code. This will be explained in more detail later.
If you are familiar with JQuery Masonry, you can use it to adjust the layout of the widget area in the header and footer. The use of JQuery Masonry is beyond the scope of this video.
When you are working with sidebars and widgets, there are two places that you will be navigating to and from as you make your modifications. It is important at this point to understand that every element on your website or blog should have a specific purpose that should be very clear to your visitors.
Making a site that is simple, easy to navigate, and fully user friendly is one of the most important aspects to site development. So make it a point to choose your sidebars and widgets wisely. There is nothing worse that a cluttered website with elements that are of no value to its visitors.
If you have the navigation bar at the top of your website activated, you can use the “Top Bar Right Widgets” to display information in a small area in the upper right hand corner within the top navigation bar. You must first define how you want to display the widget.
I personally think that the slide open option is cool and it could be used to offer some type of special or promotion on your site. After you have set your options navigate over to the widgets page and add your content into the respective widget. The “top bar right widgets” area can be found about half way down the page. Remember to make any widget active, you must have some kind of content placed into the widget area on the widget settings page.
The “widgets above header” settings can be modified here. You can create 1-5 columns in this widget. If you have more than one column, each element that is placed within will be in it’s on column. If you choose one column, the elements will be stacked vertically in successive order with each element being the width of the entire page.
The “widget that is contained in the header can be up to 300 pixels wide and is located on the right hand side of the header image. This widget can have up to 5 columns. However, since the max width for this widget is 300 pixels, having any more than 2 or 3 columns may not produce an element that is useful for the visitor.
The “right header widget” is by default activated. The default function of this widget is a search bar that is located on the right side of the navigation below the header. It can be turned on or off here. On the widgets page, if you have placed another widget in the “right header widget area,” it will override the default search bar. This is a very small widget area so don’t put to much content into it.
Sidebar 1 is also by default activated. This sidebar is considered the main theme sidebar. Anything that you find in the widgets section can be placed into sidebar one. Each widget in sidebar one can be displayed as individual boxes with the theme colors activated, as a flat sidebar with no separation of individual widgets, or it can be displayed as a tabbed sidebar.
In the settings below this you can further customize the widget box by changing font colors and link affects.Sidebar 1 (bottom), sidebar 2, sidebar 2 (bottom) and wide sidebar (Top & Bottom) are all essentially set up in the same manner as sidebar #1 was set up.
To use the “Widget area below the header,” you must first enable the header. The “Widget area below the header” can have from one up to 5 columns, and the widgets can be shown in individual boxes or they can be displayed in a flat single area that spans the width of the page. There are also a number of styling effects available for these widgets.
The “Widget area above the footer” is set up exactly the same way as the “widget area below the header. This widget area active, you must enable it and place content in the widget area from the widget modification page.
There are 5 ad-hoc widget areas available for your use. I think these ad-hoc widget areas are extremely important because they can be placed in your posts and pages using a short code.
These ad-hoc widgets can function in a variety of different ways to allow you create one thing and then quickly place that thing on pages and posts. If this information ever needs to be modified on all of the pages and posts, all you have to do is modify the one ad-hoc widget and it is adjusted site-wide.
Let me give an example. I have a website that has a pricing structure that people see before they make a purchase. This pricing structure is laid out on several pages of the site. I use an ad-hoc widget to place this content on pages and posts. If my prices ever change, I do not have to change every single page and post where this information is contained. I just have to go to the ad-hoc widget in the widget settings page and modify the content. The change will then be site-wide. In another video, I will go through a demonstration of an ad-hoc widget setup.
The last sidebar that is available is the “Static tabbed sidebar widget.” This sidebar places multiple widgets in tabs seen in a single window. This allows viewing of different widgets with a single click of the button with no waiting. If you have regular users that now were to locate things on your site, this widget area may be a good one to use. I do have to say that this widget area does have one major limitation. It can only be placed above the main left or right sidebar. You can accomplish the same effect of the tabbed widgets with several of the other widget areas.
In the next tutorial, I will look at the “back-end” settings for Suffusion Theme.