<?php 
/**
* The template for displaying the admin "Adding Content" tab.
*
* @package WordPress
 * @subpackage Edition
* @since Edition 1.0
*/
global $themewich_theme_info; ?>
<style>
code {
    white-space: pre;
}
</style>
		
		<div class="bootstrap-wrapper">
		<div class="container bs-docs-container">
		<div class="row">
		<div class="col-md-7 doc-content" role="main">
		
		<!-- Getting started
						    ================================================== -->
		<div class="bs-docs-section">
		    <h1 id="adding-content" class="page-header">Adding Content</h1>
		    <p class="lead"> 
          Once you've completed the initial set up you'll need to add content to your site. 
			  The following passages instruct you on how to add posts, images, widgets and sections. 
			  As always, if you have any questions not covered in this help file please visit our <a href="https://themewich.com/theme-support/" target="_blank">Support System</a>. </p>
		</div>
		<!-- .bs-docs-section --> 
		
		<!-- Adding Posts
						    ================================================== -->
		<div class="bs-docs-section">
                  <h1 id="adding-posts" class="page-header"> Adding Posts <small>Adding posts to your site.</small></h1>
                  <p> To add a new post, navigate to <strong>Posts > Add New</strong>. Enter the
                	title, post content, assign various categories, upload images, 
                  add video, or add review elements to the post. Once you've created a new post be sure to <kbd>Save Draft</kbd> or <kbd>Publish</kbd>, 
                  in order to save the changes. </p>
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/publish-post.png" class="img-responsive" /></p>
                  
                  <h2 id="featuring-posts">Featuring a Post</h2>
                  <p>Just below the post content area, under <strong>Featured</strong> you can select if you want to feature your post. Once you've selected 
                  posts to be featured, navigate to <strong>Featured Order</strong> and drop and drag the posts in the order you'd like them to appear.</p>
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/featured-post.png" class="img-responsive" /></p>
                  
                  <h1 id="post-options">Post Options</h1>
                  <p>Post options enable you to further customize and enhance your post on a per-post basis. 
                  
                  <h3 id="media-post">Media Post</h3>
                  <p>Enter in a <a href="http://codex.wordpress.org/Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F" target="_blank">Supported URL</a>, shortcode, or embed code 
                    for images, videos, maps or any other kind of media that will replace the posts's featured image.
                    This will replace your featured image and change the layout on the single post page with whatever media URL or embed code is entered. Note: The post's featured 
                  image will still appear on other pages. 
                  </p>

                  <h3 id="supported-urls">Media URLs</h3>
                  <p> Many times, you don't need to enter any complicated embed code. For
                    example, to use a youtube video, you only need to enter the video URL:</p>
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/media-post-url.png" class="img-responsive" /></p>
                  Click the link <a href="http://codex.wordpress.org/Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F" target="_blank">Supported URL</a> for a full 
                  list of URLs that can be used.</p>

                  <h3 id="embed-codes">Media Embed Codes</h3>
                  <p>
                    If you can't find the URL for the service listed, you can use embed code instead. For example, you can add a google map by copying and pasting the embed
                  code into this box. Don't forget to change the width to <code>100%</code>. 
                  </p>
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/media-post-embed.png" class="img-responsive" /></p>

                  <h3 id="shortcodes">Media Shortcodes</h3>
                  <p>
                    Finally, you can use shortcodes to add media to the featured area. Don't forget, tou can use WordPress' gallery shortcode to add a slideshow here
                    too. Feel free to use shortcodes from 3rd party plugins as well (like NextGen Gallery for example) or even your Themewich Shortcodes. 
                    Just enter the shortcode found in the "Text" view of the content editor. 
                  </p> 
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/media-post-shortcode.png" class="img-responsive" /></p>
                  
                  <h3 id="post-subtitle">Post Subtitle</h3>
                  <p>Enter an optional post subtitle which will appear just above the post content and below the featured image. Note: This subtitle can be great for SEO.</p>
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/post-subtitle.png" class="img-responsive" /></p>
                  
                  <h3 id="customize-post">Customize Post</h3>
                  <p>Customize a post with the options listed below. Note: This overwrites post settings saved in the Theme Options panel and makes the changes to the
                  specific post only. To adjust the post settings for all posts visit <strong>Theme Options > Post Settings</strong>.</p>
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/customize-post.png" class="img-responsive" /></p>
                  <p><strong>Customization Options:</strong></p>
                  <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	  <tr>
                                    <td><strong>Image Size</strong></td>
                                    <td>Choose whether to display the featured image as a full width or regular width image at the top of the post.</td>
                                </tr>
                                <tr>
                                    <td><strong>Sharing</strong></td>
                                    <td>Choose to display sharing options for the post, they will show to the right of the content.</td>
                                </tr>
                                <tr>
                                    <td><strong>Related</strong></td>
                                    <td>Choose to display related posts at the bottom of your posts.</td>
                                </tr>
                            </tbody>
                    </table>
                  
                  <h3 id="review-post">Review Post</h3>
                  <p>Choose whether or not you'd like to have a review in your post. Once you've selected a post to include a review begin filling out the review criteria 
                  and customization options. See below for information on those options.
                  </p>
               	<p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/review-post.png" class="img-responsive" /></p>
                  <p><strong>Review criteria and customizations:</strong></p>
                 <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	  <tr>
                                    <td><strong>Review Placement</strong></td>
                                    <td>Select where you want your review to show up on the bottom of the post or the top and bottom of the post.</td>
                                </tr>
                                <tr>
                                    <td><strong>Review Criteria</strong></td>
                                    <td>Click <button>Add Review Criteria</button> to add to your review. Enter the criteria and number rating. 
                                    You can drag and drop the order to your liking.</td>
                                </tr>
                                <tr>
                                    <td><strong>Review Title</strong></td>
                                    <td>Appears below the overall rating, enter an optional title such as "Great", "Excellent" or "Poor". </td>
                                </tr>
                                <tr>
                                    <td><strong>Review Summary</strong></td>
                                    <td>A couple sentence summary of the review that will appear within the review box.</td>
                                </tr>
                                <tr>
                                    <td><strong>Breakdown Title</strong></td>
                                    <td>Enter an optional title for your breakdown area which will appear just above the review box.</td>
                                </tr>
                                <tr>
                                    <td><strong>Breakdown Post Title</strong></td>
                                    <td>Choose whether to add the post title to your breakdown text.</td>
                                </tr>
                           </tbody>
                    </table>
                  
            </div>  
            <!--.bs-docs-section -->  
            
            <!-- Shortcodes
						    ================================================== -->
		<div class="bs-docs-section">
                  <h1 id="shortcodes" class="page-header">Shortcodes</h1>
                  <p>The theme comes with a number of shortcodes allowing you to add styled content to your site with little effort. Shortcodes can embed 
                  files or create objects that would normally require lots of complicated code in just one line. 
                  </p>
                  <p>Conveniently, the available shortcodes have been included as buttons in the WYSIWYG content editor. When creating a page or post, click 
                  the desired shortcode icon to insert your code. Simply hover over the buttons to see what shortcodes you’ll be inserting.
                  </p>
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/shortcode-location.png" class="img-responsive" /></p>
                  <div class="bs-callout bs-callout-info" id="wordpress-install">
                    <p>
                        <span class="glyphicon glyphicon-info-sign"></span>
                        Be sure you have installed the Shortcode plugin by visiting the section <a href="?page=theme-help&amp;tab=setup#shortcode-setup">Plugin Setup</a> 
                        under the Setup tab of Theme Help.
                    </p>
                  </div>
                  
                  <h2>Types of Shortcodes</h2>
                  <p>Below are explanations for the various types of custom shortcodes that come with the theme.</p>
                  
                  <h3>Column Shortcodes</h3>
                  <p>Column shortcodes give you the versatility of creating variable layouts on a page. You can break paragraphs, images, and even other shortcodes into columns 
                  of your chosing. Columns are also responsive, and will automatically format themselves for mobile viewing.
                  </p>
                  <p id="column-example"><strong>Note: You must end each set of columns with a parameter position of <code>last</code>.</strong></p>
                  <p class="bs-example">
<code>[tw-column width="one-half"] Insert you content here [/tw-column]
[tw-column width="one-half" position="last"] Insert you content here [/tw-column]</code>
                  </p>
                  <p>Columns go in halfs, thirds, fourths, fifths and sixths.</p>
                  <div class="bs-example">
                    <div class="table-responsive">
                      <table class="table table-striped">
                        <thead>
                         <tr>
                           <th style="min-width:200px;">Column</th>
                           <th>Last Column of the Row:</th>
                         </tr>
                        </thead>
                        <tbody>
                         <tr>
                            <td><code>[tw-column width="one-half"]content[/tw-column]</code></td>
                            <td><code>[tw-column width="one-half" position="last"]content[/tw-column]</code></td>
                         </tr>
                         <tr>
                           <td><code>[tw-column width="one-third"]content[one_third]</code></td>
                            <td><code>[tw-column width="one-third" position="last"]content[/tw-column]</code></td>
                         </tr>
                         <tr>
                           <td><code>[tw-column width="one_fourth"]content[/tw-column]</code></td>
                            <td><code>[tw-column width="one-fourth" position="last"]content[/tw-column]</code></td>
                         </tr>
                         <tr>
                            <td><code>[tw-column width="two-third"]content[/tw-column]</code></td>
                            <td><code>[tw-column width="two-third" position="last"]content[/tw-column]</code></td>
                         </tr>
                         <tr>
                            <td>...etc.</td>
                            <td>...etc.</td>
                         </tr>
                         </tbody>
                      </table>
                    </div>
                  </div>
                <table class="table table-striped">
                    <thead>
                     <tr>
                       <th style="min-width:200px;">Parameters:</th>
                       <th>Options:</th>
                     </tr>
                    </thead>
                    <tbody>
                     <tr>
                        <td><strong>Width</strong></td>
                        <td>The width of the columns, such as <code>one-half</code>,<code>one-third</code>,<code>one-fifth</code> etc.</td>
                     </tr>
                     <tr>
                       <td><strong>Position</strong></td>
                        <td>Enter a position of<code>last</code>, only for the final column in the set, see <a href="#column-example">example</a> above.</td>
                     </tr>
                     </tbody>
                  </table>
                  
                  
                  <h3>Button Shortcodes</h3>
                  <p>These button shortcodes allows you to insert a button into your content and can be linked to the destination URL of your choice.</p>
                  <p class="bs-example">
<code>[tw-button size="large" background="#000000" color="gray" target="_blank" link="#"]Button[/tw-button]
[tw-button size="small" background="#000000" color="" target="_self" link="#"]Submit[/tw-button]</code>
                  </p>
                  <table class="table table-striped">
                    <thead>
                     <tr>
                       <th style="min-width:200px;">Parameters:</th>
                       <th>Options:</th>
                     </tr>
                    </thead>
                    <tbody>
                     <tr>
                        <td><strong>size</strong></td>
                        <td>Select the size of the button from <code>small</code>,<code>medium</code>,<code>large</code>.</td>
                     </tr>
                     <tr>
                       <td><strong>background</strong></td>
                        <td>Enter an optional background color for the button.</td>
                     </tr>
                     <tr>
                       <td><strong>color</strong></td>
                        <td>Select the color for the button, <code>gray</code>,<code>blue</code>,<code>red</code> etc. When left blank it uses the theme color.</td>
                     </tr>
                     <tr>
                       <td><strong>target</strong></td>
                        <td>The button link.<code>_blank</code> opens in a new window, <code>_self</code> opens in the same window.</td>
                     </tr>
                     <tr>
                       <td><strong>link</strong></td>
                        <td>Enter the button link between.</td>
                     </tr>
                     </tbody>
                  </table>
                  
                  <h3>Titled Divider Shortcode</h3>
                  <p>This shortcode lets you place a divider anywhere. The divider will automatically match the width of it’s container. For instance, if you want 
                  a half-width divider, place it inside a one half column shortcode.
                  <p class="bs-example"> 
<code>[divider]The Title Here[/divider]</code>
                  </p>
              
                  <h3>Lightbox Shortcode</h3>
                  <p>A lightbox shortcode creates a link to a PrettyPhoto lightbox. The contents of the lightbox popup are indicated with the 
                  link="http://www.example.com".
                  </p>
                  <p class="bs-example">
<code>[lightbox link="http://www.example.com/image.jpg"]Link text or image here.[/lightbox]</code>
                  </p>
                  <p>
 		      Inline content Follows this form:
<code>[lightbox link="#inline-content"]Link Text[/lightbox]
<div id="inlinecontent" style="display:none">This is inline content</div></code><!-- This needs to be fixed -->
                  </p>
                  
                  <h3>Tabs Shortcode</h3>
                  <p>The featured tabs shortcode allows you to insert content into multiple featured tabs. The tabs can be viewed in by the user. You can include
                   any number of tabs but you must ensure the number of titles and tabs match
                  </p>
                  <p class="bs-example">
<code>[tabs tab1="Tab 1 Title" tab2="Tab 2 Title" tab3="Tab 3 Title"]
[tab]Tab 1 Content[/tab]
[tab]Tab 2 Content[/tab]
[tab]Tab 3 Content[/tab]
[/tabs]</code>
                  </p>
                  
                  <h3>Posts Shortcode</h3>
                  <p>
                    The posts shorcode allows you to display recent posts.
                  </p>
                  <p class="bs-example">
<code>[tw-posts title="Title" number="4" category="reviews" content="yes" type=""][/tw-posts]</code>
			           </p>
                  
                  <h3>Social Icon Shortcodes</h3>
                  <p>Add elegant icon links to your favorite social networks.</p>
                  <p class="bs-example">
<code>[social icon="twitter" url="http://twitter.com/#" title="Follow Us" target="blank"][/social]</code>
			</p>
                  <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                     <tr>
                       <th style="min-width:200px;">Parameters:</th>
                       <th>Options:</th>
                     </tr>
                    </thead>
                    <tbody>
                     <tr>
                        <td><strong>icon</strong></td>
                        <td>"twitter", "facebook", "google","dribbble", "linkedin" , "pinterest", and "rss"</td>
                     </tr>
                     <tr>
                       <td><strong>target</strong></td>
                        <td>"blank" - Opens in a new window. "self" - Opens in the current window</td>
                     </tr>
                     <tr>
                       <td><strong>title</strong></td>
                        <td>For hover and SEO purposes. Examples: "Follow Us", "Pin it" or "Like on Facebook"</td>
                     </tr>
                     <tr>
                        <td><strong>url</strong></td>
                        <td>Be sure this begins with http://</td>
                     </tr>
                     <tr>
                        <td><strong>class</strong></td>
                        <td>Give a class to your social icon for advanced styling purposes</td>
                     </tr>
                     </tbody>
                  </table>
                  </div>
                  
                  <h3>Accordion Shortcode</h3>
                  <p>Add accordions your theme, a clickable region where only one section can be opened at a time. Add to any page, section or widget area. 
                  The accordion section MUST be wrapped in an accordion shortcode.
                  </p>
                  <p class="bs-example">
<code>[accordion]
[accordion_section title="Title"]Accordion Section Content Here.[/accordion_section]
[accordion_section title="Title"]Accordion Section Content Here. [/accordion_section]
[accordion_section title="Title"]Accordion Section Content Here.[/accordion_section]
[/accordion]</code>
			</p>
                  
                  <h3>Toggle Shortcode</h3>
                  <p>Add toggles your theme, a clickable region where mulitple sections can be opened at a time. Add to any page, section or widget area.</p>
                  <p class="bs-example">
<code>[toggle title="title"]Toggle Content Here.[/toggle]
[toggle title="title"]Toggle Content Here.[/toggle]
[toggle title="title"]Toggle Content Here.[/toggle]</code>
			</p>
                  
                  <h3>Pricing Table Shortcode</h3>
                  <p>The pricing table shortcode allows you to add pricing tables with a variety of layouts and options. A list can be added inside the table. 
                  List items are a great way to showcase features. <code>[pricing]</code> shortcodes must be wrapped in a <code>[pricing_table]</code> shortcode.
                  </p>
                  <p class="bs-example" style="overflow-x:scroll;">
<code>
<?php $pricing = '[pricing_table]
  [pricing size="one-half" featured="no" plan="Silver" cost="$10" per="month" button_url="#" button_text="Purchase" button_target="self"]
    <ul>
      <li>Feature</li>
      <li>Feature</li>
    </ul>
  [/pricing]
  [pricing size="one-half" position="last" featured="yes" plan="Gold" cost="$10" per="month"
  button_url="#" button_text="Purchase" button_target="self"]
    <ul>
      <li>Feature</li>
      <li>Feature</li>
    </ul>
  [/pricing]
[/pricing_table]';

echo htmlspecialchars($pricing); ?>
</code>
               
			</p>
                
                  <p>Customize your pricing table by adding the following parameters.</p>
                  <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                     <tr>
                       <th style="min-width:200px;">Parameters:</th>
                       <th>Options:</th>
                     </tr>
                    </thead>
                    <tbody>
                     <tr>
                        <td><strong>featured</strong></td>
                        <td>"no" - will show default color "yes" - will show in highlight color</td>
                     </tr>
                     <tr>
                       <td><strong>cost</strong></td>
                        <td>List the price for your itemsuch as "$10" or "Free".</td>
                     </tr>
                     <tr>
                       <td><strong>per</strong></td>
                        <td>List the frequency such as "month" or "year".</td>
                     </tr>
                     <tr>
                        <td><strong>position</strong></td>
                        <td>"last" - lists the table last if there is more than one table.</td>
                     </tr>
                     <tr>
                        <td><strong>plan</strong></td>
                        <td>Give the plan a name such as "Gold" or "Limited".</td>
                     </tr>
                     <tr>
                        <td><strong>size</strong></td>
                        <td>Similar to column sizing, "one-half" - default, "one-third", or "one-forth"</td>
                     </tr>
                     <tr>
                        <td><strong>button_color</strong></td>
                        <td>"red", "orange", "yellow", "green", "blue" or "purple"</td>
                     </tr>
                     <tr>
                        <td><strong>button_text</strong></td>
                        <td>"Purchase" or "Start Trial", for example.</td>
                     </tr>
                     <tr>
                        <td><strong>button_target</strong></td>
                        <td>"blank" - opens in a new window. "self" - open in the current window.</td>
                     </tr>
                     <tr>
                        <td><strong>button_url</strong></td>
                        <td>Link your table to a new page with a url.</td>
                     </tr>
                     </tbody>
                  </table>
                  </div>
                  
                  
                  
               
                  
                  
                  
                  
            </div>  
            <!--.bs-docs-section -->  
                    
            <!-- Adding Sections
						    ================================================== -->
		<div class="bs-docs-section">
                  <h1 id="sections" class="page-header">Sections <small>Flexible Content Areas</small></h1>
                  <div class="bs-callout bs-callout-info">
                      <p><span class="glyphicon glyphicon-info-sign"></span>
                          Sections are flexible content areas you can use throughout your site. 
                          Once you create sections, you can add them to any page you like, or even use the same section
                          in multiple pages.
                      </p>
                  </div>
                  <h2 id="creating-sections">Creating Sections</h2>
                  <p>To create a section, navigate to <strong>Section > Add New</strong>. Enter the title of your section. This title is for informational purposes and
                     will NOT display on the site but rather to keep track of your Sections on the WordPress Admin backend of the theme. The display title and display subtitle
                     will appear on the front end of your site, they are both optional.
                  </p>
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/section-titles.png" class="img-responsive" /></p>
                  <p>Next you will need to select the type of section you'd like to create. You can learn more about the <a href="#types-sections">types of sections</a> below.
                  </p>
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/section-types.png" class="img-responsive" /></p>
                  <p>Once you've chosen the type of Section and customized it according to the descriptions below, click <kbd>Publish</kbd>
                  to save and create your Section. See the passage <a href="#adding-sections">Adding Sections</a> to began placing your Sections on pages.
                  </p>
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/section-publish.png" class="img-responsive" /></p>
                  
                  
                  <h2 id="types-sections">Types of Sections</h2>
                  <p class="lead">There are seven different types of Sections you can create, each with their own features and options. Below are explanations 
                  for each type of Section.</p>

                <h3 id="slideshow">Slideshow</h3>
                <p>
                 The slideshow section can display posts in a full-width slideshow or in a carouselformat.
                </p>
                <div class="bs-callout bs-callout-info">
                      <p><span class="glyphicon glyphicon-info-sign"></span>
                          This slideshow only shows posts with images.
                      </p>
                  </div>
                <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                     <tr>
                       <th style="min-width:200px;">Option</th>
                       <th>Description</th>
                     </tr>
                    </thead>
                    <tbody>
                     <tr>
                       <td><strong>Full Width Slideshow Type</strong></td>
                       <td>Choose between a Tabbed or Carousel Slideshow.</td>
                     </tr>
                     <tr>
                       <td><strong>Autoplay</strong></td>
                       <td>Select whether or not you want the slideshow to automatically play by default.</td>
                     </tr>
                     <tr>
                       <td><strong>Type of Post</strong></td>
                       <td>Select whether you want the most recent or featured posts to display.</td>
                     </tr>
                     <tr>
                       <td><strong>Posts to Show</strong></td>
                       <td>Narrow down the displayed posts even further by selecting a specfic Category or Tag.
                       </td>
                     </tr>
                     <tr>
                       <td><strong>Category or Tag</strong></td>
                       <td>If you decided to show a specific Category or Tag, choose one or more from the list of those already created by holding
                        shift.</td>
                     </tr>
                     <tr>
                       <td><strong>Number of Posts</strong></td>
                       <td>Enter the maximum number of posts you want displayed on your page.</td>
                     </tr>   
                     <tr>
                       <td><strong>Carousel Width</strong><br /><small>(Carousel Only)</small></td>
                       <td>Select either a full width which spans the entire page or fixed width which matches the width of the content.</td>
                     </tr>   
                      <tr>
                       <td><strong>Carousel Item Size</strong><br /><small>(Carousel Only)</small></td>
                       <td>Select either a square image or letterbox image size.</td>
                     </tr>                                                                                    
                    </tbody>
                  </table>
                </div>
                
                <h3 id="grid-section">Grid</h3>
                  <p>
                  The grid section displays a grid of posts, with either a sidebar or full-width formats.
                  </p>                 
                  <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                     <tr>
                       <th style="min-width:200px;">Option</th>
                       <th>Description</th>
                     </tr>
                    </thead>
                    <tbody>
                     <tr>
                        <td><strong>Grid Type</strong></td>
                        <td>Choose between full width or a grid with a sidebar.</td>
                     </tr>
                     <tr>
                       <td><strong>Type of Post</strong></td>
                        <td>Select whether you want the most recent or featured posts to display.</td>
                     </tr>
                     <tr>
                       <td><strong>Posts to Show</strong></td>
                        <td>Narrow down the displayed posts even further by selecting a specfic Category or Tag.</td>
                     </tr>
                     <tr>
                        <td><strong>Category or Tag</strong></td>
                        <td>If you decided to show a specific Category or Tag, choose one or more from the list of those already created by holding
                        shift. </td>
                     </tr>
                     <tr>
                       <td><strong>Number of Posts</strong></td>
                       <td>Enter the maximum number of posts you want displayed on your page.</td>
                     </tr>   
                     <tr>
                        <td><strong>Ajax Pagination</strong></td>
                        <td>Turn Ajax on to make more pages available, off hides pagination and all posts will appear on one page.</td>                     </tr>   
                      <tr>
                       <td><strong>Grid Sidebar</strong><br /><small>(Grid Sidebar Section Only)</small></td>
                        <td>Add widgets to the Grid Section sidebar. In a new tab visit <strong>Appearance > Widgets</strong> and drag Widgets you'd like to use into the Grid Section Sidebar area.
                        <p class="bs-example" id="grid-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/section-widget-area.png" class="img-responsive" /></p>
                          The widgets are availble to be added to the Grid Sidebar (Note: you may need to refresh the Add Secton tab), hover over the widget and click <kbd>+</kbd>to add. Widgets in the right box are added to the Section sidebar. 
                         To remove from section sidebar, hover and click <kbd>-</kbd>.
                         <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/grid-section.png" class="img-responsive" /></p>
                        </td>
                     </tr>                                                                                    
                    </tbody>
                  </table>
                </div>

                        
                  <!-- Posts Section-->
                  <h3 id="post-section">Regular Post</h3>
                  <p>
                      The post section displays a posts in a two column format.
                  </p>                 
                  <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                     <tr>
                       <th style="min-width:200px;">Option</th>
                       <th>Description</th>
                     </tr>
                    </thead>
                    <tbody>
                     <tr>
                       <td><strong>Type of Post</strong></td>
                        <td>Select whether you want the most recent or featured posts to display.</td>
                     </tr>
                     <tr>
                       <td><strong>Posts to Show</strong></td>
                        <td>Narrow down the displayed posts even further by selecting a specfic Category or Tag.</td>
                     </tr>
                     <tr>
                        <td><strong>Category or Tag</strong></td>
                        <td>If you decided to show a specific Category or Tag, choose one or more from the list of those already created by holding
                        shift. </td>
                     </tr>
                     <tr>
                       <td><strong>Number of Posts</strong></td>
                       <td>Enter the maximum number of posts you want displayed on your page.</td>
                     </tr>   
                     <tr>
                        <td><strong>Ajax Pagination</strong></td>
                        <td>Turn Ajax on to make more pages available, off hides pagination and all posts will appear on one page.</td>                     </tr>   
                      <tr>
                       <td><strong>Posts Section Sidebar</strong><br /><small>(Posts Sidebar Section Only)</small></td>
                        <td>Add widgets to the Post Section sidebar. In a new tab visit <strong>Appearance > Widgets</strong> and drag the widgets you'd like to use into the Posts Section
                        Sidebar area, they are now availble for the sidebar in your post section. Refresh the Add Section tab and the widgets should be availble. Click
                        <kbd>+</kbd> to add them into the section's sidebar, they will now appear in the right box. To remove from the side hover and click <kbd>-</kbd> and
                        the widget will now only be listed in the left side box. (Note: see <a href="#grid-example">Grid Section</a> for image examples.)</td>
                     </tr>                                                                                    
                    </tbody>
                  </table>
                </div>
         
                <h3 id="full-feature-section">Full Post</h3>
                  <p>
                      A full width section that features a post, category, or tag.
                  </p>                 
                  <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                     <tr>
                       <th style="min-width:200px;">Option</th>
                       <th>Description</th>
                     </tr>
                    </thead>
                    <tbody>
                     <tr>
                       <td><strong>Type of Post</strong></td>
                        <td>Select whether you want the most recent or featured posts to display.</td>
                     </tr>
                     <tr>
                       <td><strong>Posts to Show</strong></td>
                        <td>Narrow down the displayed posts even further by selecting a specfic Category or Tag.</td>
                     </tr>
                     <tr>
                        <td><strong>Category or Tag</strong></td>
                        <td>If you decided to show a specific Category or Tag, choose one or more from the list of those already created by holding
                        shift. </td>
                     </tr>
                     <tr>
                       <td><strong>Number of Posts</strong></td>
                       <td>Enter the maximum number of posts you want displayed on your page.</td>
                     </tr>                                                                                  
                    </tbody>
                  </table>
                </div>
                
                   <h3 id="full-image-link">Full Image Link</h3>
                  <p>
                      A full image section that can link to a specific post, pages and more.
                  </p>                 
                  <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                     <tr>
                       <th style="min-width:200px;">Option</th>
                       <th>Description</th>
                     </tr>
                    </thead>
                    <tbody>
                     <tr>
                       <td><strong>Full Feature Type</strong></td>
                        <td>Select whether the image should link to a post, page, category, tag or decide not to link the image at all.</td>
                     </tr>
                     <tr>
                       <td><strong>Featured Link</strong></td>
                        <td>Depending what Full Feature Type you've selected, choose which page, post, category or tag to feature on the section.</td>
                     </tr>
                     <tr>
                        <td><strong>Section Background Image</strong></td>
                        <td>Upload or select from your media gallery a background image to appear in the section.</td>
                     </tr>
                     <tr>
                       <td><strong>Headline</strong></td>
                       <td>Enter an optional headline for the image section.</td>
                     </tr>  
                      <tr>
                       <td><strong>Subheadline</strong></td>
                       <td>Enter an optional subheadline for the image section.</td>
                     </tr>  
                     <tr>
                       <td><strong>Button Text</strong></td>
                       <td>If you choose to link to a post, enter the text you'd like to appear on the button.</td>
                     </tr>                                                                               
                    </tbody>
                  </table>
                </div>
                
                
                <h3 id="ad-section">Ad Section</h3>
                  <p>Create an Advertisement Section for any page or post.</p>                 
                  <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                     <tr>
                       <th style="min-width:200px;">Option</th>
                       <th>Description</th>
                     </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td><strong>Ad Type</strong></td>
                        <td>Select the method for imputing your ad, between pasting code or uploading an image.</td>
                      </tr>
                     <tr>
                       <td><strong>Ad Code</strong></td>
                        <td>Copy and paste your ad code here. The recommended size is leaderboard or 728x90.</td>
                     </tr>
                     <tr>
                       <td><strong>Ad Image</strong></td>
                        <td>Click <kbd>Add Image</kbd> to upload, the recommended size is 728x90. </td>
                     </tr>
                     <tr>
                        <td><strong>Ad URL</strong></td>
                        <td>Link the image from the URL, be sure it begins with <strong>http://</strong>.</td>
                     </tr>                                                                                 
                    </tbody>
                  </table>
                </div>
                  
                  
                  <h3 id="content-section">Content</h3>
                  <p>Create a Section with text content. You can add shortcodes, images and text.</p>             
                  <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                     <tr>
                       <th style="min-width:200px;">Option</th>
                       <th>Description</th>
                     </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td><strong>Content Layout</strong></td>
                        <td>Choose between a full width or sidebar layout for the content section.</td>
                      </tr>
                     <tr>
                       <td><strong>Section Content</strong></td>
                        <td>Use the text box to type in the content you wish to display in the section. It can be customized with 
                        WordPress shortcodes or by adding media.</td>
                     </tr>
                      <tr>
                       <td><strong>Content Section Sidebar</strong><br /><small>(Content Sidebar Section Only)</small></td>
                        <td>Add widgets to the Content Section sidebar. In a new tab visit <strong>Appearance > Widgets</strong> and drag the widgets you'd like to use into the Content Section
                        Sidebar area, they are now availble for the sidebar in your post section. Refresh the Add Section tab and the widgets should be availble. Click
                        <kbd>+</kbd> to add them into the section's sidebar, they will now appear in the right box. To remove from the side hover and click <kbd>-</kbd> and
                        the widget will now only be listed in the left side box. (Note: see <a href="#grid-example">Grid Section</a> for image examples.)</td>
                     </tr>                                                                                 
                    </tbody>
                  </table>
                </div>
                  	
                  
                  <h3 id="adding-sections">Adding and Ordering Sections</h3>
                  <div class="bs-callout bs-callout-info">
                      <p><span class="glyphicon glyphicon-info-sign"></span>
                          Before your sections will show up on your site, you need to add them to your page.
                      </p>
                  </div>
                  <p>Navigate to any page where you would like to add your newly created Sections. Scroll down the page part way to find 
                  <strong>Page Sections</strong> under the <strong>Page Options</strong> dropdown.
                  </p> 
                  <p>Note: On the Homepage template under the dropdown <strong>Homepage Layout</strong>, there are two options, 
                  <strong>Custom Layout</strong> and <strong>Default Layout</strong>. The Default layout comes with the theme and sets up the Homepage Sections to appear 
                  as they do in the Theme Demo. Custom Layout allows you to change the order and types of sections that appear on the homepage.
                  </p> 
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/homepage-layout.png" class="img-responsive" /></p>
                  <p>To add and arrange your own Section select the <strong> Custom Layout</strong>. A list of created Sections will appear by display title. Add Sections to 
                  the page by by clicking <kbd>+</kbd>, when they appear in the right column box they have been succesfully added to the post or page. To rearrange them simply
                  drop and drag. Remove the Sections from the page by clicking <kbd>-</kbd>.
                  </p>
                  <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/add-section.png" class="img-responsive" /></p>
                  	                 
                  
             </div><!--.bs-docs-section -->
             
		<!-- Add Images
							  ================================================== -->
            <div class="bs-docs-section">                                
                  <h1 id="add-images">Adding Images</h1>
                    <p class="lead">
                      You can add images and galleries within your post and pages.  
                      Start by setting a featured image this will be used as your post thumbnail. 
                    </p>

                    <h3 id="featured-images">Adding a Featured Image</h3>
                    <p> 
                      To add a featured image, click <kbd>Set Featured Image</kbd>, upload your image and choose 
                      <kbd>Set Featured Image</kbd> and then save the changes to your post. It is recommended 
                      that the featured image uploads are at least 1500px in width and 600px in height. 
                    </p>
                    <p class="bs-example"> 
                      <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/featured-image.png" class="img-responsive" />
                    </p>

                    <h3 id="page-images">Adding Images within Pages or Posts</h3>
                    <p class="lead">
                      Images can be added to any content area and can be customized in various ways. 
                    </p>
                    <ol>
                      <li> 
                       <p>
                       To add an image navigate to any Page or Post. In the content area place the cursor where 
                        you would like the image to appear and click <kbd>Add Media</kbd>. 
                       </p>
                       <p class="bs-example"><img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/add-media.png" class="img-responsive" /></p>
                      </li>
                      <li>
                        <p>A new window will pop up, click the link <code>Insert Media</code>. Upload new images under the <code> Upload Files</code> tab or 
                        insert exsisting images from the media library via the <code>Media Library</code> tab.
                        </p>
                        <p class="bs-example"> 
                          <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/insert-media.png" class="img-responsive" /> 
                        </p>
                      </li>
                      <li>
                        <p>
                          After selecting the image you can adjust the attachment details and display settings, see below for more information on the display settings.
                        </p>
                        <p class="bs-example"> 
                          <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/display-settings.png" class="img-responsive" />
                        </p> 
                      </li>
                      <li>
                        <p>
                          Once the display settings are complete, insert the image into the content by clicking <kbd>Insert into Post</kbd>.
                        </p> 
                       
                      </li>
                    </ol>

                      <h3 id="image-display">Image Display Settings</h3>
                        <p> 
                          Under <Strong>Attachment Display Settings</Strong> in addition to the WordPress standard allignment of 
                          <code>Left</code>, <code>Center</code>, <code>Right</code> and <code>None</code> the theme also includes <code>Parallax</code>. 
                          A parallax image is the full width of the page and remains fixed on the page while the rest of the content scrolls above and below it. Continue 
                          reading below to learn how to add a Parallax image.
                        </p>
                        
                        <p class="bs-example"> 
                          <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/display-settings.png" class="img-responsive" />
                        </p>

                      <h3 id="parallax">Adding a Parallax Image</h3>
                      <p>
                        A parallax image is the full width of the page and remains fixed on the page while the rest 
                        of the content scrolls above and below it. Note: A parallax image should be at least 1500px 
                        wide to avoid exessive pixelation. 
                        Parallax will only work on pages without sidebars. 
                      </p>
                      <p> 
                        To add a parallax image to your post, follow the <a href="#page-images">Adding Images to Page or Post</a>
                        above. Then select <code>Parallax</code> for <strong>Alignment</strong> in the <a href="#image-display">
                        Image Display Settings</a>.
                      </p>

                          <h3 id="adding-galleries" >Adding Image Galleries</h3>
                          <p> Image galleries can be added to any content area and can be customized in various ways. 
                              To add an image gallery navigate to any page or post and in the content area place the 
                              cursor where you would like the gallery to appear. Click <kbd>Add Media</kbd> to begin. </p>
                          <p> Click <code>Create Gallery</code> and upload new images under the <code>Upload Files</code> tab or select
                              images that exsist in your media library from the <code>Media Library</code> tab. Select Images for your Gallary 
                              by clicking on them. Once you have all the images checked, click <kbd>Create New Gallary</kbd> </p>
                          <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/create-gallary.png" class="img-responsive" /> </p>
                          <p> Now you can edit the gallary by entering captions and dropping and dragging images to change their order. The Gallery Settings 
                              are also selected at this point (See the following passages for information on the gallery settings). Once the gallery settings 
                              have been selected click <kbd>Insert Gallery</kbd> and the gallery will be inserted into your content area. </p>

                          <h4 id="gallery-settings" >Gallery Settings</h4>
                          <p> Below are explanations for gallery settings. </p>
                          
                          <!-- Gallary Settings Table
                                                            ================================================== -->
                           <div class="table-responsive">
                              <table class="table table-striped">
                                <thead>
                                 <tr>
                                   <th style="min-width:200px;">Option</th>
                                   <th>Description</th>
                                 </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td><strong>Gallery Type</strong></td>
                                    <td>See preceding passage for information about each type.</td>
                                  </tr>
                                 <tr>
                                   <td><strong>Random Order</strong></td>
                                    <td>Decide whether you want the images displayed randomly or the order you specified via drag and drop.</td>
                                 </tr>
                                 <tr>
                                   <td><strong>Cropping</strong><br /><small>Slideshow gallary type only</small></td>
                                    <td>Select "Crop Images" so they all appear the same height in the slideshow. Or select "Do not Crop Images" and the 
                                    slideshow will resize according to the image height.</td>
                                 </tr>
                                  <tr>
                                   <td><strong>Link</strong><br /><small>Slideshow gallary type only</small></td>
                                    <td>Select <code>None</code> if the image should not have a link or <code>Full Image</code> if you’d like it to link to the full image when clicked on. 
                                     When linking to the full image it opens in a responsive lightbox.</td>
                                 </tr>                                                                                    
                                </tbody>
                              </table>
                            </div>
                           
                
                          <h4 id="gallery-types">Gallery Types</h4>
                          <p> Below are explanations and design tips for the different types of image galleries. </p>
                          <!-- Gallary types Table
                                                  ================================================== -->
                                                  
                          <div class="table-responsive">
                              <table class="table table-striped">
                                <thead>
                                 <tr>
                                   <th style="min-width:200px;">Option</th>
                                   <th>Description</th>
                                 </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td><strong>Gallery</strong></td>
                                    <td>This gallery type is your traditional gallery, displaying a block of thumbnails that when linked to the full image
                                     open in a responsive lightbox. The captions appear upon hovering. The gallery type is only available in a fixed width. <br />
                                     <strong>Design Tip: A gallery looks great when displaying images in multiples of three.</strong>
                                    </td>
                                  </tr>
                                 <tr>
                                   <td><strong>Slideshow</strong></td>
                                    <td> This gallery type displays a slideshow where the entire image is shown and the user can click scroll left or right through the gallery. 
                                    Captions are optional and will display on the image. The slideshow gallery type also has the option of cropping so the slideshow will remain 
                                    the same height. If the images are not cropped the height will adjust for each image. <br />
                                    <strong>Design tip: Create a Slideshow gallery with only one image, and make sure it’s full width. This creates a dramatic, break out of the box 
                                    image on your post, page or portfolio item.</strong>
                                    </td>
                                 </tr>
                                </tbody>
                              </table>
                            </div>   
    				 </div>
            <!--.bs-docs-section -->
		
		<!-- Widgets
		================================================== -->
            <div class="bs-docs-section">
                  <h1 id="widgets">Widgets</h1>
                  <p class="lead"> There are four custom Widgets along with the standard Widgets included with WordPress. </p>
                
                  <h3 id="adding-widgets">Adding Widgets</h3>
                  	<p>The widgets can be found under <strong>Appearance > Widgets</strong>. Widgets can be placed in the footer, 
                         and various sidebars on pages and sections. To activate a Widget in a sidebar or footer simply drag it to the desired area,
                         or click the Widget, select a destination and click <kbd>Add Widget</kbd>. 
                  	</p>
                        <p class="bs-example"> 
                          <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/add-widget.png" class="img-responsive" /> 
                        </p>
                  	<p>Arrange the order of Widgets by clicking and dragging them it into place.
                        You can customize the Widget features by clicking the down arrow in the upper right corner. Be sure to save
                        any changes made to the Widget by clicking <kbd>Save</kbd>. To remove the Widget, click <kbd>Delete</kbd>.
                    	</p>

                   <h3 id="custom-widgets">Custom Widgets</h3>
                   	<p> Below are explanations for the Custom Widgets that are included with <?php echo esc_html( $themewich_theme_info->Name ); ?>.</p>
                   	<ul>
                        	<li>
                                 <h4 id="news-widget">Custom News Widget</h4>
                                 <p> A Widget that allows you to display the most recent blog posts from a specific category.</p>
                                 <div class="table-responsive">
                                 	<table class="table table-striped">
                                      <thead>
                                             <tr>
                                             <th style="min-width:200px;">Option</th>
                                             <th>Description</th>
                                             </tr>
                                      </thead>
                                      <tbody>
                                             <tr>
                                             <td><strong>Title</strong></td>
                                             <td>You can an optional title for the Widget.</td>
                                             </tr>
                                             <tr>
                                             <td><strong>Number of Posts</strong></td>
                                             <td>Enter the number of posts you'd like to display, it must be at least 1 and less than 10.</td>
                                             </tr>
                                             <tr>
                                             <td><strong>Choose a Category</strong><br /></td>
                                             <td>Select a specific category in which the posts are pulled</td>
                                             </tr>                                                                                 
                                     </tbody>
                                   </table>
                                </div>
                              </li>
                                     
                              <li>
                                  	<h4 id="popular-posts-widget">Themewich Popular Posts Widget</h4>
                                    <p> A Custom Themewich Widget that displays popular posts, recent posts, and an optional facebook feed.</p>
                                    <div class="table-responsive">
                                          <table class="table table-striped">
                                            <thead>
                                                   <tr>
                                                   <th style="min-width:200px;">Option</th>
                                                   <th>Description</th>
                                                   </tr>
                                            </thead>
                                            <tbody>
                                                   <tr>
                                                   <td><strong>Tabs Title</strong></td>
                                                   <td>You can an optional title for the Widget.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Number of Posts</strong></td>
                                                   <td>Enter the number of posts you'd like to display, it must be at least 1.</td>
                                                   </tr>
                                            </tbody>
                                         </table>
                                	</div>
                              </li>
                              <li>
                              	<h4 id="social-widget">SocialFans Counter Widget</h4>
                                    <p> A Widget that allows you to display social links with subscribe/like counts. Supports the following networks: 
                                    Facebook, Twitter, Google+, Pinterest, Linkedin, FourSquare, Envato, Behance, Dribble, Vimeo, Soundcloud, Forrst, 
                                    Github, Mailchimp, Delicious, Instgram, Youtube, Rss, VK-VKontakte, Vine, and Tumblr. 
                                    </p>
                                    <p>To set up the Social network accounts navigate to <strong>SocialFans > Settings</strong>. Check the boxes of the social networks you'd 
                                    like to display on the widget. Use the dropdown arrow to open the details for each network and fill out the account information. For help on 
                                    finding the correct account information visit the help link on the right side, such as <code>Need help for Facebook? click here</code>, shown 
                                    in the example below. 
                                    </p>
                                    <p class="bs-example"> <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/social-fan.png" class="img-responsive" /></p>
                                    
                                    <p>Once you've selected the social networks and completed the required account information you can sort them in the desired order you'd like them to
                                    appear by dropping and dragging.
                                    </p>
                                    
                                   	<p>
                                    Navigate to <strong>Appearance > Widgets</strong> and place the SocialFans widget in the desired area. Customize the look of your social network icons
                                    by adjusting the widget settings, described below. 
                                    </p>
                                    
                                    <div class="table-responsive">
                                          <table class="table table-striped">
                                            <thead>
                                                   <tr>
                                                   <th style="min-width:200px;">Option</th>
                                                   <th>Description</th>
                                                   </tr>
                                            </thead>
                                            <tbody>
                                                   <tr>
                                                   <td><strong>Tabs Title</strong></td>
                                                   <td>You can add optional title for the Widget.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Number of Posts</strong></td>
                                                   <td>Enter the number of posts you'd like to display, it must be at least 1.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>New Window</strong></td>
                                                   <td>Check if you'd like it to open in a new window.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Nofollow Links</strong></td>
                                                   <td>You can an optional title for the Widget.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Hide Title</strong></td>
                                                   <td>You can show or hide the title for the Widget.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Show Total</strong></td>
                                                   <td>Show sum of social accounts fans, such as twitter followers.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Columns</strong></td>
                                                   <td>Select the number of columns for the icons to appear within.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Effects</strong></td>
                                                   <td>Adjust the effects of the widget.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Icon/Text Color</strong></td>
                                                   <td>Change the icon or text here.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Background Color</strong></td>
                                                   <td>Change the background color of the social icon grid.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Hover Text Color</strong></td>
                                                   <td>Adjust the hover text color.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Hover Text Background Color</strong></td>
                                                   <td>Adjust the hover text background color.</td>
                                                   </tr>
                                            </tbody>
                                         </table>
                                	</div>
                               </li>
                               <li>
                                    <h4 id="ninja-widget">Ninja Forms Widget</h4>
                                    <p> A Widget that allows you to display custom forms such as a contact form. 
                                    See passage about creating <a href="#forms-setup"> Custom Forms</a> for more information. 
                                    </p>
                                    <div class="table-responsive">
                                          <table class="table table-striped">
                                            <thead>
                                                   <tr>
                                                   <th style="min-width:200px;">Option</th>
                                                   <th>Description</th>
                                                   </tr>
                                            </thead>
                                            <tbody>
                                                   <tr>
                                                   <td><strong>Display Title</strong></td>
                                                   <td>You can display the title for the Widget.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Forms Dropdown</strong></td>
                                                   <td>Select the form you'd like to display in the Widget.</td>
                                                   </tr>
                                            </tbody>
                                         </table>
                                	</div>
                               </li>
                           </ul>
                  
            </div>
            <!--.bs-docs-section -->
             
		<!-- Forms
		 ================================================== -->
		<div class="bs-docs-section">
                  <h1 id="forms-setup" class="page-header">Forms Setup </h1>
                  <p class="lead">Create custom and manage forms for your widgets or pages. </p>
                 	<h3 id="contact-form">Managing the Contact Form</h3>
                 	<p>To set up the Contact Form with your own information, visit <strong>Forms > All Forms</strong> and then select the one called <code>Contact Form</code>.
                  Make sure you've already set up the Contact Page according to the steps outlined in <a href="?page=theme-help&tab=setup#contact-setup" target="_blank">Setting up the Contact Page</a> section of Theme Help. 
                  </p>
                  <p>Once you have opened the Contact Form begin entering your information. Under <code>From Email Settings</code> enter the following:</p>

           		<div class="table-responsive">
                                          <table class="table table-striped">
                                            <thead>
                                                   <tr>
                                                   <th style="min-width:200px;">Option</th>
                                                   <th>Description</th>
                                                   </tr>
                                            </thead>
                                            <tbody>
                                                   <tr>
                                                   <td><strong>From Name</strong></td>
                                                   <td>Enter the name you would like the form to come from.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>From Email Address</strong></td>
                                                   <td>Enter the email address you would like the form to come from.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Email Type</strong></td>
                                                   <td>Select whether the email will be sent as HTML or plain text format.</td>
                                                   </tr>
                                            </tbody>
                                         </table>
                                	</div>
       		<p> Under <code>Administrator Email Settings</code> enter the following:</p>
                  <div class="table-responsive">
                                          <table class="table table-striped">
                                            <thead>
                                                   <tr>
                                                   <th style="min-width:200px;">Option</th>
                                                   <th>Description</th>
                                                   </tr>
                                            </thead>
                                            <tbody>
                                                   <tr>
                                                   <td><strong>Administrator Email Addresses</strong></td>
                                                   <td>Enter the email addresses for as many people as you like to receive notification when a user successfully 
                                                   submits your form.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Admin Subject</strong></td>
                                                   <td>Enter a subject that the above email addresses assigned will receive.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Admin Email Message</strong></td>
                                                   <td>Create an message that will be emailed to the above admin email addresses.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Include a List of Field</strong></td>
                                                   <td>Check if you wish to send a table of the users complete submission at the end of your message.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Attach CSV of submission</strong></td>
                                                   <td>Check if you wish to attach a list of the message in an excel format.</td>
                                                   </tr>
                                            </tbody>
                                         </table>
                 </div>
                 <p>Under <code>User Email Settings</code> enter the following:</p>
                  <div class="table-responsive">
                                          <table class="table table-striped">
                                            <thead>
                                                   <tr>
                                                   <th style="min-width:200px;">Option</th>
                                                   <th>Description</th>
                                                   </tr>
                                            </thead>
                                            <tbody>
                                                   <tr>
                                                   <td><strong>Subject for the user email</strong></td>
                                                   <td>Enter the subject users will receive if you choose to send them an email upon successful form submission.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Email message sent to the user</strong></td>
                                                   <td>Enter the message that will be emailed to the users after they successfully complete the form</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Include a List of Field</strong></td>
                                                   <td>Check if you wish to send a table of the users complete submission at the end of your message.</td>
                                                   </tr>
                                           </tbody>
                                         </table>
                 </div>
                 <p>Adjust the<code>Basic Settings Behavior Settings</code>for your form:</p> 
                 <div class="table-responsive">
                                          <table class="table table-striped">
                                            <thead>
                                                   <tr>
                                                   <th style="min-width:200px;">Option</th>
                                                   <th>Description</th>
                                                   </tr>
                                            </thead>
                                            <tbody>
                                                   <tr>
                                                   <td><strong>Display Form Title</strong></td>
                                                   <td>Check if you'd like to display the form title.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Require user to be logged in to view form?</strong></td>
                                                   <td>Check box to require.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Add form to this page</strong></td>
                                                   <td>Select from your already created page from the downdown.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Submit Via Ajax</strong></td>
                                                   <td>Check if you want your form to be processed without the page reloading.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Success Message</strong></td>
                                                   <td>Enter a message which will appear once the user successfully submits the form.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Limit Submissions</strong></td>
                                                   <td>Select the number of submissions that this form will accept. Leave empty for no limit.</td>
                                                   </tr>
                                                   <tr>
                                                   <td><strong>Limit Reached Message</strong></td>
                                                   <td>Enter a message to be displayed once the limit has been met.</td>
                                                   </tr>
                                           </tbody>
                                         </table>
                     </div>   
                     <p>After completeing the above as needed, click <kbd>Save Form Settings</kbd> to make sure the changes to your Contact Form have been saved.</p>
                     <h3 id="custom-form">Creating Custom Forms</h3>
                     <p>More advanced users can create a Custom Form for any page or widget.</p>
                     <p> Create a custom form by navigating to <strong>Forms > Add New</strong>. Under the <code>Form Settings</code> begin entering the 
                     the form email information. Such as From Email Settings, Administrator Email Settings, User Email Settings and Basic Form Behavior Settings. 
                     When you are finished with filling out desired fields of the form, click <kbd>Save Form Settings</kbd>
                     </p>
                     <p>Under the <code>Field Settings</code> tab is where you add the fields, textboxes, dropdowns, and buttons to your form. Such as user information 
                     text fields, anti-spam fields, and submit buttons. The field elements can be dropped and dragged into the desired order and then previewed live 
                     under the tab <strong>Form Preview</strong>. Be sure to click <kbd>Save Form Settings</kbd> when the form is complete.</p>
                     <p><strong> Note: </strong>There are many options and customizations available with Ninja Forms when creating a Custom Form. For more detailed 
                     explanations on the field elements and their features please visit <a href="http://ninjaforms.com/documentation/">Ninja Forms Documentation</a>. 
                     </p>
                    
		</div><!--.bs-docs-section -->

	</div>
	<!-- .doc-content-->
		
		<?php get_template_part('functions/help/sidebar-templates/adding-content-sidebar'); ?>
		</div>
		</div>
		</div>
