Working with Sections & Modules

This article takes you beyond the basics of adding a page to your website. It includes some things you need to know, along with things you'll be glad you know when designing page layouts. 

• Sections divide the page into components which contain Modules and can be configured with 1, 2 or 3 columns
• Modules are building blocks for content and can be added or moved to any column within any section.
• Sections and Modules are available for use on all Dynamic, Event, and Business pages.

Responsive Design

Sections & Modules play a big role in how your site appears on different screen sizes. Saffire optimizes your site for whatever device you're viewing it on, and to do that, the sections and modules have to be repositioned in the browser as the screen shrinks.

Here's an example... below is a desktop page shown next to the same page as it appears on mobile. The mobile view includes identical components, yet it collapses into a single stack. Your site does this automatically!

Stacking Sections

The Sections control how the page stacks your content on a mobile device. Here's how they work...

• Each Section is seen as a component on the page and they are stacked in order, top to bottom. 
• Sections can include 1,2, or 3 columns, and the columns are stacked in order, from left to right.
• The first thing to appear on your mobile page is Section 1-column 1, then Section 1-column 2, and finally Section 1-column 3. Next would be Section 2-column 1, Section 2-column 2, then Section 2-column 3... repeating this pattern for each section on the page.

Example #1

The image on the left includes six modules in a single section. The image on the right shows how those modules will appear on mobile. The page stacks everything in column 1, then everything in column 2, then everything in column 3.

Example #2

This uses the same rules, but by splitting the six modules between two sections, the result displays differently on mobile. All of the first section is shown before anything in the second section. 

This is how you control things when the display order is important! If you get in the habit of using the Preview Tools on the right side of each page you shouldn't have any surprises once you Save and View it.

Spacing Modules

Sometimes the built-in spacing surrounding each module just isn't enough. If your page needs more white space, the simple solution is to add a Text/Gallery module in the appropriate location and use 'shift+enter' to add a line break. Alternatively, you can use 'enter' by itself to add two lines. If extra spacing is needed below an existing Text/Gallery module, you can add the extra line break(s) below the content in that same module.

Hiding Content

The Title module is required on every page - but it doesn't have to be displayed. Likewise, on Event and Business pages, there are required  modules you might prefer to hide for any number of reasons. If you don't feel the content of any required module is needed on the page, then hiding it is the way to go.

Hiding content is also useful when editing an existing page. Maybe you have content you've started adding, but it's not yet complete... you can hide the section or module until you're ready for it go public. Or, you might want to hide content which is no longer relevant, yet it will be again on a later date. It's a quick way to remove it from public view without deleting it entirely.

There's also the added complexity of Scheduling modules and sections...

Scheduling Content

This may be the ultimate superpower on your entire site. You can schedule start and/or stop dates & times for any Section or Module. In other words, you can make content appear & disappear! It's great for making press releases show up on a specified date, or for making products go on sale at the right time, or headlines & notifications appear, or images change, or forms expire... or anything else you can think of.

You can schedule things days, weeks, even months in advance. But... with great power comes great responsibility. Like the Hide option, it's possible to schedule modules within scheduled sections. And just like hiding, it's possible to get them out of sync. Be careful out there! 

Get all the details on this topic by reading the article Scheduling Modules & Sections. 

Layout Ideas

Sometimes the hardest part of managing a website is deciding how your pages should look. Making it visually appealing while also easy to read yet concise is a challenge for even the most seasoned layout pros.  Check out the sample layouts in this article for some inspiration.