EverWeb Logo


Creating & Designing Clickable Buttons

Video Transcript:

You can quickly and easily make great buttons in EverWeb…

In this example I am going to recreate the button used in the Modern theme template (available in EverWeb 2.6).

First create a text box and add the text “Show me more”

With the text added, go to the Fonts button and change the font of the text to ‘Work Sans’ which is a Google font installed when you first download the Modern Theme Template

Next change the font weight to Extra Bold.

Change the font size to 18 point and the font colour to white.

Once finished resize the shape so all of the text is on one line.

Now we need to centre the text in the text box. With the text highlighted go to the Text Inspector.

Change the horizontal alignment to center and the vertical alignment to middle.

You will notice that the text is still not in the centre of the box, so you now need to

set ‘After Paragraph’ to 0 and

set ‘Insert Margin’ also to 0.

The text is now centred

Next go to the Shape Options and change the shape from the default to Rounded Rectangle.

Set the Fill type to Gradient Fill.

Change the colors as shown on screen, or select your own.

Now add a line border using the Stroke options. Use a white border of 3px width.

Adjust the button size until you have the look you want.

Use the blue dot in the Rounded Rectangle shape to alter the roundness of the corners as required or use the shape’s Widget Settings.

Finally add a hyperlink to the scroll down the page using Scroll Position, a feature which is available in EverWeb 2.6.

Click on the button text then go to the Hyperlinks Inspector. Tick to ‘Enable a Hyperlink’.

Link to the current page and set the Position to the Scroll Position that is already on the page.

Preview to test your button before publishing!