Layout Instructions

Getting Started...

Writing content for a website can often be a challenging task. Ensuring that the content is accurate, concise, and clear should be the main goals when writing but when adding content onto a website page, all the hard work of writing good content can go easily go down the drain if the page layout doesn't fit the flow of the content.

Structuring a layout for pages is often overlooked in website management. Whether you choose to add an image, a sidebar, or headers to a page, these small features can increase a readers' interest in reading all of the content on your page and exploring additional pages on your site. Before strategizing a layout for your page(s) check out these four layouts for inspiration: Simple and Bold Layout, Float in Formation Layout, News Flash Layout, and The Works. Below are instructions for each page.

Simple and Bold Layout

This layout goes a one step further by using an image to attract a visitor's attention to the page. The content is broken into short paragraphs making it easier to read and looks great on mobile.

Create a page, add your text to the main content.
Scroll down to the "Page Image" section and choose the image you want to upload to the page.
In order for your image to appear above the text, select the "Top" option as the Image Location.
Add a byline or image description (this is optional).
Save your changes to view the page.

Float in Formation Layout

The float in formation layout is unique since it uses the text editor's image upload instead of the "Page Image" feature. The following steps will show you how to insert an image into the text and wrap your text around an image (also known as "floating an image").

Create a page, add your text to the main content.
Highlight the text you want to become headers and select "Header 2" or any other header type from the Paragraph select box.
Place your cursor in front of the text you would like the image to appear. Click the "Insert" tab and select "Upload an image from your computer". Select your image, add an image description (this provides accessibility to screen-readers), and type your preferred image size (this layout uses medium sized images).
After you insert the image you can now wrap text around the image. Click the image (it will turn blue signifying that it is selected), then click the "Format" tab and select Align > Left. You can also use this button in the toolbar to align the image left. If you have additional images, repeat the same process and select Align > Right to float an image to the right.
Save your changes to view the page.

News Flash Layout

The news flash layout is starting to gain popularity among Chssweb editors.

Create a page, add your text to the main content.
Below the main content text box is the "Additional Content" text box. To add a sidebar to the page, enter text "Additional Content" tab below the "Main Content" text box. Any text entered in this field, will automatically display as a right-hand sidebar on the page. You can add headers and links.

Now to add articles to the page. If you've used this tool before you no longer have to find the article ids and add them to a field! Now you can search for the articles by title.

Below the Additional Content section, is a section called "Associate Articles". If the article originates from your site you'll be able to search for it. If the article originates from another site, you'll have to connect it to your site first in order to search for it.
In the search bar, type the title of the article you want to add to the page. Once you begin typing, the article title will appear and you can add it to the page by clicking the '+' button.
You can add as many articles as you like (or you may be interested in learning about our new article categories). To remove articles from the page, click the trashcan icon next to the article title. This will not delete the article; only remove it from the page.
After you've added (or removed) articles, save your changes and view your page. The articles will appear underneath your main content, sorted by most recent.

The Works Layout

This layout is called "The Works" because it utilizes different tools and will require a little more time than the other layouts. Having a plan for your content is key in order to develop this layout. As you're saving your changes, you may decide to switch things around or delete unnecessary content. You may even make several changes to the page before publishing and that's okay! Do what you think looks good, try out different headers, add links, be creative and try using the tools we offer. The Chssweb team is always here to help and walk you through any problems you encounter. Now let's begin!

Create a page and set it to draft mode until you're ready to publish it. Add your text to the main content. Hold off on adding any text that's reserved for the accordion. Focus solely on the content, adding headers and/or links. Add a sidebar using the "Additional Content" text box if you see a need for it.
Save your changes and view your page. Make any edits to the headers or paragraphs if needed and save the new changes.
To add an image to the page, you can either use the "Attach an Image" tool or you can insert images in between text. This layout uses the latter. To recreate this, place your cursor in between the text you would like the image to appear.
Click the "Insert" tab in the toolbar and select "Upload an image from your computer".
Select your image, add an image description, and type your preferred image size (this layout uses original). After adding the image it may be very large based on the original dimensions of the image. But you can scale the image to a smaller size by selecting the image and dragging the corner. Save your changes and view your page. Make any necessary edits before moving to the next step.

If you've added accordions or image sliders to a page before then you may be comfortable following the documentation on our help site. If you prefer to stay on the editing page, there is a tool that allows you to insert accordions and sliders to the page. These can get a little tricky so if you have any questions before getting started, send a note to us at chssweb@gmu.edu or give anyone on the team a call.

Adding an Accordion

See the separate instructions for how to add an accordion using the accordion template or by editing the code.

Adding an Image Slider

The image slider works best with landscape images and images that have the same dimensions. However, matching height is more important than width since the slider will be as tall as it's tallest image.

Place your cursor in between the text you would like the slider to appear. (Click the "return" key to give yourself a little space above your text.) Click the "Insert" tab in the toolbar and select "Template". In the pop-up box, click "Accordion" and select "Slider" in the dropdown menu. The template visual will change in the box. Click 'Ok' to add.
Several images of dogs will appear. Save your changes and view the page to take a look at the slider. You'll notice that the dog photos appear in the order they are listed.
Go back to the editing page and click the first image. The image will turn blue signifying that it is selected. To replace this image, click the "Insert" tab and select "Upload an image from your computer". Select your image, add an image description, and type your preferred image size (this layout uses large). Click 'Ok'.
Save your changes and view your page. Make sure the first image in the slider is the image you selected before proceeding forward. If everything looks good continue replacing the other dog photos with your images.
Like the accordion, you may want to add more slides or remove slides. Select the image(s) and copy and paste to add more slides or delete the additional images(s) to remove the slides. Save your changes.