How to Use the Layout Editor Settings

Revision as of 22:18, 10 November 2011

If you have ever been stuck with a theme or a website that didn't let you change the width of your page or use different sidebars, you might just love the Layout Editor.

As the name suggests you can use this editor to change the layout of your site. The default is a responsive layout set to a maximum pixel width. This is a good option for most sites but if you want to get creative, we want to show you how.

Overview

You can find the Layout Editor by logging into your WordPress Administration Panel and clicking on "Settings" under the PageLines tab.

Layout Editor Overview

Overview of the Layout Editor Refer to the image Layout Editor Overview

1. Layout Handling lets you choose from three different global layout options
2. Default Layout Mode will define what layout type is applied to all new pages you create
3. With the Layout Dimensions Editor you can choose which layout you would like to edit
4. The sliders in the Layout Dimensions Editor allow you to change the width of the page and the width of the different sidebars
5. Pixel perfect every time these values will let you know the exact sizes of your page

Layout Handling

There are three options for layout handling that you can choose from. Most website are going to be just fine with the default.

Responsive with Pixel Width

• This setting will allow you to choose the width of your pages and sidebars using pixels. Your page will automatically reformat as you resize the browser window or view your page on a smaller screen like a tablet or mobile phone. The maximum width of the page is a fixed pixel number.

Responsive with Percent Width

• This setting will allow you to choose the width of your pages and sidebars using percents of the page width. In contrast to pixels, using a percentage width changes the width of the page based on the size of the browser window. The maximum width of your page will be determined by the maximum width of the users browser.

Static with Pixel Width

• Static page width will not change when the browser is resized. You can set the width of the page and it will always remain this size.

Default Layout Mode

Here you can set the default layout of your pages. This setting will determine the page layout of all new pages you create.

The black sections represent the content area of your page; while the blue sections represent the sidebars that will appear on the page.

Layouts can also be changed on individual pages using the MetaPanel. This way you are never stuck with the default layout!

Layout Dimension Editor

Change the Layout Dimensions

This editor uses draggable sliders to change the width of the columns on your site. It will change all pages which use the selected layout.

To change a layout:

1. Select the layout you wish to edit
2. Drag the sliders to change the width of the different areas
3. Save your settings