Text
May differ slightly from the actual interface.
This setting applies to the button text
Key Point:
Set the text displayed on the button. The button label plays a critical role in clearly communicating the next action to the user.
What this changes:
Changing the wording directly affects click-through rates and how quickly users understand the button's purpose.
Adjustment tips:
Aim for concise text of around 2-5 words, and include a verb (e.g., "Learn More" / "Sign Up") to clearly convey intent.
Settings
Text: The button label text. The default value is "BUTTON STYLE".
You can also display different text on hover (linked to the Text Animation settings). Hover text is configured separately in the "Text Animation" panel.
May differ slightly from the actual interface.
This setting applies to the button text
Tag
May differ slightly from the actual interface.
Key Point:
Configure the output HTML tag and its attributes. This setting determines whether the element functions as a navigation link or an action button.
What this changes:
SEO, accessibility, and tracking (GTM) behavior are all determined by this setting.
Adjustment tips:
Usea(Link) for page navigation, andbuttonfor form submissions or JavaScript-triggered actions to maintain proper HTML semantics.
Settings
HTML Tag: Choose betweenLink(<a>tag) andButton(<button>tag). The default isLink.
From an HTML semantics perspective, use
Linkwhen the purpose is page navigation or URL redirection, andButtonwhen the purpose is JavaScript execution or form operations. SEO crawlers follow<a>tag links, soLinkis recommended for internal site navigation.
When Link Is Selected
May differ slightly from the actual interface.
May differ slightly from the actual interface.
Link URL: Set the destination URL. Use canonical URLs for pages you want to track.Link Target: Choose between same tab (_self) or new tab (_blank). New tab is recommended for external links.rel Attribute: Add attributes such asnoopener,noreferrer, ornofollowto control security and SEO behavior.
When
target="_blank"is set,rel="noopener"is automatically added as an internal security measure. You cannot manually removenoopener. If you want to prevent passing SEO value to external sites, addnofollow.
Link Title: Set a supplementary link description for accessibility and semantic reinforcement.
When Button Is Selected
May differ slightly from the actual interface.
Button Type: Choosebutton/submit/resetto define the behavior within a form.
submittriggers form submission. If used outside a form, selectbuttoninstead.resetclears all form input values, so use it cautiously to avoid accidental data loss. The default isbutton(no form submission).
Accessibility behavior:
When the Link URL is empty or set to#,role="button"is automatically added to the HTML output. This ensures screen readers correctly announce the element as a "button" when it does not function as a link.Hover text fallback:
If hover text (set in Text Animation settings) is not configured, the normal text will also be used during hover state.
Common Options
May differ slightly from the actual interface.
aria-label: A screen reader label. Set this when the visible button text does not clearly convey the action. Provides accurate guidance for screen reader users.Tracking ID: A tracking identifier used for event collection in GTM or other analytics tools.Button Location: A management label for the button's placement. Useful for identifying buttons during A/B testing with multiple CTAs.ID: A unique element ID. Used for targeting specific elements via CSS or JavaScript.
Tracking IDandButton Locationare output as HTMLdata-*attributes. They can be referenced by tag managers like GTM.IDmust be unique within the page. Assigning the same ID to multiple blocks may cause CSS or JavaScript to behave unexpectedly.