1. Start
  2. Introduction
  3. Installing Theme - Video Tutorials
  4. Importing Dummy Content
  5. Theme Options
  6. Adding Custom Fonts
  7. Page Templates and Widget Areas
  8. Setting Up Homepage
  9. Slider Manager
  10. Menus
  11. Featured Images
  12. Slider
  13. Portfolio
  14. Widgets
  15. Shortcodes
  16. Theme Translation

Bellissima Ecommerce Theme

Premium Wordpress theme - By Team Unifato

Introduction

This theme has two different color schemes. It is much more than just a simple background change like most themes do, but instead it has the entire set of elements optimized for each of the two color skins. The two skins are Purple and White. The purple one is more elegant and focus the attention on the lighter content block. The white one on the other hand is more generic. Hopefully new skins will be added with the time.

This theme makes use of Wordpress WooCommerce plugin.

Installing Theme

Upon downloading the package, you will find a zip file named bellissima inside the theme package.

Log into your wordpress admin and under the Appearance tab click on Themes. Click on the Install Themes button on top and then click Upload. Upload the zip file bellissima in the upload field. After that is done, activate the theme as you would activate any other theme.

The theme comes with Widgets, Custom Menus, Slider Manager, Portfolio Post Type and Theme Options for easy and quick setup.

After installing the theme, you'll need to install WooCommerce plugin. Visit this page to download WooCommerce: http://wordpress.org/extend/plugins/woocommerce/. Install and activate the plugin before proceeding to the next steps.

Install and activate the plugin before proceeding to the next steps.

Installing Theme and Demo Content

Setting Up Homepage Part 1

Setting Up Homepage Part2

Widgets and Shortcodes

Setting Up Slider

Setting Up Portfolio

Importing Dummy Content

If you want to, quickly, create some dummy posts and pages, you can import a dummy content XML file to your Wordpress site. Doing this would give you a hint on how this theme works. You can even edit these sample posts and pages and use them on your site. Follow these steps:

  1. The XML Dummy conntent file can be found in the root folder of the package that you downloaded.
  2. In your WP Admin, under Tools section, click on Import. You might, first, be required to install the Importer plugin if yours is a new Wordpress installation.
  3. In the table that appears on the Import page, click on Wordpress.
  4. In the Import Wordpress page, click on Choose file. In the dialog box that appears, select the XML content file. Then click on 'Upload File and Import'.
  5. In the Import Wordpress Page, select the author that you want these new posts to be assigned to. Then, to import dummy images, select Import Attachments field.
  6. Click Submit. You may have to wait a few minutes for the content to be downloaded on to your server. 

Theme Options

Now that you have installed the theme, lets look at the Theme Options. In your WP admin, under Appearance tab, click on Theme Options. You'll see 4 tabs, namely: General, Styling and Slider. Let's look at them one by one.

General

 

Styling

 

Slider

Adding Custom Fonts

First, you'll need to select '- Add custom font -' as the value in the Font Face field of Heading or Content Typography fields. You can add any of the fonts available at Google Web Fonts at www.google.com/webfonts. Watch this video to get a better understanding of Google Fonts work:

Now, after selecting a font from Google, you'll need 2 things, as shown in the image above. The first is the font name, it could be like 'Titillium Web', 'Elsie', 'Droid Sans', etc. The second value is the script code that you copy from Google Fonts. It is in this format:

<link href='http://fonts.googleapis.com/css?family=Elsie+Swash+Caps:400,900' rel='stylesheet' type='text/css'>

Page Templates and Widget Areas

The theme offers several page templates, so that every page can be styled accordingly. Each page template either has  its own sidebar area or no sidebar at all. Whenever you create a new page, under the Page Attributes section, you can see a Template field. All the page templates are listed in this field. The template selected there will render that page.

Let's look at the different page templates avaliable:

Default Template

This template is used to render the posts pages, single portfolio items, single posts, etc by default. It has one sidebar area. Depending upon what item is being shown (page or post), it renders page_sidebar or post_sidebar widget area. This template can be used for general pages like FAQ, Blog, Services, etc.

 

Full_Width.Template

This template doesn't have any sidebar, and thus uses the full width of the page to render the content. This template can be used for Contact Page.

 

Home_Page

This template is used to render the Home Page of the theme, which contains the Slider area and several widget areas  like: home_sidebar_wide, home_sidebar_one and home_sidebar_two.

 

Portfolio 2 Column

This template is a full width page, and thus has no sidebar. It is used for rendering a list of Portfolio items in 2 columns.

 

Portfolio 3 Column

This template is a full width page, and thus has no sidebar. It is used for rendering a list of Portfolio items in 3 columns.

 

Portfolio 4 Column

This template is a full width page, and thus has no sidebar. It is used for rendering a list of Portfolio items in 4 columns.

 

Other Sidebar Areas

The theme has other sidebar areas too, that are used in other sections of the theme. These include:

Setting Up Homepage

You'll see that even after installing the theme, you don't see any slider area or wide widget areas on your site's homepage, like the ones you saw in the theme's preview. For that we'll need to setup the homepage properly. Follow these steps:

Slider Manager

Now that we have setup the homepage properly, you'll see that, although the slider area is being shown on the homepage, there are no slide items being displayed. Let's create some slides to show on homepage.

The Slider will fetch slides from the Slider Manager only when the 'Pick Slides From' field in the Theme Options has been checked as Slider Manager.

Under Appearance tab, click on Slider Manager. You'll see the Slider Manager page offers an easy to use user interface to quickly create a few slides. You can easily upload an image to be used in the slide, add new slides with a click of the button, drag and drop the position of the slide with respect to others and remove slides easily. However, there are some prerequisites for slider to show up properly:

There are 2 ways to add slides to the Slider area. One is by using the Slider Manager as discussed above. And, the other one is by adding Featured Products. We'll talk about adding slides through Featured Products later in the Slider section.

Slider

The Slider Area on homepage, as mentioned earlier, fetches slide items either from the Slider Manager or Featured Products. In this section we'll talk about fetching slide items from Featured Products. Follow these steps:

The Slider would display a number of images per Product, and a maximum of 4 Product on the homepage.

Portfolio

Bellissima theme uses an effective way to create and manage portfolio items. It makes use of the Custom Posts feature of Wordpress. Thus, you have a Custom Post type named Portfolio. All your portfolio items are stored in this post type. Additionally, you can create several categories to categorize your portfolio items (into, for example, nature, architecture, wildlife,etc) by using the Galleries taxonomy.

We'll first need to create some categories for our Portfolio Items. Go to Portfolio >> Galleries and add a few categories.

Now that we have our categories set up, we can add portfolio items. Click on Portfolio >> Add New.

Here you'll see all the options that relate to that particular portfolio item. But there are 4 important sections that you need to look into:

The Bellissima Theme Allows only Images to be used in the Portfolio Items.

 

Widgets

Bellissima theme comes with 5 custom widgets. These are:

Shortcodes

The Bellissima theme comes with over 30 shortcodes installed. But that's not all, the Shortcode Generator that comes installed for the post editor makes it extremely easy for you to include any shortcode and its attributes' data without having to remember the shortcodes' names.

A click on the Shortcode Generator button opens up a frame. Here you can select any shortcode. If the shortcode has any attributes it will ask you to enter its data, and if there's no attribute you can just click on Insert.

Although almost of the shortcodes' names are self explanatory, I'll go through some of them here to give you a more in depth understanding:

raw

In the post editor Wordpress, sometimes, automatically adds random <p> and <br> tags, which can break the layout of the content area. Enclosing any content or even other shortcodes inside this [raw] shortcode fixes this issue.

[raw]
  This is some textual content.
  [contactform sendto="admin@site.com" /]
[/raw]

 

clear

Whenever you're working with columns or images, you may find some content stacking up on the side of other content, unintentionaly. This can be solved by using [clear /] shortcode.

 

tabgroup

You can include tabs in your content by using the tabgroup shortcode like this:

[tabgroup tab1="About Us" tab2="Reach Us"]
  [tab]This is some content related to About Us.[/tab]
  [tab]This content is related to Reach Us section[/tab]
[/tabgroup]

 

alt-tabgroup

Similar to the tabgroup shortcode above, this shortcode renders a Tabbed interface, but with a little different style. You can include tabs in your content by using the tabgroup shortcode like this:

 

[alt-tabgroup tab1="About Us" tab2="Reach Us"]
  [tab]This is some content related to About Us.[/tab]
  [tab]This content is related to Reach Us section[/tab]
[/alt-tabgroup]

 

social

These shortcodes add social networking links:

[social type="facebook"]http://facebook.com[/social]
[social type="vimeo"]http://vimeo.com[/social]
[social type="youtube"]http://youtube.com[/social]
[social type="google"]http://google.com[/social]
[social]http://twitter.com[/social]

 

faq

Similar to the tabgroup shortcode you can add FAQ items like this:

[faq]
  [faqitem question="Your First Question?"]Here you can enter the answer to your first question.[/faqitem]
  [faqitem question="Second Question?"]Here you can enter the answer to your second question.[/faqitem]
[/faq]

 

accordion

You can include a Accordion/Toggle interface by using the [accordion] or [alt-accordion] tags like this:

[accordion]
  [pane title="First"]Your content..[/pane]
  [pane title="Second"]Your content..[/pane]
[/accordion]

 

divider

You can quickly add a horizontal rule using this shortcode.

 

column shortcodes

The theme offers [col2], [col3], [col2_last], etc shortcodes. You can use columns like this:

[col2]Your content ...[/col2]
[col2_last]Your content ...[/col2_last]

or

[col3]Your content ...[/col3]
[col3]Your content ...[/col3]
[col3_last]Your content ...[/col3_last]

 

Theme Translation

This theme is ready for localization via .po/.mo files. These files are located in the theme's /language/ folder. If you are not familiar with translating Wordpress themes, I recommend watching the following video. The plugin used for translation is Codestyling Localization.

Additionally, read this article on how to translate WooCommerce and Themes: http://wcdocs.woothemes.com/user-guide/localization/