Scroll

Widgets - General

1. Button widget
2. HTML widget
3. Pay Pal Buy Now and Pay Pal Donate buttons
4. Rich Content widget
5. Vimeo Widget
6. Timer Slot
7. To Top Scrolling Button

1. Button widget
1.png

Button widget is a specific widget for creating and customizing different kinds of buttons you may need to place on your website's pages.  This widget provides the following features:

1) possibility to create the unique button’s design (label, size, color/gradient, background image);

2) possibility to add a click action to your button;

3) possibility to edit the text style and the text hover style.

For the Button widget such sections as Style and Actions are disabled, because all features are editable in the main section – Properties. Let’s take a closer look on 
all its capabilities:

- Label section allows you to edit the button’s title.

- Click Action feature allows you to choose which click action you'd like to apply to your button.
greenshot_2013-04-29_16-07-11.png

- Text Style and Text Hover Style – text format editor, where you can customize button label's font, size, color and position.
greenshot_2013-04-25_12-14-42.png

- Button Style and Button Hover Style – sections, where you can customize the following properties for your button: Fill Type, Fill Color (for Solid or Gradient fill types), Direction (for Gradient fill type); Background Image (in case you'd like to use some picture on the background of your button).

- "Stroke" tool allows you to edit button’s border width, it’s corners or padding.

You can change width, corners or padding for all sides simultaneously, or separately – please use the small "chain" button to synchronize/re-synchronize  these dimensions for all 4 sides of the button.

greenshot_2013-04-25_12-33-09.png

Icon Style – allows you to choose and edit the icon for your button.
greenshot_2013-04-25_14-27-51.png

2. HTML widget
2.png

HTML Widget is one of the most demanded widgets among our customers. It allows you to launch any custom application by implementing valid html, javascript or iFrame code within the widget. The code should be pasted in the special section:
greenshot_2013-04-29_16-31-06.png

The code can't be executed (the widget cannot be previewed) straight in the Control Panel, it can be only seen on the website.
If you want to integrate music on your website – you need to use SoundCloud application which is located in the end of HTML widget’s list. You will find the instructions on how to insert the code.

greenshot_2013-04-25_14-46-57.png

In addition there are two other options available:

- Show Scrollbars

- Put html in iFrame

The first option should be used if your content is larger than the widget area. Second option should be used in case you want to load HTML in iFrame.

3. Pay Pal Buy Now and Pay Pal Donate buttons
3.png

Pay Pal Buy Now and Pay Pal Donate buttons are simple widgets that have all necessary features for arranging online purchases or for making donations. Basically, both these widgets are similar and working in the same way.

Main properties for both of these buttons are:

- E-mail address to receive payments – you need to specify your e-mail account in order to receive payments;

- Item Name – your product’s title;

- Item ID (optional);

- Choose a currency – all common currencies are available (U.S. dollars, GBP, EUR, etc.);

- Price;

- Open in - you can decide if the PayPal page should open in the new or the same browser's window.
greenshot_2013-04-29_16-37-10.png

Customize Button tool will allow you to edit your button appearance:

 - Button Type - you can use standard PayPal button design, or your own Custom Image;

- PayPal Button Mode - it can be the default button or you can hide all the credit card logos, or use smaller button icon;

- Select Button Text (it can be "Buy Now" or "Pay Now")
greenshot_2013-04-29_16-43-34.png

Pay Pal Buy Now button special feature is a possibility to add the Additional Amounts to be payed for your product. It can be:

- Shipping Amount (optional);

- Tax Amount % (optional).
greenshot_2013-04-29_16-45-22.png

Pay Pal Donate button special feature is Contribution Amount. It can be:

- Donors enter contribution amount;

- Donors contribute fixed amount.
greenshot_2013-04-29_16-48-04.png

4. Rich Content widget
4.png

Rich Content widget allows you to place a lot more information on your website by adding the scroll bars to the widget's area and letting you to combine different objects (for example: texts, images, shapes, some of other widgets, etc.) within one content block.
You can customize the following features of Rich Content widget in the Properties section:

- name (ID of your widget);

- scrollbar thickness (from 0 to 200);

- scrollbar padding (from 0 to 100);

- scrollbar Track Color and Thumb Color.
greenshot_2013-04-29_17-22-39.png

You can add or edit the content to your Rich Content Widget after you click the Edit Widget button or simply double click on the widget's area. In the edit mode the widget can be stretched depending on the amount of content you have added. Rich Content Block may be horizontal, vertical or both depending on the design. It allows you to add a lot of content, as it automatically resizes in both directions (horizontally and vertically). If the size of the content exceeds the widget size, the scroll bars will appear. You may add any objects, slots and even widgets except for another Rich Content widget. You may select the background color for each of the widgets and adjust content position.
greenshot_2013-04-29_17-26-35.png

In addition you can manually edit the content’s position by using arrow buttons, which are located under Background Color line. The Style section is also available, where you can configure the Fill Type (None, Solid and Gradient), Background Image and Stroke.

5. Vimeo Widget
5.png

Vimeo widget allows you to integrate Vimeo video items on your website pages.
Video URL line – line, where the direct URL to the video item should be specified.
Autoplay option will play the video automatically on load when it's enabled.
Controls Color – specify the color of the video controls.

greenshot_2013-04-29_17-45-07.png

6. Timer Slot
7.png

Timer widget allows you to add countdown to your website. Please be aware that this widget can count no longer than 99 days.

This widget has a set of settings:
timer2.jpg

 - Year, Month, Day, Hour, Minutes settings are used to specify the day and minute when your timer will hit all "0" and won't be counting anymore. Until that moment it will calculate remaining time automatically for you.
timer3.jpg

- Timer Block Style – section, where you can customize the following properties for your timer: Fill Type, Fill Color (for Solid or Gradient fill types), Direction (for Gradient fill type); Background Image (in case you'd like to use some picture on the background of your timer).

"Stroke" tool allows you to edit timer’s border width, it’s corners or padding.
timer4.jpg

- Numbers Text Style allows you to modify appearance of numbers for your timer. For example change font, size, color and position.

- Block Delimiter(px) allows you to change the distance between blocks with Days, Hours, Minutes and Seconds.

- Inner Delimiter(px) allows you to change the distance between numbers in blocks with Days, Hours, Minutes and Seconds

7. To Top Scrolling Button
6.png

Using this widget will allow you to scroll your browser to the very top of your page. Please be aware that position and appearance of this widget depends on it's settings but not on position in Moto CMS control panel.

It has a list of settings that can be used to customize it
totop2.jpg

- Button label - text that will be displayed on this widget
totop4.jpg

-  Text Style allows you to modify appearance of text for your button. For example change font, size, color and position.

- Right Position(px) - distance from the right side of you screen to your widget in pixels. This setting is used to specify where To Top button will appear.

- Bottom Position(px) - distance from the bottom side of you screen to your widget in pixels. This setting is used to specify where To Top button will appear.

- Scroll to appear(px) - this is a distance in pixels you need to scroll to make To Top button appear on your page
totop3.jpg

 - Button Style and Button Hover Style – sections, where you can customize the following properties for your button: Fill Type, Fill Color (for Solid or Gradient fill types), Direction (for Gradient fill type); Background Image (in case you'd like to use some picture on the background of your button).

"Stroke" tool allows you to edit button’s border width, it’s corners or padding.

Have more questions? Submit a request

Comments