Pixel Theme Studio

Setting up your bottom widgets

The Visionary theme has a bottom widget group that is dynamic with variable widths as you publish widgets to this area. Here is an outline:

• Publish 1 widget - the width will automatically resize to 100%
• Publish 2 widgets - the width of both will equal 50% each side-by-side
• Publish 3 widgets - the width of each will equal 33% each side-by-side
• Publish 4 widgets - the width of each will equal 25% each side-by-side

When you have more than one widget published, they also get a 40px space between them; exception is the three widget layout as this is an odd size and requires a small adjustment in spacing that will equal 39px instead of 40px.

One caveat to this setup is that the widgets you choose for this group will be global throughout your site. The widget is based on a multi-column method developed by shibashake.com and using the widget logic plugin to manage which widgets get seen where only partially works with this one. The developer mentioned they will consider looking into adding that feature ability for a later version. The benefit with this widget though is that you get variable width widget columns which is a huge advancement. For Joomla cms users, this has always been a standard feature with their modules (like an advanced widget).

How to Use this Widget Area

1. Go to your Appearance >> Widgets manager and drag any widget into the "Bottom Widget" position
2. As you add more to this position, they will automatically resize
3. If you are using a text widget, add your content
4. Click SAVE

Adding Images into your "Bottom" Widgets

When you add images to your widgets in the bottom area, and because this is a dynamic width group, you need to be aware of image widths. If you decide to add images for the full width of each one, here is a guideline to consider for sizing your image graphics:

• 1 Widget has an active image width up to 940px
• 2 Widgets have an active image width up to 445px
• 3 Widgets have an active image width up to 280px
• 4 Widgets have an active image width up to 196px

If you decide to add borders or other styling attributes to your images, you will need to adjust the sizes listed above. For example, if you publish 3 widgets with each image having a 2px border, you need to subtract 4px from the width:

280 - 4 = 276px for your image width (4 is based on 2px on the left + 2px on the right)

The same goes for smaller images that get any margins or paddings applied to them.