| Content Layer |
|---|
| name | Page Info |
|---|
| id | 278129461 |
|---|
| class | watermark-layer |
|---|
|
| Content Column |
|---|
| name | Page Body |
|---|
| width | 100.00001% |
|---|
| id | 278129463 |
|---|
|
| Content Block |
|---|
| background-color | transparent |
|---|
| name | Prompt |
|---|
| id | 494677873 |
|---|
| class | tight manual-prompt-flex |
|---|
| Use tabbed blocks to collapse content that will display when clicked. |
| Content Block |
|---|
| name | Outcome |
|---|
| rich-link-hovers | true |
|---|
| id | 1042866408 |
|---|
| class | tight manual-outcome-flex |
|---|
|
|
|
...
There are two styles of tabbed blocks which can be used to consolidate information on your page, regular tabs and expander tabs. Converting regular blocks into tabbed blocks happens at the column level. |
| Content Block |
|---|
| name | Steps |
|---|
| rich-link-hovers | true |
|---|
| id | 494842117 |
|---|
| class | steps-block numbered manual-steps-flex |
|---|
|
|
|
...
Use h4 for section headings
If you don't want numbers in the section headings, simply remove the "numbered" class from this block.
...
| Add a block (or 2, 3 etc.) to your page.The designer accordion will open, displaying multiple expanders.
| HTML Wrap |
|---|
| tag | span |
|---|
| class | product-navigation |
|---|
| Theme Press Designer → Page Tab → (Column 1) |
Click on the 'Handling' expander.From the 'Tabbed Blocks' dropdown, select either 'tabs' or 'expanders'.Choose the blank option if you want to remove any styling. | HTML Wrap |
|---|
|  Image Added
|
|
| Content Block |
|---|
| name | Note |
|---|
| rich-link-hovers | true |
|---|
| id | 495965127 |
|---|
| class | manual-note-flex |
|---|
| collapsible | collapse |
|---|
|
| Note |
|---|
If using: - Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
- Add the tight-bottom class to the Steps block above to narrow the gap between the two blocks.
|
|
| Content Block |
|---|
| name | Tip |
|---|
| rich-link-hovers | true |
|---|
| id | 894522670 |
|---|
| class | manual-tip-flex |
|---|
| collapsible | collapse |
|---|
|
| Tip |
|---|
If using: - Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
- Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
|
|
| Content Block |
|---|
| name | Warning |
|---|
| rich-link-hovers | true |
|---|
| id | 894530759 |
|---|
| class | manual-warning-flex |
|---|
| collapsible | collapse |
|---|
|
| Warning |
|---|
If using: - Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
- Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
|
|
| Content Block |
|---|
| name | Info |
|---|
| rich-link-hovers | true |
|---|
| id | 894537203 |
|---|
| class | manual-info-flex |
|---|
| collapsible | collapse |
|---|
|
| Info |
|---|
If using: - Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
- Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
|
|
|
|
| Content Layer |
|---|
| padding | 0 |
|---|
| margin | -100px 0 0 0 |
|---|
| id | 2139010359 |
|---|
|
|
| Content Layer |
|---|
|
| Content Column |
|---|
| background-color | $lightColor |
|---|
| tabbed-blocks | tabs |
|---|
| column | alternate |
|---|
| width | 50.0% |
|---|
| id | 2139085143 |
|---|
| | Content Block |
|---|
| background-color | transparent |
|---|
| padding | 0 |
|---|
| not-tabbed | true |
|---|
| id | 2139085154 |
|---|
| Tabs |
| Content Block |
|---|
| name | Example tab text |
|---|
| id | 2139119656 |
|---|
| |
|
| content-column |
|---|
| background-color | $lightColor |
|---|
| tabbed-blocks | expanders |
|---|
| column | alternate |
|---|
| width | 50.0% |
|---|
| id | 2139190545 |
|---|
| | Content Block |
|---|
| background-color | transparent |
|---|
| padding | 0 |
|---|
| not-tabbed | true |
|---|
| id | 2139190546 |
|---|
| Expanders |
| Content Block |
|---|
| name | Example tab text |
|---|
| id | 2139190557 |
|---|
| |
|
|
| content-layer |
|---|
| background-color | $lightGrayColor |
|---|
| name | Related |
|---|
| id | 888168050 |
|---|
|
| Content Column |
|---|
| name | Related |
|---|
| width | 100% |
|---|
| id | 888168051 |
|---|
|
| Content Block |
|---|
| rich-links-hide-description | true |
|---|
| rich-link-hovers | true |
|---|
| rich-links-columns | 4 |
|---|
| rich-links-vertical | true |
|---|
| rich-links-image-height | 100px |
|---|
| rich-links-hide-site-icon | true |
|---|
| rich-links-details-padding | 10px |
|---|
| name | Related |
|---|
| rich-links-enable | true |
|---|
| border-width | 0 |
|---|
| rich-links-details-alignment | left |
|---|
| rich-links-margin | 20px 30px 0 0 |
|---|
| id | 496234544 |
|---|
| class | related-block clean manual-related-flex |
|---|
|
|
|
...
