Blocks

You can add a Block anywhere there is a blue Add Block bar within a section. Add or modify a Block’s content in its Configure window. You can have (in theory) an endless number of Blocks in a Section, and you can move those Blocks around within a Section and between Sections. And, of course, you can Delete blocks as well. Block options (Style Settings, Configure, Move, and Remove Block) are found by clicking the small pencil icon in a Block’s upper right corner. For details on adding, moving, and deleting Blocks, see the Introduction to the Interface page. For details on Block styles, see the Layout View: Block Styles page.

 

There are a number of different kinds of Blocks. You’ll see quite a few when you click Add Block and open the dark grey Choose a Block menu. The majority of the time you will be using a Block from the Create Custom Block option. In this case, custom just means that it’s not pre-populated with stuff from the CMS. All the other options below fall under that category, and are covered on the Other Block Types page.

Block Types

You will want to select the type of block most suitable for your content. Audio Blocks are for audio from the media library. Basic Blocks are for text but can also be used for embedding third party hosted videos, adding CSS or JS, and occasionally for images. They are probably the most versatile block type. Carousel Blocks allow you to rotate through a series of images or videos. Hero Blocks auto crop and auto scale an image or video to fill the browser viewport. Image Blocks allow you to place an image from the Media Library. Image Grid Blocks allow you to create a grid of images from the Media Library. And Video Blocks allow you to place a video from the Media Library.

Below, we will walk through the Configuration settings associated with each block type. All custom content Block types will have some combination or variation of similar features. All Blocks require a Title. This will always be the first field in a Block’s Configure window. Make sure to give the Block a Title. The check box below, Display title, allows you to control whether or not the block Title is visible. Generally, you will want to untick this box, so that the Title is not visible. Titles are mostly for back-end purposes. (You cannot style them.) At the top of the page, there is a check box for Show Content Preview. By default this box is checked. But if you were to uncheck this box, then you would only see the Block Titles, and no part of the Block’s content. This can be useful if you have a very long page. This feature is what Titles are intended for.

Basic Block

Basic Blocks are for text but can also be used for embedding third party hosted videos, adding CSS or JS, and occasionally for images. They are probably the most versatile block type.

 

Because Basic Blocks have a WYSIWYG editor; that allows us to add and style text. WYSIWYG stands for what you see is what you get; if you’ve written an email you’ve used a WYSIWYG editor. See the Layout View: WYSIWYG & Text Styling page for more information about how to use the WYSIWYG to style text.

 

Below the WYSIWYG we have a dropdown for Text Format. You will only want to change this if you are planning to use CSS or JS. This is covered on the Advanced Styles page.

 

Below that we have the option to add Background Media. This is optional. This allows you to select an image or video from the Media Library and place it as a background. See below about Image Blocks on how to add media to a block. If you do add Background Media, you will control how that displays with a Block style.

 

Leave View Mode set to Full. 

Image Block

To add an image to your block, click the yellow Add Media button. This opens the Media Library. You can either upload directly to the Media Library at the top with the Choose Files button, or select an image you have already uploaded from the bank of images below. You can search or sort images by Name, Title, Media Category, or the Sort options. Select your image by clicking the tick box below the image. Click Insert Selected.

If you need to remove this image and replace it with another, click Remove. Recall from the Media Library page that if you update an asset in the Media Library, it will automatically update in your Image Block, as that image is dynamically linked to the asset in the Media Library.

 

Leave View Mode set to Full. 

Hero Block

Hero Blocks take an image or video, and auto scales and auto crops that asset so that it fills the viewport. To achieve this effect, you need both a Hero Block, and a properly configured Section. 

 

(Hero Blocks work best in a Section that is a single column at 100% width. You will also have to open up the Section settings and check “Enable Hero Row.” This will remove any padding from around the section.)

Hero Block configuration first gives you a WYSIWYG editor. Use this if you want to have text over the image or video. This text will appear vertically centered over your image or video. If you don’t want text, leave that blank.

Otherwise it’s just like an Image Block. You add your image (or video) with the yellow Add Media button under Background Media.

Note that in Layout View you will still be getting a little bit of padding around the block. This is only because you are in Layout View. If you save and go into View, the Hero Block will appear in all its heroic glory.

Hero Blocks also come with a little bobbing arrow at the bottom of the Block that cues readers there is more content below. The arrow will be black if your Section background color is set to None (default) or Default Light (white.) It will turn white if your section background color is set to Default Dark (black.) (Note that you won’t see the background color itself because it will be covered by your hero.)

Finally, you can place a hero block in any type of section, regardless of the Section width or whether that Section has “Enable Hero Row” checked. It just won’t behave quite the same. Feel free to experiment with Hero Blocks in different configurations.

Carousel

Carousels allow you to cycle through a series of images or videos.

Its configuration is much like an Image Block, except you choose several images (or videos) in a single Block. Click Add Media to add assets. The Media Library will appear. You can either upload to the Media Library, or look for media you have already uploaded. By default, it shows you images, but if you want videos, select Video in the tab at the top. Select the media you want by clicking on the boxes below the media. The media will appear in the order that you select them. You’ll see the Block keeping track of how many assets you’ve selected in the bottom left corner. Once you have selected all your media, click Insert Selected. Unfortunately, you cannot reorder media, so if you aren’t satisfied with the media order, you will need to remove your media, and then add them back in the proper order. 

Note that in Layout view, you can’t cycle through the media, and sometimes the caption information doesn’t render. To preview this, we will need to Save Layout and go to View.

Recall from the Media Library page that these captions are coming from the Modal Caption field associated with the image in the Media Library. If you want caption information for your media but did not enter it when you uploaded your media, you can go back into the Media Library and fill that in. Open up your asset in the Media Library, and you’ll find the WYSIWYG editor that will supply the caption with the asset.

Image Grid

An Image Grid’s configuration is very similar to a Carousel Block, as you need to select multiple images. But in this case, you also have a WYSIWYG editor. However, you won’t use the WYSIWYG unless you want to get a little bit more advanced and use CSS to style your grid. CSS is covered on the Advanced Styling page.

 

To add images, click Add Media. Just like with a Carousel Block, you will select images from the Media Library by ticking the box below the desired image. Select them in the order you wish for them to appear. Click Insert Selected.

 

Make sure the View Mode is set to Grid.

 

At first, this will not look like a grid. To get the full grid effect, you will need to add a style to the Block. Click the pencil icon in the upper right corner, and select Style settings. This will open a grey side bar on the right. Open the dropdown menu and select Component Column Count. You can have up to 5 columns. Click Add Styles when you have selected the number of columns. Now we have our Image grid. The handy thing about Ziggurat is that column count will automatically reformat for smaller screens. The narrower your viewport becomes, the less columns you get. 

 

Image Grid also gives all the images in it a Modal style. (You’ll need to save to preview this feature.) Having a Modal style means that if you click on any image, then a modal box will appear, showing the image and a caption. Remember, the captions are getting pulled from the Modal Caption field associated with the image in the Media Library. This is covered on the Media Library page.

 

One final thing about Image Grids. Recall that you can also use CSS to style your grid. You would use CSS instead if you wanted more granular control over how the grid displays. That is covered on the Advanced Styling page.

Audio

To add an audio file, click Add Media to bring up the Media Library. You an either upload your audio file if its not already in the Media Library with the Choose Files button, or select an already uploaded file from the Media Library from the bank of files below. Select a file by ticking the box below your desired audio file. Note that you can preview the audio by clicking the play button. Click Insert Selected.

 

Below, you have an option to include a background image for our audio player. To add a background image, click Add Media under Background image. Select an image by clicking the box below it, and then click Insert Selected. That the image will become the player background.

 

An Audio Block looks a little funky in Layout view; save and go to view to see how it will actually display. 

 

In View you get a nice clean audio player. The title is coming from the Title field associated with the file in the Media Library. You also have the ability to change this player from white to black with a Block Style. This will be covered on the Block Styles page.

Video

You’ll want to be judicious about using Video Blocks, depending on your server’s capabilities for rendering video. Generally, we recommend hosting videos on third party sites like Vimeo or Youtube, in which case you’d be using a Basic Block for video. That will be covered elsewhere. But if you have a small video, or don’t want to host your video on a third party site, then you will use a Video Block.

 

Configuring a Video Block is exactly like an Image Block, except you’re dealing with videos from the Media Library. If you haven’t uploaded your video to the Media Library, you can with the Choose Files button. If you have uploaded the file already, then select your video from the bank of videos below by ticking the box below it. Click Insert Selected.

 

Finally, choose your View Mode from this dropdown menu. Full will include player controls, and Simple will remove the controls and autoplay and auto loop the video. (Note that mobile devices generally do not allow video autoplay.)

 

Like an Audio Block, you won’t be able to see the video player controls properly unless you are in View. And just like the audio controls, you can change them from black to white in the style settings, which is covered on the Block Styles page.

Video Embeds in a Basic Block

Here, we won’t be looking at a new type of Block, but rather a different use for a Basic Block, which we covered above. To embed a video, you will need two things. First you will need an embed code from the server that is hosting your video (i.e. Vimeo or Youtube). Second, you will need a place to put that code in Ziggurat. That will be the WYSIWYG editor in a Basic Block.

 

Let’s grab that embed code. For Vimeo embeds, go to you video’s Vimeo page. Click the grey Share button with the little paper plane icon, below your video, or the little paper plane icon on the video itself. (If you are accessing your video when logged in and are on the video’s manage page, click the Embed button at the top right of your browser.) This should bring up a pop-up window that includes a chunk of code under the title Embed. You will want to click Show Options. This allows us to choose if we want the video to be fixed or responsive. The majority of the time, you will want your video to be responsive, so that it grows dynamically with the block size. You also have these Special Stuff options to autoplay or loop this video, or show additional text. Select or deselect as applicable. Copy the code in the Embed box. (If you are logged in and accessing this video from the Manage Videos page, this pop up will look a little different. You can choose between Responsive and Fixed, but you can’t choose to autoplay or loop the video. You can append the code manually, or you can remove /manage/videos from the URL and get to the video’s outward-facing page to see the options described prior.)

 

Now you have our embed code, you are ready to place it in a Block. On your Ziggurat page in Layout view, make a Basic Block, give it a title, and uncheck display title. Now comes the new part. At the bottom of the WYSIWYG, under Text Format, open the dropdown menu and select Full HTML. Now click <> Source. This will allow you to paste HTML source code into Ziggurat, which is what your embed code is. The WYSIWYG should be greyed out now. Paste that embed code. It should appear in a monospace font; if it doesn’t, then you aren’t in <>Source.

 

Most importantly of all, click <>Source again to save the code. (If you don’t and click Add Block while still in <>Source, then you will end up with a blank Block.) Now your video will appear in the WYSIWYG. Click Add Block.

 

This process would be the same if you are embedding a video from Youtube. Find the Share button on the video’s Youtube page, click Embed, copy that code, and then place it into a Basic Block as previously described. We recommend using Vimeo because (with a paid account) you have more control over how your video appears when you embed it.