Page Comparison

ID&D KB How-to Guide

Working together to enhance teaching & learning. If you need additional assistance, please reach out to the ID&D team.

Tip! You can click on the images in this article to see them larger and with more detail.

A Banner Title at the top of a page helps the audience know the purpose of the page.

1. Open the page you are modifying in Edit mode, and open the DesignPLUS sidebar:
   

   1. Place the cursor at the top of the page, where you want the banner title inserted.
      

   2. Make sure the "Add New Elements" tab is opened in the Sidebar
      

   3. Select the Banner Title tool from the "Getting Started" category (or search for "Banner title")

   

2. A Banner Title template will be automatically added to the Rich Content Editor space on your page.
   

   

3. The Sidebar will open the "Edit Current Element" (target tab).  Enter the following in the Banner Title Content area:
   

   1. The heading level for the Banner Title defaults to heading H2. It is recommended you do not change this as it will impact screen readers.
      

   2. The Name## field appears in the banner header which is referred to as the Prefix. There are 2 parts to the prefix.. This can be used to identify the Module or dates for the page. Enter a prefix identifier for the page, such as “Module” in Prefix1 and the module # in Prefix2.
      

   3. Enter a title for your banner
      

   4. (Optional) Add a Banner subtitle below the title. This will add a new element box below the Banner title.
      

   5. (Optional) Enter a brief description or instructions for this page. This will add a new element box below the Banner Title or Subtitle.
      

   

4. The Information will be placed into the Banner Title element.

   

5. Call attention to the Banner Title by selecting a style from the Style panel:
   

   1. Open the Style panel.
      

   2. Hover of the options available.
      

   3. Make a selection.
      

   

Content Blocks is a feature that allows you to group portions of the content into "blocks" so that you can move them together without having to cut and paste or re-enter data. Content blocks do not need to contain only text. In fact, they can contain text, images or interactive content like media.

1. Evaluate your page and determine which pieces of information belong together.  

   

   
   

2. Using your mouse, highlight the content that will be part of a single block.
   

   

   
   

3. Select the Content Block tool from the Getting Started category (or search for it) in the Sidebar and select it.
   

   

4. The tool will apply the Content Block format to the content you have selected, created sections in your page will be labeled "Content Block".
   

   

5. Clean up any extra spaces, place your cursor in the content block that has extra spaces, and click the "ghost button" in the sidebar.
   

   

   

   
   

After you have identified all of your content blocks, you can create visual attention to the different sections by applying styles to the article sub-headings within the content blocks.

1. Make sure that you are in the "Edit Current Element" area (target tab) and have selected the "Text" tool.
   

   

2. Place your cursor in the line with the heading.
   

   

3. Select the H3 heading size (you want these to be smaller than your banner heading which is an H2).
   

   

4. You can add an icon to the heading by: 
   

   1. Place your cursor before the first character of the title
      

   2. Select the Icon Picker from the text tool (below the heading size selections)
      

   3. Select a category of icons you are interested in
      

   4. Select an Icon you want to use
      

   5. Close the Icon Picker
      

   

5. The icon will be added to the heading line

   

6. You can also apply a style to the heading, to make it stand out:
   

   1. Place your cursor in the heading line
      

   2. Open the Style Panel in the text tool
      

   3. Select the style you want to use
      

   

Your page may have included an image that you included in one of the content blocks you created. DesignPLUS allows you to position the images in relation to the text within that content block, as well as modify the display of the image.

1. Select the image in the content block you want to display in a different position.
   

   

2. In the Edit tab (target) of the Sidebar, the Image tool will be selected. Open the Style panel. You can adjust the size of your image in a number of ways:
   

   1. You can change the height or width of the image by entering a specific pixel size. This will change the image proportionally.
      

   2. If you select "Fixed Width", the image will always be displayed at the same size
      

   3. You can select "Fill Container Width", which means the image will change based on the window size of the device it is displayed on
      

   4. You can select "Max Width Fill" when you have reset the size, and the image will not be displayed any larger than the size you have selected, even if the window is larger.
      

   

3. You can determine how the image will be aligned with the text within the content block using the alignment icons.
   

   

    

   

4. You can also select a border display style from the "Border Options" provided.
   

   

Similar to images you have the ability to format the size and display of an embedded video.

1. Place your cursor in the element where the video is. The "Embed" tool will appear in the sidebar.
   

   

2. Open the Style panel to edit the video display. You can adjust the size and behavior of how the video will be displayed:
   

   1. The embedded size of the video can be adjusted by changing the height or width of the image. This will change proportionally.
      

   2. You can select "Scale Proportionally" so that the image will change according to the window size of the device it is being viewed on
      

   3. You can select "Fill Width" to expand the display to the width of the window. This is not recommended to avoid distortion of the video.
      

   

3. If the video is in a content block with text, you can align its display with the text by using the alignment icons.