Page Menu

UMass Chan CMS Blog

Generic Block

Thursday, September 17, 2020

By: Leslie Rutter

A Generic Block is the most basic and versitile block. It allows for content to be positioned anywhere on your page (any drop block area) and can be re-used on as many pages as you wish. Blocks can be shared with other sites as well.

A generic block is comprised of 6 optional content properties:

optional title
optional sub title
optional image - can be aligned left, right, center
- if aligned left or right, text will wrap around the image
optional description (WYSIWYG area)
optional more link
- url and text
optional header image (displays at the top of the block)
- an ALT description can be added as well

If you wish the block to display in different ways, here are some examples by setting the style Classname on the Settings tab: examples of generic blocks, normal, with image overlay and with background colors applied

How to below:

Adding background colors to blocks

Edit the block
Click on the Settings tab
Copy and paste the appropriate text, from below
- add to the property field: “CSS class name(s)..”

Background colored box with colored headers
CSS class name to copy	With heading	Without heading
box box-bg blue
box box-bg blue dark
box box-bg gray
box box-bg gray dark

Overlay Text on top of Image

Create a new block: Generic Block
Click on the Content Tab
- [optional] Add a Title if you want one
- Select your image
- to set the alignment of your text over the image
  - set the property Image Alignment to: left, right or center
  - leaving set to none will pick up default of “left”
- [optional] add a Description
- [optional] add Link Text and Link
Click on the settings tab
- Copy and paste the appropriate text, from below, into the property “CSS class name(s)..”

Setting the text on the image overlay
CSS class name to copy	How the text appears
On the Settings Tab add to the propertyCSS class name(s): image-overlay bottom horiz‑txt‑exclude On the Content Tab set the property Image Alignment: left
On the Settings Tab add to the propertyCSS class name(s): image-overlay bottom horiz‑txt‑exclude On the Content Tab set the property Image Alignment: right
On the Settings Tab add to the propertyCSS class name(s): image-overlay top horiz‑txt‑exclude On the Content Tab set the property Image Alignment: left
On the Settings Tab add to the propertyCSS class name(s): image-overlay top horiz‑txt‑exclude On the Content Tab set the property Image Alignment: right