Skip to main content

Add a rich text block

Prerequisites

Procedure

  1. Add a Rich text block to your page.
    1. On your page, select ADD CONTENT , and in the Content dialog box, select the Rich text block.
    2. Scroll down and in the Title box, give your block a meaningful name.
    3. Select SAVE. Applaud adds a text editor box to your page.
  2. Add content to the editor:
    • Add and format text, links, pictures, or videos to the editor.
    • Toggle between the Visual and HTML views so further configure your content.
    • Use the toolbar to format your text and add your media:
      FormatText.png Use the options to make your text bold (B), italic (I), or underlined (U).
      NumberedList.png To add a numbered list, select the numbered list icon.
      BulletedList.png To add a bulleted list, select the bulleted list icon.
      Justify.png To align your text either left, center or right, select the corresponding icon.
      HeadingLevels.png To quickly format a heading, select the style you want from the list.
      ClearFormat.png To remove any formatting from text quickly, select the clear format icon.
      textcolor.png To see the color-picker options in the HTML editor, select the text color icon. The first few colors are the active brand's colors. See our knowledge base article, Brands.
      Link.png AddLink.png
      		To add a link, select your text and select the link icon.
      Picture.png To add an image, select the picture icon.
      EmbedVideo.png EmbedVideoLink.png
      		To embed a video link, select the film icon and paste the link to the video you want to embed.
      UploadVideo.png To upload a video, select the camera icon and select the video file you want to add.
  3. Configure your block settings:
    1. On the Rich text block top-right, select the cog Cog.png.
    2. On the Content dialog box, configure your General content settings.
    3. Optionally, add a button that opens one of the pages in your tenant or an external URL.
      1. Under General content settings, next to Action buttons* select, Add_.PNG.
      2. In the Title box, type in the text that you want to appear on your button.
      3. Under the Type of action section, from the Opens in: list, select what and how you want the button to open.

        • Open page - Loads the Target list with pages from your Applaud tenant.

        • URL - You need to type in the full website address in the Target box.

        • Regular / Same tab - Takes the user away from the current page to the new page.

        • Modal - Keeps the user on the page but opens a dialog box with the new page contained in it.

        • New tab - Opens a new tab in the user's browser with the new external website.

      4. From the Target list, select a page from the list of available pages in your Applaud tenant or type the full URL address, for example, https://www.google.com.

      5. From the Icon list, select an icon for your button and from the Color picker, select a color for your button.

      6. From the Weight list, select how you want your button to appear:

        • Normal - The button appears with a colored rectangle background with black text.

        • Light - The button doesn't have a background, and the text is the color you selected.

    4. If you don't want a title on your block, clear the Show the title and header bar option.

      Caution

      Hiding the title and header bar also hides any action buttons you may have included.

    5. To configure how wide you want your block, from the Preferred width list, select an option:

      Note

      These options are affected by your Page layout options, which you configure in the Page settings dialog. See our knowledge base article, Configure your page settings.

      • Automatic - Spans the width of the column on the page depending on what page layout option you have selected.

      • Full-width - Spans the width of all columns but doesn't go beyond the margins on either side of the page unless you select the Edge-to-edge option.

      • Two-third - If you have a three-column page layout, this spans across two of the columns. If you have a two-column page layout set, this spans just beyond the first column, but further blocks won't appear above the advert in the second column, only below it.

      • Half-width - If you have the three-column page layout, this spans across a column and a half. If you have a two-column page layout, this spans one column.

    6. To set the Background color of your block, select the color of your choice. The color picker shows a list of preconfigured colors with 100% opacity or fully opaque.

      Tip

      You can select a pre-configured color nearest to the one you want and then tweak it to what you want using the sliders.

       

       

       

      ColorPicker.png

       

       

      1. Color palette

      A chart of preconfigured colors.

      2. Color gradient panel

      The color gradient panel shows a mixture of two linear color gradients, your chosen color, and black. The color you choose reflects in the color gradient panel instantly showing where your selected color appears on the panel. You can choose a lighter or darker version of the chosen color from the panel.

      3. Sample color

      Shows the color you've chosen, and that will be applied.

      4. Hue slider

      This slider has a linear gradient of colors. You can choose the main hue you want.

      5. Opacity slider

      Controls the transparency of the color.

      6. Color mode

      This switches between the color value modes:

      • HEX - Sets the color based on a Hexadecimal code value.

      • RGBA - Sets the color based on RBGA (red, green, blue, alpha) decimal values.

        RGBA.png

      • HSLA - Sets the color based on HSLA (hue, saturation, lightness, alpha) values.

        HSLA.png

    7. If you want to prevent this block from being displayed on specific devices from the Hide on list, select those conditions where you want to hide this block.

    8. Restrict or allow viewing further by adding custom filters to your block. You can base these filters on anything such as role type, department, or location. Select the Hide or show this block using filters option and set your Conditions.

      If you want to hide this block when the selected data meets every condition you add, add a condition under the Hide when ALL of the following conditions are met (and) section. Otherwise, if you want to hide the block when the selected data meets just one of several conditions, add your conditions under the Hide when ANY of the following conditions are met (or) section.

      1. Under the relevant section, select Add_.PNG.
      2. From the Property list, select the model's property.
      3. From the Criteria list, select the condition you want the property value to meet for the block to be hidden.
      4. In the Value box, enter the property's value you want the condition to meet for the block to be hidden.

        Tip

        • For lookup properties, you can select a lookup option entered when you added the property to the model.
        • For foreign key properties, you can select any values against the default label property of the linked model. However, if there is nothing to select, there might not be any values for the property.
    9. To let users who don't sign in to your Applaud tenant view this Rich text box, select the Allow anonymous option.

See more:

Reference:

Sections in this article