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:
- Mouse over the widget.
The widget's controls will be displayed.
- Click on the down arrow beside the widget icon.
- Choose the Settings item from the drop-down menu.
The widget Settings popup will be displayed.
- Click on the Advanced tab.
- 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.
- Click on the VISIBILITY RULES row to expand the section.
- Click on Always.
The Edit Rules popup will be displayed.
- Set up a test query.
The test query enables you to define a comparison test to verify if all specified rules are met.
- 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.
- Choose the test condition:
- True: Indicates that the test is met.
- False: Indicates that test is not met.
- Choose a comparison test option:
- Click on the cross icon to add a new rule.
A set of rule options will be displayed.
- 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).
- Select an Operator:
- =: equal to.
- <>: not equal to.
- Specify a value for your condition.
- Click OK.
CUSTOM CLASSES
The Custom Classes settings let you specify a custom CSS class for your widget.
- Click on the CUSTOM CLASSES row to expand the section.
- Enter a name in the Custom Classes field.
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.
- Click on the RESPONSIVE SETTINGS row to expand the section.
- 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.
- Click on the ANCHOR ID row to expand the section.
- Copy the ID to use it in your hyperlink.
- Click OK, once you have finished configuring the settings.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
Comments
0 comments
Please sign in to leave a comment.