# Grid/ Layouts

### Dark Theme

![Turn the lights out with the new Dark Theme](https://2051756409-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3MbuyGt2hSNJg4QtdX%2F-M51rc7ImDrBEtEfcXqg%2F-M51tTW0Q2NWB5WwPOkj%2Fimage.png?alt=media\&token=a6ef96fd-17c5-4779-8134-2c13ee775d31)

Want to bring the Dark Theme to your site? Contact <elementsupport@teamsi.com>

### How to Use Content Blocks

In the Content Page Editor you will find a number of widgets on the right hand side of the screen. \
\
These Widgets can be placed in the Main content area via drag and drop. \
\
1\. Drag a Content block from the widgets area to the main content area. \
\
![](https://tw-desk-files.teamwork.com/i/290685/attachment-inline/292687.20180703195100249.292687.201807031951002495HTTA.png)\
\
2\. Click Edit in the top right hand corner of the Content Block. The Content Block Editor will open.\
\
![](https://tw-desk-files.teamwork.com/i/290685/attachment-inline/292687.20180703195353893.292687.20180703195353893oYx3z.png)\
\
3\. Click save when you are done. Don't forget to hit the green publish button to publish your changes. \\

### How To Use Grids/Layouts

1\. In the page editor click the Layout link in the top right hand corner of the screen. \
\
![](https://tw-desk-files.teamwork.com/i/290685/attachment-inline/320636.20180502205958902.320636.20180502205958902fzjRJ.png)\
2\. The Layout Editor will open. From here you can choose the layout you want.\
\
&#x20;   Drag the Grid Widget you want from the right hand side of the screen to the Body Content Block. \
\
![](https://tw-desk-files.teamwork.com/i/290685/attachment-inline/320636.20180502210318604.320636.20180502210318604LwdMM.png)\
\
\
Example: 6+6 grid\
\
![](https://tw-desk-files.teamwork.com/i/290685/attachment-inline/320636.20180502210422720.320636.2018050221042272082mCu.png)\
\
3\. After setting up your grid columns, you can add content to them in the Content Editor. Click the content link in the top right hand corner of the screen. \
\
4\. The Content Editor will open. From here you can drag Content Widgets into the Columns you made. \
\
Example:\
\
![](https://tw-desk-files.teamwork.com/i/290685/attachment-inline/320636.20180622142426409.320636.201806221424264092EYnN.png)\
\\

### Advanced Page Building with Utility Classes

Here is a list of available Bootstrap Utility Classes.

* [For Spacing](https://getbootstrap.com/docs/4.0/utilities/spacing/)
* [Colors](https://getbootstrap.com/docs/4.0/utilities/colors/)
* [Display](https://getbootstrap.com/docs/4.0/utilities/display/)
* [Arrangement with Flex](https://getbootstrap.com/docs/4.0/utilities/flex/)

{% embed url="<https://youtu.be/ZJMg5Jpsogo>" %}

Advanced Technique for Custom Layout using background utility classes

### Ways to Achieve Spacing

{% embed url="<https://youtu.be/MVwbqK4BJfA>" %}

Use returns in Content Blocks or fine tune spacing with Utility Classes

### Spacing for Mobile Only

{% embed url="<https://www.loom.com/share/15bdd7cdf8394629b5733ca16baa4b1d>" %}

Use this method to achieve spacing only on mobile devices
