Responsive Visibility Block

The responsive visibility bundle will give you the ability to control a page's content based on the device your visitors are using to view the page. When placing blocks on a page, the best region to place them in for desktop displays and mobile displays is not always the same. For instance, having a lead generation form at the top of the sidebar is great for a desktop display, but ends up at the bottom of the page on a mobile display.

A Responsive Visibility Block references existing blocks on your site, but is configured for each display. You may need multiple Responsive Visibility Blocks, each referencing the same existing block, to achieve your desired display. For instance, to display a text block in the sidebar on Desktop and Tablet, but at the top of the main content on Mobile, it will require two Responsive Visibility Blocks. You must create the blocks you want to reference first before creating the different Responsive Visibility Blocks.

Note: Request the Responsive Visibility Block bundle before you start the tutorial. Since the Responsive Visibility Block bundle is part of the Request bundles group, when you request this bundle, our team will work with you to ensure the your site will be optimized by the features of the bundle.

1

Create Responsive Visibility Block

  1. Navigate to the page you'd like to update.
  2. Click the Edit Layout tab.
  3. In the region you would like to customize, select Add new block and from the drop-down, select Responsive Visibility from the list of options.
2

Configure the First Responsive Visibility Block

  1. Responsive Visibility Label: a name used to uniquely identify the block.
  2. Responsive Visibility Title (optional): this displays above the Responsive Visibility block when placed on a page.
  3. Block: fill in the block field by entering the title of the block that you wish to create custom visibilty for. Add other blocks as desired.
  4. Visibility Settings: select Visible or Hidden for each display option. (Mobile, Tablet and Desktop)

    Note: Typically you may configure Desktop and Tablet views to be visible and mobile view to be hidden; then create the opposite configuration in your second visibility block.

  5. Click Create block.
  6. Click Save. 

3

Configure the Second Responsive Visibility Block

In the second Responsive Visibility block, create the opposite configuration from the first block (created in Step 2).

  1. Click the 'Edit Layout' tab
  2. In the region you would like to customize with the second Responsive Visibilty block, select Add a new block from the dropdown and select Responsive Visibilty from the list of options.Label: a name used to uniquely identify the block.
  3. Title (optional): this displays above the Responsive Visibility block when placed on a page.
  4. Block: fill in the block field by entering the title of the block that you wish to create custom visibilty for. Add other blocks as desired.
  5. Visibility Settings: select Visible or Hidden for each display option. (Mobile, Tablet and Desktop)
  6. Click 'Save'.

Responsive Visibility Video Tutorial