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.

suffusion-theme-options-templates-custom

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.

suffusion-theme-options-templates-custom-layout

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

Color

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

Border Width

Border Width Units

suffusion-theme-options-templates-widget-border

====================================================

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.

Enjoy.

More Suffusion Tutorials:

Manuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 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>

(required)

(required)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.