Using the Content Box - Essential
The Content Box is the section of your Schudio CMS where you write what is going on your website. It looks like this:
In this guide I will be going through, in brief, what each of those buttons at the top does and how to use them effectively to build your website.
These tools are the easiest to explain:
The scissors are used to cut text i.e highlight a line of text and press this button to remove it from your page but store it in your clipboard.
The two sheets of paper are used to copy text, similar to the cut scissors, except instead of removing it from the page it just takes a copy of it to your clipboard.
The clipboard with the box and three lines is the option to paste the text in your clipboard. Once you copy or cut some text you can press this button to place it somewhere else
The clipboard with the "T" is the option to paste as plain text. It is the same as the paste option except it will remove formatting. This means it will remove any underlines, boldening, italics etc.
The clipboard with the "w" is the same as paste option again except it is used to paste from word. So if you copy/cut some text from word use this option.
The forwards arrow and the backwards arrow are for those little mistakes. They are simply redo and undo.
Pro Tip: Each of the options above (apart from paste from word) has a keyboard shortcut that you can use- find this out by hovering over each of the options!
The chain link is how you add a hyperlink to your text. To start, highlight your text, then press the chain link button, and this box will pop-up:
From here simply copy the URL that you are putting on your website, and paste it where it says URL. Press OK.
The chain link with a cross is used to remove a hyperlink. Highlight your hyperlink and press this to remove it.
The flag is used for creating anchors. An anchor is a hyperlink used to go internally. Click on your page where you would like the anchor to go >> press the flag >> give it a name e.g. "top". >> press the chain link button:
Simply set the display text >> change the link type to anchor in the text >> select the anchor by name or element ID >> press okay.
The box with the two mountains is used to insert images:
If you have the image saved in the server. Press browse server >> find your image>> set the width to a percentage 50% or 100% usually and remove the height to use the default image height (this will keep the image at a good resolution) >> if you want a border insert how big you want it to be >> Hspace and Vspace are how much room it will leave between the image and any other content. 5 in each is usually a good gap for clarity. >> align is just whether it will stick the image on the left or on the right of your page.
The box with the grid is where you would go to add tables. Simply press the table button and fill in the following fields:
Choose how many rows and columns you want, choose a width and height (see above for best utility of width and height), choose if you want headers and where. Cell spacing and padding are how much room there is between the grid and the text. The border size is how thick the borders are. Align is the same as pictures. Caption and summarise if you wish.
The bold line amongst the thin lines adds a ruled line in your content
The twitter icon will change the highlighted text into tweetable text. Just click on the icon, give it display text and the text it will show in the tweet. Press OK.
These work the same as word:
B is bold
I is italics
U is underline
S puts a line (strike) through your text
Tx clears all formatting.
These also work the same as word:
The first is Left align
Second is Center align
Third is Right align
Forth is Justify
The last two are bullet points and numbered points
The arrow pointing left of the text decreases any indents you may have in your text
The arrow pointing right of the text increases any indents you may have in your text
The quotation marks change the styling of your text to highlight quotes
Where it says paragraph with a drop down arrow changes the size of your text. Everything from the largest, heading 2, to the small subheading, heading 4.
The A above the line changes the colour of the text
The A inside a box changes the background colour
The four arrows maximises the content box size to fill your screen
The person in the circle checks your website for accessibility issues.
The Source button will change everything you are writing into html code. This is recommended for people really looking to advance the look of their page. I could spend hours going over everything you can do in here, but I will just give you a bit of advice with tables in this guide:
Here is a table once in the source code. The only thing that you need to look at here is the top line. Where I have written: align=“center” border="1" cellpadding="1" cellspacing="1" class=“table table-bordered table-hover” style="width: 100%;", copy and paste this into exactly the same place I have put mine. Just after the opening <table and before the last >. This will change the styling of your table to look more professional and responsive.
This is all there is to the content box! There are other features around the content box that you may find useful- check out the other areas of our extensive knowledge base to learn more.