{"id":2581,"date":"2023-05-27T20:03:55","date_gmt":"2023-05-27T20:03:55","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/tabs-tabbed-content\/"},"modified":"2025-01-23T17:13:56","modified_gmt":"2025-01-23T17:13:56","slug":"tabs-tabbed-content","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/tabs-tabbed-content\/","title":{"rendered":"Tabs – Tabbed content"},"content":{"rendered":"\n
\n

Remember to have this added to a responsive grid, as any other element, the tab element should follow a hierarchy to facilitate responsiveness.<\/p>\n<\/div>\n\n\n\n

First, add an empty column and navigate to the interactive components section to drag the tabs’ element to the column.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can select or not the responsive setting of the tabs’ element. Tabs have a pre-defined number of sections (7) and currently there is no option to include an 8th tab and so on.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once you open any tab settings, you’ll be able to add a label to it.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now select the tab section to insert new components. You can navigate through the tabs to edit each content. You can add a responsive grid to the tab section and many other elements, it is up to you. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This is how the hierarchy looks like on this example:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

And this is how it looks after inserting content.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

*NOTE:<\/strong> that you don’t need to use all the tabs, the blank tabs will not be shown to the final user.<\/p>\n\n\n\n

\n\n\n\n

If you have any questions, please contact us on help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Remember to have this added to a responsive grid, as any other element, the tab element should follow a hierarchy to facilitate responsiveness. First, add an empty column and navigate to the interactive components […]<\/p>\n","protected":false},"author":5,"featured_media":5574,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[616,9],"tags":[2262],"class_list":["post-2581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tabs-component","category-the-interactive-components","tag-tabs"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2581"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2581\/revisions"}],"predecessor-version":[{"id":7303,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2581\/revisions\/7303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5574"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}