CTA Button

CTA Button

Welcome to the “CTA Button” documentation. Looking to integrate a CTA button into your website? Our block empowers you to boost user engagement and prompt specific actions, transforming visitors into active participants or customers. In this guide, we'll show you how to use the editor to customize your CTA button block.

Step 1 : Open The Editor
Step2 : Configure Settings
Step 3 : Choose Colors
Step 4 : Preview




Step 1: Open the Editor

1. Go to  CTA Button template.
2. Click on "Edit" after choosing your template.

class="" alt="">



Step 2: Configure settings

In this panel, you'll handle the settings:
1. Start in the "Action" section where you can choose the action to apply on your button


  • Choose "Link" option to redirect users to a specific link from your choice.

    • class="flex justify-center items-start h-auto w-80" alt="">

  • Select the "Click" option, then enter the XPath of the element you wish to click after the user clicks on the button block.

    • class="flex justify-center items-start h-auto w-80" alt="">

  •  Trigger any key press by choosing the "Press" option, then enter the XPath of the element you wish to click after the user press the typed key.

    • class="flex justify-center items-start h-auto w-80" alt="">

    2. Move on to the "View" section where you can choose the button's display style either as a circle or standard. Select the button type, adjust its size and roundness. You also have the option to show or hide the label.


    class="flex justify-center items-start h-auto w-80" alt="">



  •  Additionally, customize the button's style, position, adjust the border, select an animation, and set the duration for how many seconds you want the animation to repeat.


    • class="flex justify-center items-start h-auto w-80" alt="">



  •  Finally, fine-tune the button's margin, and switch the cloasable option to make the button closable.

    • class="flex justify-center items-start h-auto w-80" alt="">




    3. Next, you can opt for each left and right icons.


    class="flex justify-center items-start h-auto w-80" alt="">




    Step 3: Choose Colors


    Within this panel, you can select colors that match your website's design.

    class="flex justify-center items-start h-auto w-80" alt="">


            

    Step 4 : Preview


    Lastly, you can click on “Preview” to see how your CTA button block looks on both desktop and mobile devices. After this, you can proceed to the next step.

    class="flex justify-center items-start h-auto w-auto" alt="">


    Find element Xpath 


           If you have an element inside your website or you are using different block inside your page, you can extract the XPATH using a simple method.

    1. "Right-click on the element inside your page, then click "Inspect" or "Inspect element"

    class="flex justify-center items-start h-auto w-auto" alt="">

    2. Go to the element highlighted and "Right-Click" again, then go "Copy" > "Copy Xpath"

    Copy XPATH