How to Use the Layout Editor Settings
| (5 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
| + | [[Category:Framework]] | ||
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 [[Glossary#Layout Editor|Layout Editor]]. | 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 [[Glossary#Layout Editor|Layout Editor]]. | ||
| Line 12: | Line 13: | ||
Refer to the image Layout Editor Overview | Refer to the image Layout Editor Overview | ||
# [[Glossary#Layout Handling|Layout Handling]] lets you choose from three different global layout options | # [[Glossary#Layout Handling|Layout Handling]] lets you choose from three different global layout options | ||
| − | # [[Default Layout Mode]] will define what layout type is applied to all new pages you create | + | # [[Glossary#Default Layout Mode|Default Layout Mode]] will define what layout type is applied to all new pages you create |
| − | # With the [[Layout Dimensions Editor]] you can choose which layout you would like to edit | + | # With the [[Glossary#Layout Dimensions Editor|Layout Dimensions Editor]] you can choose which layout you would like to edit |
# The sliders in the Layout Dimensions Editor allow you to change the width of the page and the width of the different sidebars | # The sliders in the Layout Dimensions Editor allow you to change the width of the page and the width of the different sidebars | ||
# Pixel perfect every time these values will let you know the exact sizes of your page | # Pixel perfect every time these values will let you know the exact sizes of your page | ||
| Line 22: | Line 23: | ||
===Responsive with Pixel Width=== | ===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 [[ | + | *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 [[Glossary#Browser|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=== | ===Responsive with Percent Width=== | ||
| Line 36: | Line 37: | ||
The black sections represent the content area of your page; while the blue sections represent the sidebars that will appear on the page. | 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! | + | Layouts can also be changed on individual pages using the [[Glossary#MetaPanel|MetaPanel]]. This way you are never stuck with the default layout! |
==Layout Dimension Editor== | ==Layout Dimension Editor== | ||
| Line 48: | Line 49: | ||
# Drag the sliders to change the width of the different areas | # Drag the sliders to change the width of the different areas | ||
# Save your settings | # Save your settings | ||
| − | |||
| − | |||
Latest revision as of 21:10, 18 January 2012
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.
Contents |
[edit] Overview
You can find the Layout Editor by logging into your WordPress Administration Panel and clicking on "Settings" under the PageLines tab.
Overview of the Layout Editor Refer to the image Layout Editor Overview
- Layout Handling lets you choose from three different global layout options
- Default Layout Mode will define what layout type is applied to all new pages you create
- With the Layout Dimensions Editor you can choose which layout you would like to edit
- The sliders in the Layout Dimensions Editor allow you to change the width of the page and the width of the different sidebars
- Pixel perfect every time these values will let you know the exact sizes of your page
[edit] 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.
[edit] 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.
[edit] 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.
[edit] 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.
[edit] 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!
[edit] Layout Dimension Editor
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:
- Select the layout you wish to edit
- Drag the sliders to change the width of the different areas
- Save your settings