{"id":526,"date":"2023-05-20T15:29:16","date_gmt":"2023-05-20T14:29:16","guid":{"rendered":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/adding-blocks-with-tabs\/"},"modified":"2023-05-26T22:11:48","modified_gmt":"2023-05-26T21:11:48","slug":"adding-blocks-with-tabs","status":"publish","type":"docs","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/adding-blocks-with-tabs\/","title":{"rendered":"Adding blocks with tabs"},"content":{"rendered":"\n

Tabs are useful for organizing chunks of related information into a single block, thereby freeing space on a page. With this feature, you can structure the pictures in a gallery by general topics, organize your company’s products and services, and much more.<\/p>\n\n\n\n

MakeGreatSite editor allows you to add a pre-made block with tabs or enable tabs mode in some of the existing blocks.<\/p>\n\n\n\n

Here’s a good example of block with tabs:<\/p>\n\n\n\n

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

Adding a block with tabs<\/h2>\n\n\n\n

1. To add a block with tabs, open the blocks gallery and choose a suitable block with tabs:<\/p>\n\n\n\n

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

2. Hover over the content of the block and click on the “gear” to access the Collection settings<\/strong>. In the pop-up window, navigate to the Modes<\/strong> tab and choose the type, quantity, and alignment of your tabs:<\/p>\n\n\n\n

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

Tip:<\/strong> Proceed with customizing your block according to the instructions in the Changing the design of a block<\/a> article.<\/p>\n\n\n\n

Enabling the tabs mode in a collection<\/h2>\n\n\n\n

Some blocks in our gallery can contain a set of entirely interdependent elements gathered in a collection. Each item in a collection keeps the same layout as others \u2014 if you delete an element from one item in a collection, it will be automatically deleted from every item.<\/p>\n\n\n\n

The collection blocks can be re-structured into tabs.<\/p>\n\n\n\n

Tip:<\/strong> To learn more about the collections, check the Collection items settings<\/a> article.<\/p>\n\n\n\n

1. For that, hover over the collection item and click on the “gear” in the top right corner to access its settings:<\/p>\n\n\n\n

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

2. In the pop-up window, navigate to the Modes<\/strong> tab and enable the Tabs<\/strong> option:<\/p>\n\n\n\n

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

3. Here you can change the type, quantity or alignment of your tabs, and also set the accent color:<\/p>\n\n\n\n

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

Note:<\/strong> The maximum number of tabs is 8. The acceptable size of the icons in the tab name is 40×40 px.<\/p>\n\n\n\n

Managing tabs and their content<\/h2>\n\n\n\n

1. To rename a tab, click on its name, highlight it and add a new one:<\/p>\n\n\n\n

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

Tip: <\/strong>You can switch between tabs just by clicking on the tab name.<\/p>\n\n\n\n

2. To access the tabs settings, hover over the collection element and click on three stripes icon:<\/p>\n\n\n\n

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

3. In the new window, you can drag the tabs to change their order, duplicate, delete or hide them:<\/p>\n\n\n\n

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

4. To move elements within one tab, hover over the element and drag it to the desired position:<\/p>\n\n\n\n

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

Don’t forget to publish your site for the changes to appear live.<\/p>\n","protected":false},"featured_media":0,"parent":111,"menu_order":20,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-526","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/comments?post=526"}],"version-history":[{"count":2,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/526\/revisions"}],"predecessor-version":[{"id":1730,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/526\/revisions\/1730"}],"up":[{"embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/111"}],"next":[{"title":"List items settings","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/list-items-settings\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/539"}],"prev":[{"title":"Hiding a block on different devices","link":"https:\/\/greatsite.dev\/makegreatsite\/docs\/site-editing\/hiding-a-block-on-different-devices\/","href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/docs\/520"}],"wp:attachment":[{"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/media?parent=526"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/greatsite.dev\/makegreatsite\/wp-json\/wp\/v2\/doc_tag?post=526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}