Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Button Module with the Website Page Designer

Button Module with the Website Page Designer

If you want your visitors to follow a link, a button is a great visual aid to help them do that. You can insert buttons anywhere on your pages using the Button module of the page designer.

Go to the page designer, and add a new module by clicking on the gray plus sign. Choose the button module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.

Define contents

The contents tab includes the following options:

Text

Insert the text you want your button to show.

Link

If you want that the button opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can customize your design.

Alignment

Define if you want the button to be aligned at the left, center or right side of the column.

Text

Pick a light or dark color for the text, depending on the background.

Button

You can enable button customization and then adjust its text size, color, and fonts, background color, border settings, and button icon. The button border radius will make the button rounder.

Spacing

Customize margins and padding sizes.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. You can also define the button’s rel attribute here. Check this guide to know more about how to use these settings.

Use Case

Let’s create a button with the following settings:

Text: Click to Know More

Alignment: center

Button Text Size: 20

Button Text Color: #ffffff

Button Background: image.png

Button Border Width: 2px

Button Border Color: #000000

Button Border Radius: 6px

Show Button Icon: YES

Button Icon: star icon

Button Icon Color: #ffffff

Only Show Icon on Hover: NO

This is how it looks!

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?