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“:
Note: you should use quickfinder items of the same icon/image size to display vertical quickfinders properly. Otherwise some visual issues with connectros can appear.
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;
}