Work in Progress: How to Create a Global Column

Some designs need a global column for showing an example of the product, an index of the quiz, a big logo, a demonstration video, etc. This is one way of achieving that.

Step 1: Create a Global Component

• Go to the Layers Tab on the Left Sidebar

• Select the All Tab

• Scroll down to the Global Components section

• Create a new container component

Step 2: Set the Location

• Go to the General section of the Options Tab on the Right Sidebar

• The first dropdown will allow you to select where you want this component to be located

• If you want the global column to be on the left, place the component "Before Page"

• If you want the global column to be on the Right, place the component "After Page"

Step 3: Flex Settings for Flow Containers

• Select the Entire Flow, choose the "Whole Thing" element and give it a display: flex This will automatically set the flex-direction to row

• Also from the Entire Flow, choose the Global Location Before Page (or After Page, whichever you chose) and set its flex like this flex: 0 0 50%

• Select a page and choose "Whole Page" for "All Pages" and set the same flex: 0 0 50%

50/50 would be appropriate if you want both columns to have the same width. You can play around with different percentages until you get the widths you need.

IMPORTANT: This will not look good on mobile, so remember to make the corresponding changes for mobile view. (setting flex: 1 on the page and display:none on the global location should do the trick)