Adding a Section

Sections can be one to three columns. (Note that any multi-column section will reformat to a single column for mobile screens.) 

You can have as many sections as you want, and you can add or remove them at any point, including adding a new section in between existing sections. However, you cannot move sections. Sections are a bit like the walls of your house—you can build them, you can knock them down, but you can’t move them. (Blocks, on the other hand, are like anything you hang on those walls, they can go anywhere and get rearranged.) 

To make a Section, click Add Section in the light grey field that spans the browser window. This opens a dark grey side menu to the right. Here you select how many columns you want this section to have. Choose carefully here, as this is the only section setting you can’t go back and change later.

Configure Section Menu

After choosing the section column count, you arrive at the Configure Section menu. This gives you styling options for your Section. All Sections will have the same configuration options: alignment, background color, layout (row width), extra features, and typography. Click the blue Add Section button to create the Section. 

To return to the Configure Section menu at any point, click Configure Section [#] in the upper left corner of the Section you want to modify. This reopens that grey Configure menu on the right.

Alignment

The first setting group is Alignment. You can control both the Horizontal and Vertical Alignment of your columns. The defaults are Left for Horizontal and Middle for Vertical.

Horizontal Alignment

Horizontal Alignment is most relevant for single column Sections whose width is not 100%, and two or three column Sections where not all the columns have blocks. Otherwise, all the available viewport width is accounted for, and you don’t need to worry about their horizontal alignment. 

This is most intuitive with single column Sections with less that 100% width. For example, if you have a 50% single column Section, then you can very clearly see if the column is oriented Left, Center, or Right.

Things get a little tricky with two or three column sections. If you do not have a block in one of your columns, Ziggurat will not recognize the blank column as a space-filling entity. For example, let’s say you have a 50/50 two column Section, and you only have a block in the righthand column. You have the Horizontal Alignment at the default, which is Left. In Layout view, you will see your block appearing in the righthand column, where you placed it. But if you save your page and go to View, your block will appear aligned to the left. This is because Horizontal Alignment will always override block placement when there is an empty column. If you want that column to appear correctly, select Right in Horizontal Alignment. Alternatively, just build that section as a single column section.

But what if you want a three column Section, with the center column left blank? With nothing in the center column, the right and left columns will zipper together. No Horizontal Alignment will achieve that blank center column. To do this, you need to place a blank block into the middle. (The specifics of adding blocks is covered on the Layout View: Block Types page.) You can either place a Basic Block with a space or return in it, or you can upload a small blank .png to the Media Library, and use an Image Block as a spacer.

Vertical Alignment

Vertical Alignment is a breeze. You have the option to align your Sections (and therefore the Blocks within your Section) either to the Top, Middle, or Bottom of the Section. Note that you can set Vertical Alignment for single column Sections, but it does not change the appearance.

Background Color

The next section is Background Color. This allows you to set the background color, and therefore the associated foreground (text) color, for the entirety of that section. You will always have these options: None, Default Light (white background, black text), and Default Dark (black background, white text), which are consistent across the site, and then a Primary Color and Colors 1-10, which you can set. You can set the Primary Color in the page’s Edit settings (see the Edit View page for details), and you can set the full Color series with a Color Palette (see the Intermediate Styling page for how to make a Color Palette, and the Edit View page for how to assign a Color Palette.)

The default Background Color is None. None appears very similar to Default Light. Both appear to have a white background. However, if you are using Sticky (see below for more about Sticky), then the difference will be become quite apparent. (That is, a Section with a background color of None will have a see-through background if it scrolls over a Sticky Section.) If you are not using the Sticky feature, then there will be no visible difference between None and Default Light. 

Layout

Row Width

Next is Row Width. This controls the width of your column or columns. This is the only setting that will change based on the column count of the section. 

For a three column section you can have: a 33/33/33, 25/25/50, 25/50/25, or 50/25/25 percent viewport split. 

For two column sections you can have: a 25/75, 33/67, 50/50, 67/33, or 75/25 percent viewport split.

For one column sections you can have: 25, 33, 50, 67, 75, or 100 percent of the viewport.

Extra

Sticky

Sticky mode is a check box. If checked, it will make your Section stick to the top of the browser viewport when you scroll. Any subsequent non-Sticky Sections will scroll over the Sticky Section.

A note of caution when using Sticky. Be very careful when using sticky with longer text, or other content that you don’t want to risk getting cut off! Recall that Sticky Sections stick at the top of the Section, not at the bottom of the Section. Always preview Sticky content at different browser sizes to make sure that everything appears as you want it to across screen sizes. 

Hero

Hero mode is also a check box. Hero mode results in a Section with an auto-scaled and auto cropped image or video that fills the browser viewport. To achieve the whole effect, you will need a single column section at 100% width, with the Hero Mode box checked, and a Hero Block in that section.

If you place a Hero Block into a Section without checking the Hero mode box, then you will still have a small amount of padding around the Hero Block. Make sure to select Hero mode for at the Section level when using a Hero Block.

Attributes

Next, are the two Attributes fields: Custom ID and Custom Class. They are both open text fields. This is where you can add Bootstrap or CSS to your sections. Because this involves interacting with code, it is covered on the Intermediate Styling (Bootstrap in a Custom Class field) and Advanced Styling (CSS with Custom ID and Custom Class) pages.

Typography

Lastly are Typography overrides. Usually, you set your fonts at the page level in Edit view, but you can override those choices on a section level here. For more about setting Webfonts and System Fonts, see the Edit View page.

Removing a Section

To remove a Section, simply click this small circular “X” button by Configure Section. It will open up a dark grey side bar on the right, making sure that you really do want to delete your Section. This is an important question, because when you delete a Section, all Blocks living in that section will also be deleted. Keep that in mind!