Knowledge Base/Visual SML/Visual SML Documentation

Instagram Widget

  • Instagram - Pull in photos from Instagram's platform using specific tags to display on your tab.
    • Basic Settings: Defaults to 8 max photos, and 20 items per page.
      • By Tag: Enter a Tag Name to designate the specific photos you want displayed and click Add.
      • By User Feed: Pull in a specific user's pictures. (Must authorize your account to use this option)
        • Click on Authorize on Instagram.
        • Enter your Instagram Username and Password and click on Login and Allow Access.
        • Select By User Feed (now enabled after authorizing.)
        • Enter any Username whose feed you would like to display on the tab and click Add. (Note: If you want to display your pictures, you must still enter your username into this field)
      • Select the maximum number of photos to display. Choose from: 1-10, 20, and 40.
      • Select the number of items to display per page. Choose from: 4, 8, 12, 16, 20, and 40.
    • Advanced Settings: Defaults to include Like, Pin it, and Tweet buttons.
      • Include a Facebook Like button, Twitter Tweet button, Pinterest Pin It button, and/or Tumblr button by selecting True, next to the appropriate item. False will exclude that button.

 VSML_Instagram.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: