Interactive Scale

interactive scale widget

Add some life to ordinary static buttons with our Interactive Scale widget. This very useful widget scales elements up or down in size on hover or click. In addition to buttons, scaling works great on text, links, lists, images, and more.

Demo: https://demo.wocode.com/interactive-scale

Tutorial Video

Setup

In this documentation, we will explain how to place the widget, the purpose of the widget options, and then provide several examples of how the widget can be used.

WIDGET PLACEMENT

  • Place the Interactive Scale widget on your page. You should place it out of the way, as its placement is not important. The widget placeholder will not be seen when your site is published.
  • If you wish to use one widget for your entire site, place the widget in your footer or header. This way, any element may be scaled by the widget, regardless of what page its on.

WIDGET OPTIONS

Note that this documentation covers the settings in the Content tab of the widget option panel. The Design section contains only spacing options, as found in all widgets.

  • Open the widget panel.
  • Each “List Item” represents a scale setting. A scale setting can apply to a single element or an entire group or class of elements on a page, such as all the buttons.
  • A single widget on a page should work for all the scaling you want to do. Each list item can have its own unique settings.
  • Click on the first List Item under “Elements to Scale”.
  • Target Element: This is the class or ID used to target the element you wish to scale. We will discuss how to use classes and ID’s extensively below.
  • Scale Trigger: Determines whether scaling will be triggered by hover or click.
  • Scale Amount: The amount an element scales. Settings above 1 will scale up (larger), below 1 will scale down (smaller). Feel free to use several numerals to fine tune, i.e. 1.15.
  • Transition Time: This is the time it takes to complete the scale transition.
  • Delay Before Transition: This sets a delay time before the scale transition begins.
  • Easing Style: Sets the type of easing use for the scale transition.

SINGLE ELEMENT EXAMPLE – BUTTON

We’ll start with a single button. In the example below, we’ll be updating the “Book Table” button in the header of our Burger Mania template.
  • If we wanted this prominent button to scale, we need to target it with our widget.
  • You may recall if you used the MuseThemes Interactive Scale widget in Adobe Muse, that we targeted elements by using an element’s graphic style. We’re essentially doing the same thing here, but instead of applying a class (via the graphic style name), we’re just going to use an ID or class that already exists for an element.
  • To get our ID or class, click on the button or element.
  • Click the gear icon, then select “Edit HTML/CSS”.
  • You may also access the same thing by right-clicking on the button and selecting the same.
  • We can now see the HTML and CSS for the element. This may be digging deeper than normal for some users, however, note that you will not be doing actual editing or writing of any code. We’re simply looking for a class or ID name.
  • Look for the first mention of “class”.
  • In this case, the button has several classes applied to it. Some of these classes may be applied to other elements on the page, so we’ll need something unique.
  • The site builder applies a unique class to everything individually, so we’ll look for that.
  • The “u_1516943300” is the unique class name in this case. Copy your unique class. The unique classes and ID’s will be obvious, because of the string of numbers.

  • Back in the widget, click on the first list item.
  • For the target element, enter the unique class you copied.

IMPORTANT: 

  • This is a good time to take a look at the notes in the bottom of the widget panel. Classes and ID’s need to be defined for our widget to recognize them. You will use a “.” or “#” at the beginning of your class or ID.
  • “.” should be used with classes.
  • “#” should be used with ID’s.
  • These characters go at the beginning of the class or ID, and should have no space afterward.
  • In this example, we will use a period, as this is a class. I am using class .u_1516943300
  • That’s all that needs to be done to scale a single element or button.
  • The default settings will allow us to see a scale up. You should be able to now hover over the element and see the scale. You may also preview or publish your site to check.

TARGETING ALL BUTTONS ON THE PAGE

Say we want to target all the buttons on a page. We just need to find the class they all share.
  • Click on any button on your page.
  • Open the HTML editor.
  • In this example, we see “dmButtonLink” after the button’s unique class.

  • This may be a class that applies to all buttons. To confirm, we will want to check on other buttons.
  • By opening the HTML on other buttons, I can confirm that the class is also used for the other buttons.
  • Copy the class name.
  • Open the Interactive Scale widget options.
  • Add a new List Item.
  • Paste the class in the Target Element field. Hit enter.
  • You should now see all buttons scale on your page.
  • Remember that if you wish to apply the scale site wide, you can place the widget in your header or footer.

TARGETING AN ID

So far, we’ve only done classes. This example uses an actual element ID. You will have the option of using a class or ID in most cases.
  • Choose an element. In this case I will use the Burger Mania icon in the header.
  • Open the element’s HTML.
  • Look for the ID. You will see something similar to the ID in this example, which is id=”1923160809″.
  • Copy the ID. You can grab just the numbers.
  • Create a new list item in the widget.
  • Paste the ID.
  • Since this is an ID and not a class, we need to use a “#” at the beginning, instead of a period.
  • Hit enter. You should now see the element scale.

USING INSPECTOR TO FIND A CLASS OR ID

If you have any trouble finding an element’s class or ID in the editor, you may use a browser’s inspector tool to find it.
  • Publish the page.
  • In this example, we will try to find a form’s submit button.
  • Open inspector in your browser. This is generally found by right clicking anywhere on the page. The screenshots below are from Chrome.
  • Click on the little arrow icon. This is usually in the upper left corner. This lets us choose a particular element on the page.

  • Click on the submit button.
  • You will see a line or lines of code highlighted below.
  • You can see the class name “submit”. But that will actually only target the inner portion of the button, so it would only scale the text, and not the whole button.
  • We will look one line above, which will go up one container.
  • In this example, we will copy the dmformsubmit in the line above.

  • Open the widget options.
  • Add a new List Item.
  • Same as before, paste that and add a period at the beginning of the class name. Hit enter
  • You may now check in the editor or in preview to be sure the element is scaling.
  • If you find that the element is not scaling, you may try a different class name. There is no harm in trying as many class names as you like.
  • Return to inspector to find a different class name if you need to.

CREATING YOUR OWN CLASS NAME

The last thing we’ll cover is adding a class in the HTML. This technique does require editing or adding to the HTML, but it is super easy, and will not cause any harm if done as described.
This method may actually be easier in some cases, as you can define a unique class name in a list item in the widget, then add the class to as many elements as you like.
  • In this example, we will select an inner row.
  • I’ve selected an inner row containing a milkshake icon and text.
  • Open the HTML.
  • Find the first “class” or “div class”.
  • Think of a unique new class name, and simply type it into this line, between the parenthesis.
  • There should be a space at the beginning and end of the class name, unless it is the last word before the parenthesis – in which case, a space should not be used (see screenshot below). Do not use any other characters.
  • In this example, I’m adding the class name “milkshake”.
  • Click Update. This is an important step!
  • Once the HTML has been updated, you will see a small “undo” button next to the Update button.
  • That’s it, you’ve just added a class to that inner row.
  • Now back in the widget, add a list item.
  • Enter your class name, with a period at the beginning for the class.
  • Each list item can have its own unique settings.

A FEW NOTES AND TIPS

  • Each list item can have its own unique settings.
  • Never use more than one class or ID name within a single list item.
  • You may use as many List Items as needed in a single widget
  • Refresh the browser: When you’re setting up a lot of these scaled elements, or making changes, you may find that it seems that your changes aren’t working. Try giving the page a refresh. This is an important tip when setting up several scaled items or testing classes or ID’s.