Introduction
ThemeStarta’s click and drag functionality makes it easy to adjust various width and height elements of your site.
In this WordPress theme layout tutorial we’ll look at how to make height and/or width adjustments in the following areas of your custom theme’s layout:
- the width of your site
- the space above your site
- the height of individual blocks
- post area and sidebar widths
- the height and width of the slider
But first, let’s quickly run over the basics.
The Basics of Height and Width Dragging
In most cases, any element of your site that can be adjusted with a simple click and drag will be represented as a dotted line:
If you hover your cursor over a dotted line enabled for height or width adjustment, your cursor will change to an arrow indicating the directions available to you for adjusting the relevant block.
If you can adjust the block’s height, you’ll see a vertical double ended arrow like this:
You can also adjust the height of an individual block by expanding the relevant block settings and clicking on the Layout bar. The first option you will see is the Height option. You can manually type in the height in pixels that you would like the block to display here.
If you can adjust the block’s width, you’ll see a horizontal double ended arrow like this:
Note: Unlike the Height option shown above, there is no option for entering in the pixel width of a site block.
While dotted lines will help you adjust the height or width of your site in most areas of your design, adjusting the width of your post area and sidebars operates slightly differently. Instead of a dotted line, adjustments are made using a drag handle.
Drag handles are located directly above the post area and sidebar blocks and look like this (with the cursor shown hovering above one drag handle):
Note: In the above image you will notice the area with the drag handles also has a dotted line above it. This line gives you the ability to adjust the height of the block directly above the content area block.
Adjusting the width of your site
Note: The following procedure only applies if your WordPress theme has a fixed width. If your theme has a fluid width you will not see either a left or right dotted line enabled. This is because a fluid width site will automatically adjust itself according to the size of the users browser and the percentage width of their browser that you have specified. You can check whether or not your site is set to fixed or fluid width by clicking the Theme General Options & Backgrounds button and then the Layout bar. The first item in the Layout option panel is the fixed or fluid width option.
To adjust the overall width of a fixed layout site:
1. Hover your mouse over the gray dotted line that runs down the right side of the ThemeStarta preview. Your mouse cursor will turn into a horizontal double ended arrow:
2. Left click but don’t release the left button, then drag your mouse left or right, depending if you want the site to become wider or narrower. As your site becomes wider or narrower, the site width readout located at the top right of the ThemeStarta preview will update, providing you real-time feedback on how wide your site adjustment is in pixels:
3. When you have the site width where you want it to be, release your left mouse button, then click 
.
Note: You must save your settings for your width adjustment to be retained, and you must update your theme for the change to be reflected in your live theme.
Adjusting the space above your site
You can adjust the amount of space above your site. This is an adjustment that helps you specify exactly where you want the very top of your site to be positioned, and essentially where your site begins, when a visitor views it in their browser.
Specifying the space above your site is helpful in a few ways, but primarily it helps you to display the top area of your background image above where your header begins, should you want to do so.
Here’s how to do it:
1. Hover your mouse over the dotted line at the very top of the ThemeStarta preview. You’ll find the dotted line immediately underneath the ThemeStarta Options bar (learn more about this bar here). Your mouse cursor will turn into a vertical double ended arrow:
2. Left click but don’t release the left button, then drag your mouse up or down, depending on if you want more or less space above your site. As the space above your site increases or decreases depending on your adjustment, the top spacing height readout located at the top left of the ThemeStarta preview will update, providing you real-time feedback on how much space you have above your site in pixels:
3. When you have the top of your site positioned where you’d like it, release your left mouse button, then click .
Note: You must save your settings for your width adjustment to be retained, and you must update your theme for the change to be reflected in your live theme.
Adjusting the height of individual blocks
There are eight dedicated block areas that you can adjust and customize. View Layout Overview to get an overview of how each block fits together to create the overall layout of your theme, and view ThemeStarta Settings Panels to learn more about blocks and their options.
There are two different methods for adjusting the height of a specific block.
METHOD 1
1. Hover your mouse over the gray dotted line that runs along the bottom of the block you want to adjust the height of. Your mouse cursor will turn into a vertical double ended arrow:
2. Left click but don’t release the left button, then drag your mouse up or down, depending whether you want the height of the block to increase or decrease.
Each block and each element within a block that can be height or width adjusted displays a block height readout at the top and middle of the block. As you adjust the height, the block height readout will update, providing you real-time feedback on how high the block is in pixels. For example, the footer one block height readout looks like this:
3. When you have the block height where you want it to be, release your left mouse button, then click .
Note: You must save your settings for your width adjustment to be retained, and you must update your theme for the change to be reflected in your live theme.
METHOD 2
You can also adjust the height of an individual block by expanding the relevant block settings and clicking on the Layout bar to expand the Layout Options Panel. The first option you will see is the Height option. You can manually type in the height in pixels that you would like the block to display here.
When you have entered the block height in pixels click .
Adjusting post area and sidebar widths
While dotted lines will help you adjust the height or width of your site in most areas of your design, adjusting the width of your post area and sidebars operates slightly differently. Instead of a dotted line, adjustments are made using a drag handle.
Drag handles are located directly above the post area and sidebar blocks and look like this (with the cursor shown hovering above one drag handle):
Note: Drag handles operate slightly differently depending on your Content Area Settings > Sidebars > Layout:
- If you have two sidebars and one post content area you will see two drag handles. How these handles behave varies depending on whether your sidebars are together on the right, together on the left, or whether you have one sidebar on the left and one on the right. Dragging a handle will adjust the width of a sidebar only or both the width of the sidebar and the width of the post area (to compensate) depending on your layout.
- If you have one sidebar and one post content area you will see one drag handle. This handle will adjust both the width of your sidebar and the width of your post area content simultaneously.
To make a width adjustment:
1. Left click the relevant drag handle and hold (don’t release the left button):
2. Drag the handle to the left or right, depending on if whether your want to widen or narrow the relevant sidebar and/or post area. As you drag, the preview area will become wider or narrower in real time, and the sidebar width readout(s) and/or post area width readout will also update, indicating the width in pixels.
Layout Example 1: Two sidebars, one positioned on the left, one on the right. The post area is in the middle.
In this example, you can see the drag handles are positioned where adjustments can be made. With this particular layout, the left drag handle will adjust both the left sidebar width and the post area width, while the right will also adjust the post area width.
Layout Example 2: Two sidebars, both positioned on the right. The post area is to the left.
In this example, you can also see the drag handles are positioned where adjustments can be made. With this particular layout, the left drag handle will adjust the post area width and the left sidebar. The right drag handle will also adjust the post area width as well as the right sidebar (it won’t adjust the left sidebar width). In other words, when you adjust a single sidebar width you will also adjust the post area width simultaneously, but adjusting the width of one sidebar will not adjust the other. Sidebars must, therefore, have their widths set separately.
Important: When you adjust a sidebar width that also adjusts the post area width the post area width readout will always adjust accordingly, however in some cases the real-time preview of the post area will not. When this occurs you will see your sidebar preview overlap the post area preview. Don’t worry about this, the adjustment is still occurring perfectly. Once you click save your settings the post area preview will be updated to match your new pixel width settings.
There are many other example layouts that you can choose using the Content Area Settings > Sidebars > Layout options panel:
Nonetheless, despite how each layout creates a minor variation in the way drag handles operate, the basic principle of dragging handles to adjust your sidebar and/or post widths remains the same. Experiment with your preferred layout and you’ll find the process extremely simple in practice.
3. When you have the sidebar & posts area widths where you want them, click to save your new settings.
Factoring in Margin and Padding
When making your post area width and sidebar width adjustments bear in mind that the pixel width you select relates to the width of the columns in question and not the available width for posting content into those columns. The post area and sidebars have provision for both margin (outside spacing around the area in question) and padding (inside spacing in the area in question). Both margin and padding settings influence how your content will display inside your post area and sidebars and thus must be factored into account when choosing your width settings.
Fortunately you don’t have to worry about manual calculations. As you adjust your post area or sidebar widths your default margin and padding setting will auto adjust. You can see what your current margin and padding settings are in the relevant post area or sidebar column directly below the post area width readout or the sidebar width readout.
The above example shows the margin and padding for a sidebar. The number “10″ for both settings represents the amount of pixels of margin and padding respectively that apply.
If you want to adjust the margin and padding, you can do so from the appropriate Layout options panel for the area you wish to adjust.
Adjusting Slider Height and Width
Note: This procedure only applies if your slider has its height and/or width set to “fixed width” in the Spotlights Settings > Slider > Layout bar options panel. If the slider height and width are set to “full width” the slider will automatically resize to fit the full Spotlights block.
ThemeStarta gives you full control over the size and position of your slider.
There are two methods in which you can easily adjust the height or width of your slider:
METHOD 1.
1. Depending on whether you want to adjust the height or width:
- If adjusting the width, hover your mouse cursor over the right side dotted line until you see the horizontal double ended arrow.
- If adjusting the height, hover your mouse cursor over the bottom dotted line until you see the vertical double ended arrow.
2. Left click and hold (don’t release the left button), then drag your mouse left, right, up or down as required. As your slider size adjusts the slider width readout located at the top left of the slider preview area will also adjust, providing you real-time feedback on the size of your slider in pixels:
The read arrow is pointing to where you will see the slider width readout. In this example, you can see the slider is sized 500 pixels x 310 pixels.
3. When you have the slider height and width where you want it to be, release your left mouse button, then click .
METHOD 2.
There is a slider adjustment handle located at the bottom right corner of the slider:
1. Hold you mouse cursor over the bottom right corner until you see an angled double ended arrow.
2. Left click and hold (don’t release the left button), then drag your mouse left, right, up or down as required to adjust either the height or the width. As your slider size adjusts the slider width readout located at the top left of the slider preview area will also adjust, providing you real-time feedback on the size of your slider in pixels.
3. When you have the slider height and width where you want it to be, release your left mouse button, then click .
Repositioning the Slider
Once you have settled on the height and width of your slider you can resposition it anywhere within the Spotlights block that you would like. To do so:
1. Hold your mouse cursor anywhere over the slider. You will see your cursor change to multi-headed arrow:
2. Click your left button and hold, then reposition the slider by dragging it to your preferred location. Release your mouse button when done.
3. When you have the slider positioned where you want it to be, release your left mouse button, then click .
Note: You do not have to save your settings each time you adjust the slider height, width or reposition. You can adjust the width, the height, reposition, and continue making adjustments as you see fit. Saving your settings is only necessary once you’ve made all the adjustments that you want and wish to keep them.
