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) in the upper right corner
      
      

   2. Select the User Settings option
      
      
      

      Open

      

      Select User Settings

       

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

   1. To enable all advanced tools select the tick box at the top, or
      
      

   2. Enable individual tools by selecting the tick box in front of each item
      
      

      Open

      

      Choose What to Enable

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).
   
   
   

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.)