Creating Visually Appealing Pages
In some cases, you might want to create a whole different look for a specific page, adding some visually appealing design or color. In this example, we will start with a fairly plain layout such as seen in the image below.
In this article we will give you step-by-step instructions on the following:
- Editing with the Style Editor
- Changing/ Adding Background Colors
- Changing Text Colors
- Adding Borders
- Adjusting Margins and Alignment
- Summary of Steps
Editing with the Style Editor
NOTE!
When using the Advanced Editing Tools, it is very important to ensure you are editing the correct element!
First open your page in Edit mode and open the Sidebar.
- Select Advanced tools using icon at the top of the Sidebar
- Select the Style Editor
- Select Advanced tools using icon at the top of the Sidebar
Place your cursor into the element on your page that you want to edit.
- At the top of the Style Editor a list of elements in the content area will appear.
- Hover your mouse over each element to determine which element you will be editing
- Select the element.
- At the top of the Style Editor a list of elements in the content area will appear.
Tip!
You can click on the images in this article to see them larger and with more detail.
Changing/ Adding Background Colors
After you have selected your element following the steps above, you can change the color of the background for the page element:
Scroll down and open the Colors panel in the Style Editor.
Select the Background Color item from the bar at the top of the Colors panel.
The current background color of the element will display below the item
Open the Basic Colors panel if it is not open
Select a new color from the Basic Colors, or
Open the Color picker and select a color you want.
Repeat this process for any items you want to add background color to. In this example using the page pictured above, we changed the background color of the page heading, the background of the content block, and added a background color to the text in the first content block.
- Item A
- Item B
- Item C
Step-by-Step
Enter leading information.
Title of Action
Leading Info.
- Step 1 instructions.
- Step 2 instructions.
Title of action (multi-part)
After you have opened the new version of the Cidi Design Tools, you can now select it as your editor.
- Step 1 Instructions
- Part A instructions.
- Part B instructions.
- Part A instructions.
- Step 2 Instructions
- Part A instructions
- Part B instructions.
- Part A instructions
You are able to switch between these settings at any time, simply repeat steps 1 and 2 above.