Knowledge Base/Visual SML/Visual SML Documentation

Coupon Widget

  • Coupon - Print and Share buttons will display below coupon image on tab
    • Basic Settings: (Defaults to Involver image)
      • Click on Add a New Coupon
      • Browse your computer to upload an image
      • Optional: Text Overlay, appears as a clippable coupon with the image on the left and your text on the right.
        • Enter Header text and Subheader text
      • Optional: Enter a URL to make the coupon clickable (Not available if you opt to use Text Overlay)
    • Advanced Settings:
      • Choose to Hide the Print button. Choose True to hide it, False (Default) to Display.

VSML_Coupon.png

 Set the look and feel of this widget in the Style settings on the right.

  • Click on the bar that appears across the top of the widget to select it if you haven't done so already
  • Next click on the Style tab in the toolbox to the right.
    • Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
    • Settings include the following options:
      • Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.
        • Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.
      • Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.
        • Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.
      • Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)
        • Headers: Select the font and size of the Headers (titles) in the widget.
        • Body/Default: Select the font and size of the text that appears in the widget. 
        • Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)
      • Color: Click into the field to enter a hex code, or choose from the color selector that appears.
        • Background: Color will appear behind this widget specifically.
        • Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
        • Header: Color of any titles.
        • Body: Color of any text.
        • Links: Color of any links.
        • Links (hover): Color any link will change to when the cursor is moved over the link.
        • Button: Color of any buttons, i.e. Follow or Submit.
        • Button Text: Color of the text inside the button.
      • Links: Select Underline or No Underline to designate how links are displayed in the widget.
      • Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.
        • Size range: 1px-5px and 10px
        • Patterns: Solid, Dotted, Dashed, Inset, Outset, Double
      • Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

 

Go to another Widget: