The Layouts Application

Ellington’s Layouts application is a quick and dynamic tool for creating in depth topical pages. Utilizing drag and drop functionality content can be placed and arranged on a page in a matter of clicks.

To Create a Layout:

The Layouts application is located in your admin panel at yoursite.com/admin/layouts/.

Create a Layout Object

  • Click “add” next to the Layouts application.
../../_images/1lay1.png
  • Add general information including a headline, subhead, description and photo which will appear in the layout’s list view, visible at yoursite.com/layouts/list
../../_images/1lay2.png
  • Create endpoints for your layout. Endpoints determine the url a layout will be located. For example: an endpoint of “/test/” will appear on your site at yoursite.com/test/. You can then link a layout into stories as a special feature, or add layouts to your top navigation bar to bring users to your page. A Layout may have many Endpoints, or no Endpoints. Having no endpoints usually signifies that a Layout is designed to be placed within other Layouts, and is not to be used stand-alone.

Warning

Endpoints need to conform to standard URL structure. Spaces between words need to be separated by a dash (-), for example /tournament-page/.

../../_images/1lay3.png
  • Create a version: Add the date and time this layout will become public on your site.
../../_images/1lay4.png

Note

You can add multiple versions of a layout. Creating multiple versions allows for easily referenced benchmarks for changes to the layout page. Layouts can also be post-dated which allows them to change appearance automatically.

../../_images/1lay5.png
  • Click “Save and continue editing”

Add content to a Layout Version

Once you’ve initially saved your layout, you will see an “Edit layout” button next to your layout version.

../../_images/1lay6.png

Clicking on this button will take you to the layout editor, where you can add and organize your content.

The Layout Editor

Your initial layouts will look like this (below).

../../_images/1lay24.png
  • The left and right arrows, as well as the clock icon track your changes to the layout, see Layout Versioning for more info.
  • The Add rows button allows you to add content-housing rows to your layout. See Add Rows for more info.
  • Versions allows you to view all existing versions of a Layout and track how they have been updated over time.
  • Document Allows you to control how your layout displays on your page. See Document Type for more detail.
  • Preview displays the content as it would appear on the public side of the site. Preview Your Layout
  • The final button is the View on Site button, Clicking this button will allow you to see the public page from any endpoint you’d like.

Document Type

The Document type allows you to control the appearance of your layout with regards to your right rail content. Layouts can include right rail content, or override such content to fit your needs.

../../_images/1lay19.png
  • Inherit: This document format will display the right rail content and adds from your base template.
  • Override: This format will override the right rail and allow you to place stories, photos or any other object in that area.
  • Fullscreen: This format will simply remove the right rail and spread your layout content across the page.

Add Rows

Adding rows creates a framework for your layout. Rows can be added and moved at will to change a page’s appearance.

  • Click “Add rows” and select the type of row you wish too add.
../../_images/1lay9.png

Rows will be added to the top of your page, and can be placed in the order you desire by using the drag-and drop tabs to the left of each row.

../../_images/1lay10.png

Rows can be labeled to assist in maintaining order and easy identification within the newsroom.

Add Content

The “Content Picker” is anchored at the bottom of your browser and floats above the layout page and rows. This allows you to always have a palette of content ready to load into your respective rows.

../../_images/1lay20.png

Select content by clicking on the Content button and then the type of content you wish to add.

../../_images/1lay21.png

Once you’ve selected your content, you can scroll through the layout and drag and drop content in your desired rows.

../../_images/1lay22.png

The appearance of content can be changed by clicking on the icon next to each content object.

../../_images/1lay15.png

Preview Your Layout

At any time, you can see a mock-up of how your layout will appear on the public side by clicking the Preview button. Content can still be placed and moved using drag-and-drop while you are previewing a layout. This feature is not guaranteed to exactly match your on-site styles – however it will do the best it can. Preview is only available in Firefox 4.0+, Chrome, and Safari. You can also view the live version of a layout at any time by clicking the view on site button.

../../_images/1lay23.png

Warning

If your base template has been overridden and does not include a page block that encompasses the entire <body> element, previews will not show up correctly.

Layout Versioning

Layouts have two forms of content versioning to track changes.

  • The first tracks changes made in your individual session with this Layout. Any movements or changes you’ve made since opening that layout in your browser will be tracked here. You can back up change-by-change using the arrows, or review changes and revert back to the way the layout looked 4 steps ago by clicking the clock.
../../_images/1lay18.png
  • The second form of versioning works off of the “Save New” button. The “Save New” button creates a completely separate version of your layout which will be stored alongside previous versions of your layout. The layout with the most recent date assigned will appear on the public side. This allows a newsroom to review previous versions of a layout, and revert to those if they choose by simply re-saving.
../../_images/1lay17.png

Making Sure Your Styles are Compatible with Layouts

If your site has modified the base width of the page – the defaults being 990px for the page, and 670px for the content area, you may have to customize the widths of the various layouts column sizes. If using the default page and content widths are not an option, you may wish to override the layout column size classes as follows in your site’s stylesheets:

/* full width column. */
body.layout_detail div.column_lead { width: <content area width>px; margin-right: 0; }

/* 2/3 width column. */
body.layout_detail div.column_large { width: <content area width * 2/3 - 10>px; }

/* 1/2 width column. */
body.layout_detail div.column_medium { width: <content area width * 1/2 - 10>px; }

/* 1/3 width column. */
body.layout_detail div.column_small { width: <content area width * 1/3 - 20>px; }

/* sidebar column. */
body.layout_detail .sidebar div.column { width: <sidebar width>px; }
body.layout_detail .sidebar div.column img { max-width: <sidebar width>px; }

You may need to adjust the pixel widths further if your site applies different padding or borders to layout columns.