Mbrsolution Blog

Donate for a cup of coffee

In this tutorial we are going to look at suffusion layout structure and at the same time check out the most commonly used website layouts.

The layouts you see below are based on a header image of the following size 1000px X 204px.

Hint: Click an image to view a larger image.

We are going to look at the most common layouts. See images below:

 Layout 1: Header, left sidebar, content, right sidebar and footer

Layout 2: Header, 2 left sidebar, content and footer

Layout 3: Header, content and footer

Layout 4: Header, content, 1 right sidebar and footer

Layout 5: Header, content, 2 right sidebar and footer. Notice how one side bar is larger than the other.

Step 1: Login into your admin account and navigate to Appearance >> Suffusion Options >> Layouts >> Default Sidebar Layout. See image below:

Step 2: Set up your sidebars and the position. You have 3 options; 0 sidebars, 1 or 2 sidebars and set the position. See image below:

Step 3: Widths page layout. Here you will choose between default theme sizes and margin or custom sizes and margin. In custom you have 2 options, fixed size or fluid size. For this tutorial I have chosen custom size and fluid flexible width. See image below:

Step 4: Fluid width settings for your website. This part is important because of your header. If you increase the max width to a size larger than your header image then you will notice an ugly header. So be careful in with this setting. See image below:

Step 5: This one is obvious, it will set the sizes of your sidebar’s. If you have 2 sidebars but you know that one sidebar will have a unique size widgets then this is where you can set up the size of the sidebar to meet the unique widgets. See image below:

Hint: Reset the theme layout if you are not happy with your settings

There are more options that you might want to check while you are setting up the layout. However this tutorial will give you a head start and provide you with an idea of the layout structure you want for your website or blog.

If you have any questions please leave a comment. Come back for more suffusion tutorials

More suffusion tutorials:

1. Adding a header image.
2. Create a Suffusion menu above the header.
3. Suffusion custom style navigation bar.
4. Add a slide show to suffusion theme.
5. Create a suffusion child theme in a few steps.