How To Use Button Block

After adding the Button Block, select the block you will see the settings in the sidebar. How sidebar settings will appear for a block.

General

In your sidebar settings, you will see the General tab is selected, if not select the General tab. Then you will see the options below.

Button Settings

Text: Enter the button text, or you can simply use the text from the button itself.

Action: Define the button’s action, whether it should open a link or a popup.

Link

When selecting the link action, input the URL, toggle the ‘Open link in a new tab‘ option, and provide values for the ‘rel/relation‘ and ‘referrer-policy‘ attributes.

Also, you can download the file using by enabling the Download Button option. Also, set the file name for the downloadable file(This is an experimental feature, and it may not work reliably every time.). Note: Make sure the link is downloadable.

Additionally, you can enable the Download Button option to allow users to download the file. You can also specify the Download File Name for the file (please note that this is an experimental feature and may not work reliably every time). Please ensure that the link is downloadable.

Popup

Choose the popup action to open a popup with this button. Once this option is selected, you can customize the Popup Options.

Elements

Icon: Select an Icon, the library for the icon is Font Awesome v5, or upload your custom icon/image by enabling the Upload Icon option. The icon size will match the text size.

Tooltip: Enter the Tooltip Text to display the tooltip when hover over the button. You can also select the Tooltip Position.

Hide On: Hide the button on specific devices by enabling the Hide on [Device] option.

Design

For design, you can enable Button Full Width to expand the button to full width. You can also set the Size and Type for further customization.

Animation

You can configure the animation Type and Duration right here.

This plugin incorporates AOS features, which trigger animations when the button enters the viewport while scrolling down the page.

Additional

Additionally, you have the option to add a custom ID to the button, and you can even write custom CSS for further styling.

Navigate to the Popup tab, where you will find various popup options.

You can choose the popup Content Type to determine what will be displayed inside the popup.

Depending on the selected content type, you will be able to configure different sources. We will discuss the sources below.

Additionally, you can set a Caption for the popup, which will appear at the bottom of the popup.

Image

For the image type, you can either upload an image or insert an image URL.

Audio

For the audio type, you can either upload an audio file or insert an audio file URL.

Video

For the video type, you can either upload a video file or insert a video file URL. Also, you can insert YouTube and Vimeo video URLs.

Content

For the content type, you can display the content within the popup. You simply need to write the content from backend.

Write Content

To write the content, click on the button. It will open a modal or popup where you can write the content for the users.

Document

For the document type, you can either upload a document file or insert a document file URL. The supported document formats include .pdf, .doc, .docx, .xls, and .xlsx.

IFrame

For the iFrame type, please insert the source URL.

Style

Navigate to the Style tab, where you will find various options to style the button block.

To style the button, you can configure Typography, Colors(text and background), Hover Colors(text and background), Padding, Border, and Shadow.

That’s all.

Was this page helpful?

How To Use