Builder Modules: Alternate Module Styles

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Created page with "'''1.1''' WordPress built-in Menu Editor The '''Navigation Module''' offers a number of options for adding navigation ...")
 
 
(10 intermediate revisions by one user not shown)
Line 1: Line 1:
[[File:WordPres-menus.png|thumbnail|right|100px|link=|'''1.1''' WordPress built-in Menu Editor]]
+
Some Builder child theme designs include '''Alternate Module Styles''', or different built-in style options for Modules. Alternate Module Styles may include different background colors, font styles, borders, padding, etc. for individual Modules.  
 
+
The '''Navigation Module''' offers a number of options for adding navigation elements to your Layout. To get the most power out of this feature, use WordPress' built-in Menu Editor to create your menus. You can then select to use one of these menus in the Navigation Module Settings. (Figure 1.1)
+
  
 
<br />
 
<br />
  
==Adding the Navigation Module==
+
__TOC__
  
To add a Navigation Module to your Layout, click '''Add Module''' and select the Header Module from the list of available Modules.
+
==Selecting Alternate Module Styles==
  
<br />
+
When adding a Module to your Layout, available Alternate Module Styles will be listed in the "Styles" drop-down of the "Modify Module Settings" box.
  
[[File:Add-Navigation-Module.png|800px|link=]]
+
From there, select the Alternate Module Style of your choice.
  
 
<br />
 
<br />
  
==Navigation Module Settings==
+
[[File:Alternate-Module-Styles.png|800px|link=]]
 
+
Once the Navigation Module has been selected and added to the Layout, the '''Modify Navigation Module Settings''' box will appear. Customize the settings of the Navigation Module by selecting from the following options.
+
  
 
<br />
 
<br />
  
[[File:Navigation-Module-Settings.png|800px|link=]]
+
==Advanced: Building a Custom Alternate Module Style==
 
+
<br />
+
 
+
'''Available Navigation Module settings include:'''
+
 
+
*'''Name''' - To help identify widget locations
+
*'''Navigation Type''' - A populated list of your WordPress Menus or Legacy Menu Types, such as Builer Settings categories, pages or WordPress pages
+
*'''Style''' - **Varies by child theme** - If the active child theme (theme design) provides alternate styling options for this module, select the desired style.
+
 
+
<br />
+
 
+
Click the '''Save''' button to save the Navigation Module Settings. You'll now see the Navigation Module added to your Layout, denoting the type of navigation used by the Module.
+
 
+
<br />
+
 
+
[[File:Navigation-module-Layout.png|800px|link=]]
+
 
+
==Advanced Notes==
+
The Legacy Menu Types are present as a fallback in case you have not configured any menus in the Menu Editor. The Builder menu types can be configured in the Builder's Theme Settings. The WordPress Pages option uses WordPress' built-in <code>wp_list_pages</code> function to show a listing of all of your site's pages.
+
 
+
==CSS Class==
+
  
<code>.builder-module-navigation</code>
+
Visit the [[Builder_Custom_Module_Styles:_Introduction|Custom Module Styles]] page for more information on building a custom Alternate Module Style
  
 
==See also==
 
==See also==

Latest revision as of 16:07, July 24, 2013

Some Builder child theme designs include Alternate Module Styles, or different built-in style options for Modules. Alternate Module Styles may include different background colors, font styles, borders, padding, etc. for individual Modules.


Contents


Selecting Alternate Module Styles

When adding a Module to your Layout, available Alternate Module Styles will be listed in the "Styles" drop-down of the "Modify Module Settings" box.

From there, select the Alternate Module Style of your choice.


Alternate-Module-Styles.png


Advanced: Building a Custom Alternate Module Style

Visit the Custom Module Styles page for more information on building a custom Alternate Module Style

See also



← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox