Skip to main content

Blocks panel

Max Friend
Updated

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.

 

Block Panel Settings

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:

  • Aspect Ratio:
    • If there is 1 block in the panel, the ratio of width to height will be 3:1 on desktop, or 9:4 on mobile
    • If there are 2 blocks in the panel, the ratio of width to height will be 4:3 on desktop, or 5:4 on mobile
    • If there are 3 blocks in the panel, the ratio of width to height will be 5:4 on desktop and mobile
    • If there are 4 blocks in the panel, the ratio of width to height will be 1:1 (square) on desktop and 5:4 on mobile
  • Content Height: The height of the blocks in the panel will all be as high as the highest Title and/or Text within a block

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.

 

Individual Block Settings

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:

  • None: The block includes no link.
  • CTA (call-to-action) Button: A button is included below the Title and Text which links to a different URL.
    • URL
    • "Open link in a New Tab?" checkbox
    • Button Text
    • Button Background Color
    • Button Border Color
    • Button Text Color
  • Whole Block: The entire block will be overlaid with a color when hovered and will link to a different URL.
    • URL
    • "Open link in a New Tab?" checkbox
    • Hover Color

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 Entering 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.

 

See a range of examples here of how Block panels can be used.

 

Examples

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

  1. One-block banner to announce a single big initiative exciting news
  2. Side-by-side blocks to highlight special offerings of your cinema that make it special
  3. Three or four blocks across, to highlight ongoing initiatives, upcoming shows, or film series

1. Announce a single big event or initiative

Narrow banner:

  • Number of blocks: 1
  • Block link: CTA Button
  • Block width: Full Width
  • Panel block height: Content Height

Large banner:

  • Same as above, but Panel block height: Aspect Ratio

 

2. Highlight special offerings of your cinema that make it special

  • Number of blocks: 2
  • Block 1 Background Type: Image
  • Block 1 link: CTA Button
  • Block 2 Background Type: Image
  • Block 2 link: CTA Button
  • Block width: Full Width
  • Panel block height: Aspect Ratio

  • Number of blocks: 2
  • Block 1 Background Type: Image
  • Block width: Full Width
  • Panel block height: Aspect Ratio
  • Block 2 Background Type: Color
  • Block 2 link: CTA Button

Screenshot

  • Number of blocks: 2
  • Block 1 Background Type: Color
  • Block 1 link: CTA Button
  • Block 2 Background Type: Image
  • Block width: Full Width
  • Panel block height: Aspect Ratio

  • Two Blocks panels stacked

  • Be sure to check the “Reverse Order on Mobile” checkbox for the second Blocks panel to ensure that the two images are not following one another when browsing on mobile devices

 

3. Highlight ongoing initiatives, upcoming shows, or film series

  • Number of blocks: 3
  • Panel Title: Text is entered
  • Blocks 1-4 Background Type: Image
  • Blocks 1-4 Link: Whole Block
  • Block width: Full Width
  • Panel block height: Content Height
  • Panel text alignment: Left
  • Panel vertical content alignment: Top

  • Same as above, but Panel block height: Aspect Ratio
  • Panel text alignment: Center
  • Panel vertical content alignment: Middle.

Screenshot

  • Number of blocks: 4
  • Panel Title: Text is entered
  • Blocks 1-4 Background Type: Image
  • Blocks 1-4 Link: Whole Block
  • Block width: Full Width
  • Panel block height: Content Height
  • Panel text alignment: Center
  • Panel vertical content alignment: Middle.

  • Number of blocks: 4
  • Panel Title: Text is entered
  • Blocks 1-4 Background Type: Image
  • Blocks 1-4 Link: Whole Block
  • Block width: Full Width
  • Panel block height: Content Height
  • Panel text alignment: Left
  • Panel vertical content alignment: Top

When hovering over with mouse:

  • Number of blocks: 4
  • Panel Title: Text is entered
  • Blocks 1-4 Background Type: Image
  • Blocks 1-4 Link: Whole Block
  • Block width: Full Width
  • Panel block height: Aspect Ratio
  • Panel text alignment: Center
  • Panel vertical content alignment: Middle

When hovering over with mouse:

  • Same as above, but Block Widths: Contained

Screenshot

  • Two Blocks panels stacked with 3 blocks each
  • Blocks Panel 1: Panel Title: Text is entered
  • All Blocks: Background Type: Image
  • All Blocks: Link: Whole Block
  • Block width: Full Width
  • Panel block height: Aspect Ratio
  • Panel text alignment: Center
  • Panel vertical content alignment: Middle

Same as above, but Block Widths: Contained.

Screenshot

Comments

0 comments

Article is closed for comments.

Powered by Zendesk