Apr 132015

Suffusion Theme Templates Custom Layout Template post shows you how to control and manage the custom template layout and more.

Last Updated: March 3, 2018

Latest News: I have updated the documentation below.

These widgets are very handy if you want to setup some custom layout for your front page on your website. You can add 5 special widget areas on your page that can be used to build special custom layouts like images, tags, categories, advertising, slideshow and much more.

From the settings below you will notice that you can add up to 5 different widgets per widget area.

Suffusion Theme Templates Custom Layout Template Settings

Step 1 ) Go to Appearance -> Suffusion Options -> Templates -> Custom Layout Template to set up the following option. See image below.


Step 2 ) The following image shows you the layouts you can achieve by setting these widgets on a page or the front page of your website.


Step 3 ) The following settings can be applied individually to the following widgets Widget Area 1, Widget Area 2, Widget Area 3, Widget Area 4 and Widget Area 5 allows you to select from one of the following options.

Number of columns

  • 1 (Default)
  • 2
  • 3
  • 4
  • 5

Height adjustment for widgets

  • All widgets in the same row in this widget area have the same height
  • All widgets in this widget area have the same height
  • No height adjustment
  • All widgets have their original heights, but use JQuery Masonry to position them (not responsive)

Default or custom skinning?

  • Override skin defaults

Step 3-1 ) The following settings Widget Background    allows you to set up the following options.

Background Color:

  • Transparent / No color
  • Custom = Default: #ffffff
  • Image URL:
  • Upload Image

Image Position:

  • Top left
  • Top center
  • Top right
  • Center left
  • Middle of the page
  • Center right
  • Bottom left
  • Bottom center
  • Bottom right

Image Repeat:

  • Repeat horizontally and vertically
  • Repeat horizontally only
  • Repeat vertically only
  • Do not repeat

Layer Transparency (not for IE):

Step 3-2 ) The following settings for Widget Border applies to the following borders Top border, Right border, Bottom border and Left border.

Border Style

  • No border
  • Hidden
  • Dotted
  • Dashed
  • Solid
  • Double
  • Groove
  • Ridge
  • Inset
  • Outset


  • Transparent / No color
  • Custom (Pixels (px) or Em) = Default: #cccccc

Border Width

Border Width Units



You might be interested in the following URL Suffusion Theme Custom Layout Template Design Page.

Click on the following URL Templates Tutorials for more typography tutorials.

If you have any questions please let me know. I will be updating this from time to time. So keep coming back for the latest.


More Suffusion Tutorials:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

 Leave a Reply

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=""> <s> <strike> <strong>



one × one =