Blocks panel

The Blocks panel is a highly flexible tool that can be used in many different ways. You can create a banner to promote a singular event or showcase evergreen aspects of your cinema that make it special, such as membership drives, ongoing film series, private rentals, complementary content such as seasonal menus and your cinema history, and additional imagery and designs that help your brand shine. For ideas and visual references of how you can use the Blocks panel, see these examples.

This panel can be used multiple times on the same page and each Blocks panel can display anywhere between 1-4 blocks per panel. A block within a panel can include a linkable call-to-action button or the entire block can be linkable. The background for a block can be an image, moving video or color. With all these options and additional customization settings, the Blocks panel provides a lot of flexibility for creatively presenting everything that makes your cinema special.

After you add a Blocks panel, you will need to add at least 1 block by clicking the "Add Block" button. You can then add up to 3 more blocks for a total of 4 blocks per Blocks panel by clicking the "Add Block" button again or clicking the "Add Row" plus "+" button in the top-right corner of any block. Blocks can be removed by clicking the minus "-" icon on the right of a block. Blocks can be collapsed by clicking the carrot icon on the left of a block. Blocks can also be rearranged by clicking and dragging the left side of a block up or down.

Panel Title: The large text that displays at the top of the panel above the blocks. (optional)

Panel Background Color: The background color of the header behind the Panel Title and Text above the blocks. (optional)

Panel Text Color: The body-style text that displays below the Panel Title and can help describe the content of the blocks below. (optional)

Block Widths: Full Width (no margin surrounding the blocks) or Contained (with margin).

Block Heights:

Text Alignment: The Center, Left, or Right alignment applies to all text in the panel, including the Panel title and the Title and Text within each individual block.

Vertical Content Alignment: The Middle, Top and Bottom alignment applies to all text in the panel, including the Panel title and the Title and Text within each individual block.

"Reverse Order on Mobile" checkbox: If you have two stacked Block panels, where the first panel includes a block with a background image and a block with a background color and the second panel includes an inverse order similar blocks, be sure to check this checkbox for the second panel so that the two blocks with the background image or the two blocks with the background color are not stacked one after the next when viewing on a mobile device.

Title: The large text that overlays the block. (optional)

Text: The body-style text below the title that overlays the block. (optional)

Background Type: The background for a block, which can be an Image (.png, .jpg or .gif), Video (YouTube link), Color or None.

Text Color: The color of the Title and Text that overlays the block.

Block Link:

Text Alignment: The alignment of the Title and Text on the block. Default (uses the panel setting), Center, Left, or Right.

Please refer to the Color section of our Create Accessible Content article, to ensure colors you use in your website meet minimum contrast ratio requirements between the background color and text on top of the background. The minimum contrast ratio for the WCAG 2.1 AA is 4.5:1. You can check the contrast ratio between two colors using the contrast checker tool, or read more about color contrast at the WebAIM website.

Here are some examples with accompanying visuals of how the Blocks panel can be used:

Narrow banner:

Large banner:

When hovering over with mouse:

When hovering over with mouse:

Same as above, but Block Widths: Contained