Back to contents

JetElements Button widget. How to add a Button widget to your website

This tutorial explains how to add a Button widget with custom text and links to any content to your website using JetElements plugin.

The navigation on the page is made by using buttons as they open the hidden information and lead you to the different parts of the website.

The Button widget from JetElements allows you to add buttons with custom text and links to any content block on the website. Also, you can apply hover effects to it and add attributes to the links extra easy.

As you can see, this widget is really an irreplaceable tool.

Reading this tutorial will teach you how to add a Button widget to your site and customize it. So, let’s begin!

Creating a Button

Step 1 — Firstly, open the page to which you want to add a Button widget and click on the Edit with Elementor button to proceed. Secondly, drag-n-drop the widget to the needed section.

Button widget

Step 2 — After that, you’ll see a basic style preset of the button. You can add Text, Icon, and Link to it. If you don’t want any icon, you can easily remove it.

On hover, you have a little bit different content of the button, as you can add another icon and text to it.

Content settings

Step 3 — Let’s go to the Settings section. You can select the Hover Effect, which is simply an animation effect that is triggered once you hover over the button. The sides of your button will change each other with this animation effect.

Settings for the Button widget

Also, you can enable or disable the Icon. If you decide to use the icon, you can change its Position.

Settings for the Button widget

Step 4 — The next step here is to manage the Style settings block. Here you’re able to change the settings for every single element of this button.

In General settings, you can set the custom Size for the button and choose the Alignment.

General style settings

On the Plane settings, you’re able to change everything about the background and even set an image background for it.

Plane block

Moreover, there’s an opportunity to change the appearance of the Icon and Label of the button.

Step 5 — The last step here is to click on the Publish button and preview the result.

Button widget

These easy steps are all you have to do to add a button to your website. Hope this tutorial was useful!