How to Create Your Page's Layout - DocHub - The ITS Web Team's Document Chill Space for Cool Kids

Page Layout Using Content Rows and Columns

This lesson covers how to add Content Rows to a page, divide those horizontal rows into vertical columns, and how to place modules in those columns.

If you have already completed Cascade training and you have a live asset with which to work, please follow along using your real asset. If you are using this guide for practice, please always use the _playground site. Yes, it starts with an underscore. It is a test site specifically meant for practicing.

Follow these steps to learn how to lay out a page in Cascade.

Step 1

Edit Page

Use whichever page you want to make your edits on and click the Edit buton. If you do not have a specific page to use, return to the page in the _playground site and create yourself a page and edit it.

Step 2

Template 2015

Scroll past the top text module to the bottom of the page. Click anywhere on the collapsed row which reads "Template 2015" to expand it.

Step 3

Accordion Page

The first option under Template 2015 is always the question, "Is this an accordion page?" For this example, we are using the the default option for, "No."

Step 4

Content Row

Now we get to the first Content Row. This is how you will lay out your page using the grid, and how you will work with most of your page's content. All of the components of the grid can be found under the Row header.

Step 5

Row Layout

Set up your columns under the Row Layout header. For now, leave your Row Layout set to 1 Column because we are going to move all of the data from the top text module into one under the Template 2015 section.

Step 6

Column 1

Every new row on every page defaults to the Row Layout being set to 1 Column, that column being set to “None,” and the Column 1 dropdown being collapsed. By default, all columns have their sections collapsed. Click on the Column 1 header to expand it. At first, this will appear blank. As soon as a module is selected in the Choices for 1 Column dropdown, the contents specific to that module will display in the expanded Column 1 section.

Step 7

Choices for 1 Column

After you choose row layout, select an option in the “Choices for 1 Column” dropdown. In this example, we are adding a Text Module by clicking the Choices for 1 Column dropdown and selecting Text. You should immediately see that the Column 1 section (expanded in the last step) now displays a Text module section under it.

Step 8

Text Module

If you take a look at the text module here, you will see that its options and functionality are identical to the top text module we used back in the Text Module section. Add in whatever content that is work appropriate you wish here. The example cuts and pastes the work done in the Text Module training videos.

Step 9

Adding Additional Rows

Scroll back up to the Row header. If you run your cursor to the right, you will see a very faint greenish circle with a plus sign in it. Hovering over that icon displays the tooltip "Add new group." Click the Add New Group Icon. You will notice the "Cascade is thinking circle" appear. Give it a second, and when it is done, a new row will have been added beneath the row where you clicked the Add New Group icon.

Step 10

Row Options

Now that there is more than one row, each row section will display different options. It displays its number (the example is row 1/2), the Move Down Arrow (because it is the top row), the same Add New Group Icon, and now a Delete Row Icon. Clicking the Delete Row Icon will immediately and permanently delete all data in the ENTIRE ROW!!! Click the row 1 header to collapse it. You should aim to click anywhere in the header bar left of the row options.

Step 11

Row 2 of 2

Make sure you are working with row (2/2). You will notice this one has a Move Up Arrow because it is the bottom-most row in this example. Leave Row Layout set to 1 Column. Click the dropdown for Choices for 1 Column and once again select Text.

Step 12

Horizontal Line

Click into the new text module's content field. Then click the Insert dropdown and select Horizontal Line. Instering a horizontal line is not required, it is simply a common method to visually break up the multiple rows on a page.

Step 13

Add Row 3/3

Click the Row 2/2 header to collapse it. Then, click Row 2/2's Add New Group Icon to add another row, Row 3/3, beneath it. Row 2/2 will now be Row 2/3 and it will now have both Move Up and Move Down Arrows because it is no longer the top or bottom row.

Step 14

First of Two Columns

Click on Row 3/3's Row Layout dropdown and select 2 Columns (even columns).

Step 15

Select Text Module

Click Column 1's dropdown and select Text one more time.

Step 16

Fill in Text Module

Scroll down and enter some text into the Title and Content fields for the new text module. The example uses, “You can do everything in this text module that you did before.”

Step 17

Module in the Second Column

Scroll back up just a bit and click Column 2's dropdown and select Image to place an Image Module into this column.

Step 18

Preview Draft

The next lesson will deal with how to use an Image Module. For now, click the Preview Draft button to save your changes.

Need Help with a Department or School Website?

Contact the Web Team

If you have any questions or concerns, please contact the Web Team by going to sandiego.edu/web-requests.

Contact the Web Team