Page Comparison

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, Spacing and Alignment
• Summary of Steps
  
  

Anchor
StyleEditor StyleEditor

Editing with the Style Editor

1. First open your page in Edit mode and open the Sidebar.
   
   

   Section
   Column Column width 80% Select Advanced tools using icon at the top of the Sidebar Select the Style Editor

   
   

2. Place your cursor into the element on your page that you want to edit.
   
   

   Section
   Column Column width 80% 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.

   
   

Back to List

Anchor
Background Background

Changing/Adding Background Colors

1. After you have selected your element following the steps above, you can change the color of the background for the page element:
   
   

   Section
   Column Column width 80% 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 first icon) 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.

   
   

2. Repeat this process for any items you want to add background color to. For example, you can add a background color to the heading of the content block:
   
   

   Section
   Column Column width 70% Place your cursor in the heading element of the content block Select the heading element at the top of the Style Editor Select the Background Color item from the bar at the top of the Colors panel. Select a new color from the Basic Colors or open the Color picker and select a color you want.

   
   

In this example using the page pictured previously, we changed the background color of the page heading, the background of the heading for the content block, and added a background color to the text in the first content block.

Back to List

Anchor
TextColor TextColor

Changing Text Colors

As you can see in the image above, after changing the background color of the content block heading, the text does not contrast well and is difficult to read.

1. To change the color of text using the Style editor, first select the text you will be changing:
   
   

   Section
   Column Column width 80% Place your cursor in the field of the element you want to change (the content block header in this case) Select the appropriate element from the item list at the top of the Style editor Highlight the text you want to change

   
   

2. Then determine your color choice in the Style editor:
   
   

   Section
   Column Column width 80% Select the “Text Color” icon from the Colors panel (the second icon) Select the color from the Basic Color table or Color Picker.

   
   

Back to List

Adding Borders

1. Adding borders around a content block can draw attention to it. To add a border in the Style Editor:
   
   

   Section
   Column Column width 70% Place your cursor in the content block. Select the appropriate element from the item list at the top of the Style Editor – make sure it is for the entire block. Scroll down and open the “Border and Background” panel in the Style Editor (if it is not open)

   
   

2. Determine how you want a border to appear. Using Border Direction, select where a border will appear:
   
   

   Section
   Column Column width 80% All sides (for a border around the whole item), or Top (T), Bottom (B), Left (L) or Right (you can select any combination of these)

   
   

3. Customize your border using the following options:
   
   

   Section

   Column Column width 80% Determine the width of the border:  (Small (S), Medium (M), or Large (L), or set a specific size using number of pixels Select a Border Style for the line: Dashed, Dotted, Solid line, or Double Select a border color from the presets. (You can change later) If you want the bordered area to have rounded corners, select a Border radius: Small (S), Medium (M), or Large (L), or set a specific size using number of pixels

   
   

4. Customize the area surrounded by the border:
   
   

   Section
   Column Image Modified Column width 80% Select a background color if you want the area to have a background color (in this example we will not select one) Select a shadow if you want the bordered area to appear to float on the page

   
   

In this example, we have added borders and a shadow to change the appearance of the second content block:

 

Back to List

Anchor
Margins Margins

Adjusting Margins, Spacing and Alignment

Sometimes when you add background colors or borders to a content block, the text runs right up to the edge, making it more difficult to read. You can adjust the margins of an item – in other words the space around the item on the page, the padding – the space inside the edges of the item, and the Alignment of items within the item.

1. To make these modifications:
   
   

   Section

   Column Column width 80% Place your cursor in the content block. Select the appropriate element from the item list at the top of the Style Editor – make sure it is for the entire block. Scroll down to the “Spacing and Alignment” panel in the Style Editor To set the margin (space between item and edges of page), you can either elect to set them all equally with a preset of Small (S), Medium (M) or Large (L) or set each margin individually by selecting the cross icon. To set the padding within the area (space between edges of item and content), you can also either select a preset (S,M, L) or set each edge individually You can determine how items are aligned, floating items to the left, center or right.

   
   

With the changes made to background colors, borders and spacing, our page now looks like this!

Back to List

Anchor
Summary Summary

Related articles

Visit the DesignPLUS Training Series Tutorials for more videos. For more step-by-step guides, visit the DesignPLUS User Guide. (These links will overwrite this page.)