Creating Page Layouts:

Tools to make your life easier

Cynthia Mijares and Grace Kiburi

Stanford Web Services

You've come this far...

• You successfully set up a site
• Added some content
• Maybe added some fields
• But the display is not great

Now what

do I do?

1.  Blocks
2. Context

3. Manage Display
4. Field to Block

Enable Modules

1. Block Class
2. Field Group
3. Context, Context Accordion,
   Context Respect, Context UI
4. Display Suite, Display Suite Extras,
   Display Suite UI

Blocks

From Structure > Blocks

1. Create a Block
2. Place it in a theme region
3. Add optional CSS Classes
4. Configure visibility settings

Let's take a closer look >>

Context

Context allows you to organize your site into manageable sections. It's used to change the layout of your page depending on where you are on the site.

For example...

Condition: On this page URL path

Reaction: Place a cupcake block

Context

From Structure > Context

1. + Add to create a new Context
2. Enter Name
3. Enter an optional Tag
4. Enter an optional Description
5. Add a Condition
6. Add a Reaction
7. Click the Save button

Let's take a closer look >>

Manage Display

Manage Display

• Reorder fields
• Set Label configuration
• Add new group for CSS 
• Configure group settings
• Remember to Save!

Let's take a closer look >>

Structure > Content types >

Type > Manage display

Field to Block

If you have a long list of fields, you might want to place some fields in a sidebar block.

This block would contain the data that is specific to your page.

Let's take a closer look >>

Resources

https://openframework.stanford.edu/

https://swsblog.stanford.edu

https://sites.stanford.edu