VisionArt Pro

How to Install Theme?

Go to this link.

Updating theme to latest version

Go to this link to update you theme

Frequently Asked Question

Before starting please visit our Frequently Asked Question link, to know more about Full Site Editing Themes

Installing Required Plugin for VisionArt Pro

VisionArt Pro comes with our Premium Plugin FSE Pro, after you purchase VisionArt Pro the plugin comes bundled with the theme. As most of the blocks and patterns are inherited with the pro plugin we have bundled the theme and plugin together. You can install and activate it by clicking a few buttons

1. After installation of the theme, go to WordPress Dashboard, there you will find the notice “This theme requires the following plugin: FSE Pro”, click on the “Begin Install Button” as shown in the picture below:

2. Then Click on the “Install” button

3. After Installation of the FSE PRO Plugin click on “Return to Dashboard Button” to enter the license key
4. Get your product license key from the My Account Page. Activating your license key is mandatory.
5. Enter the plugin’s license key from Plugins -> FSE Pro plugin license and click on Activate License

Note: Please visit FAQ for FSE Pro Plugin if you have any confusion regarding the plugin installation

How to Edit Header?

VisionArt Pro Support 15 kinds of header pattern for each page.
This is how you add the header pattern of your choice to p Articular page or post:

1. Go to “Appearance => Editor” or the editor of the particular page/post where you want to change or edit the header
2. If you want to add another header pattern click on the list view option on the top left and click in group and remove the existing header, finally select the header you want to add
3. Choose the Header pattern as per your need from “Patterns” or click on the “+” sign and add the header of your choice, it will be added to your page/post
4. To edit a particular part of the header you will have to click on the content itself to replace or add text, images, links or icon
5. Finally click “Save” to save the changes

Patterns in VisionArt Pro

Patterns in VisionArt Pro are predefined lists of in-built sections. Patterns are built with a different type of blocks.

You can easily add patterns in any part of your website.
You will just have to click on ‘+’ sign on top left of your page or post, then you will see tab for “Pattern” click on that to see list of patterns. Under Scroll Down you will find “VisionArt Pro” which will display list of our VisionArt Pro pattern

Pattern are group of blocks. Once a pattern is added in editor, they are now individual blocks that can be moved edited or replaced. The pattern stops being pattern as soon as it placed in the editor. The content of patterns are always saved even if the users switches theme. It might look different in different themes.

How to Open Site Editor?

If you are on WordPress Dashboard then go to Appearance -> Editor to open the Site Editor.
If you are on Site Front end then you will see WP Admin Bar on the top of the page, click on “Edit Site” to open the Site Editor.

Add and Edit Menu

You can Select predefined menu and create you own customized menu.
This video shows how to select predefined menu:

1. This Video show how to create your own custom menu:

2. This video shows how to select predefined menu:

Site Navigation Menu

Please visit this link for Navigation Block. You can edit existing menu or create a new one.

Blocks in VisionArt Pro

To use Blocks in VisionArt Pro you will have to activate our Premium Plugin FSE Pro Plugin.

VisionArt Pro supports 13 different blocks:

1. Case Study
2. Skill Bar
3. Masonry
4. Date
5. Accordion
6. Popup Video
7. Playlist
8. Header Search
9. Header Social
10. Icons(Beta)
11. Countdown
12. Slider
13. Tabs

Patterns in VisionArt Pro

There are 35different Patterns in VisionArt Pro.
Here is the list of Patterns VisionArt Pro supports including patterns from FSE Pro Plugin.

1. 1. 404 Header With Background
   2. 404 Header
   3. Archive Header With Background
   4. Archive Header
   5. Contact
   6. Events
   7. FAQ
   8. Featured Content
   9. Footer Default
   10. Footer Four Columns
   11. Footer Three Columns
   12. Gallery
   13. Header Default
   14. Header Media
   15. Header Transparent
   16. Header With Search Cart
   17. Header With Search
   18. Header With Social Search
   19. Hidden 404
   20. Post Header With Background
   21. Post Header
   22. Pricing
   23. Product Sidebar
   24. Recent Blog
   25. Search Header With Background
   26. Search Header
   27. Services
   28. Slider
   29. Stats
   30. Subscribe
   31. Team
   32. Testimonial
   33. Video Section
   34. On Sale Products
   35. Top Rated Products
   36. Product Sidebar

How to work with VisionArt Pro Blocks and Patterns

After opening the site editor, there are 3 ways you can add Blocks and Patterns to your website:

Drag and Drop

1. 1. 1. 1. Click on “+” sign on the top bar to display Blocks and Pattern
         2. If you want to add Blocks click on Blocks, Scroll down and to find “FSE Blocks”, choose the block you wish to add
         3. If you want to add Patterns, Click on Pattern then choose “VisionArt” to find all the patterns provided by VisionArt Pro
         4. Simply Drag and Drop your block/pattern to desired site area
         5. Make necessary changes
         6. Finally, Click “SAVE” to save changes

Top Tool Bar

1. 1. 1. 1. Click on “+” sign on the top bar to display Blocks and Pattern
         2. If you want to Block Scroll down and to find “FSE Blocks”, choose the block you wish to add
         3. If you want to add Patterns, Click on pattern then choose VisionArt to find all the pattern provided by VisionArt Pro
         4. Click on desired pattern to add
         5. Make necessary changes
         6. Finally, Click “SAVE” to save changes

Adding Directly

1. 1. 1. 1. Click on “+” sign in the template or page to display patterns and blocks
         2. Then search for a block or pattern in the search bar
         3. Make necessary changes
         4. Finally, Click “SAVE” to save changes

How to Edit Pattern Content?

First, click on the pattern content you wish to edit/customize
You can select the section/content in three ways

1. 1. 1. 1. Clicking on the section itself
         2. List View
         3. Footer Interface Bar

Once the section is selected you can edit its content or if you want to customize the section’ properties/options, click the three dots and select your desired action. Duplicate, Remove, Copy or Add desired section before or after the current section.

WooCommerce Block supported patterns

VisionArt Pro now supports WooCommerce Blocks. You will have to install and activate WooCommerce Plugin to use these pattern. You can add Featured Products in these patterns.
Here are the patterns that supports WooCommerce Blocks:

1. Products Sidebar
2. Top Rated Products
3. On Sale Products

How to add WooCommerce products to the pattern?

VisionArt Pro supports WooCommerce blocks, in the above mentioned pattern you can add the products category and descriptions along with button that redirects to the products.
After activating theme, by default few patterns that supports WooCommerce will be activated. You can choose WooCommerce Featured product patterns directly from the pattern.
Here is how you display featured category to the pattern:

1. Drag and drop the pattern you want to add in the section or click on “+” Sign and add desired pattern
2. After adding WooCommerce supported pattern you will find “Featured Category” option you can search the category of the product you want to display and add
3. Finally click on done and Save changes

Product Sidebar

Products Sidebar pattern allows you to select and display product category along with the list of category in sidebar.

1. 1. Click on “+” sign on the top bar to display Blocks and Pattern, Click on Pattern
   2. Click on dropdown menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
   3. Scroll down and to find “Products Sidebar”, click to add Sidebar Products on your website or drag and drop
   4. To add category with sidebar, go to the front end of the page and select the category you wish to add in shop
   5. Finally, click Save to save changes

Top Rated Product

VisionArt Pro supports Top rated product pattern, this section allows you to display top rated products. The top rated products will automatically displayed once you add this pattern.
Here is how you add this pattern:

1. 1. 1. Click on “+” sign on the top bar to display Blocks and Pattern, Click on Pattern
      2. Click on dropdown menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
      3. Scroll down and to find “Top Rated Product”, click to add Top Rated Product on your website or drag and drop
      4. For advance settings, click on setting button on top right to edit Layout(Rows and column), enable/disable Content (Product Image, Product title, Product price, Product rating, add to cart button) And so on
      5. Finally, click Save to save changes

On Sale Product

VisionArt Pro supports On Sale product pattern, this section allows you to display on sale products. On the sale products will automatically displayed once you add this pattern.
Here is how you add this pattern:

1. 1. 1. Click on “+” sign on the top bar to display Blocks and Pattern, Click on Pattern
      2. Click on dropdown menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
      3. Scroll down and to find “On Sale product”, click to add On Sale product on your website or drag and drop
      4. For advance settings, click on setting button on top right to edit Layout(Rows and column), enable/disable Content (Product Image, Product title, Product price, Product rating, add to cart button) And so on
      5. Finally, click Save to save changes

Patterns supported by VisionArt Pro

How to Edit Header?

VisionArt Pro Support 15 different kinds of header pattern for each page.
This is how you add the header pattern of your choice to a particular page or post:

1. 1. 1. 1. 1. 1. Go to “Appearance => Editor” or the editor of the particular page/post where you want to change or edit the header
               2. If you want to add another header pattern click on list view option on top left and click in group and remove the existing header, finally select the header you want to add
               3. Choose Header pattern as per your need from “Patterns” or click on “+” sign and add header of your choice, it will be added to your page/post
               4. To edit particular part of the header you will have to click on content itself to replace or add text, images, link or icon
               5. Finally click “Save” to save the changes

Header Media

VisionArt Pro supports Header Media pattern, using this pattern you can add image in your header area along with featured image, button, header media text
Here is how you edit header media:

1. 1. 1. 1. 1. 1. Click on “+” sign on block pattern tab to display Blocks and Pattern, Click on Pattern
               2. Click on drop down menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
               3. Scroll down to find “Header Media”, click to add or drag and drop in desired area
               4. Click on the content of header media itself to replace images, text and button. You can add and replace header media such as image, text, link as per your need
               5. Finally click on Save to save changes

Contact

VisionArt Pro supports contact pattern, this pattern allows you to add contact form along with contact info and social media links.
Here is how you add contact to your site:

1. 1. 1. 1. 1. 1. Click on “+” sign on block pattern tab to display Blocks and Pattern, Click on Pattern
               2. Click on drop down menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
               3. Scroll down to find “Contact”, click to add or drag and drop in desired area
               4. To add contact form download and activate Contact Form 7 plugin
               5. Click on the default social media icon to change the link
               6. Edit contact as per your requirement by clicking in content itself
               7. Finally, click “Save” to save changes

Events

VisionArt Pro supports events pattern, to use this pattern you will have to add and activate Essential Content Type Pro Plugin.
After activating the plugin you can easily create the upcoming events of your business, add date time along with featured image.
Here is how you add event in site:

1. 1. 1. 1. 1. 1. First, you will have to add Essential Content Type Pro Plugin to use this pattern
               2. Click on “+” sign on block pattern tab to display Blocks and Pattern, Click on Pattern
               3. Click on drop down menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
               4. Scroll down to find “Event”, click to add or drag and drop in desired area
               5. After activating the plugin you will find Event option in your WordPress Dashboard as shown in the image
               6. Create new event by clicking on “Add New” button on top left
               7. Add content accordingly, the event will be displayed automatically in your page or post
               8. For advance option click on the setting button of you page or post to edit options like Title, include type, color, layout, style(4 styles) number of posts and so on
               9. Finally, click “Save” to save changes

Featured Content

VisionArt Pro supports Featured Content pattern, here you can add featured content of your business along with images and text.
Here is how you add featured content to your website:

1. 1. 1. 1. 1. 1. Click on “+” sign on block pattern tab to display Blocks and Pattern, Click on Pattern
               2. Click on dropdown menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
               3. Scroll down to find “Featured Content”, click to add or drag and drop in desired area
               4. If you want to customize content in Featured Content, simply click on the content itself and edit text, images, button
               5. Finally click on Save to save changes

Footer with Four Columns

The Footer Three Columns pattern allows you to insert a section that you can display right above your default footer. In the pattern, by default, there are three columns and you can use the columns to add quick information and also your contact info including your social icons.

1. 1. 1. 1. 1. 1. Click on “+” sign on the top bar to display Blocks and Pattern, Click on Pattern
               2. Click on dropdown menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
               3. Scroll down and to find “Footer Three Columns”, click to add Footer Three Columns on your website or drag and drop
               4. Edit Footer Three Columns accordingly by changing text, social links, newsletter, add recent posts
               5. Finally click Save, to save changes

Gallery

VisionArt Pro is a photography theme, to show case your create it supports gallery pattern.
Gallery pattern in VisionArt allows you to display images gallery. You can showcase images according to the type create a separate tabs.
Here is how you add gallery to you site:

1. 1. 1. 1. 1. 1. Click on “+” sign on the top bar to display Blocks and Pattern, Click on Pattern
               2. Click on dropdown menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
               3. Scroll down and to find “Gallery”, click to add gallery on your page/post or drag and drop
               4. You can edit the default images of the gallery by clicking in the image itself
               5. Create a new tab by clicking on “New Tab” option and rename the tab according to your choice
               6. To add image in the new tab you created click to get inside the tab and click on “+” sign to upload images of your choice
               7. Finally click “Save”, to save changes

Pricing

VisionArt Pro supports Pricing pattern, this pattern allow you to display pricing of your product.
Here is how you add Pricing to your site:

1. 1. 1. 1. 1. 1. Click on “+” sign on the top bar to display Blocks and Pattern, Click on Pattern
               2. Click on drop down menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
               3. Scroll down and to find “Pricing”, click to add Pricing on your site or drag and drop
               4. To edit the content of service click on content itself
               5. For advance setting click on the setting icon on the top right of the page to edit color,typography, dimension
               6. Finally, click “Save” to save changes

Services

VisionArt Pro supports services pattern, this pattern allows you to display the services you provide. You can add image along with header , text and read more text link.
The image in services has animation effect as well.
Here is how you add services in your site:

1. 1. 1. 1. 1. 1. Click on “+” sign on the top bar to display Blocks and Pattern, Click on Pattern
               2. Click on drop down menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
               3. Scroll down and to find “Services”, click to add Services on your site or drag and drop
               4. To edit the content of service click on content itself
               5. For advance setting click on the setting icon on the top right of the page to edit color,typography, dimension
               6. Finally, click “Save” to save changes

Stats

VisionArt Pro supports stats pattern, this pattern allows you to display Stats of your business, like product sold, happy client and so on.
Here is how you add Stats in your website:

1. 1. 1. 1. 1. 1. Click on “+” sign on the top bar to display Blocks and Pattern, Click on Pattern
               2. Click on drop down menu and select “VisionArt Pro” to see list of pattern provided by VisionArt Pro
               3. Scroll down and to find “Stats”, click to add Stats on your site or drag and drop
               4. Edit Stats by clicking on the stats content itself, edit number and stats title accordingly
               5. For advance setting click on the setting icon on the top right of the page to edit color,typography, dimension
               6. Finally click Save, to save changes

How to to duplicate sections?

Duplicate section can be used if you want add similar section in your pattern.
For Example: If you want to add one more column in between your Featured Content Duplicate section can be used, as it will create similar section and you can edit the content accordingly.

The simplest way to duplicate section:
You can simple click on the section you want to duplicate and press (CLTR + Shift +D) to duplicate the section you want to copy.

Duplicate section is very easy step to add on particular sections in your pattern. It can be done in two ways via Interface Selection Footer bar or Table of content (List View)

1. Step of Duplication By Interface selection footer bar:

1. 1. 1. 1. 1. • Add the desired pattern, then click on the section you want to duplicate
               • You will find a footer interface at bottom of you page there you can click on “Group” or “Columns” or “Image” or “Section” you want to duplicate
               • Then click on the three dots menu on the tool bar, click on the “Duplicate” option to replicate your desired section or design
               • Edit the section accordingly
               • Click on “Save” button to save your changes

2. Steps of Duplication by using List View

1. 1. 1. 1. 1. • Add the desired pattern, then click on the section you want to duplicate
               • Open the “List View” tab from top tool bar, to open the table of content
               • Scroll down to the section that you want to duplicate
               • Click on three dots menu and select “Duplicate” option to replicate your desired section or design
               • Edit the section accordingly
               • Click on “Save” button to save your changes

Templates in VisionArt

You can find 27 different Templates provided by our VisionArt theme. You can customize these templates if you feel like changing anything on a certain template and wish to see those changes across your site.

1. 1. 1. 1. 1. 1. Front Page: Displays the home page
               2. 404: Displays when no content is found
               3. Archive Product: Display your products
               4. Archive: Displays posts by a category, tag, author or date
               5. Blank
               6. Blog (Sidebar on Left)
               7. Blog (Sidebar on Right)
               8. Home: Displays posts on the homepage, or on the Posts page if a static homepage is set
               9. Index: Displays Posts
               10. Page: Displays a single page
               11. Product Search Results: Displays seacrch results for your store
               12. Search: Displays search results
               13. Shop With Full Width
               14. Shop With No Sidebar
               15. Shop(Sidebar on Left)
               16. Shop(Sidebar on Right)
               17. Single Page(No Sidbebar Full Width)
               18. Single Page(Sidebar on Left)
               19. Single Page(Sidebar on Right)
               20. Single Post(No Sidebar Full Width)
               21. Single Post(Sidbear on Left)
               22. Single Post(Sidbear on Right)
               23. Single Product: Displays a single product
               24. Single: The default template for displaying any single post or attachment
               25. Product by Category: Displays products filtered by a category
               26. Products by Tag: Displays products filtered by a tag

Template Parts in VisionArt

There are 16 different Template Parts in VisionArt

1. 1. 1. 1. Footer With Four Columns
         2. All Products
         3. Footer With Three Columns
         4. Footer
         5. Header Transparent Free
         6. Header Transparent With Cart
         7. Header Transparent
         8. Header With Search Cart
         9. Header With Search
         10. Header With Social Search
         11. Header
         12. Page Content
         13. Post Content
         14. Product Sidebar
         15. Sidebar
         16. Mini CArt: Template used to display the Mini Cart Drawer