Easy, no-hassle editing.

In this quick demo I am going to show you how to edit a page on the Student Union Website, without having any technical knowledge.

This tutorial will be a sequence of steps that you can perform on ANY student union page.

We have set up a site (http://union.brandeis.edu/sandbox) for you to practice on. Feel free to put whatever changes you would like on this page, it is just a playground for you to experiment around with the tools.

Open up that link now, and scroll to the bottom. Click the "Edit Now" button, and login with your Brandeis Login. If you are not an administrator, you will not be able to log in. If this is the case, contact one of the site owners to request access.

The Editor

Once you get in to the page, click on the little pencil in the upper left hand corner. This should open up the editing interface.

The page won't appear to change much, but you should see a little draggable toolbox. You can drag it around by the buttons on the top. additionally, you should have a little green checkmark in the upper right corner which you can hit at any point in time to save and exit the editor.  If you hit the red cross, your changes will be discarded.

To start editing a piece of the page, just click on it.  There should then be a little yellow rectangle around what you are editing. Type away!

To start a new paragraph, press enter.

Text Size and Weight

There are three sizes of text (Title, heading and Paragraph). You can change a piece of text to be any of these by clicking on the buttons in the toolbox.

To make a piece of text bold or italics or a link, select the text you want to be bold or italics and then press the B button or the slanted I button in the toolkit. If you are inserting a link, a little dialog will pop up above the text. Paste in a link and press enter, and the dialog will go away.

In the sandbox page, see if you can replecate these three samples:

This is a Title

This is a Heading

This is a paragraph

You can also change the font weight for a full piece of text to be thinner than normal. To do this, create a new piece of text, and have it selected (i.e. have your cursor in it). There should be a little purple button at the bottom left of your page. Click on it.  This is the "Style Browser" which allows you to apply styles to the different pieces of your page. We will go through all of them, but to start, just click on the "Thinner Text" toggle button, and press apply. This will take you back to the main editor page.

Can you create all of these types of headings? (You can use the same methods for paragraphs and titles too!)

Bold Heading

Normal Heading

Thin Heading

Thinnest Heading

What other styles can we add to our page?

The answer turns out to be "A Lot!". We can categorize these into a few important categories.

You can change the background color of the element and the text color.  The only colors supported are the colors that are a part of the Brandeis Color Scheme (to make everything look uniform).  To give the text a little bit of a shadow behind it, press the CARD style. Using Three Styles, can you create a Title that looks like this?

Card with Color

We can make this card look better by changing its padding (the area in between the text and the edge of the card, the border). Lets set the padding Left, Right, Top and Bottom to be Large.

Card with Padding + Color

You can also change the orientation of the text.  We can finish this up by centering it. Now you know how to make beautiful text, we will move on to beautiful images!

Images, Uploading, Resizing and Positioning