Builder Features

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
 
(29 intermediate revisions by one user not shown)
Line 1: Line 1:
= Responsive =
+
= Layouts=
  
Starting with version 4.0, Builder theme is responsive.
+
Builder’s Layout Engine (often referred to as the Layout Editor) provides the framework for designing and creating unlimited custom WordPress page layout structures, all from within the WordPress dashboard. [[Builder_Layouts:_Introduction|Layouts]] are page structures composed of the arrangement of page elements, or Modules. Each page on a Builder site can have its own unique Layout structure and arrangement of Modules.
  
= Widget Content Editor=
+
==Modules==
  
<blockquote>The Widget Content feature adds the use of an advanced editor to create widget content. A new Widget Content top-level menu is now on the back-end and allows for creation of widget content with the same interface as posts and pages. Once a Widget Content entry is saved, you can add the Widget Content widget to a sidebar location and select the desired Widget Content entry from the drop down to add that content to a sidebar.</blockquote>
+
[[Builder_Modules|Modules]] are page elements that are used to create Layouts. Modules can be added, removed, or easily modified for any number of Layout combinations.  
  
http://ithemes.com/two-great-new-features-for-ithemes-builder/
+
===Sidebars===
 +
[[Builder_Modules:_Sidebars|Sidebars]] are a Module option that adds an additional widget location to the Content, Footer, Header or Image Module. Sidebar widths are customized by assigning a width (in pixels) to each Sidebar location.
  
'''Note''': Since Widget Content entries are supposed to be placed as widgets in sidebars, they are not designed to have Preview functionality working. Forum topic: http://ithemes.com/forum/topic/18446-widget-content-preview-is-page-not-found/page__view__findpost__p__85999
+
=Views=
 +
[[Builder_Views:_Introduction|Views]] harness the power of Layouts by easily assigning individual Layouts to specific parts or pages of the site.
  
=Import/Export=
+
=Style Manager=
  
Builder provides the ability to export 'Layouts and Views' and/or 'Theme Settings' and import them to another WP site running Builder.
+
[[Builder_Style_Manager:_Introduction|Style Manager]] is a plugin for iThemes Builder that provides an easy-to-use interface to adjust basic styling of various site elements. Style Manger generates the CSS code and gives a preview of changes in real time to easily assign colors, change fonts, add borders or change spacing specifications for various site components.
  
To access this, go to WP dashboard -> My Theme -> Settings -> Import / Export (tab)
+
==Styles==
 +
Adjustments or changes made by Builder’s Style Manager can be grouped and organized into sets or [[Builder_Style_Manager:_Creating_Styles|Styles]]. Styles can then be applied to individual Layouts.
  
Screenshot:
+
=Extensions=
  
[[Image:Builder-import-export.png|400px|none]]
+
[[Builder_Extensions:_Introduction|Extensions]] extend or override the structure and/or style of a Child Theme by providing additional code that can change the content, add additional features or modify the styling of the Layout. Extensions are applied to either a Layout or a View. Builder ships with 6 Extensions designed for displaying a listing of entries like a Posts page, Category page or an Archive.
  
Tuesday, March 08, 2011
+
=Blocks=
  
This new feature was announced by Chris Jean recently, and we now have a full webinar recording in which Chris walks through how to use Import/Export, step by step.
+
Builder [[Builder_Blocks:_Introduction|Blocks]] operate as a plugin and package tools you need for niche site creation including custom post types, custom taxonomies and any needed custom widgets. Currently, Builder has two Blocks—Church and Restaurant. All Builder Blocks have a corresponding Child Theme that is provides design details.
  
In this webinar you will learn what the feature does, when you might want to use it, and when it makes more sense to use BackupBuddy. Chris also reviews all the other changes he incorporated into Builder 2.8.0.
+
= Responsive =
  
All iThemes Builder users should watch this video, especially those of you involved in web design and development as a career.
+
Starting with version 4.0, Builder includes [[Builder_Responsive:_Introduction|responsive support]]. This means your Builder site will fluidly adjust to accommodate different browser widths.
  
View the video here ==> http://ithemes.com/?p=4774
+
= Widget Content Editor=
  
=Custom Module Styles=
+
The [[Builder_Widget_Content:_Introduction|Widget Content]] feature adds the use of an advanced editor to create widget content. A new Widget Content top-level menu is now on the back-end and allows for creation of widget content with the same interface as posts and pages. Once a Widget Content entry is saved, you can add the Widget Content widget to a sidebar location and select the desired Widget Content entry from the drop down to add that content to a sidebar.
  
==Introduction==
+
=Import/Export=
  
Builder provides the ability to select a custom style for a module when the module is being edited in Layout Editor. The name of custom module style and corresponding CSS class are defined in child theme's functions.php.
+
With the [[Builder_Import_and_Export_Tool|Import / Export Tool]], Builder provides the ability to easily export Layouts and Views and/or Theme Settings and import them to another site running Builder.
 
+
Custom Module Styles are present by default in these child themes: Americana and its color variants, Blueprint, Ionic and its color variants, Classen, Encased.
+
 
+
Custom Module Styles can also be easily added to other Builder child themes.
+
 
+
==Example==
+
 
+
'''Objective''': To set a custom style to a specific image module so that the module's wrapper (which is full width by default in Americana) gets blue background that matches the image background.
+
 
+
The screenshot below shows how the site appears before we create and apply the custom style to the image module (top most in the layout):
+
 
+
[[Image:custom-module-style1-before.png|800px|none]]
+
 
+
===Step 1===
+
 
+
Editing child theme's functions.php.
+
 
+
<pre class="brush:php;">
+
builder_register_module_style( 'image', 'Blue Background (full width)', 'image-blue');
+
</pre>
+
 
+
has been added in it_builder_loaded() function.
+
 
+
<pre class="brush:php;">
+
if ( ! function_exists( 'it_builder_loaded' ) ) {
+
function it_builder_loaded() {
+
builder_register_module_style( 'widget-bar', 'Blue (full width)', 'widget-bar-blue' );
+
builder_register_module_style( 'navigation', 'Subnav Blue', 'subnav-blue' );
+
builder_register_module_style( 'html', 'Blue Background', 'html-blue' );
+
builder_register_module_style( 'footer', 'White Footer', 'footer-white');
+
builder_register_module_style( 'image', 'Blue Background (full width)', 'image-blue');
+
}
+
add_action( 'it_libraries_loaded', 'it_builder_loaded' );
+
}
+
</pre>
+
 
+
[[Image:Custom-module-style-functions-file.png|800px|none]]
+
 
+
===Step 2===
+
 
+
Editing child theme's style.css.
+
 
+
<pre class="brush:css;">
+
/*********************************************
+
Alternate: Blue background (full width)
+
*********************************************/
+
.image-blue-outer-wrapper {
+
background: #1e3240;
+
}
+
</pre>
+
 
+
has been added.
+
 
+
It is important to ''note the difference in the class name'': '''.image-blue-outer-wrapper''', not just image-blue.
+
 
+
[[Image:Custom-module-style-stylesheet.png|800px|none]]
+
 
+
===Step 3===
+
 
+
Editing the layout, then editing the image module, applying the style named "Blue Background (full width)", saving the module and finally the layout.
+
 
+
[[Image:Custom-module-style-dropdown.png|421px|none]]
+
 
+
The screenshot below shows how the site looks after our custom style has been applied to the image module:
+
 
+
[[Image:custom-module-style1-after.png|800px|none]]
+
 
+
==More Examples==
+
 
+
# http://ithemes.com/forum/index.php?/topic/9420-americana-theme-how-do-i-get-away-from-fixed-width-layout/#p44290
+
# http://ithemes.com/forum/index.php?/topic/10030-modification-to-americana-theme/#p47025
+
 
+
=Custom Widget Styles=
+
 
+
Builder provides a easy way to apply a style (Ex.: "Yellow Background") to a widget. This style's CSS (Ex.: "background: yellow;") is to be defined in style.css for a selector whose name is defined in functions.php.
+
 
+
[[Image:Custom-widget-style-after2.png|800px|none]]
+
 
+
Note:
+
 
+
# Only the Widget Content widget supports this option currently
+
# The support is already built into Builder, but like the Module Styles, the option will not appear unless the child theme provides some Widget Styles. Since none of the child themes do this yet, the option does not appear by default.
+
 
+
If you want to start using this in your own child themes with the realization that it will be limited to Widget Style widgets, you can add code like the following to your child theme's functions.php file:
+
 
+
<pre class="brush:php;">
+
if ( ! function_exists( 'custom_register_widget_styles' ) ) {
+
    function custom_register_widget_styles() {
+
        builder_register_widget_style( 'Style Name 1', 'css-class-1' );
+
        builder_register_widget_style( 'Style Name 2', 'css-class-2' );
+
        // Keep adding new Widget Styles as needed for your application
+
    }
+
    add_action( 'it_libraries_loaded', 'custom_register_widget_styles' );
+
}
+
</pre>
+
 
+
Then all you'll need to do is change "Style Name 1" and "Style Name 2" to be the names you want for the Widget Styles and "css-class-1" and "css-class-2" to be the classes you want to be applied for each Widget Style. Simply call "builder_register_widget_style" and provide a name and class for each Widget Style you wish to add.
+
 
+
'''Example'''
+
 
+
The above code has been added before the closing PHP tag in functions.php of BuilderChild-Blueprint theme.
+
 
+
[[Image:custom-widget-style-code.png|400px|none]]
+
 
+
Screenshots at Appearance -> Widgets before and after adding the above code:
+
 
+
<gallery widths=200px caption="Before and After">
+
File:Custom-widget-style-before.png
+
File:Custom-widget-style-after.png
+
</gallery>
+
 
+
The following has been added at the end of theme's style.css:
+
 
+
<pre class="brush:css;">
+
.css-class-1 {
+
background: yellow !important;
+
}
+
</pre>
+
 
+
or we can write more specific CSS like the following to avoid using !important:
+
 
+
<pre class="brush:css;">
+
.builder-module-sidebar .css-class-1 {
+
background: yellow;
+
}
+
</pre>
+
 
+
Screenshots of how the site appears before and after doing the above:
+
 
+
<gallery widths=200px caption="Before and After">
+
File:Custom-widget-style-before2.png
+
File:Custom-widget-style-after2.png
+
</gallery>
+
 
+
Henceforth any widget content widget that should get a yellow background can simply be set this style "Style Name 1" at Appearance -> Widgets.
+
  
 
= Duplicate Sidebar =
 
= Duplicate Sidebar =
  
See [[Duplicate Sidebar Widget]] and [http://ithemes.com/2010/12/27/builder-tip-use-duplicate-sidebar-widget-to-use-all-widgets-of-one-sidebar-in-another/ this blog post].
+
The [[Builder_Duplicate_Sidebar_Widget|Duplicate Sidebar Widget]] functionality offers an easy way to manage Layout that have the same widgets. Simply drop the Duplicate Sidebar widget into a sidebar that needs to have matching widgets, and select the desired sidebar from the "Sidebar to Duplicate" drop-down.
  
 
=Analytics and JavaScript Code=  
 
=Analytics and JavaScript Code=  
  
Builder makes it very easy to enter Google Analytics ID and custom JavaScript code that you might want to enter in <head> and/or just above </body> sections.
+
Builder makes it very easy to enter Google Analytics ID and custom JavaScript code by including this as an [[Builder_Basic_Settings:_Analytics_and_Javascript_Code|Analytics and Javascript Code Setting]].
 
+
[[File:Builder-settings-google-analytics.png|200px|none]]
+
 
+
Note: After entering Google Analytics ID in Builder settings,
+
 
+
'''1.''' it might take a day or two for Google Analytics to show tracking data in your account.
+
 
+
'''2.''' when page source of site is viewed,
+
 
+
''UA- number doesn't print directly in the page.''
+
 
+
We can see code similar to
+
 
+
<pre class="brush:html;">
+
<script type='text/javascript'>
+
(function() {
+
var bsl=document.createElement('script');
+
bsl.type='text/javascript';bsl.async=true;bsl.src='http://66.147.244.215/~hpgcom/hughes/wp-content/uploads/it-file-cache/builder-core/script.js?ver=3';
+
var se=document.getElementsByTagName('script')[0];se.parentNode.insertBefore(bsl,se);
+
})();
+
</script>
+
</pre>
+
  
Above code loads wp-content/uploads/it-file-cache/builder-core/script.js file which is where the Builder-generated scripts are.
+
<br />
 +
[[:Builder|← Back to Builder Codex Home]]

Latest revision as of 12:10, July 19, 2013

Contents

Layouts

Builder’s Layout Engine (often referred to as the Layout Editor) provides the framework for designing and creating unlimited custom WordPress page layout structures, all from within the WordPress dashboard. Layouts are page structures composed of the arrangement of page elements, or Modules. Each page on a Builder site can have its own unique Layout structure and arrangement of Modules.

Modules

Modules are page elements that are used to create Layouts. Modules can be added, removed, or easily modified for any number of Layout combinations.

Sidebars

Sidebars are a Module option that adds an additional widget location to the Content, Footer, Header or Image Module. Sidebar widths are customized by assigning a width (in pixels) to each Sidebar location.

Views

Views harness the power of Layouts by easily assigning individual Layouts to specific parts or pages of the site.

Style Manager

Style Manager is a plugin for iThemes Builder that provides an easy-to-use interface to adjust basic styling of various site elements. Style Manger generates the CSS code and gives a preview of changes in real time to easily assign colors, change fonts, add borders or change spacing specifications for various site components.

Styles

Adjustments or changes made by Builder’s Style Manager can be grouped and organized into sets or Styles. Styles can then be applied to individual Layouts.

Extensions

Extensions extend or override the structure and/or style of a Child Theme by providing additional code that can change the content, add additional features or modify the styling of the Layout. Extensions are applied to either a Layout or a View. Builder ships with 6 Extensions designed for displaying a listing of entries like a Posts page, Category page or an Archive.

Blocks

Builder Blocks operate as a plugin and package tools you need for niche site creation including custom post types, custom taxonomies and any needed custom widgets. Currently, Builder has two Blocks—Church and Restaurant. All Builder Blocks have a corresponding Child Theme that is provides design details.

Responsive

Starting with version 4.0, Builder includes responsive support. This means your Builder site will fluidly adjust to accommodate different browser widths.

Widget Content Editor

The Widget Content feature adds the use of an advanced editor to create widget content. A new Widget Content top-level menu is now on the back-end and allows for creation of widget content with the same interface as posts and pages. Once a Widget Content entry is saved, you can add the Widget Content widget to a sidebar location and select the desired Widget Content entry from the drop down to add that content to a sidebar.

Import/Export

With the Import / Export Tool, Builder provides the ability to easily export Layouts and Views and/or Theme Settings and import them to another site running Builder.

Duplicate Sidebar

The Duplicate Sidebar Widget functionality offers an easy way to manage Layout that have the same widgets. Simply drop the Duplicate Sidebar widget into a sidebar that needs to have matching widgets, and select the desired sidebar from the "Sidebar to Duplicate" drop-down.

Analytics and JavaScript Code

Builder makes it very easy to enter Google Analytics ID and custom JavaScript code by including this as an Analytics and Javascript Code Setting.


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox