How to add a Tree Diagram block to the Page Editor

Create a Tree Diagram, and its connecting branches, using the Tree Diagram feature in the Page Editor. Tree Diagrams are used as a graphic tool to systematically break down all the components of a process into successive stages.

1. Adding Tree Diagrams from Page Blocks When inside the Page Editor, open Page Blocks and select Tree 3 from under the Diagram title in the Visual Blocks sections. The Tree Diagram block is always automatically wrapped in a Group Wrapper. Extra Tip Group Wrappers are used to contain structures to certain parts of the page. For example, to wrap text around an image. 2. Editing and configuring options for Data Boxes To edit your Diagrams Data Boxes, highlight the Data Boxes frame and right-click to open the Options pop-up. From here you can enter the text for the Title, Information and Value fields and also choose to place the box into one of six levels. Remember to click the Confirm Changes button once you’ve finished. Extra Tip To add more Data Boxes or Box Links, go back into Page Blocks and select either Box or Linking from under Diagrams in the Visual Blocks tab. 3. Editing and configuring options for Box Links To edit the Tree Diagrams Box Links, highlight the Box Linking frame and right-click to open the Options pop-up. From here you can add up to six quantity connections, change their colour and edit the default options to move the Box Links up, down or deleting them from the page. 4. How Tree Diagrams appear on a webpage Extra Tip Resize your page width or check your page on a mobile to see the effect.