Creating a Builder Layout

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Design)
 
(15 intermediate revisions by one user not shown)
Line 17: Line 17:
 
<br />
 
<br />
  
==Settings==
+
=Settings=
  
 
The first section of the page is for '''Layout Settings'''.
 
The first section of the page is for '''Layout Settings'''.
Line 27: Line 27:
 
*'''Styles''' - Once [[Builder_Style_Manager:_Creating_Styles|Styles]] have been created with Builder’s [[Builder_Style_Manager:_Introduction| Style Manager]], these Styles will populate this dropdown list.
 
*'''Styles''' - Once [[Builder_Style_Manager:_Creating_Styles|Styles]] have been created with Builder’s [[Builder_Style_Manager:_Introduction| Style Manager]], these Styles will populate this dropdown list.
  
==Design==
+
=Design=
  
 
The '''Design''' area of the Add New Layout Page is where you assemble your Layout using [[Builder_Modules|Builder Modules]]. Each Module represents a different part of a Layout, such the header, navigation, content area and footer.  
 
The '''Design''' area of the Add New Layout Page is where you assemble your Layout using [[Builder_Modules|Builder Modules]]. Each Module represents a different part of a Layout, such the header, navigation, content area and footer.  
  
To start building a layout, click '''Add Module'''.
+
<br />
  
You'll now see each Module option available to be added to your Layout.
+
==Step 1: Click '''Add Module'''==
 +
 
 +
To start building a layout, click '''Add Module'''. You'll see the '''Select a module to add to the layout''' box.
 +
 
 +
<br />
 +
 
 +
[[File:Add-module.png|800px|link=]]
 +
 
 +
<br />
 +
 
 +
==Step 2: Select the Module==
 +
 
 +
Select the radio button next to the Module of your choice and click '''Add Module'''.
 +
 
 +
<br/>
  
 
[[File:Add-new-module.png|800px|link=]]
 
[[File:Add-new-module.png|800px|link=]]
  
==Video: Creating Builder Layouts==
+
<br />
 +
 
 +
==Step 3: Customize the settings of the Module==
 +
Depending on the Module selection, you'll see a box to customize the settings of the Module. For more information on each Module and the settings of that module, visit the individual [[Builder_Modules|Builder Modules]] pages.
 +
 
 +
<br />
 +
 
 +
[[File:Content-module-settings.png|800px|link=]]
 +
 
 +
<br />
 +
 
 +
==Step 4: Click '''Save Layout'''==
 +
 
 +
To save the Layout and add it to the Layouts list, click "Save Layout."
 +
 
 +
<br />
 +
 
 +
[[File:Save-layout.png|800px|link=]]
 +
 
 +
<br />
 +
 
 +
=Video: Creating Builder Layouts=
  
 
{{#ev:vimeo|59948983|800|none|Creating Builder Layouts}}
 
{{#ev:vimeo|59948983|800|none|Creating Builder Layouts}}
  
  
== See also  ==
+
= See also  =
 
*[[Builder_Layouts:_Introduction|Introduction]]
 
*[[Builder_Layouts:_Introduction|Introduction]]
 
* [[Builder_Layouts_Video_Overview|Video Overview]]
 
* [[Builder_Layouts_Video_Overview|Video Overview]]

Latest revision as of 17:30, July 19, 2013

To create a Layout, expand the Builder menu in the WordPress dashboard and click Layouts and Views. From here, click the Create Layout button.


Create-layout.png


Contents

The Add New Layout Page

Here, you'll see the Add New Layout Page.


Add-new-layout.png


Settings

The first section of the page is for Layout Settings.

  • Name - The name helps identify this Layout's widget areas. Choose a short, descriptive name.
  • Width - The width determines how wide the Layout is (in pixels). You can either select from the built-in presets or use a custom width. Typically, a wider width is for more complex layouts that have multiple sidebars while a more narrow width is for more minimalistic layouts, such as those that don't include sidebars
  • Extension - Extension can provide additional code that changes the content, provides additional features or modifies the styling of the Layout.
  • Hide Widget Areas - Use this option to the widget areas in this Layout from the Appearance > Widgets page.
  • Styles - Once Styles have been created with Builder’s Style Manager, these Styles will populate this dropdown list.

Design

The Design area of the Add New Layout Page is where you assemble your Layout using Builder Modules. Each Module represents a different part of a Layout, such the header, navigation, content area and footer.


Step 1: Click Add Module

To start building a layout, click Add Module. You'll see the Select a module to add to the layout box.


Add-module.png


Step 2: Select the Module

Select the radio button next to the Module of your choice and click Add Module.


Add-new-module.png


Step 3: Customize the settings of the Module

Depending on the Module selection, you'll see a box to customize the settings of the Module. For more information on each Module and the settings of that module, visit the individual Builder Modules pages.


Content-module-settings.png


Step 4: Click Save Layout

To save the Layout and add it to the Layouts list, click "Save Layout."


Save-layout.png


Video: Creating Builder Layouts

Creating Builder Layouts


See also


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox