Row Layouts
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.
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
Icon
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.
Info Box
This adds more layers than just using an icon. You will be able to choose the layout, alignment, links, & what the container should look like. This includes background, borders, links, images or icons. So many options.
What is the advantage of this over icon with text? If this needs to move, the whole box moves together. For example, the item next to this, if moved, would be five blocks to separately move to a new place. Remember, each paragraph, is a block.
Examples of pages with Info Boxes
Tabs
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…
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.
Tab Examples
- Teams and Clubs
- Animal Exhibitions with anchor tags
Accordions
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!
Examples
Advanced Gallery
Examples
Testimonials
Examples
Table
| Sales | Auction |
|---|---|
| one | two |
| three | four |
Youth Resources
Milan No-Till Field Day
Pull Quote
“Whether you think you can or you think you can’t, you’re right.”
i SAID SO
Rounding out our session today
- Supported Form Tools
- Managing Profile Follow-up
- Navigation Follow-up
- Calendar widget
- Info Icon to Home Page