Widget Settings - Advanced

Welcome to our tutorial on configuring advanced settings for widgets in the DecoNetwork Website Editor. Widgets in DecoNetwork not only come with standard configuration options but also offer powerful advanced properties. Advanced properties allow you to set visibility rules, apply custom CSS classes, and define device-specific responsive CSS for each widget. The properties enable you to tailor how widgets appear and behave across different devices, ensuring a seamless user experience on desktops, tablets, and smartphones. These capabilities empower you to create highly adaptable and visually appealing components that adapt effortlessly to varying screen sizes and orientations.

To get started, watch the video below for a quick overview of the advanced properties available for widgets in DecoNetwork. Afterward, continue reading for detailed instructions and insights into maximizing the functionality and aesthetic appeal of your website's widgets through these advanced configuration settings.

To configure the advanced properties of a widget:

1. Mouse over the widget.

   The widget's controls will be displayed.

2. Click on the down arrow beside the widget icon.
3. Choose the Settings item from the drop-down menu.
   

   The widget Settings popup will be displayed.

   

   You can also double-click on the widget to open the widget Settings popup (excludes Text, Page Title, and Heading Widgets).

4. Click on the Advanced tab.
   
5. Configure the settings as required.

   VISIBILITY RULES

   The Visibility Rules settings let you set rules to control when and by whom the widget can be seen.

   1. Click on the VISIBILITY RULES row to expand the section.

      Once, expanded, you will see the currently defined rule. By default, the rule set for the widget is to always show.

      
   2. Click on Always.

      The Edit Rules popup will be displayed.

      
   3. Set up a test query.

      The test query enables you to define a comparison test to verify if all specified rules are met.

      1. Choose a comparison test option:
         • All: Displays the widget only if all defined rules are satisfied.
         • Any: Displays the widget if any of the defined rules are satisfied.
      2. Choose the test condition:
         • True: Indicates that the test is met.
         • False: Indicates that test is not met.
   4. Click on the cross icon to add a new rule.

      A set of rule options will be displayed.

      
   5. Choose a condition from the dropdown list:
      • All: Allows you to create a new test to perform on the subsequent rules, where if all of the rules satisfy the test, the widget will be displayed.
      • Any: Allows you to create a new test to perform on the subsequent rules, where if any of the rules satisfy the test, the widget will be displayed.
      • User Logged In: checks if the user is logged in.
      • User Salutation: checks the salutation value defined in user's account.
      • User State: checks the state value defined in user's account.
      • Current Order Value: checks the user's current order value.
      • Current Order Size: checks the user's current order size.
      • Can Add Stores: checks if the user's account allows stores to be added.
      • Can Add Campaigns: checks if the user's account allows campaigns to be added.
      • Page has attributions: checks to see if the web page the widget is placed on has attributions (author, source and license links for materials used on the page).
   6. Select an Operator:
      • =: equal to.
      • <>: not equal to.
   7. Specify a value for your condition.
   8. Click OK.

      You can add multiple rules.

      To remove a rule, click on the cross icon beside it.

   CUSTOM CLASSES

   The Custom Classes settings let you specify a custom CSS class for your widget.

   A CSS Class is a reusable style that you can apply to HTML elements, allowing you to encapsulate specific sets of stylistic properties into a single identifier. In this case, the class that you define is specifically for the widget you are editing. By assigning a CSS class to an HTML element, you can consistently and efficiently apply formatting such as fonts, colors, margins, padding, and layout characteristics for the widget.

   1. Click on the CUSTOM CLASSES row to expand the section.
      
   2. Enter a name in the Custom Classes field.

      Once you have created your custom class, you can specify the styling for the class in your website's Custom CSS. Refer to the article, Customize Template CSS for instructions.

   RESPONSIVE SETTINGS

   The Responsive Settings empower you to define responsive CSS tailored to your widget across distinct device sizes. This functionality allows you to customize how your widget appears and behaves on various devices, ensuring optimal user experience across desktops, tablets, and smartphones.

   1. Click on the RESPONSIVE SETTINGS row to expand the section.
      
   2. Set the CSS for the widget at each supported device size:
      • Wide Monitor
      • Monitor
      • Tablet
      • Mobile

   ANCHOR ID

   The anchor ID serves as a unique identifier assigned to a widget within a web page, facilitating precise navigation and linking functionalities. By utilizing the anchor ID, you can create hyperlinks that instantly navigate users to the specific location of the widget on the page. This capability is particularly useful for enhancing user experience by allowing direct access to relevant content or interactive elements without the need for manual scrolling.

   1. Click on the ANCHOR ID row to expand the section.
      
   2. Copy the ID to use it in your hyperlink.
6. Click OK, once you have finished configuring the settings.
7. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.