🏛
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: flexThis 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)