{"id":922,"date":"2021-01-06T15:35:11","date_gmt":"2021-01-06T15:35:11","guid":{"rendered":"http:\/\/docs.cmsmasters.net\/?p=922"},"modified":"2024-03-15T09:04:05","modified_gmt":"2024-03-15T09:04:05","slug":"tabs-widget","status":"publish","type":"post","link":"https:\/\/docs.cmsmasters.net\/tabs-widget\/","title":{"rendered":"Tabs Widget"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Tabs Widget<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Content<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Click + ADD ITEM<\/strong> to add a Tab.<\/p>

On a Tab\u2019s settings choose a Content Type between Content, Section and Page<\/strong> and set it.<\/p>

Please note that to use Section Content Type and Page Content Type you should create Section\/Page template first. (find more information here)\u00a0<\/p>

List Type:<\/strong> Choose between Horizontal and Vertical Tabs\u2019 position.<\/p>

For Horizontal List Type<\/strong> choose the Mode between Inline and Justify.<\/p>

For Vertical List Type<\/strong> set the List Width for desktop, tablet and mobile.<\/p>

Alignment:<\/strong> Choose Tabs\u2019 alignment between Right, Center and Left.<\/p>

Icon Position:<\/strong> Choose between Left, Right or Top icon position.<\/p>

List Position:<\/strong> Choose between Start and End positions.<\/p>

Title HTML Tag:<\/strong> Set the Title’s tag to H1-H6, Div or Span.<\/p>

Active Tab:<\/strong> Set the tab that should be opened by default.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Responsive<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Set a Responsive View<\/strong> – choose a resolution where you want Tabs to rearrange: on Tablet or lower, on Mobile or Disable responsive.<\/p>

Accordion Type:<\/strong> Choose between Accordion and Toggle.<\/p>

Slide to YES to enable Accordion Icon and choose needed icons for Normal and Active modes.<\/p>

Icon Position:<\/strong> Choose between Left and Right Icon position.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Widget Lazy Load<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"lazy-load\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Enable Widget Lazy Load: <\/b>Slide to YES to enable widget lazy load. Enabling the setting will delay the website widget loading until it comes into visitor’s view to improve page load time.<\/span><\/p>

You can choose the settings you want in the widget\u2019s Style tab, or set the Preloader view globally in the Site Settings <\/a><\/span>\u00a0to apply to all widgets with lazy loading enabled.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Style<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Tabs List<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Gap:<\/strong> Set a Gap between Tabs list and content for desktop, tablet and mobile.<\/p>

Vertical Alignment:<\/strong> Choose Tabs\u2019 list vertical alignment between Top, Center and Bottom.<\/p>

Background Color:<\/strong> Choose a Background Color from a color palette or dynamic tags.<\/p>

Border Type:<\/strong> Choose a Border Type from the dropdown and set it.<\/p>

Border Radius:<\/strong> Set a border radius to numbers.<\/p>

Box Shadow:<\/strong> Choose desired settings from the dropdown.<\/p>

Icons Style<\/strong><\/span><\/p>

Size:<\/strong> Set Icon size for desktop, tablet and mobile.<\/p>

Spacing:<\/strong> Set a spacing between Icon and Title for desktop, tablet and mobile.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

List Item<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Gap Between:<\/strong> Set a Gap between Tabs for desktop, tablet and mobile.<\/p>

Typography:<\/strong> Set a Typography using settings from the dropdown.<\/p>

Color:<\/strong> Choose a Color from a color palette or dynamic tags. (for Normal, Hover and Active modes)<\/p>

Border Color:<\/strong> Choose a Border Color from a color palette or dynamic tags. (for Normal, Hover and Active modes)<\/p>

Background Type:<\/strong> Choose a Background type between Classic and Gradient.<\/p>

Padding:<\/strong> Set padding for desktop, tablet and mobile.<\/p>

Gap:<\/strong> Set gaps for desktop, tablet and mobile.<\/p>

Text Shadow:<\/strong> Choose desired settings from the dropdown.<\/p>

Box Shadow:<\/strong> Choose desired settings from the dropdown.<\/p>

Border Type:<\/strong> Choose desired Border Type from the dropdown and set it.<\/p>

Border Radius:<\/strong> Set a border radius to items.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Content Wrapper<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Text Alignment:<\/strong> Choose between Left, Center or Right text alignment.<\/p>

Typography:<\/strong> Set a Typography using settings from the dropdown.<\/p>

Color:<\/strong> Choose a Color from a color palette or dynamic tags.<\/p>

Background Color:<\/strong> Choose a Background Color from a color palette or dynamic tags.<\/p>

Border Type:<\/strong> Choose desired Border Type from the dropdown and set it.<\/p>

Border Radius:<\/strong> Set a border radius to content wrapper.<\/p>

Padding:<\/strong> Set padding for desktop, tablet and mobile.<\/p>

Box Shadow:<\/strong> Choose desired settings from the dropdown.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Pointer Animation<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Hover effect:<\/strong> Choose Hover effect from the dropdown.<\/p>

Animation:<\/strong> Choose Animation from the dropdown.<\/p>

Line size:<\/strong> Set a Line size here.<\/p>

Use Gradient:<\/strong> Slide to YES to enable gradient and set it.<\/p>

Color:<\/strong> Choose a Pointer color from a color palette or dynamic tags.<\/p>

Transition duration:<\/strong> Set the amount of time to transition from one filter setting to the other when hovering over the Title.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Widget Lazy Load Preloader Type Icon\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"lazy-load-preloader\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Icon<\/b><\/p>

Icon Source: <\/b>Choose default or custom icon.<\/span><\/p>

Icon Size: <\/b>Set the icon size for widescreen, desktop, tablet portrait and mobile portrait modes.<\/span><\/p>

Icon Color:<\/b> Choose the icon color.<\/span><\/p>

Icon Animation Speed (ms): <\/b>Set the icon animation speed in milliseconds.\u00a0<\/span><\/p>

Container<\/b><\/p>

Height: <\/b>Set the container height for widescreen, desktop, tablet portrait and mobile portrait modes.<\/span><\/p>

Background Type: <\/b>Choose the container background type between Classic and Gradient and set it.<\/span><\/p>

Overlay Background Type: <\/b>Choose the container overlay background type between Classic and Gradient and set it.<\/span><\/p>

Border Type: <\/b>Choose the border type from the dropdown.<\/span><\/p>

Border Radius: <\/b>Set a desired border radius.<\/span><\/p>

Box Shadow: <\/b>Choose desired settings from the dropdown.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Widget Lazy Load Preloader Type Grid\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"lazy-load-grid\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"lazy-load-grid-2\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Grid\u00a0<\/b><\/p>

Count: <\/b>Choose the number of icons that should be displayed.<\/span><\/p>

Columns<\/b>: Add the number of columns the icons should be shown for widescreen, desktop, tablet portrait and mobile portrait modes.<\/span><\/p>

Height: <\/b>Set the height for widescreen, desktop, tablet portrait and mobile portrait modes.<\/span><\/p>

Horizontal gap: <\/b>Choose Horizontal gap between elements for widescreen, desktop, tablet portrait and mobile portrait modes.<\/span><\/p>

Vertical gap: <\/b>Set Vertical gap between elements for widescreen, desktop, tablet portrait and mobile portrait modes.<\/span><\/p>

Container padding: <\/b>Add Container paddings for widescreen, desktop, tablet portrait and mobile portrait modes.<\/span><\/p>

Icon: <\/b>Choose the icon from Icon library or upload desired SVG.<\/span><\/p>

Icon size: <\/b>Set the icon size for widescreen, desktop, tablet portrait and mobile portrait modes.<\/span><\/p>

Icon Color<\/b>: Choose the icon color.<\/span><\/p>

Icon Animation Type: <\/b>Choose between none, Blink and Spin types.<\/span><\/p>

Icon Animation Speed (ms)<\/b>: Set the icon animation speed in milliseconds.\u00a0<\/span><\/p>

Background Type<\/b>: Choose the background type between Classic and Gradient and set it.<\/span><\/p>

Border Type:<\/b> Choose the border type from the dropdown.<\/span><\/p>

Border Radius:<\/b> Set a desired border radius.<\/span><\/p>

Box Shadow: <\/b>Choose desired settings from the dropdown.<\/span><\/p>

Container<\/b><\/p>

Background Type<\/b>: Choose the container\u00a0 background type between Classic and Gradient and set it.<\/span><\/p>

Overlay Background Type<\/b>: Choose the container overlay background type between Classic and Gradient and set it.<\/span><\/p>

Border Type:<\/b> Choose the border type from the dropdown.<\/span><\/p>

Border Radius:<\/b> Set a desired border radius.<\/span><\/p>

Box Shadow: <\/b>Choose desired settings from the dropdown.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Advanced<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Set the Advanced options<\/a> that are applicable to this widget<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Content Click + ADD ITEM to add a Tab. On a Tab\u2019s settings choose a Content Type between Content, Section and Page and set it. Please note that to use Section Content Type and Page Content Type you should create Section\/Page template first. (find more information here)\u00a0 List Type: Choose between Horizontal and Vertical Tabs\u2019…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[118],"tags":[61,7],"class_list":["post-922","post","type-post","status-publish","format-standard","hentry","category-content","tag-tabs","tag-widget"],"_links":{"self":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/posts\/922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/comments?post=922"}],"version-history":[{"count":25,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/posts\/922\/revisions"}],"predecessor-version":[{"id":9957,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/posts\/922\/revisions\/9957"}],"wp:attachment":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/media?parent=922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/categories?post=922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/tags?post=922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}