Before using the hover box display format, you need to create a view and place the block.

To create the view

  1. Go to View>Add New View
  2. Give your view a name
  3. In View settings, choose the Content type you're working with (Hover Box is designed for News content).
  4. Check 'Create a block' (we'll adjust the settings later)
  5. Click Save and Edit
  6. Under the Format section, click the Settings option on the Format row
    1. Uncheck the box for 'Add views row classes' and hit Apply
  7. Also under the Format section, on the 'Show' row, Click Fields to adjust the display
    1. Change the option to Content and click Apply
    2. Choose 'Hvrbox card' from the View mode dropdown and click Apply.
  8. On the right side of the screen, expand the Advanced section.
    1. Next to CSS class click None
    2. Set the CSS class name(s) value to be 'hvrbox-card fixed-width ' (without quotes)
    3. Additionally, add one of the two classes below
      1. For a two-column display add the class 'hvrbox-col-2' (without quotes)
      2. For a three column display add the class 'hvrbox-col-3' (without quotes)
  9. Then click 'Apply this display'
  10. Adjust your remaining block settings including filter criteria as needed and click Save 

To create additional views

You can create additional displays in your view that have different criteria or different layouts (2 vs 3 columns).  To do this, follow these steps on the view created above.

  1. There are two drop down lists in the top right of the view page.  The second one will default to Duplicate <Initial display name>
  2. Click the Duplicate option to create a copy of the display created above.
  3. Click the name next to the Display name to change the name of this display
  4. Make any changes to the Filter Criteria or other fields from the above settings some settings will have the option to change the settings for All Displays or just This block.  Be sure to choose This Block if the settings are unique for this particular display.
  5. Follow the appropriate steps below to add the new block to a page.

Adding the Block to the page

Add as a Direct Block

To add the block directly to a specific page, follow these directions.

  1. On the Admin toolbar, choose Structure>Block Layout
  2. Find the region where you want to embed the block (usually 'Main content') and click Place block
  3. Find the block you created above.  The filter tool can be helpful.  Then click Place block
  4. Uncheck Display title
  5. Click on the Pages tab, and add the path to the page where you want your block displayed.  To place it only on the front page enter '<front>'.  Leave blank to display the block on all pages of your website.
  6. Click Save block

Add as a Drupal Paragraph

If you are likely to use this block multiple times, you can follow the directions below to make it available in the Block Reference paragraph.

  1. On the Admin toolbar, choose Structure>Block Layout
  2. Scroll to the region Hidden region for referenced blocks and click Place block
  3. Find the block you created above.  The filter tool can be helpful.  Then click Place block
  4. Uncheck Display title
  5. Click Save block