Created: 12-January-2012
By: TeslaThemes
Email: hi@teslathemes.com

1. Installation GO
2. Front Page : GO
   • 2.1 Main Slider GO
   • 2.2 Services GO
   • 2.3 Recent Work Slider GO
   • 2.4 Promo / Alert Box GO
   • 2.5 Testimonials GO
   • 2.6 Our Clients Slider GO
3. Portfolio page GO
4. Blog page GO
5. About Us page GO
6. Contact page GO
7. Single Project page GO
8. The GRID GO
9. Shortcodes GO
10. Twitter Configuration GO

---

Thank you for purchasing our product! We are very glad that you have decided on our WordPress theme.

The theme is very easy to use and we are here to guide and help you, so please read and follow the documentation and if you have further questions write us a email hi@teslathemes.com. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built.

To install the Belle Theme you will need WordPress v3.4 or newer.

Upload the belle.zip file through the WordPress admin backend:

Then, when prompted activate the theme:

Note: If you can't get passed the file upload limit and/or if you get an error message mentioning exhausted memory size or something in those lines, you could try to increase that limit by adding to the "wp-config.php" the following line of code:

define('WP_MEMORY_LIMIT', '64M');

If everything went well, the theme should appear under Appearance --> Themes like shown below:

• Create a page that will serve as homepage - In wordpress admin panel under Pages --> Add New, name it for example "Home"
• Set the front page to display as a static page : - Go to Settings → Reading → A static page (select below) → Front page: → Choose your page from the dropdown menu. If you named it Home, do the following:
• Customize Header and Footer - Go to Belle [last option in the admin menu] → configure everything under the fields "Header" and "Footer" like in the example below :

  Note : Or you can press the "Import default demo options" button to fill the fields with default content like on the demo page.

  Note : Don't forget to press the "Save Options" button.

  After this your header should look like below:

  

  And the footer:

  
• Widgetize the homepage - Go to Appearance → Widgets
  • drag the Main Slider widget to the Home Mainslider area and configure it as shown in "Main Slider" section below.
  • drag other widgets to the "Home Main Content" area like shown below :
  

---

Note : The footer and header content of pages are configured under the Belle [last option in the admin menu] menu.

1. The Main Paralax Slider (for Home Page):

   • In the wordpress admin panel go to the page you want to be linked with the slider button or add a new page (You can add images to different pages , this way the corresponding sliders will be linked to the page the slide - image was uploaded) . Press the "Add Media" button → Select the images you want to use in the slider (for best experience use images with layered transparency like .png) . After the upload is complete select each of the images and set the caption to any keyword (must be the same keyword for all images and unique for the slider, if you will be creating another slider choose a different keyword for it), then change the title of the image as it will be the first row displayed on the slide. Change the description of the image as it will be the second row of the slide, like shown below:

     

     Note 1: after configuring the images don't press insert into page , just close the window

     Note 2: The slides will order by image file name.

     Note 3: Use the "uploaded to this page" filter for a better understanding on which images are attached to the page you work with.

   • Go to Appearance → Widgets and drag the Main Slider widget to the area you want. Then in the widget options, under the "Caption of images used for slider:" input , write the caption of the images from Media Gallery that will be used in the slider.

   Now the slider should be displayed on the page.

   

2. The Simple Slider (for single Project Page):

   • Same first step as for Widget: In the wordpress admin panel go to the page on which you will use the slider or add a new page. Press the "Add Media" button → Select the images you want to use in the slider. After the upload is complete select each of the images and set the caption to any keyword (must be the same keyword for all images and unique for the slider, if you will be creating another slider choose a different keyword for it), then change the title of the image as it will be the first row displayed on the slide. Change the description of the image as it will be the second row of the slide, like shown below:

     

     The main slider can look like this :

     Note 1: after configuring the images don't press insert into page , just close the window

     Note 2: The slides will order by image file name.

     Note 3: Use the "uploaded to this page" filter for a better understanding on which images are attached to the page you work with.

   • In the page content use the shortcode [slider caption='your_images_caption'], with the caption parameter set in the step above.

     Note : An example to integrate the slider in the theme grid:

     [row]
         [column size='8']
             [slider caption='single_slide' description='false'][/slider]
         [/column]
     [/row]

     This code will produce a slider only on 8/12 of the size of the page as shown below:

     

     Note : More about the GRID Here

     Note : More about the Slider read in te shortcodes section Here

The Services widget can be set up only for the widgetized pages.

1. In the wordpress admin panel go to the page on which you will use the widget or add a new page (page must be widgetized). Press the "Add Media" button → Select the images you want to use for the services. After the upload is complete select each of the images and set the caption to any keyword (must be the same keyword for all images , then change the title of the image as it will be the first row displayed for the service. Change the description of the image as it will be the content of the service, like shown below:

   

2. Then go to Appearance → Widgets, and drag the Services widget to the desired widgetized area. In the widget options set the "Caption of images used for services: " input to the keyword selected above.

   Now your page should display the services as shown below:

   

   Note : You can't use more than 4 services. If you do , the widget will use only the first 4 ordering by filename.

The Recent Work widget can be set up only for the widgetized pages.

This widget gathers the image attachments from all pages that has the caption set to the keyword you specify in the widget's option.

1. So first : in the wordpress admin panel go to each page on which you want to be related to the widget (to have an image that will link to the page) or add a new page (page must be widgetized). Press the "Add Media" button → Select the images you want to use as a thumbnail. After the upload is complete select each of the images and set the caption to any keyword (must be the same keyword for all images) and add in the "Alt Text" field the categories it attends to , like shown below:

   

2. Then go to Appearance → Widgets, and drag the Recent Work widget widget to the desired widgetized area. In the widget options set the "Title" and the "Caption of images used for services: " input to the keyword selected above.

   Now your page should display the Recent Work widget as shown below:

   

   Note : Use more than 4 elements to make the widget in more rows.

The Promo / Alert Box widget can be set up only for the widgetized pages.

This widget displays a stylized promo box with text and a button with link.

To set it up just go to Appearance → Widgets, and drag the Promo / Alert Box widget to the desired widgetized area and configure the widget options like shown below:

This will produce the block below :

The Testimonials can be set up with two methods

1. Widget (for widgetized Pages):

   In the wordpress admin panel go to , Appearance → Widgets and drag the Testimonials widget to the area you want. Then in the widget options, fill all the inputs, like shown below:

   

   Now the testimonials block should be displayed on the page, like shown below:

   

2. Shortcodes:

   Use the following code in the content of a page to produce a testimonial block .

   [title]Testimonial & Blockquote[/title]
   [testimonial author="Joe Dowe " company=" Photographer"]
       Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
   [/testimonial]

   The code above will produce a testimonial block as shown below:

   

   Note : The [title]Your Title Here[/title] shortcode can be used easily in other places.

   Or you can use the Blockquote shortcode to make a different quotation.

   [blockquote author="Joe Dowe " company=" Photographer"]
       Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
   [/blockquote]
                           

   The code above will produce a testimonial block as shown below:

   

The Our Clients widget can be set up only for the widgetized pages.

This widget gathers the image attachments from all pages that has the caption set to the keyword you specify in the widget's option.

1. So first : in the wordpress admin panel go to each page on which you want to be related to the slider (to have an image that will link to the page) or add a new page (page must be widgetized). Press the "Add Media" button → Select the images you want to use as a thumbnail.

   Note : If you don't want the images of the slider to be linked to any of your page just attach them all to the home page.

   After the upload is complete select each of the images and set the caption to any keyword (must be the same keyword for all images) , like shown below:

   

2. Then go to Appearance → Widgets, and drag the Our Clients widget to the desired widgetized area. In the widget options set the "Caption of images used for services: " input to the keyword selected above.

   Now your page should display the Our Clients Slider as shown below:

   

   Note 1: Use more than 6 elements to make it a slider.

   Note 2: Use images of size 120x54 px for better experience.

The Portfolio template page can be widgetized with any of the widgets available , but the main purpose of it is to use the Gallery Widget for portfolio on it.

To configure the Gallery widget follow the next steps :

1. So first : in the wordpress admin panel go to each page which you want to be related to the portfolio gallery item (to have an image that will link to the page). Press the "Add Media" button → Select the images you want to use as a thumbnail.

   Note : If you don't want the images of the gallery to be linked to any of your page just attach them all to the portfolio page.

   After the upload is complete select each of the images and set the caption field of the image to any keyword (must be the same keyword for all images) , the title which will appear as the header of the thumbnail on hover , the alt text to one or more related keyword (category) that will serve as a filter for the portfolio gallery which will be also used in the widget options , like shown below:

   

   Note : If you want more than one filter to a image just insert the filters in the Alt field of the image separated by space e.g. "print photography".

2. Then go to Appearance → Widgets, and drag the Gallery Widget for portfolio to the desired widgetized area . In the widget options set the "Image Caption Used for gallery: " field, to the caption keyword selected above for all the images.

   Then, in the field "Filter names,separated by comas , from alternate text of images:" , write all the alt text keywords used for the images uploaded above. These will serve as filters and will be displayed on top of the gallery.

   

   Note : Write "all" to display a filter that will show all the images in the gallery.

   Now your page should display the Gallery as shown below:

   

The Blog template page is ment to show the posts feed. To set up the Blog page:

1. First create a page with the "Belle BLOG Page" Template.
2. Then go to Settings → Reading , and choose the title of the page created above from the Posts Page option, and choose the "Summary" radio button as shown below.

   Note : Here also you can set how many posts should be displayed on the blog page.

3. Now go to Appearance → Widgets and drag the widgets to Blog Sidebar area

   Note : Drag out the widgets predefined by wordpress for this area if there are any. Leave just the search widget

   Recommended widgets specially made for blog sidebar are :

   • Search
   • [Belle] Posts and Comments
   • [Belle] Text Widget
   • [Belle] Categories
   • [Belle] Twitter
   • [Belle] Latest Project
   

   This widgets are simple and easy to use . Their options are self-explanatory so we will not describe them here.

Mixing different widgets you can produce sidebars like below:

This page has special features and is mainly controlled from the Belle [last option in the admin menu] page. The bottom of the page is widgetized so you can drag any widget to the "About Page Content" area in the Appearance → Widget admin page, and it's content will appear bellow the main content.

The About Us page has 4 pre established tabs. So there are 4 areas that you can customize. Also you can choose which one to display and which not.

Note 1: You can use any combination of shortcodes in the tabs content. The following are mere recommendations by our developers.

Note 2: Do not use the [row][/row] If you dont want to split the tab content in columns.

Let's see the generic options we have for each tab :

Note : In the tab content area you can use shortcodes.

The settings from above with the shortcodes mentioned will produce the following content :

---

For the second tab, Services Tab, you can use the following example of shortcodes in the content:

[column size="4"]
    [about_subtitle]
        [img caption="small service1"]Sub Title Nr. 1
    [/about_subtitle]
    Content 1
    [about_subtitle]
        [img caption="small service3"]Sub Title Nr. 2
    [/about_subtitle]
    Content 2
    [about_subtitle]
        [img caption="small service2"]Sub Title Nr. 3[/about_subtitle]
    Content 3
[/column]
[column size="4"]
    [about_subtitle]
        [img caption="small service1"]Sub Title Nr. 4
    [/about_subtitle]
    Content 4[about_subtitle]
        [img caption="small service3"]Sub Title Nr. 5
    [/about_subtitle]
    Content 5
    [about_subtitle]
        [img caption="small service2"]Sub Title Nr. 6
    [/about_subtitle]
    Content 6
[/column]
                

The code above will generate the following tab content (just change the Content and caption parts of it) :

Note : To use the images in the services tab , as in the example above, use the [image caption="the_caption_of_the_image] shortcode. This means that the images must be uploaded, and the respective caption set.

---

For the third tab , Team Tab, you can use the following example of shortcodes in the content :

[row]
[column size="3"]
[team_member name='Joe Dowe' position='CEO' img_caption='Joe' facebook='http://www.facebook.com/johndoe' skype='john-sama' linkedin='http://www.linkedin.com/pub/john-doe/51/1a3/624/']Content1.[/team_member]
[/column]
[column size="3"]
[team_member name='Joe Dowe' position='Programmer' img_caption='Joe2' facebook='http://www.facebook.com/johndoe' skype='john-sama' linkedin='http://www.linkedin.com/pub/john-doe/51/1a3/624/']Content2.[/team_member]
[/column]
[column size="3"]
[team_member name='Joe Dowe' position='Manager' img_caption='Joe3' facebook='http://www.facebook.com/johndoe' skype='john-sama' linkedin='http://www.linkedin.com/pub/john-doe/51/1a3/624/']content3.[/team_member]
[/column]
[/row]

The code above will generate the following tab content (just change the shortcodes parameters and the Content parts of it) :

Note : To use the images in the team tab , as in the example above, change the img_caption="the_caption_of_the_image" parameter of the corresponding shortcode. This means that the images must be uploaded, and the respective caption set.

Next, if you want the "Choose Us Section" and skills progress bars , in the Belle page [last option in the admin menu] insert the Theme Skills Title, fill the "Choose us" title and content and press +Add Skill button. Fill the skill name and skill value inputs, which will generate the progress bar text and it's value. Press the +Add Skill button again, if you want to add more skills. To remove a skill press the "Remove Skill" button next to the skill.

This should produce the "Why Choose Us" and progress bars sections like shown below:

---

For the fourth tab, FAQ Tab, you can use the following example of shortcodes in the content which is the accordion :

[accordion]
    [accordion_tab header="First accordion header here"]Content1[/accordion_tab]
    [accordion_tab header="Second accordion header here"]Content 2.[/accordion_tab]
    [accordion_tab header="Header 3 here"]Content 3.[/accordion_tab]
    [accordion_tab header="Header 4 here"]Content 4.[/accordion_tab]
[/accordion]

The code above will generate the accordion like shown below :

Note : You can add as many accordion tabs as you want.

With all this , the configuration of the About page from Belle panel is done. Now you can go to Appearance → Widgets and drag the widgets you want to the About Page Content area. The widgets will appear at the bottom of the page, after the tabs' content set from Belle panel.

Basically the Contact page is a full width, without sidebar, widgetized page. We just made a separate template so that the user could build it up with widgets. The widgets you can use for this purpose are: customizable map, address sidebar and a contact form. All these are done through widgets. So you can experiment with the order or the right widgets you consider. Below is an example of organization of Contact page.

1. Add the map, address bar and Contact form by dragging the Map with Address and Contact form widget to the Contact Page Content area.
2. Get the address embedding code from https://maps.google.com/ :
   • First Navigate to https://maps.google.com/
   • Go to the place you want to be shown on the map
   • Press the link button and copy the embedding code to the respective widget option.
3. Choose whether to show the contact form or not, from the widget options.
4. Choose whether to show the address , social icons and info or not, from the widget options. If yes, fill the fields from the widget options.
5. Add the other widgets you would like to the contact page widgetized area.

After all this configurations you should get the page like shown below :

Note : The contact form will be sending the message to the email inserted in the email field in widget options.

This template can be useful for presenting a project or product. Usually all the single project pages are linked to the portfolio gallery (for this follow the instruction explained in the Portfolio Section).

To create a Single Project Page, go to Pages > Add new , enter the title of the page and choose the Single Project Template. If you want you can set the parent to Portfolio.

Here is a way to configure this page with shortcodes :

[row]
    [column size='8']
        [slider caption='single_slide']
        [/slider]
    [/column]
    [column size='4']
        [project_title]About Project[/project_title]
        Curabitur nulla sem, sodales a consequat id, semper sit amet nulla. Ut varius rutrum tellus, at pellentesque erat commodo eu. Sed dolor enim, elementum et pellentesque vel, dignissim ut dui.
        [project_detail title='Job Description']HTML & CSS3, Print, Photography,Web Development[/project_detail]
        [project_link to='http://teslathemes.com/']Launch Project[/project_link]
    [/column]
[/row]

The code above , should display the following on the page :

Belle template grid is based on the Bootstrap GRID System. To start working in the GRID you must put all your content in the [row][/row] shortcode. After that , for each column you want to create use [column size="your_size"][/column] shortcode. Column sizes are from 1 to 12. To start a new row with different columns, just start new [row][/row] tags.

For a simple two column layout, create a [row] and add the appropriate number of [column]s. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

[row]
    [column size="4"]Content 1[/column]
    [column size="8"]Content 2[/column]
[/row]
[row]
    [column size="4"]Content 3[/column]
    [column size="4"]Content 4[/column]
    [column size="4"]Content 5[/column]
[/row]
                

The code above will split the page in two rows. The first row will have 2 columns with different sizes. The second row will have 3 columns with the same size. Read more about the grid here

Belle Template has the following features/shortcodes , you can use in the Contents and Belle admin panel :

• [about_subtitle] - Creates a subtitle with colored text and bigger font.

  ---

• [img caption="your_uploaded_image_caption"] - Inserts the uploaded image with the corresponding caption. If there are more images with the same caption the first one will be used

  ---

• [team_member] - Creates a block with an image, some stylized text and social buttons.

  [team_member 
      name='Joe Dowe' position='CEO' 
      img_caption='Joe' facebook='http://www.facebook.com/toleabivol' 
      gplus='tolea-sama' 
      linkedin='http://www.linkedin.com/pub/anatolii-bivol/51/1a3/624/' 
      twitter='teslathemes']
      Accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.
  [/team_member]

  ---

• [social_icons] - Creates linkable social icons. If more - makes a social icons bar.

  [social_icons
      facebook="full_link_to_facebook_profile"
      twitter="twitter_user_name"
      dribble="dribble_link"
      linkedin="full_link_to_linkedin_profile"
  ]

  ---

• [title] - Creates a title with a separation line.

  ---

• [h1],[h2],[h3], [h4],[h5],[h6] - Creates headers of corresponding size.

  ---

• [i], [b] - Italic or bold text.

  ---

• [hr] - Horizontal rule/line.

  ---

• [testimonial] - Creates quoted text, with author and company (optional).

  [testimonial 
      author="name_of_the_author" 
      company="company_name"
  ]
  Quoted Content Here
  [/testimonial]

  ---

• [alert] - Creates stylized alert boxes for error(red),success(green),info(blue).

  [alert 
      type="error_success_or_info"
  ]
  Alert Content Here
  [/alert]

  ---

• [icon type="the_icon_type"] - Displays an icon. Use this table to insert the needed type Icons.

  Note : Take only the part after the "icon-" prefix. For example if you want the icon with the "OK" mark use the [icon type="ok"]

  ---

• [button] - Creates a linked button, with different types of colors , sizes and icons.

  [button 
      type="primary_info_succes_warning_danger_inverse_or_link"
      size="large_small_mini_or_nothing_for_default
      link="link_to_page"
  ]
  Button Text Here
  [/button]

  Note : For a button with icon just use the icon shortcode inside the button shortcode content like below:

  [button 
      type="info"
      link="www.website.com/?page_id=138"
  ]
  [icon type="ok"]
  [/button]

  ---

• [accordion] - Creates an accordion (collapsible components).

  [accordion]
      [accordion_tab header="First accordion header here"]Content1.[/accordion_tab]
      [accordion_tab header="Second accordion header here"]Content 2.[/accordion_tab]
      [accordion_tab header="Header 3 here"]Content 3.[/accordion_tab]
      [accordion_tab header="Header 4 here"]Content 4.[/accordion_tab]
  [/accordion]

  ---

• [tabgroup] - Creates a group of tabs.

  [tabgroup]
      [tab state="active in" title="Tab1"]Content of Tab 1[/tab]
      [tab title="Tab2"]Content of Tab 2[/tab]
  [/tabgroup]

  ---

• [progress_bars] - Creates a progress bar or a group of progress bars.

  [progress_bars]
      [progress_bar value='35']Content Here[/progress_bar]
  [/progress_bars]

  [progress_bars  type='striped']
      [progress_bar value='85']Content 2 Here[/progress_bar]
  [/progress_bars]

  [progress_bars  type='striped' animated='active']
      [progress_bar value='65']Content 3 Here[/progress_bar]
  [/progress_bars]

  [progress_bars ]
      [progress_bar value='10' type='danger'][/progress_bar]
      [progress_bar value='15' type='warning'][/progress_bar]
      [progress_bar value='45' type='success'][/progress_bar]
  [/progress_bars]

  ---

• [project_title] - Displays the text as a title of the project.

  ---

• [project_detail] - Displays project characteristics/tags/categories.

  [project_detail 
      title='Job Description']
      HTML & CSS3, Print, Photography,Web Development
  [/project_detail]

  ---

• [project_link] - Displays a stylized linked button.

  [project_link to='www.example.com']
      Launch Project
  [/project_link]

  ---

• [custom_link] - Displays a linked text.

  [custom_link to='www.example.com']
      Text Of the Link
  [/custom_link]

  ---

• [slider] - Creates a slider from uploaded images with same caption. If the description parameter is set to true it will display the description of the image which is set in the media admin panel as a second row of text after title ( not recommended for sliders integrated in columns ).

  [slider caption='your_images_caption' description="true"]

  Note : For more on configuring the slider go to Slider Section

  ---

To enable the twitter plugin:

1. Go to Belle [last option in the admin menu] -> Header tab -> Twitter.
2. Insert your twitter id in the "Twitter ID" option.
3. Choose how many last tweets should be displayed.
4. Visit Twitter Apps , create your App , press 'Generate Access token at the bottom', insert the corresponding options from the 'Oauth' tab.