{"id":353,"date":"2022-02-26T18:35:32","date_gmt":"2022-02-26T18:35:32","guid":{"rendered":"https:\/\/fluentthemes.com\/wp\/cosonix-green\/?p=18"},"modified":"2024-05-03T17:42:51","modified_gmt":"2024-05-03T17:42:51","slug":"accordion-widget-2","status":"publish","type":"post","link":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/accordion-widget-2\/","title":{"rendered":"Accordion\u00a0Widget"},"content":{"rendered":"\n<h2>Accordion widget Sample<\/h2>\n\n\n\n<p>Here is a &#8216;<strong>Frontend<\/strong>&#8216; example image of an <strong>Accordion Widget<\/strong>:<\/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\/07\/accordion-widgets-maxhost.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\"><strong>Front-End Sample of the Widget<\/strong><\/figcaption><\/figure>\n\n\n\n<p><strong>Using Accordion Widget 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 &#8216;<strong>WPBakery Page Builder<\/strong>&#8216; button given at the top of the page. Now, click on the &#8216;<strong>Frontend Editor<\/strong>&#8216; button, and you will have a screen  like below:<\/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\/06\/Untitled.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Click on the &#8216;<strong>Add Element<\/strong>&#8216; 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=\"\"\/><\/figure>\n\n\n\n<p>Under the &#8216;by Fluent-Themes Shortcodes&#8217; tab, you will get all the custom WPBakery elements created for Maxhost theme.<\/p>\n\n\n\n<p>Choose &#8216;<strong>Accordion<\/strong>&#8216; element from there. You will get the &#8216;<strong>Settings<\/strong>&#8216; window from where you can set your accordion widget&#8217;s content as you need.<\/p>\n\n\n\n<h4><strong>Accordion Settings<\/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\/Acc-1.png\" alt=\"\" class=\"wp-image-181\"\/><\/figure><\/div>\n\n\n<ul>\n<li><strong>Number of Accordion <\/strong>\u2013 Select the number of accordion items from the Drop Down menu.<\/li>\n\n\n\n<li><strong><strong>Accordion <\/strong>One Title <\/strong>\u2013 type in accordion one item&#8217;s title here.<\/li>\n\n\n\n<li><strong><strong>Accordion <\/strong>One Text<\/strong>&nbsp;\u2013 type in accordion one&#8217;s description here.<\/li>\n\n\n\n<li><strong><strong><strong>Accordion <\/strong>Two Title <\/strong>\u2013 <\/strong>type in accordion two item&#8217;s title to apply.<\/li>\n\n\n\n<li><strong><strong>Accordion <\/strong>Two Text <\/strong>\u2013 type in accordion two&#8217;s description here.<\/li>\n\n\n\n<li>Accordion Title three, four, five and others will work the same way. <\/li>\n\n\n\n<li>Accordion Text three, four, five and others will work the same way.<\/li>\n<\/ul>\n\n\n\n<h4><strong>Row Settings<\/strong><\/h4>\n\n\n\n<h4 class=\"sub-sub-heading\"><strong><em>General<\/em> <em>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 class=\"wp-element-caption\">WPBakery Row Settings &#8211; Maxhost<\/figcaption><\/figure><\/div>\n\n\n<ul>\n<li><strong>Row Stretch<\/strong> &#8211; Select stretching options for row and content (Note: stretched may not work properly if parent container has &#8220;overflow: hidden&#8221; CSS property).<\/li>\n\n\n\n<li><strong>Columns Gap &#8211;<\/strong> Select gap between columns in row.<\/li>\n\n\n\n<li><strong>Full Height Row &#8211; <\/strong>If checked row will be set to full height.<\/li>\n\n\n\n<li><strong>Equal Height &#8211;<\/strong> If checked columns will be set to equal height.<\/li>\n\n\n\n<li><strong>Reverse Columns in RTL &#8211;<\/strong> If checked columns will be reversed in RTL.<\/li>\n\n\n\n<li><strong>Content Position<\/strong> &#8211; Select content position within columns.<\/li>\n\n\n\n<li><strong>Use Video Background?<\/strong> &#8211; If checked, video will be used as row background.<\/li>\n\n\n\n<li><strong>Parallax<\/strong> &#8211; Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).<\/li>\n\n\n\n<li><strong>CSS Animation<\/strong> &#8211; Select type of animation for element to be animated when it &#8220;enters&#8221; the browsers viewport (Note: works only in modern browsers).<\/li>\n\n\n\n<li><strong>Row ID<\/strong> &#8211; 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>\n\n\n\n<li><strong>Disable Row<\/strong> &#8211; If checked the row won&#8217;t be visible on the public side of your website. You can switch it back any time.<\/li>\n\n\n\n<li><strong>Extra Class Name<\/strong> &#8211; Style particular content element differently &#8211; add a class name and refer to it in custom CSS.<\/li>\n\n\n\n<li><strong>Want to have Top Padding?<\/strong> &#8211; Input top padding in pixel (i.e 50px).<\/li>\n\n\n\n<li><strong>Want to have Bottom Padding?<\/strong> &#8211; Input bottom padding in pixel (i.e 50px).<\/li>\n\n\n\n<li><strong>Want to have Left Padding?<\/strong> &#8211; Input left padding in pixel (i.e 50px).<\/li>\n\n\n\n<li><strong>Want to have Right Padding?<\/strong> &#8211; Input right padding in pixel (i.e 50px).<\/li>\n<\/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\/Row-design-2.png\" alt=\"\" class=\"wp-image-189\"\/><\/figure>\n\n\n\n<ul>\n<li><strong>Border Color<\/strong> &#8211; You can select border color whatever you want.<\/li>\n\n\n\n<li><strong>Border Style<\/strong>&nbsp;\u2013 You can select border color whatever you want.<\/li>\n\n\n\n<li><strong>Background<\/strong> &#8211; Background Image can be uploaded from from your system or Media Library.<\/li>\n<\/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<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\/colum-gen.png\" alt=\"\" class=\"wp-image-190\"\/><\/figure><\/div>\n\n\n<ul>\n<li><strong>Use Video Background<\/strong> &#8211; If checked, video will be used as row background.<\/li>\n\n\n\n<li><strong>Parallax<\/strong> &#8211; Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).<\/li>\n\n\n\n<li><strong>CSS Animation<\/strong> &#8211; Select type of animation for element to be animated when it &#8220;enters&#8221; the browsers viewport (Note: works only in modern browsers).<\/li>\n\n\n\n<li><strong>Element ID<\/strong> &#8211; 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>\n\n\n\n<li><strong>Extra Class Name<\/strong> &#8211; Style particular content element differently &#8211; add a class name and refer to it in custom CSS.<\/li>\n<\/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-191\"\/><\/figure>\n\n\n\n<ul>\n<li><strong>Border Color<\/strong> &#8211; You can select border color whatever you want.<\/li>\n\n\n\n<li><strong>Border Style<\/strong>&nbsp;\u2013 You can select border color whatever you want.<\/li>\n\n\n\n<li><strong>Background<\/strong> &#8211; Background Image can be uploaded from from your system or Media Library.<\/li>\n<\/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-192\"\/><\/figure>\n\n\n\n<ul>\n<li><strong>Width<\/strong> &#8211; You can select column width from the Drop Down.<\/li>\n\n\n\n<li><strong>Responsiveness<\/strong> &#8211; Adjust column for different screen sizes. Control width, offset and visibility settings.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Accordion widget Sample Here is a &#8216;Frontend&#8216; example image of an Accordion Widget: Using Accordion Widget in WPBakery Go to&nbsp;Pages&nbsp;-&gt;&nbsp;Add New&nbsp;on your WordPress Admin Dashboard and click on the &#8216;WPBakery Page Builder&#8216; button given at the top of the page. Now, click on the &#8216;Frontend Editor&#8216; button, and you will have a screen like below: [&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\/353"}],"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=353"}],"version-history":[{"count":0,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/posts\/353\/revisions"}],"wp:attachment":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/media?parent=353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/categories?post=353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/tags?post=353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}