How to add a button in Elementor
Want to add some aesthetic and interactive buttons to your WordPress site? The Button Widget helps you easily design and customize buttons without the need for any other plugins or shortcodes.
In this blog, we are going to show you how to add a button in Elementor so let’s get into it.
Assuming that the user has a page created and wants to add buttons to it for navigation and other functions. Let us add the button widget to the page.
Firstly, open the page to which you want to add a Button widget and click on the “Edit with Elementor” button to proceed. Secondly, Search and Select the button you want to add and drag-n-drop the widget to the needed section
We are going to use the simple button widget for the sake of giving you an idea that how these widgets work.
Search the image widget in the search bar and then drag and drop the widget in the section.
Open the Content left-side menu tab and unfold the Content section. You can add Button Icon and Button Label Text for the Normal state of the button and when the user hovers a pointer over it. In the Button Link field, you can add a link to the page the button will lead.
Following are the options in the content tab:
Fig: Edit button widget
Content Tab
Type: Select from 5 styles of buttons to begin your design. Choose from Default, Info, Success, Warning, or Danger
Text: Enter the button’s text
Link: Set the URL for the button’s link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link
Alignment: Align the button to the left, center, right, or justified about its column.
Size: Select the preset button sizes, from Extra Small to Extra Large
Icon: Select a FontAwesome icon to display on the button
Icon Position: Set the icon to appear before or after the button text
Icon Spacing: Adjust the amount of space between the icon and the button text
Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytics events
Manage the Style settings block. Here you’re able to change the settings for every single element of this button
Style Tab
Typography: Change the default typography options for the button’s text
Text Shadow: Add a shadow and blur to the button’s text
Text Color: Select the color of the button’s text
Background Color: Select the button’s background color for both Normal and Hover states. You may use a solid or gradient color
Hover Animation: Click on the Hover tab to set a Hover Animation
Border Type: Select the type of border to use around the button
Width: Control the thickness of the border around the button
Color: Choose the border’s color
Border Radius: Set the border-radius to control corner roundness
Box Shadow: Set options to apply a box-shadow on the button
Padding: Change the padding settings of the button
Here is what our buttons looks like as of now.
Alright! Now you know how to add a button in Elementor. We hope this guide has helped you.
Feel free to contact us if you need any help regarding this topic. Do let us know the topics you want us to cover in the comment section or reach out to us with your queries by clicking the contact form below.
