Configuring a content block


Use the content block to create templates and placeholders. For example, The search template type of content block allows browsing of categories. After you configure your content block, you can duplicate it, and then make changes to the duplicated content.

Optionally, perform the following configurations in any order:

  • To add multiple blocks, duplicate them, copy and paste them, or if there is enough space in the row, drag a content block beside another. 
  • To create a multi-column layout, duplicate content blocks in a row or add blocks from the palette.
  • To create varying width columns, resize the content blocks in a row. 
  • To link to URLs, application pages, catalog services, catalog bundles, or define an on-click action on the entire content block or on the media images or on buttons.
  • To create a watermark of a background image, select the custom size option of the display options and size the image. Then, position the image as desired.


 The following image shows some properties for a content block:

Some content block properties, such as block height and shadow, text alignment, heading, and weight, and media size and position


Before you begin

If you want to embed a search view as a link, make sure you have the relative URL of the search view. For more information, see Creating-search-views and Defining-navigation-through-links-in-pages.


To embed a video or a search view in a content block

  1. Perform one of the following steps:
    • Create a new page in Studio.
    • Select an existing studio page and from the Actions, select Edit.
  2. Click ComponentsComponents.png.
  3. Either double-click or drag and drop the Content Block onto the page canvas. 
  4. Select the content block.

    The Component Properties panel is displayed.

  5. Expand the Media section and from the Type list, select Video link.

    Studio video topic graphic.png

  6. From the Source list, select one of the following options from the list and enter the URL in the appropriate format:

    Source

    URL format

    Description

    Thumbnail

    YouTube

    For more information, refer to YouTube Help

    From the source.

    Cloudflare

    • https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe
    • https://iframe.videodelivery.net/<VIDEO_ID>

    For more information, refer to Cloudflare documentation

    Important:

    • The video link that you want to embed must have public access.
    • If the video is deleted from the source, the content block displays an error message stating that the video was not found.

    From the source.

    Hosted file

    The following formats are supported:
    MP4, WebM and Ogg

    Important:

    • We recommend using MP4 and WebM over the Ogg format. Ogg files might not be supported on iOS. 
    • The video link that you want to embed must have public access.
    • If the video is deleted from the source, the content block displays a blank video player screen.

    To add a thumbnail to the hosted video, click Attach file next to the Video poster image.

    • Supported files: jpg, jpeg, png, gif or svg
    • Maximum file size: 5.00 MB

    This option is supported only for hosted files.

  7. After entering the URL and configuring other component properties, such as Base properties or Border, perform one of the following actions:
    • Click Save to save the draft.
    • Click Save & Publish to publish the changes to your end users.


To embed a search view inside a content block

  1. Perform one of the following steps:
    • Create a new page in Studio.
    • Select an existing studio page and from the Actions, select Edit.
  2. Click ComponentsComponents.png.
  3. Either double-click or drag and drop the Content Block onto the page canvas. 
  4. Select the content block.
    The Component Properties panel is displayed.
  5. To embed the search view in a search bar within the content block, see To configure a search bar.

  6. To embed the search view in a button, expand the Button 1 section.
    1. In View, select an existing search view or create a new view.
    2. In label, provide a meaningful name for the button. 
      For example: Search HR portal
    3. In Link, select one of the following options:
      1. URL—To open the search view as a page in a new tab, provide the relative links of the search view.
      2. Application page—To open the search view as a page in a new tab, select the search view from the list of pages.
    4. Save the page.

      The following image is an example of linking a search view to a button in the content block:

      search view in a button.png

  7. (Optional) To embed the a search view as a link in a text block, provide the search view in [link text](url) format.
    The link opens in a new tab. 
  1. Click Save.

 

Tip: For faster searching, add an asterisk to the end of your partial query. Example: cert*