Quickfinders

See detailed description of quickfinders in Chapter „quickfinders“

To insert quickfinders in your page content use Quickfinder shortcode

To select quickfinder set to be displayed, click on „Select Quickfinders“ tab above and activate checkboxes on appropriate quickfinder sets.

Style: TheGem comes with many different styles of displaying your quickfinders. Here you can choose one of them.

For „Default Style“:

Title Weight: you can choose wether you would like to have your item’s title bold or this

 For „Classic Box“, „Iconed Box“, „Binded Box“, „Binded Iconed Box“, „Tag Box“:

Number of columns: select number of columns in one row of the quickfinder grid

Box Style: choose from three different box styles

Box Background Color: select background color for one quickfinder item box

Alignment: select text and icon alignment inside the box

Icon Position: select icon position inside the box

Title Weight: you can choose wether you would like to have your item’s title bold or this

Activate Button: if you wish to activate buttons in quickfinder items, activate this checkbox. Pls note: buttons will appear only by quickfinder items, where you have defined URL/link (see detailed description in section „quickfinders“) If button activated, you can next style your button as usually (see description in section „Button“)

If you wish to set / define hover styles for your quickfinder items, click on „Hovers“ tab above:

For „Vertical Styles“:

Weight: you can choose wether you would like to have your item’s title bold or this

Connector color: select the color for vertical connector

Useful CSS

Quickfinder title font-size:

.quickfinder-item-info-wrapper .quickfinder-item-title {
    font-size: 14px !important;
    font-weight: 100 !important;
    line-height: 1 !important;
}

Quickfinder description font-size:

.quickfinder-item-info-wrapper .quickfinder-item-text {
    font-size: 14px !important;
    font-weight: 100 !important;
    line-height: 1 !important;
}

Reducing quickfinder item padding:

.quickfinder-item-box {
    padding: 10px !important;
}

You can modify this css and insert it in Theme Options -> Custom CSS to apply on all quickfinders:

To apply this custom CSS on a single content element only, use the "Extra class name" field in this element in WPBakery:

The example of the css selector for the "custom-quickfinder" class name in this case:

.custom-quickfinder .quickfinder-item-box {
    padding: 10px; 
}