Juniper Websites: How do I manage cards and change how a card block looks?

Juniper Websites

Overview

This article explains how to manage the cards in a card block, change how the block looks, and move it to a different place on your page.

To add a card block to a page for the first time, see Juniper Websites: How do I add a card block to a page?

Open a card block

Follow these steps to open a card block you have already added:

  1. Open the webpage you want to edit.
  2. Double-click the card block in the content area to open Cards Block.

Manage your cards

Expand a section to find out more:

  • To edit a card:
    1. Open Cards Block for your block.

    2. From the Cards tab, select the pencil icon () next to the card you want to change:

    3. Update the card details.
    4. Select OK.
    5. Select OK to close Cards Block.
  • To delete a card:
    1. Open Cards Block for your block.

    2. From the Cards tab, select the bin icon () next to the card you want to remove:

    3. Select OK to close Cards Block.
  • To change the order of your cards:
    1. Open Cards Block for your block.

    2. From the Cards tab, drag the handle to the left of a card up or down to move it:

    3. Select OK to close Cards Block.

  • To change the sort order of your cards by title:

    1. Open Cards Block for your block.

    2. From the Cards tab, select a Sort Order:

      1. Select Title A-Z to sort from A to Z.
      2. Select Title Z-A to sort from Z to A.
      3. Select Default to return to the order you added the cards.
    3. Select OK to close Cards Block.

    New cards are added to the end of the list. If you add, move, or rename a card after sorting, the Sort Order returns to Default.

Change how your cards look

These settings apply to all the cards in the block. Expand a section to find out more:

  • To add a title above your cards block:
    1. Open Cards Block for your block.
    2. Select the General tab.

    3. Check Include Title, then enter a title for the block:

  • To choose the shape, corners, or angle of your cards block:
    1. Open Cards Block for your block.
    2. Select the Style tab:

    3. Choose an option for each group of settings:

      Use the table below to help you:

      Group Options
      Shape Square, Landscape, or Portrait
      Corners Square or Rounded
      Angle Straight or Slanted

       

  • To choose a layout for your cards block: 
    1. Open Cards Block for your block.
    2. Select the Layout tab.

    3. Select a layout:

      Use the table below to help you.

      Layout What it does
      1 Across, 2 Across, 3 Across, or 4 Across Shows your cards in a grid with that number of cards in each row.
      Single Swiper Shows one card at a time. Visitors use the arrows to move between cards.
      Multi-Swiper (2 Across), Multi-Swiper (3 Across), or Multi-Swiper (4 Across) Shows that number of cards at a time. Visitors use the arrows to move between cards.
  • To align a single card:
    1. Select the Layout tab.
    2. Select the cog icon () on the 1 Across option.
    3. From Align, select Left, Center, or Right.
  • To set how long each card appears:
    1. Select the Layout tab.
    2. Select the cog icon () on a Single Swiper or Multi-Swiper option.
    3. Enter the Slide Duration in seconds.
    4. From Transition, select Fade, Fade Out, Scroll Horizontal, or None.

Save your changes

  1. In the Cards Block window, select OK.
  2. Select Save.

Move a card block

Follow these steps to move a card block to a different place on your page:

  1. Open the webpage you want to move the card block on.
  2. Drag the card block to its new position in the content area.
  3. Select Save.

Tips and best practices

  1. Choose a style that suits every card in the block (the shape, corners, and angle apply to all cards).
  2. Cards in a 1 Across layout don't fill the full width of the page. Use Align to place the card on the left, in the centre, or on the right.
  3. Check how your cards look on different devices.

Next steps

To check how your cards look on different devices, see Juniper Websites: How do I see what my website looks like on different devices?

Related information

Updated