Manage Bar: Find, Add, and Sort

The manage bar is this dark grey section at the top (or sometimes left-hand side) of your browser window. It will always be visible when you are logged in. It allows you to add and sort content, and navigate the Ziggurat Content Management System (CMS).

There are a number of different menu items, but we are going to focus on the two that you’ll probably be using the most: Content and Publication Sort.

Content

Content, the far left menu item in the Manage Bar, allows you to add new publications, publication pages, and media, and find existing publications, publication pages, and media. 

Clicking Content takes you to the content page—this shows all your Ziggurat content (publications and publication pages). You can search and filter this content; by default it is set to show the publication or page that has been modified most recently. If you want to create a new page, click the Add Content button. (This is also accessible through the dropdown menu that appears when you hover over Content in the Manage Bar.) This is also where you can delete content.

The other important part of the Content page is the Media Library. You can either click the Media tab, or access it from from the dropdown menu under Content in the Manage Bar. The Media Library houses all the image, audio, and video assets that have been loaded into the CMS. If you want to use an image or audio clip in your publication (or a small video), it will need to live here. Like Content, you have different search and sort options, and the ability to add and delete media. To add media, either click the Add Media button on this page, or upload on the fly from the dropdown menu under Content > Media > Add Media on the Manage bar. (Remember, the manage bar will always be visible when you’re logged in.)

Publication Sort

Publication Sort is the other Manage Bar item you’ll use frequently. It’s the farthest right item on the Manage Bar.

It shows all your publications, with the individual publication pages grouped below. Publications appear in order of most recently modified. You can search for publications and manage the number of results at the top of the page.

Publication Sort allows you to see all the publication pages associated with a particular publication. You can control the order of pages in your publication by clicking and dragging the four-directional arrow icon by the publication page titles to reorder. You can also check which pages have been published.

Edit & Layout Views: Crafting Content

To add and style content on a publication or publication page, you use the Edit and Layout Views. They are accessible when you are logged in and click into a Ziggurat page. These buttons live in a colored bar below the Manage Bar. (The color of the Button Bar reflects the color settings for the publication.)

While there are several buttons in the button bar, here we are focusing on the two buttons/views you will probably use the most: Edit and Layout. If we think of building your Ziggurat publication like building a house, in Edit view, we build the foundation, and in Layout view, we build the actual house. Additionally, the View button allows us preview our page as a reader would experience it. When in View, everything below the Button Bar is what a reader would encounter in their browser for this page. Note that View is the default mode when you are logged in and go to a page.

Edit View

When you click on the Edit button, it will take you to the Edit view for this page. This interface looks similar to the interface of the Manage Bar. You’ll even see that the Button Bar buttons have turned into tabs.

Remember, Edit is where we build the foundation for our publication or publication page. This is where you supply Ziggurat with the key pieces of information that it needs to put things together. 

Things like: 

• Your page’s title
• The publication your page is part of
• Any credits
• A bibliography
• Endnotes
• Citation information
• What you want to appear in the Table of Contents for this page
• Your font choices for this page
• Your color choices for this page
• Whether this page is intended for web or for print
• And any extra Drupal or custom css or js libraries you want to include

This is the beauty of a CMS like Ziggurat. You enter key information into fields, and Ziggurat will do the formatting and linking for you, controlling colors and fonts across a page and supplying auto-generated elements like Headers and Tables of Contents.

Layout View

Layout is the fourth button from the left on the Button Bar. Layout view is where you build and design your page. When we click into Layout view, you’ll notice that we get some new Layout-specific buttons below the Button Bar as well: Save Layout, Discard Changes, and Revert to Defaults.

But for now, let's focus on the stuff contained within this thin blue line. This is everything that will appear on your page. You’ll notice all the content we saw in the preview, but with some additional scaffolding elements: these dotted lines, these little circles with pencils, these links that say Add Block and Add Section.

Blocks and Sections are the basic building elements of the Ziggurat platform. Sections are containers that span the width of the browser viewport. Sections can be one to three columns. (Note that any multi-column section will reformat to a single column for mobile screens.) Blocks are the elements that house your content—text, image, audio, video—and they get placed into Sections. You can have an infinite (at least in theory) number of Blocks in any Section.

Sections

You can have as many sections on a page as you want. You can add or remove sections at any point, including adding a new section in between existing sections.

To add a section, click Add Section in one of the grey fields bordered with a grey dotted line. This will reveal a dark grey menu on the right of your browser viewport. First you will decide how many columns we want this section to have. (Note that this is the only section setting that you cannot go back and change.)

This brings us to the Configure Section menu. This gives us styling options for our Section:

• Horizontal and vertical alignment
• Background color
• Row width
• Extra features (sticky, hero, custom class, custom id)
• Typography overrides

To create this new Section, we click the blue Add Section button at the bottom of the side menu. Your new section will appear with one to three blue fields (the number will depend on how many columns your Section has) to add blocks. Notice that you can still add another Section above or below the Section you just created.
 

To return to the Configure menu for this Section at any time, click Configure Section on the left-hand side of your browser window, for the corresponding Section you wish to configure.

To remove a Section, click the small circular “X” button by “Configure Section.” It will open up this side bar, 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!
 

Blocks

If we laid our foundation in Edit view, and set up scaffolding with Sections, Blocks are what allow us to build in the content of our publication.

Adding a Block is much like adding a Section; you can add a Block anywhere you see a blue Add Block field. You’ll notice that this field always appears at the bottom of a Section column, but don’t worry if you want to sandwich your new block between two existing blocks—they’re easy to move.

When you click Add Block; a dark grey menu will appear on the right of the browser window. Most of the time, you will select the first option, Create Custom Block. (The other options are special blocks that get auto-populated by Ziggurat.) You will then choose what kind of content your block will have:

• Audio
• Text (Basic Block)
• Carousel (of images of videos)
• Hero (image or video)
• Image
• Image grid
• Video (this is for short videos; we recommend hosting most videos through Youtube or Vimeo) 

Click on the name of the block type to select it. This will open a pop-up window where you configure what goes into the block. This will vary slightly depending on the kind of block. For more on setting up different Block types, see the Layout View: Block Types page.

All blocks require that you give them a title in the open text field below the heading “Title.” The title is up to you and can be as descriptive (or not) as you want. This is mainly for back-end purposes, though you can choose to display the title to readers. If we don’t want this to display to the reader (we usually don’t), make sure you uncheck the Display title box. You will then add whatever kind of content your Block is set up for. In some cases you will be adding content from the media library by clicking some buttons, and in others you will add text with a WYSIWYG (what you see is what you get) editor. (WYSIWYG editors are like the text fields you encounter when you write an email, that allow you to style text with the push of a button.) To finish making your Block, click the yellow Add Block button at the bottom of the pop-up window.

If you want to return to the Configure window at any point, click on this little circle with the pencil in the upper right corner of the Block. This will open a drop down menu. Click “Configure” and you will return to the Configure window for that block.

There are two ways to move a Block. First, notice that when you mouse over the block, you get a four-directional arrow. This means you can click and drag this block to wherever you want it to go, even to a new section. You can also click the pencil icon, and select Move from the dropdown menu. This opens up the dark grey side menu with options to move a block directly to a specific section. This is especially useful if you’re moving a block far away on a page.

To remove a Block, click the pencil icon and click Remove Block. It will open a warning bar to the right, making sure you really want to do this. 

There is one more option on the pencil icon’s drop down menu: Style Settings. This allows you to add Styles to your block. The options will vary depending on the type of block. To learn more about Block Styles, see the Layout View: Block Styles page.