Enhancing the functionality and user experience of your DecoNetwork website is key to driving engagement and conversions. One effective way to achieve this is by incorporating buttons that guide visitors towards specific actions, such as making a purchase, signing up for a newsletter, or contacting your team. DecoNetwork's Website Builder includes a versatile button widget that allows you to easily add and customize buttons to suit your needs. This tutorial will walk you through the steps of adding the button widget to your website.
In this article, you will learn how...
- To add a Button Widget to your website
- To configure the design settings for the Button Widget
- To configure a custom shadow for a button
- To configure a button's hover appearance
To add a Button Widget to your website:
- Click on the WIDGETS button in the Website Editor Toolbar.
- Browse the Widgets tab to locate the Button Widget in the BASICS section.
- Click and drag the Button Widget onto your website page.
Allowable areas the Button Widget can be inserted into include:
- Within rows
- Within columns
- Above or below existing widgets
- Between existing widgets
The Button Settings popup will be displayed.
- Modify the button widget settings.
- Button Text: lets you set the text label for the button.
-
Button Link: lets you specify a link for the button.
Click on Add Link to specify a link for the button.
The link options popup will be displayed.
- No link: select this option if you do not want to set a link for the button.
- Existing Page: lets you select a link to an existing page on your website.
- Website URL: lets you specify a URL to link to an external website.
- Email Address: lets you specify an email address to create a mailto link. This will activate the default mail client on the computer for sending an email to the specified address.
- Click OK to save the changes.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
To edit the Design settings for the Button Widget:
- Mouse over the widget.
The widget's controls will be displayed.
- Click on the down arrow beside the Button Widget icon.
- Choose the Button Settings item from the drop-down menu.
The Button Settings popup will be displayed.
- Click on the Design tab.
- Select from one of the pre-configured Button Layout options.
- Configure the design options for the button.
-
Text: lets you edit the font style and the color of text used in the button.
- Click on the font name to edit the font style using the Font popup. Click here for instructions.
- Click on the color spot to edit the text color using the Color popup. Click here for instructions.
- Background Color: sets the fill color of the button. Click on the color spot to edit the button background color using the Color popup. Click here for instructions.
- Horizontal Padding: sets the distance from the content (the text and/or icon) to the left and right borders for the button, specified in pixels. Enter a value between 0 and 500.
- Vertical Padding: sets the height of the button, using the em unit of measurement. An em is a value relative to the size of the current font. Enter a value between 0.6 and 6. For example, 2em means 2 times the size of the current font.
- Border Width: the line thickness of the button's border, specified in pixels. Enter a value between 0 and 20.
- Border Color: the color of the button's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
- Rounded Corners: this lets you specify a radius value in pixels to determine how round the border corners are. Enter a value between 0 and 50.
-
Icon: lets you add an icon to your button. Click on the icon symbol to select an icon.
- Icon Color: lets you set the color of the icon. Click on the color spot to select a color using the Color popup. Click here for instructions.
- Icon Size: lets you specify the size of the icon.
- Icon Margin: let you specify the right margin of the icon as a factor of the line height. Use the slider or specify a value between 0.3 and 4.
- Wrap Text: lets you choose whether to break text into multiple lines so that text that is too long to fit within the width of the button is not cropped. Tick the checkbox if you want the text in the button to be wrapped. The button height will be increased to accommodate the text.
-
Shadow: sets the appearance of the shadow, if any, added to the button.
- None: No shadow is displayed.
- On: Adds a consistent shadow around the entire border of the button.
- Custom: Lets you configure a custom shadow. Click here for instructions on how to configure a custom shadow.
- Edit Hover: lets you configure the appearance of the button when you move the mouse over it. Click here for instructions on how to configure the hover appearance.
If you choose the Special button layout, select an option from the Special Design drop-down list:
- Create Website: starts the process of creating an affiliate store when the button is clicked.
- Create Campaign: starts the process of creating a campaign store when the button is clicked.
-
Text: lets you edit the font style and the color of text used in the button.
- 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.
To configure a custom shadow:
- Select Custom from the Shadow dropdown list.
- Click on the brush icon that appears at the left of the Shadow drop-down box.
The Shadow Settings popup is displayed.
- Configure the settings for the shadow.
- Color: sets the color of the shadow. Click on the color spot to edit the shadow color using the Color popup. Click here for instructions.
- Opacity: sets the transparency level of the shadow. Enter a value between 0.00 and 1, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
- Size: sets the size of the shadow width in pixels. Enter a value between 0 and 20.
- Angle: sets the angle of the shadow in reference to the button. Enter a value between -180 and 180 degrees.
- Distance: sets the distance in pixels of the shadow from the button both in the horizontal and vertical direction. Enter a value between 1 and 10.
- Blur: sets the spread distance of the shadow in pixels. Enter a value between 0 and 20. The shadow will be sharp if set to 0. The higher the number, the more blurred it will be, and the further out the shadow will extend.
-
Effect: sets the location of the shadow.
- Outset: displays the shadow outside of the button border.
- Inset: displays the shadow inside of the button border.
- Click the cross in the top-right of the shadow style popup dialog box to close it.
- Click the cross in the top-right of the settings popup dialog box to close it.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
To configure a button's hover appearance:
- Tick the Edit Hover checkbox.
The hover settings are displayed.
- Configure the settings for the hover appearance.
- Hover Transition Duration: sets the length of time, in milliseconds, over which the hover properties will occur. Enter a value between 0 and 2000.
- Hover Text Color: sets the color of the button's text on hover. Click on the color spot to edit the color using the Color popup. Click here for instructions.
- Hover Background Color: set the button's background color on hover. Click on the color spot to edit the color using the Color popup. Click here for instructions.
- Hover Border Color: set the button's border color on hover. Click on the color spot to edit the color using the Color popup. Click here for instructions.
-
Hover Shadow: sets the appearance of the shadow on hover added to the button, if any.
- None: No shadow is displayed.
- On: Adds a consistent shadow around the entire border of the button.
- Custom: Lets you configure a custom shadow. Click here for instructions on how to configure a custom shadow.
- Click the cross in the top-right of the settings popup dialog box to close it.
- 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.