Advanced Styling and Design Techniques

The Style editor helps you perform advanced editing of elements within your canvas page. You have the ability to adjust colors, borders, margins and many more items with the Style editor. You can also build, save, and edit your own unique Quick Styles, for ease of use in the future.

While the option to create and save custom styles was available previously, DesignPLUS adds the following features:

• Ability to save styles for specific elements and as global styles
• Color scheme suggestions
• Updated WCAG 2.1 contrast checker

Please consider the following when choosing to use the Style Editor:

• Styles that you create with the Style Editor are saved to you as a user. They will not be available to other users unless you share them. 
• You can apply styles from the Style Editor to an entire tab panel; however, the tab panels are contained in a wrapper that will not allow for styles to expand past the border (such as box shadows). If you'd like a tab panel to have a box shadow, you will need to apply 10px of padding to the tabs panel wrapper div as well.  This provides the space needed to make the shadow visible.

The video below reviews the wide variety of capabilities you have when using the Style Editor. The KB articles in this section will provide you step-by-step instructions on the use of these features.

Enabling the Advanced Toolsets

You can either choose to enable just the Style Editor or all advanced editing tools by following the steps below.

1. Launch the DesignPLUS Sidebar. (See our KB article: Accessing the Content Editor Sidebar for instructions)
   
   

   
   
   

   1. Click on the settings icon (3 dots)
      
      
   2. Select the User Settings option
      
      

2. Scroll down to the section with the heading “Enable all Advanced Tools”
   
   

   
   
   

   1. Select to enable all advanced tools by clicking the tick box at the top, or
      
      
   2. Select only the Style Editor
      
      

3. Scroll back to the top of the sidebar
   
   

   
   
   

   1. The Advanced tools icon will now appear in the tabs bar
      
      
   2. Close the User Settings by clicking on the “x”
      
      
4. Click on the Advanced Tools Icon. The Advanced Tools category will open. You will see the Style Editor icon available (plus any other advanced tools you have enabled).
   
   

Summary of Steps

Related articles