belle
“Belle” WordPress Theme Documentation by “TeslaThemes”
Belle - WordPress Theme

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

Table of Contents

  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.

1 . InstallationTOP

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

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

upload

Then, when prompted activate the theme:

activate

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:

activate

2 . Front PageTOP

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

2.1 . Sliders TOP
  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:

      image upload

      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. image upload

    Now the slider should be displayed on the page.

    image upload
  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:

      image upload

      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:

      image slider

      Note : More about the GRID Here

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

2.2 . Services TOP

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:

    image service
  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:

    image services

    Note : You can't use more than 4 services. If you do , the widget will use only the first 4 ordering them by "menu_order - the way images appear in the media iframe.

2.3 . Recent Work / Related Projects Widget TOP

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:

    image recent
  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:

    image recent widget

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

2.4 . Promo / Alert Box TOP

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:

image call us

This will produce the block below :

image call us

2.5 . Testimonials TOP

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:

    image testimonial

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

    image testimonial
  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:

    image testimonial

    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:

    image testimonial
2.6 . Our Clients Slider TOP

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:

    image client slider
  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:

    image client slider

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

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

3 . Portfolio page TOP

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:

    image gallery

    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.

    image 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:

    image gallery
4 .Blog page TOP

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. image gallery

    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
    image gallery

    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:

image sidebarsimage sidebars

5 . About Us page TOP

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 :

image aboutus

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

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

image aboutus


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) :

image aboutus

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) :

image aboutus

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.

image aboutus

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

image aboutus


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 :

image aboutus

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.

6 . Contact page TOP

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. image aboutus
  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 :

image contacts

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

7 . Single Project Page TOP

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 :

image contacts

8 . The Grid TOP

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

9 . Shortcodes TOP

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

Hover over code snipets to see what the corresponding shortcode does display.
10 . Twitter configuration TOP

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.

customizer

customizer