The top widget area is a bit different than most widget positions but does offer a bit more flexibility for customized widgets – more so with text widgets. The Visionary theme offers a single widget position titled in the admin as “Top Widget”. Because of the inflexibility of WordPress widgets, I decided to make this a single one but give you the option to use shortcode columns to add your content. This ultimately gives you more design and layout options because you can have a different layout for every section of your web site by using 1, 2, 3, or 4 column shortcodes.
For best usage, I recommend the Pixel Text Widget because I modified the default WordPress text widget to allow a much wider field (950px) to add your content. This gives you more space to work in, plus this widget also supports shortcodes.
Prepare Your Top Widget Area
- Because this is a single position, plan out your site pages with the column content you want to have
- If you use any images, upload these to your Media Manager first and copy and paste the URL paths to each image
- Go to Appearance >> Widgets, and drag a “PIXEL TEXT WIDGET” to the “Top Widget” position
- Put a title for your reference so you know what this widget is for. Please note that the title will “not” show on the front-end for this area. For titles on the front-end, add them to your content instead.
- Copy & Paste the column shortcode you want to use into the text field. Your column choices are: 1, 2, 3, or 4 columns
- If you use images, refer to the guidelines below…
- If you use widget logic (WL) to publish this widget to select areas of your web site, add your conditional tag to the WL field.
- Click SAVE
Adding Images to Your Content Columns
Use the sizing guidelines based on using 1, 2, 3, or 4 column shortcodes in the Top Widget position:
- One Column – your maximum image width is 960px
- Two Columns – your maximum image width is 468px
- Three Columns – your maximum image width is 304px
- Four Columns – your maximum image width is 210px
Adding Styles to Your Images
If you add styles such as borders, paddings, margins, or combination of each, you need to adjust the physical width of your images to account for the additional style size attributes. For example, if you setup a 3 column layout, your maximum image size is 304px each, but if you add a 2px border, you need to reduce the image width by 4px…
304 – 4 = 300px image width
(4 is based on 2px on the left + 2px on the right of the image)
This will also apply for paddings and margins because they require a width. For example, if we take the 3 column example above with a 2px border but we want to put a space between the border and the image, let’s say 3px space, then we need to account for this padding:
304 – 4 – 6 = 294px image width
(4 is for 2px on the left and right side, and 6 is the 3px on the left and right side as well, for a total of 10px being taken off the image width of 304px.)