How to Set Up a Button on Your Website
With the SendPulse website builder, you can add the "Buttons" element to include a link to other websites, pages, or blocks or allow website visitors to call or email you.
Add an Element
Add the "Buttons" widget to the required part of your website.
Customize Your Button
In the "Buttons" widget editing panel, you can add extra buttons or align the element relative to the column space.
To add an extra button to your column row, click Add. To customize your button, click the edit icon.
Choose a Button Type and Add a Link
Enter your button text. Select a button type (link, phone, email, or anchor), and then enter the required data.
Let's analyze each link type.
|Used to insert a full link in the
https://example.com format. We recommend adding secure links. If you select the "Open in new window" option, your link will be opened in a new browser tab when a user clicks it.
|Used to insert a phone number in the
+11111111111 format. By clicking such a link, users will be able to call the specified phone number from their browser or device using built-in applications. We recommend using the international format when adding phone numbers so that applications can correctly determine where to call.
|Used to insert an email address in the
email@example.com format. We recommend checking your email address for typos so that website visitors can contact you.
|Used to insert an anchor link that leads to another block. By clicking the link, visitors will be immediately redirected to your specified block. You can get your anchor ID in the block settings.
Note: if you hide a block for mobile devices, then your anchor link to this block will not work on these devices. This also applies to desktop devices. You need to add a block and its links for the mobile and desktop versions individually.
Select an Opening Type
You can choose how your button link will be opened — in a new tab or in the current one. Turn on the "Open in new window” toggle if you want your button link to be opened in a new browser tab.
Copy your element ID
Every button has an ID that distinguishes it on the page. With it, you can add styles and scripts, show pop-ups, and track events for this element.
You can copy the ID for the entire element with buttons or for each button individually:
- To copy the ID for the entire element, in the widget settings, scroll down to the ID section, and click it.
- To copy the ID for a specific button, click the pencil icon next to your button, and edit the button itself.
To edit an ID, click the pencil icon.
Read more: Block and widget ID.
Customize the Button Appearance
Customize the Placement and Animations
Go to the element editing panel, and select a placement.
You can select the distance between your buttons in the “Indent between” field.
You can customize your element display for mobile devices separately from the desktop version. Read more: How to Edit Elements in the Mobile Version.
Select your button placement relative to a section or block (left, center, or right).
You can also add scroll animation — to do this, turn on the "Animation on scroll" toggle, and select an animation type, position, and speed.
Read more: Animation.
Select a Button Style
Go to your button settings.
By default, your primary and secondary website styles are based on your overall page style. However, you can create your own style for each button. To do this, select the "Custom” option. You can also choose your button size (small (S), medium (M), or large (L)).
You can also customize your buttons when working on your website design.
Read more: How to Customize Your Page Style.
You can also edit your button width (automated, full, or fixed).
|Your button width is set according to the selected size: small (S), medium (M), or large (L). You cannot adjust it.
|Full width of the container
|Your button width will match the section or column width where you added the button.
|You can adjust your button width by manually editing its pixel values.
Turn on the "Additional effects" toggle to add animations and hover effects.
In the "Condition" field, select a website visitor action that will trigger your button effect, and in the "Effect" field, select an animation available for this condition.
|This effect is triggered when a website visitor hovers over your button.
|Bounce (the button moves up and down).
Shake (the button moves in different directions).
Decrease (the button becomes smaller).
Increase (the button becomes larger).
|This effect is triggered when a visitor opens your page or stops scrolling, seeing your button in the visible area.
|Shine (the button shimmers).
Twinkle (the button is translucent and smaller at first but then goes back to its regular size and color).
Last Updated: 13.02.2024