| Panel |
|---|
|
ID&D KB How-to GuideWorking together to enhance teaching & learning. If you need additional assistance, please reach out to the ID&D team. |
You may have previously created content pages by cutting and pasting text, adding some images and linking to a video. Using the DesignPLUS tools, you can create more engaging and visually interesting pages for your students.
Suppose you have a page that looks something like this:
Image Removed
And you want it to look something like this:
Image Removed
| Anchor |
|---|
List | List | In this article, we will discuss how to perform the following types of content editing that will produce a page like that shown on the right. These steps include:
Image Added 
Image Added The video below provides an overview of many of the editing techniques described in this article. This tutorial video demonstrates the different steps taken to manage existing content and organize a previously constructed page.
| Iframe |
|---|
| src | https://play.vidyard.com/C3dLtzqNSuqnCUU6fhv27d.html |
|---|
| width | 640 |
|---|
| title | DesignPLUS Sidebar: Styling Existing Content |
|---|
| class | vidyard_iframe |
|---|
| height | 360 |
|---|
|
You can click on the images in this article to see them larger and with more detail. |
| Anchor |
|---|
Banner | BannerIn this article, we will discuss how to perform the following types of content editing that will produce a page like that shown on the right. Expand Learn more under the edit action to view step-by-step instructions.
Adding a Banner Title
A Banner Title at the top of a page helps the audience know the purpose of the page.
| Expand |
|---|
|
Open the page you are modifying in Edit mode, and open the DesignPLUS sidebar:
Place the cursor at the top of the page, where you want the banner title inserted.
Make sure the "Add New Elements" tab is opened in the Sidebar
Select the Banner Title tool from the "Getting Started" category (or search for "Banner title")
|
Image Removed Image Added
A Banner Title template will be automatically added to the Rich Content Editor space on your page.
|
Image Removed  Image AddedThe Sidebar will open the "Edit Current Element" (target tab). Enter the following in the Banner Title Content area:
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.
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.
Enter a title for your banner
(Optional) Add a Banner subtitle below the title. This will add a new element box below the Banner title.
(Optional) Enter a brief description or instructions for this page. This will add a new element box below the Banner Title or Subtitle.
|
Image Removed Image AddedThe Information will be placed into the Banner Title element.
|
Image Removed| Anchor |
|---|
ContentBlock | ContentBlock |  Image AddedCall attention to the Banner Title by selecting a style from the Style panel:
Open the Style panel.
Hover of the options available.
Make a selection.
|
Image RemovedBack to List
 Image Added
|
Creating Content Blocks
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.
| Expand |
|---|
|
Evaluate your page and determine which pieces of information belong together.
|
Image Removed Image Added
Using your mouse, highlight the content that will be part of a single block.
|
Image Removed Image Added
Select the Content Block tool from the Getting Started category (or search for it) in the Sidebar and select it.
|
Image Removed Image AddedThe tool will apply the Content Block format to the content you have selected, created sections in your page will be labeled "Content Block".
|
Image Removed| Anchor |
|---|
Headings | Headings Image AddedClean up any extra spaces, place your cursor in the content block that has extra spaces, and click the "ghost button" in the sidebar.
|
Image Removed
Image RemovedBack to List
 Image Added Image Added
|
Formatting and Styling Headings
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.
| Expand |
|---|
|
Make sure that you are in the "Edit Current Element"
|
area (target tab) and have selected the "Text" tool.
|
Image Removed Image AddedPlace your cursor in the line with the heading.
|
Image Removed Image AddedSelect the H3 heading size (you want these to be smaller than your banner heading which is an H2).
|
Image Removed Image AddedYou can add an icon to the heading by:
Place your cursor before the first character of the title
Select the Icon Picker from the text tool (below the heading size selections)
Select a category of icons you are interested in
Select an Icon you want to use
Close the Icon Picker
|
Image Removed Image AddedThe icon will be added to the heading line
|
Image RemovedBack to List
| Anchor |
|---|
Images | Images |  Image AddedYou can also apply a style to the heading, to make it stand out:
Place your cursor in the heading line
Open the Style Panel in the text tool
Select the style you want to use
|
Image Removed Image Added
|
Positioning Images
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.
| Expand |
|---|
|
Select the image in the content block you want to display in a different position.
|
Image Removed Image AddedIn 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:
You can change the height or width of the image by entering a specific pixel size. This will change the image proportionally.
If you select "Fixed Width", the image will always be displayed at the same size
You can select "Fill Container Width", which means the image will change based on the window size of the device it is displayed on
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.
|
Image Removed Image AddedYou can determine how the image will be aligned with the text within the content block using the alignment icons.
 Image Added
|
Image Removed 
Image RemovedBack to List
| Anchor |
|---|
Videos | Videos | Formatting  Image AddedYou can also select a border display style from the "Border Options" provided.
|
Image Removed Image Added
|
Formatting Embedded Videos
Similar to images you have the ability to format the size and display of an embedded video.
| Expand |
|---|
|
Place your cursor in the element where the video is. The "Embed" tool will appear in the sidebar.
|
Image Removed Image AddedOpen the Style panel to edit the video display. You can adjust the size and behavior of how the video will be displayed:
The embedded size of the video can be adjusted by changing the height or width of the image. This will change proportionally.
You can select "Scale Proportionally" so that the image will change according to the window size of the device it is being viewed on
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.
|
Image RemovedBack to List
| Anchor |
|---|
Summary | Summary Image AddedIf the video is in a content block with text, you can align its display with the text by using the alignment icons.
|
Image Removed
