Block Styles

In addition to Configuration options, every Block has Style options. These can be found by clicking on the pencil icon in the upper right corner of a Block, and selecting Style Settings from the dropdown menu. This will reveal a dark grey menu on the right. Style options will vary depending on the type of Block. To add a new Style, select the Style you want from the dropdown menu under Add a Style and click Add Styles. All Styles options—except Component Custom Class—are also dropdown menus.

You may apply multiple Style options to any block, and return to the Style Settings menu at any time to add more styles or to edit or delete styles you have applied. Opening the Style Settings menu will reveal any existing Styles that a Block has under the heading Applied Styles. To edit an applied Style, click the Edit link below the name of the Style you wish to edit. To delete an applied Style, click the Delete link below the name of the Style you wish to delete. This will reveal a warning message, making sure you really want to delete this Style. Click Confirm to finish deleting the Style.

All Blocks

Component Background Color

Choose a background color for your Block. (Differing from the Section color settings.) For example, you can choose the Section background color to be None, and use this Style to make a Basic Block with black text have a white background. The dropdown menu options are the same as the color options for your Sections: None (default), Default Light, Default Dark, Primary, and Colors 1–10.

Component Spacing

Set padding around a Block, with five different options: None, Small, Normal, Large, and Extra Large. (Normal is the default amount of padding on any Block.) These values will scale to fit mobile views. However, spacing will always be applied to all four sides of the Block. If you want to target exactly which sides of your Block get padding, or to add margins, you will need to use Bootstrap code with the Component Custom Class style. (Not Component Spacing.) This is covered on the Intermediate Styles page.

Component Alignment

Choose to align your Block either right, left, or center within its Section column. Note that this function will change the formatting of your Block somewhat. Instead of the block bounding box being the width of the column, it will shrink to the size of the content within your Block. This can change where the pencil icon appears, and may also cause the Add Block link to move above the Block.

Also note that Align Content Center is still under development, and currently does not have an effect. To align a block to the center of its Section column, instead use the style Component Custom Class, and type text-align-center into the open text field. (This will work for non-text as well.)

Component Animation

Apply an animation to your block. Choose from the options in the dropdown menu: No Animation (default), Scroll Fade In, Fade In, Fade In Left, Fade In Right, Fade In Up, Slide In Left, Slide In Right, Slide In Up, Zoom In, Zoom In Left, Zoom In Right, Zoom In Up. All animations with the exception of Scroll Fade In will only happen once per page load.

Component Column Count (except hero, image, and header)

Choose between one (default) and five columns of text. The text will autoflow to create columns of equal length. (This would not be the case if you built columns at the Section level.) Like columns in Sections, these columns will automatically restack into a single column when in mobile view.

Component Custom Class

Apply Bootstrap code or a CSS custom class to a Block. Unlike other styles, this is not a dropdown menu, but a field that allows you to enter code. Bootstrap is covered on the Intermediate Styles page. This Style is frequently used to apply Bootstrap to a Block for more granular control of padding and margins. Bootstrap also allows you to dictate different padding and margin values for different viewport sizes. 

You can also use this field to add your own classes to a Block, which you can then target with custom CSS on your page. This is covered on the Advanced Styles page.

Finally, as mentioned under Component Alignment, Component Custom Class is the best way to center a Block if it is not spanning the width of the Section column. This can occur when an image in an image block is a small file size or a strong vertical. (In that case, the image will align left.) To center a block, add a Custom Class, and then type text-align-center into the open text field. (Despite the class name, this will work for non-text, like an image.)

Audio & Video Blocks

Component Media Player Theme

Control whether the text and controls of the Media Player display in black (Light Player Theme, which is the default) or white (Dark Player Theme).

Basic Blocks

Component Background Attach

This controls how Background Media appears within a Basic Block. (You will have to have added Background Media from the Media Library in the Configure window for this to work.) You have two options. Contain Background will shrink the image or video so it will appear in its entirety in the Block. Cover Background will auto crop and auto scale the image or video to fill the background of the Block.
 
 

Image Blocks

Component Modal

When you turn on Modal view on an image, your Image Block becomes clickable, revealing a pop-up window that contains both your image, and any modal text you have entered. Modal text is entered into the WYSIWYG editor under your image asset in the Media Library. 

Component Zoom

Turn on Zoom, and your image will zoom in on mouseover.