Direct to Links, Sections, Pop-ups
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
In this article, you will learn how to direct a to a link, a section, an email address and/or a phone number. This element is for the customers to quickly access the other links, sections, send an email or make a phone call to you without leaving the page.
Customize your pages with PageFly for Free
Identify Clickable Elements: Identify the elements on your page (such as buttons, icons, or blocks) that you want to make clickable and direct to specific actions.
Destination URLs or Sections: Prepare the URLs of external links or identify the internal sections of the page you want to scroll to.
This video tutorial will give you more visualize about setting up Click Action:
There are 5 actions you can assign to each element. However, if the element is an image, there's an additional action: Open lightbox. Below are detailed instructions for each type of action:
1. Direct To Another Link
Step 1: After choosing the element, go to the General tab > Action > Click Action > Choose "Go to URL" from the dropdown menu.
Step 2: Click "Select URL" > Paste your URL in the box and enable "Open in new tab" if needed.
Alternatively, if you want to link to any collections, products, pages, or blog posts in your store, select from the dropdown menu and choose the specific one you want to link to.
In the example below, you can link the selected element to a product by selecting “Link to Products”, select desired product, then click “Select”. The URL will then be updated accordingly.
Step 3: Hit “Select” to apply the link.
2. Open Pop-Up Content
This click action helps you to open a pop-up content window of a Youtube video or other store content (such as a collection, a product, a blog post).
Step 1: Select the element, go to the General tab > Action > Click Action > Choose "Open Pop-up" from the dropdown menu.
Step 2: Customize Pop-up width and height (optional).
Step 3: Choose the Pop-up content in the drop-down menu, such as Youtube Video or Store Content then insert the URL and modify other settings to the respective content.
3. Direct To The Internal Section Of The Page
Step 1: Name The Section
If you want to direct the element to an internal section of the page, you need to name the section first.
Step 2: Direct To An Internal Section Of The Page
Select the element, go to the General tab > Action > Click Action > Choose "Scroll to section" from the dropdown menu.
Choose the section in the Scroll to section drop-down box.
(Optional) Set “Top Offset”: Spacing between the top screen edge of the browser and the destination section
This video will give you a better demonstration of how to link an element to a specific section of an existing page:
This is how Top Offset works on page:
4. Link To An Email Address
Step 1: Select the element, go to the General tab > Action > Click Action > Choose "Send Email" from the dropdown menu. Then, select “Compose Email”
Step 2: Insert the email details (including email address, email subject, email content).
Step 3: Click “Done” to apply the changes
5. Link To A Phone Number
Step 1: Select the element, go to the General tab > Action > Click Action > Choose "Call Number" from the dropdown menu.
Step 2: Enter the phone number in the box.
6. Open LightBox (For Image Elements Only)
Specially customized for Image element, you have one more choice for image Click Action, which is Lightbox. This action allows users to click on an image and see a full-size image pop-up from the original.
Step 1: Select the image element, then go to the General tab > Action > Click Action > Choose “Open lightbox”
Step 2: Click Save & Publish. Then check the result on your Live page.
Service-Based Businesses: Provide quick access to appointment scheduling, inquiry forms, or resource downloads to streamline customer interactions.
Event Websites: Enable attendees to effortlessly register for events, explore agendas, or contact organizers for inquiries.
Is it possible to add additional interactive features to clickable elements?
Yes, you can enhance the interactivity of clickable elements by incorporating hover effects, animations, or tooltips to provide additional context or visual cues to users.
Can I customize the appearance of clickable elements?
Yes, you can customize the appearance of buttons, icons, or blocks to match your website's design aesthetics.
Identify which elements you want to apply click actions to. These can include a button, an icon or a block. Check the to make sure you have the correct element.
All your sections in the page editor are automatically named as ‘Section’, so in order to choose the right section, it is suggested to to categorize it clearly.
You can change your section name is by using the setting:
Upload a PDF file: You can upload a PDF file to a button for customers to download it. Check for more details.
