Builder Image Module

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
 
(8 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]]
+
The '''Image Module''' can be used to add a static image to your Layout.
 
+
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==
+
==Adding an Image Module==
  
To add a Navigation Module to your Layout, click '''Add Module''' and select the Header Module from the list of available Modules.
+
To add an Image Module to your Layout, click '''Add Module''' and select the Image Module from the list of available Modules.
  
 
<br />
 
<br />
  
[[File:Add-Navigation-Module.png|800px|link=]]
+
[[File:Add-Image-Module.png|800px|link=]]
  
 
<br />
 
<br />
  
==Navigation Module Settings==
+
==Image Module Settings==
  
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.
+
Once the Image Module has been selected and added to the Layout, the '''Modify Image Module Settings''' box will appear. Customize the settings of the Image Module by selecting from the following options.
  
 
<br />
 
<br />
  
[[File:Navigation-Module-Settings.png|800px|link=]]
+
[[File:Image-Module-Settings.png|800px|link=]]
  
 
<br />
 
<br />
  
'''Available Navigation Module settings include:'''
+
'''Available Image Module settings include:'''
  
 
*'''Name''' - To help identify widget locations
 
*'''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
+
*'''Upload Image''' - Choose the location of your image file
*'''Style''' - **Varies by child theme** - If the active child theme (theme design) provides alternate styling options for this module, select the desired style.  
+
*'''Height''' - “Automatic,” “Use a height that preserves the image’s aspect ratio” or “Manual, select a height manually” (to set your own image height)
 +
*'''Link URL''' - Where the image will link
 +
*'''Sidebars''' - Widget areas to the left, right or on both sides of the image
 +
*'''Style''' - **Varies by child theme** - If the active child theme (theme design) provides [[Builder_Modules:_Alternate_Module_Styles|Alternate Module Style]] options for this module, select the desired style.  
  
 
<br />
 
<br />
Line 37: Line 38:
 
<br />
 
<br />
  
[[File:Navigation-module-Layout.png|800px|link=]]
+
[[File:Image-Module-in-Layout.png|800px|link=]]
 +
 
 +
<br />
 +
 
 +
==Full Window and No Spacing Image Module Styles==
 +
 
 +
Some Builder 4.0 child themes now supports new '''Full Window''' and '''No Spacing''' Image Module Styles.
 +
 
 +
*'''Full Window''' Image Module Style - adds a full-width image to the Layout
 +
*'''No Spacing''' Image Module Style - inserts an image without padding
  
==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==
+
==Generic CSS Class==
  
<code>.builder-module-navigation</code>
+
<code>.builder-module-image</code>
  
 
==See also==
 
==See also==

Latest revision as of 12:04, July 25, 2013

The Image Module can be used to add a static image to your Layout.


Contents

Adding an Image Module

To add an Image Module to your Layout, click Add Module and select the Image Module from the list of available Modules.


Add-Image-Module.png


Image Module Settings

Once the Image Module has been selected and added to the Layout, the Modify Image Module Settings box will appear. Customize the settings of the Image Module by selecting from the following options.


Image-Module-Settings.png


Available Image Module settings include:

  • Name - To help identify widget locations
  • Upload Image - Choose the location of your image file
  • Height - “Automatic,” “Use a height that preserves the image’s aspect ratio” or “Manual, select a height manually” (to set your own image height)
  • Link URL - Where the image will link
  • Sidebars - Widget areas to the left, right or on both sides of the image
  • Style - **Varies by child theme** - If the active child theme (theme design) provides Alternate Module Style options for this module, select the desired style.


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.


Image-Module-in-Layout.png


Full Window and No Spacing Image Module Styles

Some Builder 4.0 child themes now supports new Full Window and No Spacing Image Module Styles.

  • Full Window Image Module Style - adds a full-width image to the Layout
  • No Spacing Image Module Style - inserts an image without padding


Generic CSS Class

.builder-module-image

See also



← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox