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.
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 |
---|
|
Tip |
---|
Tip! You can click on the images in this article to see them larger and with more detail. |
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. Expand Learn more under the edit action to view step-by-step instructions.
Adding a Banner Title
Expand |
---|
title | Learn more...A Banner Title at the top of a page helps the audience know the purpose of the page.
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 Modified
Expand |
---|
title | Click to continue Step-by-Step instructions... |
---|
|
A Banner Title template will be automatically added to the Rich Content Editor space on your page.
Image ModifiedThe 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 ModifiedThe Information will be placed into the Banner Title element.
Image ModifiedCall 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 Modified |
Creating Content Blocks
Expand |
---|
title | Learn more...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.
Evaluate your page and determine which pieces of information belong together.
Image Modified
Expand |
---|
title | Click to continue Step-by-Step instrucitons... |
---|
|
Using your mouse, highlight the content that will be part of a single block.
Image ModifiedSelect the Content Block tool from the Getting Started category (or search for it) in the Sidebar and select it.
Image ModifiedThe tool will apply the Content Block format to the content you have selected, created sections in your page will be labeled "Content Block".
Image ModifiedClean up any extra spaces, place your cursor in the content block that has extra spaces, and click the "ghost button" in the sidebar.
Image Modified Image Modified
|
Formatting and Styling Headings
Expand |
titleLearn more... | 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.
Make sure that you are in the "Edit Current Element" area (target tab) and have selected the "Text" tool.
Image Modified
Expand |
---|
title | Click to continue Step-by-Step instructions... |
---|
|
Place your cursor in the line with the heading.
Image ModifiedSelect the H3 heading size (you want these to be smaller than your banner heading which is an H2).
Image ModifiedYou 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 ModifiedThe icon will be added to the heading line
Image ModifiedYou 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 Modified |
Positioning Images
Expand |
titleLearn more... | 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.
Select the image in the content block you want to display in a different position.
Image Modified
Expand |
---|
title | Click to continue Step-by-Step instructions... |
---|
|
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:
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 ModifiedYou can determine how the image will be aligned with the text within the content block using the alignment icons.
Image Modified Image ModifiedYou can also select a border display style from the "Border Options" provided.
Image Modified |
Formatting Embedded Videos
Expand |
---|
title | Learn more...Similar to images, you have the ability to format the size and display of an embedded video.
Place your cursor in the element where the video is. The "Embed" tool will appear in the sidebar.
Image Modified
Expand |
---|
title | Click to continue Step-by-Step instructions... |
---|
|
Open 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 ModifiedIf the video is in a content block with text, you can align its display with the text by using the alignment icons.
Image Modified |
Related articles
Child pages (Children Display) |
---|
depth | 2 |
page Page Tree |
---|
root | DesignPLUS Tools for MyClasses |
---|
startDepth | 1 |
---|
|
Visit the DesignPLUS Training Series Tutorials for more videos. For more step-by-step guides, visit the DesignPLUS User Guide.