Last Updated: October 05, 2014
Suffusion Theme Layout tutorial illustrates the different layout structure and at the same time check out the most commonly used website layouts.
Latest News: I have fixed some broken links below.
Information: The layouts below and measurements are based on the following settings.
Remember, if you increase the percentage width to 85% it will always stay below the maximum width of 1200px even if the computer or laptop monitor resolution is set to 1280 x 800 or higher.
We are going to look at the most common website layouts you will find on the internet. You will also see the px and percentage figure from the different layouts. See images below:
Layout 1: Header 75% wrapper, left sidebar 150px, content 617px and right sidebar 150px.
Layout 2: Header 75%, 2 left sidebars 150px plus 150px and content 617px.
Layout 3: Header 75% wrapper and content 960px.
Layout 4: Header 75%, content 780px and 1 right sidebar 150px.
Layout 5: Header 75% wrapper, content 617px and 2 right sidebars 150px plus 150px.
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 for each sidebar. 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: The Fluid width settings for your website is very important especially if you add a header image. If you increase the max width to a size larger than your header image then you will notice an ugly header on your website. So be careful how you manage these settings. See image below:
Step 5: The following settings are 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 will set up the size for each sidebar. 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: