EVERWEB VIDEO TRAINING LIBRARY

Creating a Call To Action Button in EverWeb!

Video Transcript:

► Video Contents

0:00 - Introduction

0:16 - The Scenario

0:56 - Creating The Button

2:21 - Styling The Button

2:45 - Using Borders

3:38 - Creating a Mouse Animation Effect

4:11 - Hyperlinking The Button

To use the features described in this video, you will need EverWeb 4.4 or higher, for macOS or Windows.

You can quickly and easily make great buttons in EverWeb…

In this example I am going to create a button for my visitors to click on which will take them to a page on my site where they can sign up to a newsletter.

In my example, I am using a column container in a responsive row in a responsive page.

I added an image from EverWeb’s Free Stock Photos, to the container then added some text. The Container has rounded corners, and a gradient fill.

To add a Sign Up button, I need to add a rectangle shape to the page to  act as my button.

I want to add the rectangle shape directly in to the Container, so I first select the Container. Next I click on the Shapes button in the Toolbar.

I can use either the default, or rectangle, shape for the button, as this will give me the most styling possibilities.

Once the shape has been added, I can add the text “Sign Me Up!” Inside it

With the text added andselected, go to the Text Inspector.

Either choose a Paragraph Style or manually choose the font styling that you want from the Fonts section.

After styling the text, resize the shape if you need to, so that all of the text is on one line.

Now we need to center the text in the TextBox. With the text highlighted go back to the Text Inspector.

In the Alignment section, change the Horizontal alignment to center and the vertical alignment to middle.

You will notice that the text is still not properly centered within the shape. To fix this, we need to set the After Paragraph value to zero

The text is now centered

Next we can use EverWeb’s Shape Options tab to add additional styling and features to the button.

To change the color of the button, either click on the Color Swatch, or Color Wheel and change the color as desired.

Alternatively, you can change the Color Fill itself, to a different Fill Type, for example, gradient fill.

After changing the color of the button, we can now change the border.

Click in the box next to ‘Custom Border Radius’ in the Borders section, to activate the border settings.

You can change the radius of any of the four corners of the shape. In this example, we are going to set the value for each corner to 15, so that our button has slightly rounded corners.

Note that the Custom Border Radius options are only available to the Default and Rectangle shapes.

If you use a Rounded Rectangle shape, you can adjust all of its corners by clicking on the Widgets Settings button and entering a new value in the Corner Radius field.

If you want you could add a line border to the button using the Stroke dropdown menu option, but in this example, we’re going to do something different.

As the sign up button is a Call To Action, I am going to add a mouse effect using the Mouse Transitions and Animations section of the Shape Options tab.

In this example, I am going to use a Mouse Over animation. There are 41 animations available. I am going to choose bounce out.

You can also choose to use a mouse down animation, if desired.

To make the animation smooth, I am going to set the Transition Time to about 50.

Next we can add a hyperlink to the button which will take the visitor to the Sign Up page in my site.

Click on the button text to select it, then go to the Hyperlinks Inspector.

Check the box next to Enable as Hyperlink to activate its settings.

Link to One of My Pages then select the Sign Up page.

Use the Hyperlink Formatting section to style the Hyperlink as you want.

I have now finished my sign up design, so I will Preview to test before publishing!