Advanced Sample Page

Row Layouts

Breadfruit tree saplings

I know we touched on row layouts in our first session.

But it is such a unique and often used feature, let us explore it again.

Saddle back caterpillar
Green Caterpillar

For example, you may want three columns of content, and then right under it you want two.

The sky is the limit. It just takes some getting used to.

Examples of row layouts. All of the layouts were developed with mobile view in mind, let us explain.

  • AgResearch
    • full column
    • five column
    • full column
    • five column
    • full column
  • Extension
    • three column
    • full column
    • four column
    • full column
    • four column
      • four, four columns
    • full column
  • Animal Science
    • full column
    • two column (tiles in one column and calendar in second column)
      • three column
      • three column
    • full column
An old barn in the woods
Picture of an old barn that was pulled out of our Media Library.


Always look to the right panel for your options that go with each block. You are going to be able to have one or multiple icons, independently choose how each look, align, size, look, link and accessibility text.

This icon could be alone, or in this case, text has been added to it with the icons floating left.

Maybe in some cases, there is an advantage to using this instead of an info box.

Examples of pages with Info Boxes


Yay for tabs! When you have so much information for a page, but don’t want to have your reader scroll and scroll just to see it, think about Tabs or Accordions.

Also note that you can have an icon on the tab or text. You cannot have both.

You can have a variety of different Blocks included within the content area in the Tabs!:

You might choose to have some descriptive text beside a photo image using the Row Layout block to create two columns.

  • You may also opt to include a list of specific items
  • For example…
Soldier saluting the american flag

Anchor tabs, icons, sub titles – even row layouts, paragraphs, lists. It just goes on and on!

Layouts, content settings, reordering, spacing, borders, states for active, hover, normal.

This is another option for a tabbed layout. I caution you to pick the one you want to use the first time. I have had mixed experiences by picking a side tab and then switching it to a top tab. Doesn’t look as nice as if I would have picked the top tab setting first.

Again, you can use any number of additional Blocks to use within the Tab Block as desired.

Confident Cow
Breed at MTREC@Lburg

Tab Examples


This is another favorite of mine to use when there is a lot of text on a page in different sections or categories.

Just like tabs, there are many to choose from. Let’s take a look!

Again, as with Tabs, you can use any number of other Blocks within the Accordian Block!

pink flowers


Advanced Gallery




A way to highlight what people are saying about your department or center
Michele Wilson

Lot’s of possibilities

Grids, carousal, movement? Be careful.
Your name
Your title


Let’s dig in and see what it is about
Who said it
where from?


Youth Resources
Milan No-Till Field Day

Pull Quote

“Whether you think you can or you think you can’t, you’re right.”


Rounding out our session today