{"id":354,"date":"2022-03-02T09:35:26","date_gmt":"2022-03-02T09:35:26","guid":{"rendered":"https:\/\/fluentthemes.com\/wp\/cosonix-green\/?p=40"},"modified":"2022-08-02T21:47:04","modified_gmt":"2022-08-02T21:47:04","slug":"pricing-table-3","status":"publish","type":"post","link":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/pricing-table-3\/","title":{"rendered":"Pricing Table Filter"},"content":{"rendered":"\n<p>Here is a \u2018<strong>Frontend<\/strong>\u2018 example of a Pricing Table Filter:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/07\/pricing-tables-filter-maxhost.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><strong>Using Pricing Table Filter in WPBakery<\/strong><\/p>\n\n\n\n<p>Go to&nbsp;<strong>Pages<\/strong>&nbsp;-&gt;&nbsp;<strong>Add New<\/strong>&nbsp;on your WordPress Admin Dashboard and click on the \u2018<strong>WPBakery Page Builder<\/strong>\u2018 button given at the top of the page. Now, click on the \u2018<strong>Frontend Editor<\/strong>\u2018 button, and you will have a screen like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/Untitled.png\" alt=\"\" class=\"wp-image-407\"\/><\/figure>\n\n\n\n<p>Click on the \u2018<strong>Add Element<\/strong>\u2018 button and you will find a window as shown in the following image:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/fluent.png\" alt=\"\" class=\"wp-image-408\"\/><\/figure>\n\n\n\n<p>Under the \u2018by Fluent-Themes Shortcodes\u2019 tab, you will get all the custom WPBakery elements created for Maxhost theme.<\/p>\n\n\n\n<p>Choose <strong>&#8216;Pricing Table Filter&#8217;<\/strong> element from there. You will get the &#8216;<strong>Settings<\/strong>&#8216; window from where you can set your content of Pricing Table Filter as you need.<\/p>\n\n\n\n<h4><strong><strong>Settings<\/strong><\/strong><\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/Filter.png\" alt=\"\" class=\"wp-image-409\"\/><\/figure><\/div>\n\n\n<ul><li><strong>Pricing Plan Names to Filter &#8211;<\/strong> Insert each Plan (i.e. Shared Hosting, VPS Hosting etc) on new line. You will include\u00a0\u2018Pricing Table\u2019 widgets\u00a0in \u2018Rows\u2019, just below this \u2018Filter\u2019 Widget. And, the \u2018Row ID\u2019 of those Pricing Tables will be used to filter the Pricing Tables.<\/li><\/ul>\n\n\n\n<h4><strong>Row Settings<\/strong><\/h4>\n\n\n\n<h4 class=\"sub-sub-heading\"><strong><em>General Tab<\/em><\/strong><\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/08\/wpbakery-row-settings-maxhost-1-1-533x1024.jpg\" alt=\"\" class=\"wp-image-442\"\/><figcaption>WPBakery Row Settings &#8211; Maxhost<\/figcaption><\/figure><\/div>\n\n\n<ul><li><strong>Row Stretch<\/strong>&nbsp;\u2013 Select stretching options for row and content (Note: stretched may not work properly if parent container has \u201coverflow: hidden\u201d CSS property).<\/li><li><strong>Columns Gap \u2013<\/strong>&nbsp;Select gap between columns in row.<\/li><li><strong>Full Height Row \u2013&nbsp;<\/strong>If checked row will be set to full height.<\/li><li><strong>Equal Height \u2013<\/strong>&nbsp;If checked columns will be set to equal height.<\/li><li><strong>Reverse Columns in RTL \u2013<\/strong>&nbsp;If checked columns will be reversed in RTL.<\/li><li><strong>Content Position<\/strong>&nbsp;\u2013 Select content position within columns.<\/li><li><strong>Use Video Background?<\/strong>&nbsp;\u2013 If checked, video will be used as row background.<\/li><li><strong>Parallax<\/strong>&nbsp;\u2013 Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).<\/li><li><strong>CSS Animation<\/strong>&nbsp;\u2013 Select type of animation for element to be animated when it \u201centers\u201d the browsers viewport (Note: works only in modern browsers).<\/li><li><strong>Row ID<\/strong>&nbsp;\u2013 Enter element ID (Note: make sure it is unique and valid according to&nbsp;<a rel=\"nofollow noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\" target=\"_blank\">w3c specification<\/a>).<\/li><li><strong>Disable Row<\/strong>&nbsp;\u2013 If checked the row won\u2019t be visible on the public side of your website. You can switch it back any time.<\/li><li><strong>Extra Class Name<\/strong>&nbsp;\u2013 Style particular content element differently \u2013 add a class name and refer to it in custom CSS.<\/li><li><strong>Want to have Top Padding?<\/strong>&nbsp;\u2013 Input top padding in pixel (i.e 50px).<\/li><li><strong>Want to have Bottom Padding?<\/strong>&nbsp;\u2013 Input bottom padding in pixel (i.e 50px).<\/li><li><strong>Want to have Left Padding?<\/strong>&nbsp;\u2013 Input left padding in pixel (i.e 50px).<\/li><li><strong>Want to have Right Padding?<\/strong>&nbsp;\u2013 Input right padding in pixel (i.e 50px).<\/li><\/ul>\n\n\n\n<h4 class=\"sub-sub-heading\"><strong><em>Design Options Tab<\/em><\/strong><\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/Row-design-2.png\" alt=\"\" class=\"wp-image-413\"\/><\/figure><\/div>\n\n\n<ul><li><strong>Border Color<\/strong>&nbsp;\u2013 You can select border color whatever you want.<\/li><li><strong>Border Style<\/strong>&nbsp;\u2013 You can select border color whatever you want.<\/li><li><strong>Background<\/strong>&nbsp;\u2013 Background Image can be uploaded from from your system or Media Library.<\/li><\/ul>\n\n\n\n<h4><strong>Column Settings<\/strong><\/h4>\n\n\n\n<h4 class=\"sub-sub-heading\"><strong><em>General Tab<\/em><\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/colum-gen.png\" alt=\"\" class=\"wp-image-414\"\/><\/figure>\n\n\n\n<ul><li><strong>Use Video Background<\/strong>&nbsp;\u2013 If checked, video will be used as row background.<\/li><li><strong>Parallax<\/strong>&nbsp;\u2013 Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).<\/li><li><strong>CSS Animation<\/strong>&nbsp;\u2013 Select type of animation for element to be animated when it \u201centers\u201d the browsers viewport (Note: works only in modern browsers).<\/li><li><strong>Element ID<\/strong>&nbsp;\u2013 Enter element ID (Note: make sure it is unique and valid according to&nbsp;<a rel=\"nofollow noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\" target=\"_blank\">w3c specification<\/a>).<\/li><li><strong>Extra Class Name<\/strong>&nbsp;\u2013 Style particular content element differently \u2013 add a class name and refer to it in custom CSS.<\/li><\/ul>\n\n\n\n<h4 class=\"sub-sub-heading\"><strong><em>Design Options Tab<\/em><\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/column-design.png\" alt=\"\" class=\"wp-image-415\"\/><\/figure>\n\n\n\n<ul><li><strong><strong>Border Color<\/strong>&nbsp;\u2013 <\/strong>You can select border color whatever you want.<\/li><li><strong><strong>Border Style<\/strong>&nbsp;\u2013 <\/strong>You can select border color whatever you want.<\/li><li><strong><strong>Background<\/strong>&nbsp;\u2013 <\/strong>Background Image can be uploaded from from your system or Media Library.<\/li><\/ul>\n\n\n\n<h4 class=\"sub-sub-heading\"><strong><em>Responsive Options<\/em><\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/Column-respons.png\" alt=\"\" class=\"wp-image-416\"\/><\/figure>\n\n\n\n<ul><li><strong>Width<\/strong>&nbsp;\u2013 You can select column width from the Drop Down.<\/li><li><strong>Responsiveness<\/strong>&nbsp;\u2013 Adjust column for different screen sizes. Control width, offset and visibility settings.<\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a \u2018Frontend\u2018 example of a Pricing Table Filter: Using Pricing Table Filter in WPBakery Go to&nbsp;Pages&nbsp;-&gt;&nbsp;Add New&nbsp;on your WordPress Admin Dashboard and click on the \u2018WPBakery Page Builder\u2018 button given at the top of the page. Now, click on the \u2018Frontend Editor\u2018 button, and you will have a screen like below: Click on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[8,16],"tags":[],"_links":{"self":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/posts\/354"}],"collection":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":0,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/posts\/354\/revisions"}],"wp:attachment":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/media?parent=354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/categories?post=354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/tags?post=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}