Creating multi-column responsive layouts
Click on the “Edit Page” button to see the actual short codes use to create multi-column responsive layouts. A description of what short codes are is at the bottom of this page.
Halves
layout classes=”halves”
Thirds
layout classes=”thirds”
Three across
layout classes=”thirds”
One-third, two-thirds on desktop (small stacks first on mobile)
layout classes=”thirds flip”
One-third, two-thirds on desktop (wide stacks first on mobile)
layout classes=”thirds”
Two-thirds, one-third on desktop (wide stacks first on mobile)
layout classes=”thirds flip”
Two-thirds, one-third on desktop (small stacks first on mobile)
Fourths
layout classes=”fourths”
Four across
layout classes=”fourths”
One-fourth, three-fourths on desktop (small stacks first on mobile)
layout classes=”fourths flip”
One-fourth, three-fourths on desktop (wide stacks first on mobile)
layout classes=”fourths”
three-fourths, one-fourth on desktop (wide stacks first on mobile)
layout classes=”fourths flip”
three-fourths, one-fourth on desktop (small stacks first on mobile)
Fifths
layout classes=”fifths”
Five across
layout classes=”fifths”
One-fifth, four-fifths on desktop (small stacks first on mobile)
layout classes=”fifths flip”
One-fifth, four-fifths on desktop (wide stacks first on mobile)
layout classes=”fifths”
Two-fifths, three-fifths on desktop (small stacks first on mobile)
layout classes=”fifths”
Three-fifths, two-fifths (wide stacks first on mobile)
layout classes=”fifths flip”
Three-fifths, two-fifths (small stacks first on mobile)
layout classes=”fifths”
Four-fifths, one-fifth on desktop (wide stacks first on mobile)
layout classes=”fifths flip”
Four-fifths, one-fifth on desktop (small stacks first on mobile)
Sixths
layout classes=”sixths”
Six across
layout classes=”sixths”
One-sixth, five-sixths on desktop (small stacks first on mobile)
layout classes=”sixths flip”
One-sixth, five-sixths on desktop (wide stacks first on mobile)
layout classes=”sixths”
five-sixths, One-sixth on desktop (wide stacks first on mobile)
layout classes=”sixths flip”
five-sixths, One-sixth on desktop (small stacks first on mobile)
‘Kitchen Sink’ demo of special cases
layout classes=”thirds callout kiss”
Three across
Multi-column lists
- Instead of putting lists in PODS,
- give the lists themselves the class you would ordinarily give the PODS.
- They still go inside LAYOUTS,
- but we skip the PODS to avoid a gap on mobile.
What is a shortcode?
A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut. See this page for a list of the default shortcodes that come with WordPress.
We have also set up some custom shortcodes to help with laying out the site.
Shortcodes for layouts
LAYOUT class names are descriptive of the number of PODs (‘denominator’) contained in the LAYOUT. For example, thirds.
Class names of the PODs within each LAYOUT either indicate their position in the containing LAYOUT, or the widrth (‘numerator’) it takes up in desktop layout mode. For example, first or three-fourths.
Put your internal PODs in the order you wish them to appear on desktop. For example, if you want a two-thirds, one third layout, put pod classes="two-thirds"before pod classes="one-third". If you want a one-thirds, two-thirds layout, put pod classes="one-third" first.
If you want to reverse the order in which the internal divs stack on mobile, add a class of flip to the containing LAYOUT, like so: layout classes="layout thirds flip".
- Add a class of
calloutto any POD to change its background color, like so:layout classes="callout halves"to change the whole section, orpod classes="first callout"to change just that portion of the layout. - Add a class of
kissto any LAYOUT to renove margins of its PODs, like so:layout classes="layout callout kiss halves". See the bottom of the page for a demo of the ‘Kitchen Sink’.