# Work in Progress: How to Create a Global Column

{% hint style="info" %}
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.
{% endhint %}

### 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%`

{% hint style="info" %}
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. 
{% endhint %}

{% hint style="danger" %}
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)
{% endhint %}