logo

Flavia WordPress Template

Premium Html5 Templates and WP Themes by webinane.com

Installation

Download Flavia WP Theme and Get a Purchase Code from Themeforest.net

Step 1: Mouse over on your username, a drop down will appear where you just click on Downloads.

Step 2: As the page appear, look at the tabbed option Downloads. Click this button will appear a list of themes. Choose the Flavia wp theme and click on All files & documentation under theme Download button. There given four options having different files like…

  • All files & documentation:- click to download full theme package having documentation, change log, theme zipped file and license file. PSD will be provided on client demand.
  • Installable WordPress file only:- click to download just theme wp folder.
  • License certificate and purchase code (PDF):- click to get a file in pdf format having your theme purchase code.
  • License certificate and purchase code (text):- click to get a file in text format having your theme purchase code.

Step 3: After clicking, a text file will start downloading. Open file and find your item purchase code for registration.

Note: You can download any webinane theme and get purchase code by following the same procedure. Given images not taken from Flavia theme but method is same as given above.

Install and Activate Flavia Theme

Step 1: Login to wp admin panel by giving username and password.

Step 2: Go to Appearance > Themes.

Step 3: Click on and then press at new appeared window.

Step 4: Next new window will appear where you just press the Choose File option and upload zipped theme from your pc and tap on
Install Now button. After getting few minutes theme will be installed successfully.

Step 5: After successfully theme installation, new page will appear with the option Activate link, click to activate the theme. Theme will be activated successfully.

Note: ( For installing the Flavia theme use Php version about 5.4 )

Install Plugins of Flavia Theme

Step 1: After the theme installation, a notice box will appeared with the option Begin Installing Plugins. Click to open plugins page.

Step 2: At the appearing plugin page, install and activate all required plugins one by one.

Note: The premium plugins that are being provided with the webinane wp theme are totally free of cost. These are already activated and there will be no need to get activation key.

Import Demo Data in Flavia Theme

Step 1: After the installation and activation of all plugins, go to Appearance > Theme Options of wp dashboard.

Step 2: As the theme option panel appear, you can see an option Import Dummy Data at top of theme panel. Click that button show you a popup, click "ok" and it will start to run.

Step 3: After some time your demo files will be imported successfully.

General Settings

How to Manage General Settings?

Step 1: Navigate to Appearance > Theme Options > General Settings.

Step 2: At the settings page, change your theme color by using the Color Scheme option. Click on color tab and choose your desired color to be apply on site.

Step 3: Go to Site Favicon option and upload site favicon to display your site logo.

Step 4: From the next Sticky Header option you can make your header in sticky/ non-sticky mode. In the last, Save Changes.

How to Manage Header Settings?

Step 1: Navigate to Appearance > Theme Options > General Settings > Header Settings.

Choose Header: choose when you want to change your site header. Simply click one of these to be apply on site.

Header Topbar: enable to display topbar on selected header and it will show you further more custom options.

Phone No: choose to display your phone number on topbar.

Show Login Button: enable to show login button on topbar.

Show Wishlist: enable to display wishlist button on header topbar.

Show Language: enable to display language button on header topbar.

Logo Style*: choose to display logo in your desired style i.e image logo/ text logo.

Logo: choose to install your logo image and this can be done when you press “Upload” button.

Logo Width*: choose to increase/ decrease your logo width.

Logo Height*: choose to increase/ decrease your logo height.

Search: enable to search any product from your selected category.

Cart Items: enable to show cart button to display cart item list.

Announcement 1: choose to display one of your announcement.

Announcement 2: choose to display your second announcement.

Categories: select categories to display in header menu.

In the last, Save Changes.

How to Manage Footer Settings?

Step 1: Navigate to Appearance > Theme Options > General Settings > Footer Settings.

Show Upper footer*: enable to show services on top of footer.

Select Category: choose to show services on upper footer displayed from your desired services category.

Character Limit: enter limit for your services description to show on upper footer.

Show Middle footer*: enable to show middle footer on site.

Show Main footer*: enable to show main footer on site.

Footer Color: choose to change your footer color in light/ dark.

Show Copyright*: enable to show copyright text at bottom of footer.

Copyright Text: enter text to display in copyright section.

In the last, Save Changes.

Templates Settings

How to Manage Blog Page Settings?

Step 1: Navigate to Appearance > Theme Options > Templates Settings > Blog Settings.

Step 2: Expand the settings page by customizing following options…

  • Blog Page Layout: choose any layout to show page content and sidebar.
  • Grid*: choose to display blog post in one/ two columns.
  • Show Comment*: enable to show comments on blog post.
  • Show Date*: enable to show date on blog post.
  • Limit*: enter character limit for post description.
  • Show Read More*: enable to display read more button on blog post.
  • Read More Label*: label some text to show on read more button.

Step 3: Save Changes. Click to View the Frontend

How to Manage Category Page Settings?

Step 1: Navigate to Appearance > Theme Options > Templates Settings > Category Settings.

Step 2: Expand the settings page by customizing following options…

  • Show Breadcrumb*: enable to show breadcrumb on category page.
  • Category Page Layout: choose any to display category posts and sidebar.
  • Sidebar*: select any sidebar to show on category listing page.
  • Show Comment*: enable to show comments on category post.
  • Show Date*: enable to show date on category post.
  • Show Description*: enable to show category post description.
  • Limit*: enter character limit for post description.
  • Show Read More*: enable to display read more button on category post.
  • Read More Label*: enter some text for read more button.

Step 3: Save Changes. Click to View the Frontend

How to Manage Tag Page Settings?

Step 1: Navigate to Appearance > Theme Options > Templates Settings > Tag Settings.

Step 2: Expand the settings page by customizing following options…

  • Tag Page Layout: choose any to display tag posts and sidebar.
  • Sidebar*: select any sidebar to show on tag listing page.
  • Show Comment*: enable to show comments on tag post.
  • Show Date*: enable to show date on tag post.
  • Show Description*: enable to show tag post description.
  • Limit*: enter character limit for post description.
  • Show Read More*: enable to display read more button on tag post.
  • Read More Label*: enter some text for read more button.

Step 3: Save Changes. Click to View the Frontend

How to Manage Author Page Settings?

Step 1: Navigate to Appearance > Theme Options > Templates Settings > Author Settings.

Step 2: Expand the settings page by customizing following options…

  • Show Breadcrumb*: enable to show breadcrumb on author page header.
  • Author Page Layout: choose any to display author posts and sidebar.
  • Sidebar*: select any sidebar to show on author listing page.
  • Show Comment*: enable to show comments on author post.
  • Show Date*: enable to show date on author post.
  • Show Description*: enable to show author post description.
  • Limit*: enter character limit for post description.
  • Show Read More*: enable to display read more button on author post.
  • Read More Label*: enter some text for read more button.

Step 3: Save Changes. Click to View the Frontend

How to Manage Archive Page Settings?

Step 1: Navigate to Appearance > Theme Options > Templates Settings > Archive Settings.

Step 2: Expand the settings page by customizing following options…

  • Show Breadcrumb*: enable to show breadcrumb on archive page header.
  • Archive Page Layout: choose any to display archive posts and sidebar.
  • Sidebar*: select any sidebar to show on archive listing page.
  • Show Comment*: enable to show comments on archive post.
  • Show Date*: enable to show date on archive post.
  • Show Description*: enable to show archive post description.
  • Limit*: enter character limit for post description.
  • Show Read More*: enable to display read more button on archive post.
  • Read More Label*: enter some text for read more button.

Step 3: Save Changes. Click to View the Frontend

How to Manage Search Page Settings?

Step 1: Navigate to Appearance > Theme Options > Templates Settings > Search Settings.

Step 2: Expand the settings page by customizing following options…

  • Show Breadcrumb*: enable to show breadcrumb on search page header.
  • Search Page Layout: choose any to display search posts and sidebar.
  • Sidebar*: select any sidebar to show on search listing page.
  • Show Comment*: enable to show comments on search post.
  • Show Date*: enable to show date on search post.
  • Show Description*: enable to show search post description.
  • Limit*: enter character limit for post description.
  • Show Read More*: enable to display read more button on search post.
  • Read More Label*: enter some text for read more button.

Step 3: Save Changes. Click to View the Frontend

How to Manage Single Page Settings?

Step 1: Navigate to Appearance > Theme Options > Templates Settings > Single Settings.

Step 2: Expand the settings page by customizing following options…

  • Show Breadcrumb*: enable to show breadcrumb on post header.
  • Page Layout: enable to show post content and sidebar.
  • Sidebar*: choose any sidebar to display on single post.
  • Show Comment*: enable to show post comment on single post.
  • Show Author*: enable to show author on single post.
  • Show Category*: enable to show category on single post.
  • Show Tags*: enable to show tag on single post.
  • Tag Heading: enter text for tag heading.
  • Show Author Box*: enable to show author box on single detail post.

Step 3: Save Changes. Click to View the Frontend

How to Manage Page Not Found Settings?

Step 1: Navigate to Appearance > Theme Options > Templates Settings > Page Not Found Settings.

Step 2: At the settings page, insert subtitle and Label text to go back the page.

Step 3: Save Changes.

How to Manage Single Product Settings?

Step 1: Navigate to Appearance > Theme Options > Product Template Settings > Single Product Settings.

Step 2: At the settings page, enable the Show Breadcrumb* option to display breadcrumb on page header.

Step 3: Go to next, enter code prefix and code postfix to display product code on single product post.

Step 4: Enable the Related Products* option to display your related product on single product post. Customize appearing options as per your desire and Save Changes.

How to Manage Product Page Settings?

Step 1: Navigate to Appearance > Theme Options > Product Template Settings > Product Page Settings.

Step 2: At the settings page, enable the Show Breadcrumb* option to display breadcrumb on page header.

Step 3: From the next Page Layout* option, you can choose any layout to show products and sidebar.

Step 4: Go to next and select sidebar to display on page. Choose any grid style to show product in two/ three/ four column and Save Changes.

Pages and Posts

How to Create a Single Post?

Step 1: Navigate to Posts > Add New.

Step 2: Enter title and description in its given field.

Step 3: Go to Additional Fields area and select any sidebar layout to show post content and sidebar.

Step 4: Navigate to Categories section and click on +Add New Category. A category will be added in All Categories area. Put a check to assign your desired category to the post. You can also create categories from the Posts > Categories option.

Note: Do the same in case of adding tag to the post.

Step 5: Set the featured image and Publish the post.

How to Create a VC Page?

Step 1: Navigate to Pages > Add New at admin sidebar.

Step 2: Enter title and click on Backend Editor to activate the visual composer.

Step 3: Press the Add Element / + like button at new appeared window.

Step 4: Add element window will appear, having a lot of shortcodes. You just click on Flavia tab to open our built-in shortcodes. Click on your desired shortcode, customize options of appeared pop-up and Save Changes.

Step 5: Don’t forget to select “Visual Composer” template from Page Attribute section.

Step 6: Scroll page down and customize the page Additional Fields options to manage the vc page. In the last, Publish the page.

Step 7: To make this page as a home page, go to Settings > Reading at your admin sidebar. Choose a static page option and select your desired page over the Front page dropdown and Save Changes.

How to Create a Contact Us Page?

Step 1: Navigate to Pages > Add New at admin sidebar.

Step 2: Write the name of contact page in title field. Remember that your selected template must be Visual Composer while creating a contact page.

Step 3: Click on Backend Editor > Add Element. Choose and click on contact relevant vc element like “Contact Form, Contact Information, Google Map”. Customize options of appearing popup and Save Changes.

Step 4: Navigate to Page Additional Fields area to manage the further contact page settings. After doing all this, Publish the page Click to View the Frontend.

How to Create a About Us Page?

Step 1: Navigate to Pages > Add New at admin sidebar.

Step 2: Enter title and navigate to Page Attribute section. Select Visual Composer template to activate the visual composer.

Step 3: Now click on Backend Editor > Add Element. Choose required vc elements for about us page one by one. Customize options and Save Changes. Now go to meta part for further page settings.

Note: Click to display front view of About Us page Click to View the Frontend

How to Customize Services Custom Post?

Step 1: Navigate to Services > Add New at admin sidebar.

Step 2: Enter title and description in its given field.

Step 3: Scroll down to Services Additional Fields and select featured icon to display with services.

Step 4: Publish the service post.

Note: For services display, create a vc page using the Simple Services shortcode. It will display your services on site.

How to Customize Team Custom Post?

Step 1: Navigate to Team > Add New. at admin sidebar.

Step 2: Enter title and designation of member in Designation field to show on front site.

Step 3: Set the featured image and Publish the post

Note: You can show your team member using Our Team shortcode.

How to Customize Testimonial Custom Post?

Step 1: Navigate to Testimonial > Add New. at admin sidebar.

Step 2: Enter title and description in its given field.

Step 3: Don’t forget to set the featured image and Publish the post

Note: For testimonial display, create a vc page using the Customer Reviews in Carousel shortcode. It will display testimonial posts on front site.

How to Customize Btands Custom Post?

Step 1: Navigate to Brands > Add New. at admin sidebar.

Step 2: Enter title in title input box. Go to next and link your brand in the Link field.

Step 3: Set the featured image and Publish the post

Note: You can show these brands post using Our Brands shortcode. But remember this shortcode used only in sidebar area not for content area.

How to Customize Product Custom Post?

Step 1: Navigate to Products > Add New. at admin sidebar.

Step 2: Enter title and description in its given field.

Step 3: Scroll down to Page Additional Fields and enable Show Product Video. In the appearing fields, put the video title and insert vimeo video link to display video on single product post.

Step 4: Display your product logo by installing logo in Brand Logo field. Enable Show Deal option. Select your deal date and end time to display in sidebar with “Our Deal” widget.

Step 5: Using product date section you must enter the product price in Regular price (£) option, it will show the product price on frontend. Use further product options as per your desire.

Step 6: Put some text in Product Short Description, to show few text lines on product detail page.

Step 7: Set the Product Image from the right sidebar also upload product gallery images if possible. Publish the product post. Click to View the Frontend

Note: To create a product page, use woo commerce shortcodes on vc page. It will display your products on front site.

Others

How to Manage Custom Sidebars Settings?

Step 1: Navigate to Appearance > Theme Options > Custom Sidebars Settings.

Step 2: At the settings page, click on Add More button to create a new sidebar and enter your sidebar name in the appearing field. Save Changes.

Step 3: Navigate to Appearance > Widget at admin side panel. Drag and drop our built-in widgets in the newly created sidebar and Save it one by one. Now you can use it at any page or posts.

How to Manage Newsletter Settings?

Step 1: Navigate to Appearance > Theme Options > Newsletter Settings.

Step 2: On the appeared page, enter the MailChimp API Key and List ID to enable the site for sending emails.

Step 3: Save Changes.

How to Manage Social Settings?

Step 1: Navigate to Appearance > Theme Options > Social Settings.

Step 2: As the settings page appear, choose your desired social icons to activate Social Profile to display on site. Your selected icons appeared below with some custom option.

Step 3: Change your selected icon color and its background from given options. Enter your social link in the area provided and Save Changes.

Credits

The credit for the development of this marvelous theme goes to:

  • Google Fonts
  • Bootstrap
  • Developers of Javascript files which have been utilized herein.
  • Team of Webinane.com