Introduction

Thank you so much for choosing our plugin. We truly appreciate and sincerely hope you enjoy our plugin!

It isotope filter addon for elementor, user creates portfolio filter, product filter and post-filter on its page

Elf's amazing features, 10 kinds of attractive layout design, 3 kinds of column layouts, 12 plus wonderful button styles and more than 50+ control settings that let the user easily customize

• Plugin Author: BakshiWP
• https://codecanyon.net/item/elfi-masonry-filter-addon-for-elementor/25556235
• Email: [email protected]

Main Features

• 10 unique designs
• Portfolio, product, and post masonry filters
• 2,3, and 4 column layouts
• 12+ Cool Button Style
• Amazing smooth hover effect
• Popup video for the item
• Popup content with image gallery
• Pagination 
• Read more button
• 50+ control panel settings
• 5 unique portfolio templates (included)
• Fully responsive design
• Super customized addon
• All browsers supported
• Clean coding, validate W3C
• Well documented

Styling Options

• Super customization including typography, color, and design.
• Gradient background effect.
• Beautiful button styling

Need Support?

If you have any questions regarding this plugin, please mail to us [email protected]

System Requirements

• WordPress 4.0 or Higher
• PHP version 5.7 or greater
• MySQL version 5.6 or greater OR MariaDB version 10.0 or greater

Reference

Plugin Installation

To use this theme you must have a working version of WordPress already installed. If you need help in installing WordPress follow the instruction here: https://codex.wordpress.org/Installing_WordPress

Plugin Installation

Please follow the screenshots below to install the plugin

Folder Structure

Inside the Elfi masonry addon  folder, you will find two folders and a documentation file Please Have a look at the Screenshot

1. Extra: This is  Demo data for Elfi masonry single template
2. Plugin: The Main file of  Elfi Masonry Addon, Click and find a zip file
3. Documentation:   This is the Documentation link Page

Active Elfi Masonry Addon Elementor

After activating the Elf Masonry filter add-on, a post type name will create "Elf Masonry", please search the Dashboard Admin Menu section 

Elfi Portfolio Post:  Now create a new Elfi Post and add a category  from this page or Elfi category

Elfi Category Page: Create Category from here 

Elementor Addon:  Now create a page and click on 'Edit with Elementor', in a few seconds it will be redirected to the Elementor editor panel. Now type 'elfi' in the search box. Drag “Elf Masonry” and create your first portfolio filter

Elfi Query Settings

1. Post Type: Click the dropdown and see the three post type items below, choose one

• Elfi Masonry
• WooCommerce (Product)
• Post.

2.Category:  Select the category based on the type of post. It has multiple selection options. Choose from the dropdown and select one by one.

3.Exclude: Exclude Post (item) based on category. What is Exclude? If you want to delete an item, select it from the dropdown, you can delete multiple items

4.Column Settings: How many columns you want to use in each row. Choose from Dropdown Button, you will use one option from below three options

1. Two Colum
2. Three Column
3. Four Column

5.Item Style: Here are 10 designs, you can choose anyone and select. please see the demo for all  styles Click here

6.Posts Per Page: Enter the number of items you want to see from the selected categories, numeric value, if you want to see all the items then type -1.

7. Order By:  It is another Dropdown button, Choose one from the dropdown

1. Post ID -Order by post id
2. Title – Order by title
3. Date -Order by date
4. Menu Order -Order by Page Order
5. Random -Random order.
6. Last Modified -Order by last modified date.
7. None -No order

See More WordPress.org

8 Order: Dropdown button, Choose one from below two options

1. Ascending  -ascending order from lowest to highest values
2. Descending – descending order from highest to lowest values

9. Hide Category Text from Item: Click Swtchier Button if you want to exclude Category text from the item

10.show full title Of the Item: If you want to see the full title of the item, click this Swtchier button.

WooCommerce Query Options

if Post Post is WooCommerce: You'll see more options in the Query Settings section when choosing the post type of "WooCommece"

10.By clicking this button, users can use icons instead of cart text

11. Change Add to Cart Text(if not click above Swtchier button)

12. Change Select option Text (For Variable Product)

13 Change Add to Cart Text

14. Cart Button Border Radius: Move the Slider and select a numeric value for border radius 

When Select  Style - Card one & Card Two

if item style choose card one or card two ( see 5.Item Style)

a).Excerpt Option:  Click the Switcher button for hiding the Excerpt.

b). Excerpt Length: Choose Excerpt length default-200 and Step 10 (if not click above switching button )

Zoom and Link Icon Settings

Zoom Icon:  Choose Zoom Icon form elementor icon library, you will also use SVG icon 

Video Icon: If you input the video URL in the Video Link in the Post meta box section, select the video icon form elementor library, you can also use the SVG icon

Link Icon: Choose Link Icon form elementor icon library, you will also use SVG icon 

NORMAL

 Zoom/Link Icon Color: Choose Zoom/link icon color from Elemtor Color Control

Zoom/Link Icon Background Color: Choose Zoom/link icon  Background from Elemtor Color Control

 Zoom/Link icon Border Color: Choose Zoom/link icon Border Color from Elemtor  Color Control

HOVER (when mouse over the element)

Zoom/Link icon hover Color: Choose Zoom/link icon to hover color from Elemtor Color option

Zoom/Link icon  Background Hover Color: Choose Zoom/link icon  Background  hover Color from Elemtor  Color Control

Zoom/Link icon Border Hover Color: Choose Zoom/link icon  border hover Color 

POPUP Setting

Front End Demo - Popup Gallery Image with Content 

Front End Demo - Popup Video

Color Settings

1. Title Color: Select Item Title Color

2. Title Hover Color: Select Item Hover Color

3. Category Text Color: Select Item Title Color

4. Background Color: Select Item Background Color

When Post Type WooCommerce:

5. Cart Text Color:  Select cart Text Color

6.Cart Hover Color: Select Cart Text Hover Color

7.Cart Background Color: Cart Button Background Color

8.Cart Background Hover Color: Cart Button Background Color when Hover on it

9.Cart Border Color: Cart Button Border Color

10.Cart Border Hover Color: Cart Button Border Hover Color

11.Price Text Color: Choose Price Text Color

12.Sale Text Color: Choose Sale Tag text Color

13.Sale Background Color: Sale Tag Cart Background Color

Filter Button Settings

[] Change All Text: Filter “All “text Change Option

[]  Button Style: 13 Button Style  with CSS Animation Effect

[] Button Alignment: Choose Button Alignment, – left, center, right

[] Button Bottom Spacing: Choose button bottom Spacing, up to 200px

[] Button Right Spacing: Choose Button right Spacing, 0 to 50px

[] Button Text Color:  Choose Button text Color

[] Active button color: Choose the color of the active button

[] Button Border/background Color: Choose Button border/Background Color

[] Mobile Layout Button Style: Click to active Vertical style button for mobile layout

Pagination Setting

[]  Click to switcher button for active pagination

[]  choose pagination color

[]  select pagination background-color

[]  pagination border-color

[]  Pagination alignment – left,center, right

[]  top spacing from content, 0- 200px

Read More Setting

[]  click to switcher button for active ReadMore

[] Readmore text changing options

[]  Write Readmore Link

[] Top Spacing form filter content

[]  Readmore Button Border Radius

[]  choose Readmore  text color

[]  select Readmore  background-color

[]  Readmore  hover color

[]  Readmore  alignment – left,center, right

Single Portfolio Template

[] Inside the Package  folder, you will see a folder named “Extra”Please Have a look this Screenshot

Click  Extra>Saved Templates>elfi-masonry-single-templates.zip, It is elfi single portfolio Templates file

[] Go to Your site and find Elementor Templates

[] Click “Templates” Menu and then find Import Templates and Click to Import Zip File from Elfi addon Folder

[] After Importing  zip file it will look a lot like this

It’s ready to use for Single Portfolio page, Now Customize as your need