Clickable phone links and mailto links allow users to easily contact you by clicking on a phone number or email address. You can set these up using Elementor widgets like the Text Editor, Heading, or Button widget.
Creating a Clickable Phone Link
Select a Widget:
- Drag and drop a Text Editor, Heading, or Button widget onto the page.
Enter the Phone Number:
- For the Text Editor or Heading widget:
- Type the phone number (e.g.,
+1 123-456-7890) in the text area.
- Highlight the text, then click the Link Icon in the toolbar.
- In the URL field, type
tel:followed by the phone number (e.g.,tel:+11234567890).
- For the Button widget:
- Under the Content tab, set the button text (e.g., “Call Us”).
- In the Link field, type
tel:+11234567890.
Save Changes:
- Click the Publish button to save your changes.
When users click the link, their device will initiate a phone call.
Creating a Mailto Link
Select a Widget:
- Drag and drop a Text Editor, Heading, or Button widget onto the page.
Enter the Email Address:
- For the Text Editor or Heading widget:
- Type the email address (e.g.,
contact@example.com) in the text area.
- Highlight the text, then click the Link Icon in the toolbar.
- In the URL field, type
mailto:followed by the email address (e.g.,mailto:contact@example.com).
- For the Button widget:
- Under the Content tab, set the button text (e.g., “Email Us”).
- In the Link field, type
mailto:contact@example.com.
Save Changes:
- Click the Update button to save your changes.
When users click the link, their email client will open with the recipient email pre-filled.
Additional Notes
- Testing: Ensure clickable links work properly by testing them on different devices and browsers.
- Custom Subject Line: You can predefine a subject line for mailto links by appending
?subject=to the email address, e.g.,mailto:contact@example.com?subject=Inquiry. - Multiple Recipients: To add more recipients, separate email addresses with commas, e.g.,
mailto:contact@example.com,info@example.com.
