Ultimate Layouts

Responsive Grid - Addon For WPBakery Page Builder

• created: 08/11/2016
• latest update: 05/07/2017
• by: BeeTeam368
• beeteam368.com/ultimate-layouts
• email: support@beeteam368.com

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via support tab. Thanks so much!

1. Go to your WordPress admin panel and navigate to Plugins -> Add New.
2. Click “Upload” and then Upload.
3. Select the archive “ultimate-layouts-vc-vX.x.x.zip” and click “Install Now”.
4. Activate the Ultimate Layouts - Responsive Grid – Addon For WPBakery Page Builder plugin by clicking “Activate” button. 

You can watch video tutorials here: https://www.youtube.com/watch?v=jti4SrdtPYE

Step 1:

Step 2:

"Grid" allows up to 12 columns across the page.
Supports 04 types of filters: Inline Buttons, Dropdown List, Smart Tabs, Sorting block.
Pagination: Page Numbers, Loadmore Button & Infinite Scroll.

Styles and Layouts:

1. AFRICAN LILY -> View Demo
   
   
   
    
2. ALPINE THISTLE -> View Demo
   
   
   
   
   Equal Height:
   
   
   
    
3. AMARYLLIS -> View Demo
   
   
   
    
4. AMAZON LILY -> View Demo
   
   
   
    
5. ARUM LILY -> View Demo
   
   
   
   
    
6. BABY’S BREATH -> View Demo
   
   
   
    
7. BARBERTON -> View Demo
   
   
   
    
8. CHRISTMAS ROSE -> View Demo
   
   
   
    
9. GRID & LIST TOOGLE -> View Demo
   
   

Styles and Layouts (MASONRY):

1. AFRICAN LILY -> View Demo
   
   
   
    
2. ALPINE THISTLE -> View Demo
   
   
   
    
3. AMARYLLIS -> View Demo
   
   
   
    
4. AMAZON LILY -> View Demo
   
   
   
    
5. ARUM LILY -> View Demo
   
   
   
    
6. CHRISTMAS ROSE -> View Demo
   
   

Layout Settings:

"Carousel Traditional" allows up to 12 columns across the page.
"Filter" is not supported.
"Pagination" is not supported.

Styles and Layouts:

1. BIRD OF PARADISE -> View Demo
   
   
   
    
2. BLEEDING HEART -> View Demo
   
   
   
    
3. BLOOM -> View Demo
   
   
   
    
4. BLUE THROATWORT -> View Demo
   
   
   
    
5. BROOM -> View Demo
   
   
   
    
6. BUSY LIZZIE -> View Demo
   
   

Layout Settings - Refer: CLICK HERE

Carousel Settings:

"Carousel Free" does not support custom columns.
"Filter" is not supported.
"Pagination" is not supported.

Styles and Layouts:

1. CALLA LILY -> View Demo
   
   

Layout Settings - Refer: CLICK HERE

Carousel Settings:

"Content Blocks" does not support custom columns.
Supports 03 types of filters: Inline Buttons, Dropdown List, Smart Tabs.
Pagination: Next/Prev (button).

Styles and Layouts:

1. CONEFLOWER -> View Demo
   
   
   
    
2. DAFFODIL -> View Demo
   
   
   
    
3. EVENING PRIMROSE -> View Demo
   
   
   
    
4. FEVERFEW -> View Demo
   
   
   
    
5. FLAME TIP -> View Demo
   
   
   
    
6. FLAMINGO FLOWER -> View Demo
   
   
   
    
7. FORGET ME NOT -> View Demo
   
   
   
    
8. FOXGLOVE -> View Demo
   
   
   
    
9. GAY FEATHER -> View Demo
   
   
   
    
10. GLOBE THISTLE -> View Demo
    
    
    
     
11. GOLDEN ROD -> View Demo
    
    
    
     
12. GRAPE HYACINTH -> View Demo
    
    
    
     
13. GUERNSEY LILY -> View Demo
    
    
    
     
14. HYACINTH -> View Demo
    
    
    
     
15. IRIS -> View Demo
    
    
    
     
16. JERSEY LILY -> View Demo
    
    
    
     
17. LADY’S MANTLE -> View Demo
    
    
    
     
18. LARKSPUR -> View Demo
    
    
    
     
19. LAVENDER -> View Demo
    
    
    
     
20. LILAC -> View Demo
    
    
    
     
21. LILY -> View Demo
    
    
    
     
22. LISIANTHUS -> View Demo
    
    
    
     
23. LOBSTER CLAW -> View Demo
    
    
    
     
24. LOVE IN A MIST -> View Demo
    
    
    
     
25. SEA LAVENDER -> View Demo
    
    
    
     
26. SEPTEMBER FLOWER -> View Demo
    
    
    
     
27. SNAPDRAGON -> View Demo
    
    
    
     
28. TRANSVAAL DAISY -> View Demo
    
    

Big Item Settings - Refer: CLICK HERE

Small Item Settings:

"List" does not support custom columns.
Supports 04 types of filters: Inline Buttons, Dropdown List, Smart Tabs, Sorting block.
Pagination: Page Numbers, Loadmore Button & Infinite Scroll.

Styles and Layouts:

1. CORNFLOWER -> View Demo
   
   
   
    
2. MIMOSA -> View Demo
   
   
   
    
3. MOTH ORCHID -> View Demo
   
   
   
    
4. MUMS -> View Demo
   
   
   
    
5. PEONY -> View Demo
   
   
   
    
6. PERUVIAN LILY -> View Demo
   
   
   
    
7. CANTERBURY BELLS -> View Demo
   
   
   
    
8. BELLS OF IRELAND -> View Demo
   
   
   
    
9. MARIGOLD -> View Demo
   
   
   
    
10. MICHAELMAS DAISY -> View Demo
    
    

Layout Settings - Refer: CLICK HERE

"Creative" does not support custom columns.
Supports 04 types of filters: Inline Buttons, Dropdown List, Smart Tabs, Sorting block.
Pagination: Page Numbers, Loadmore Button & Infinite Scroll.

Styles and Layouts:

1. PRAIRIE GENTIAN -> View Demo
   
   
   
    
2. ROSE -> View Demo
   
   
   
    
3. SCABIOUS -> View Demo
   
   
    

Layout Settings - Refer: CLICK HERE

Content Settings

"Timeline" does not support custom columns.
Supports 04 types of filters: Inline Buttons, Dropdown List, Smart Tabs, Sorting block.
Pagination: Page Numbers, Loadmore Button & Infinite Scroll.

Styles and Layouts:

1. CLIMBING ROSE -> View Demo
   
   
    
2. MILK FLOWER -> View Demo
   
   
    

Layout Settings - Refer: CLICK HERE

Styles and Layouts:

1. BUTTON GALLERY -> View Demo
   
   
    

STEP 1:

STEP 2:

STEP 1 - Enabled:

STEP 2 - Set up the elements:

You can use this tool to set and refine the initial display data for the layout.
To properly display filters, you need to specifically declare post types as well as taxonomies.

1. Single Post Type
   
   
   
    
2. Single Taxonomy
   
   
   
    
3. Multiple Post Types
   
   
   
    
4. Multiple Taxonomies
   
   
   
    
5. Query Type 1: INCLUDE categories, tags, taxonomies...
   
   
   
    
6. Query Type 2: EXCLUDE categories, tags, taxonomies...
   
   
   
    
7. Query Type 3: INCLUDE Posts/Pages/Custom Post Types...
   
   
   
    
8. Query Type 4: INCLUDE and EXCLUDE categories, tags, taxonomies...
   
   
   
    
9. Post Count ( Set max limit for items in grid or enter -1 to display all. If blank, defaults to: 50 )
   
   
   
    
10. Items per page ( Number of items to show per page. If blank, defaults to: 10 )
    
    
    
     
11. Order Type & Sorting Order
    
    
     
12. The whole tool is based on the features and code provided by Wordpress, if you are a developer, please refer to here: https://gist.github.com/luetkemj/2023628

To make it easy for users to find the relevant data for each category or taxonomy, you need to use the following tools to set up.

Add Filter Container:

You can watch video tutorials here: https://www.youtube.com/watch?v=FwtaFBTlJdw

Filter Settings:

1. Filter: Inline Button -> View Demo
   
   
   
    
2. Filter: Dropdown List -> View Demo
   
   
   
    
3. Filter: Smart Tab -> View Demo
   
   
   
    
4. Filter: Dropdown List ( Sub Terms ) -> View Demo
   
   
   
    
5. Filter: Dropdown List ( MULTIPLE TAXONOMIES FILTER ) -> View Demo
   
   
   
    
6. Hashtag Filter -> View Demo
   
   
   
    
7. Sort Order - Designates the ascending or descending order of the "orderby" parameter Settings
   
   
   
    
8. Order - Sort retrieved posts by parameter Settings
   
   
    
9. The whole tool is based on the features and code provided by Wordpress, if you are a developer, please refer to here: https://gist.github.com/luetkemj/2023628 .

You enter here categories or taxonomies, they will be listed on the filter.

This is a group of options for the layout displays the products from plugin WooCommerce.

Update Video Source For Post or Custom Post Type:

Configuration for WPBakery Page Builder:

If you already have a post meta containing video source, do the following:

Change Category or Taxonomy color & background:

Configuration for WPBakery Page Builder:

Image Hover Overlay background:

1. STEP 1: Create a folder in your theme with the name: ul-templates
   
    
2. STEP 2: Copy the entire directory containing the source code (the structure of each item layout) and move to the newly created folder ( ul-templates )
   
   COPY:
   
   
   AND PASTE:
   
    
3. STEP 3: Take a look at the structure of the layouts and edit them the way you want. Observe and study the source code carefully, avoiding unnecessary errors.
   

    /*title font custom*/
        html body .ultimate-layouts-container h3.ultimate-layouts-title,
        html body .ultimate-layouts-container h3.ultimate-layouts-title a{
            /*title font properties*/
        }
        
        /*quick view*/
            html body .ul-quick-view-style h3.ultimate-layouts-title,
            html body .ul-quick-view-style h3.ultimate-layouts-title a{
                /*title font properties for quick view*/
            }
        /*quick view*/	
    /*title font custom*/
    
    /*meta font custom*/
        html body .ultimate-layouts-container .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>*, 
        html body .ultimate-layouts-container .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>*,
        html body .ultimate-layouts-container .ultimate-layouts-metas a, 
        html body .ultimate-layouts-container .ultimate-layouts-metas-st2 a,
        html body .ultimate-layouts-container .ultimate-layouts-categories>a,
        html body .ultimate-layouts-container .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span, 
        html body .ultimate-layouts-container .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span,
        html body .ul-quick-view-style .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>*,
        html body .ul-quick-view-style .ultimate-layouts-metas a,
        html body .ul-quick-view-style .ultimate-layouts-categories>a,
        html body .ul-quick-view-style .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span,
        html body .ul-quick-view-style .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span{
            /*meta font properties*/	
        }
        
        /*font icon for post meta*/
            html body .ultimate-layouts-container .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* i.fa,
            html body .ultimate-layouts-container .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span:before, 
            html body .ultimate-layouts-container .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span:before,
            html body .ul-quick-view-style .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* i.fa,
            html body .ul-quick-view-style .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span:before,
            html body .ul-quick-view-style .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span:before{
                /*meta font icon properties (font awesome)*/	
            }
        /*font icon for post meta*/		
    /*meta font custom*/
    
    /*Main font*/
        html body .ultimate-layouts-container .ultimate-layouts-excerpt,'. 
        html body .ultimate-layouts-container .ultimate-layouts-excerpt p,
        html body .ul-quick-view-style .ul-quick-view-content .ul-quick-view-body .ul-single-post-content,
        html body .ul-quick-view-style .ul-quick-view-content .ul-quick-view-body .ul-single-post-content p{
            /*main font properties*/
        }
    /*Main font*/
    
    /*filter font custom*/
        html body .ultimate-layouts-container .ultimate-layouts-filter-container .ultimate-layouts-sc-filter-container .ultimate-layouts-filter-item{
            /*filter font properties*/
        }
    /*filter font custom*/
    
    /*tab font custom*/
        html body .ultimate-layouts-container .ultimate-layouts-filter-container .ul-smart-tab-filter .ul-smart-tab-title-wrap .ul-smart-tab-title{
            /*tab font properties (for filter smartTab)*/
        }
    /*tab font custom*/
    
    /*pagination font custom*/
        html body .ultimate-layouts-container .ul-pagination-wrap .ul-loadmore-style,
        html body .ultimate-layouts-container .ul-pagination-wrap .ul-page-numbers .paginationjs .paginationjs-pages ul li>a {
            /*pagination font properties*/
        }
    /*pagination font custom*/
    
    /*price font custom*/
        html body .ultimate-layouts-container .ultimate-layouts-woo-element .ultimate-layouts-woo-price-cart-block .ultimate-layouts-woo-price .amount,
        html body .ul-quick-view-style .ultimate-layouts-woo-element .ultimate-layouts-woo-price-cart-block .ultimate-layouts-woo-price .amount{
            /*price font properties (for Woo)*/
        }
    /*price font custom*/
    
    /*add to cart font custom*/
        html body .ultimate-layouts-container .ultimate-layouts-woo-element .ultimate-layouts-woo-price-cart-block .ultimate-layouts-woo-cart .add_to_cart_button,
        html body .ul-quick-view-style .ultimate-layouts-woo-element .ultimate-layouts-woo-price-cart-block .ultimate-layouts-woo-cart .add_to_cart_button{
            /*add to cart font properties (for Woo)*/
        }
    /*add to cart font custom*/

1. Install Plugin Require (You need to install additional plugins "Kodex Posts likes" to be able to use the additional functions related to the button "like count"):
   
    
2. Install Plugin "Kodex Posts likes":
   - Step 1:
   
   
   
   - Step 2:
   
   
   
   - Step 3:
   
   
   
   
   - Step 4 - Settings: