How-To Manual

Page tree

Versions Compared

Old Version 9

changes.mady.by.user user-75f68

Saved on

compared with

New Version Current

changes.mady.by.user Darryl Duke

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: change block collapsible to

...

Content Layer
namePage Info
id278129461
classwatermark-layer


Content Column
namePage Body
width100.00001%
id278129463


Content Block
background-colortransparent
namePrompt
id494677873
classtight manual-prompt-flex

Use tabbed blocks to present information to your users in a concise pagecollapse content that will display when clicked.


Content Block
nameOutcome
rich-link-hoverstrue
id1042866408
classtight 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.

Image Removed


Content Block
nameSteps
rich-link-hoverstrue
id494842117
classsteps-block numbered manual-steps-flex

Add a block (or 2, 3 etc.) to your page.

Open the Page Tab in the Theme Press Designer.

Click on the column where you'd like to format blocks.

The designer accordion will open, displaying multiple expanders.

HTML Wrap
tagspan
classproduct-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
classdocs-screenshot

Image Added


Content Block
nameNote
rich-link-hoverstrue
id495965127
classmanual-note-flex
collapsiblecollapse


Note

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the Steps block above to narrow the gap between the two blocks.



Content Block
nameTip
rich-link-hoverstrue
id894522670
classmanual-tip-flex
collapsiblecollapse


Tip

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. 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
nameWarning
rich-link-hoverstrue
id894530759
classmanual-warning-flex
collapsiblecollapse


Warning

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. 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
nameInfo
rich-link-hoverstrue
id894537203
classmanual-info-flex
collapsiblecollapse


Info

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. 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
padding0
margin-100px 0 0 0
id2139010359
Content Column
width100%
id2139010369
Content Block
padding0
id2139010370

Examples

Content Layer
id2139085133
Content Column
background-color$lightColor
tabbed-blockstabs
columnalternate
width50.0%
id2139085143
Content Block
background-colortransparent
padding0
not-tabbedtrue
id2139085154
Tabs
Content Block
nameExample tab text
id2139119656

Loremipsum
1
1

Content Block
id2139126236

Loremipsum
1
1

Content Block
id2139131339

Loremipsum
1
1

Content Column
background-color$lightColor
tabbed-blocksexpanders
columnalternate
width50.0%
id2139190545
Content Block
background-colortransparent
padding0
not-tabbedtrue
id2139190546
Expanders
Content Block
nameExample tab text
id2139190557

Loremipsum
1
1

Content Block
id2139190567

Loremipsum
1
1

Content Block
id2139190577

Loremipsum
1
1


Content Layer
background-color$lightGrayColor
nameRelated
id888168050


Content Column
nameRelated
width100%
id888168051


Content Block
rich-links-hide-descriptiontrue
rich-link-hoverstrue
rich-links-columns4
rich-links-verticaltrue
rich-links-image-height100px
rich-links-hide-site-icontrue
rich-links-details-padding10px
nameRelated
rich-links-enabletrue
border-width0
rich-links-details-alignmentleft
rich-links-margin20px 30px 0 0
id496234544
classrelated-block clean manual-related-flex




Platform

 

Company
Support
Brikit Services

Copyright © 2023 Brikit Inc. All Rights Reserved.

Powered by Atlassian Confluence and Brikit