In this example, we will detail the steps required to create the following pop-in:
This pop-in features the following elements:
- A clickable title that redirects visitors to a web page,
- A body text,
- A clickable button with personalized colors,
- A border with a personalized color,
- A personalized close button.
Accessing the Simple Pop-in widget
- Open the variation editor on the desired website,
- Click Widgets in the toolbar on the right-hand side,
- Enter Simple Pop-in in the search field,
- Click the Simple Pop-in card:
The configuration form is displayed and a pop-in featuring temporary text appears.
You can now start configuring your pop-in. The Layout tab is displayed by default.
Layout tab
- In the Layout tab, click Left:
The pop-in displays the title on the left and the body text on the right. - Click the Content tab,
Content tab
Title
- Click in the Title field,
A formatting toolbar appears, - Enter “SPECIAL OFFER” and select the text,
- Use the toolbar to make it bold,
- Click the Link icon,
- In the URL field, enter the URL of the page users who click on the button will be redirected to,
- In the Target tab, select “New Window” from the drop-down list to open the page in a new window when a user clicks the title,
- Click OK to close the hypertext link configuration window.
Content
- Click in the Content field,
- Enter the following text: “Request a demo and get a 25,000 unique tested visitors credit”,
- Select “25,000 unique tested visitors” and make it bold.
Button
- Enable the Add a button option,
- Enter “I would like to see a demo” as the button text,
- Enter the URL of the page users who click on the button will be redirected to,
- Click Button text color and select a color from the palette or enter its hexadecimal value in the Hex field,
- Click Button background color and apply the same steps again,
- Leave the opacity at 100%,
- Click the Style tab.
Style tab
Pop-in width
- Select Custom,
- Use the + and - buttons to set the value to 24%.
Border
- Move the Border thickness cursor to 5 px,
- Move the Border radius cursor to 20 px,
- Click Border color and select a color from the palette or enter its hexadecimal value in the Hex field,
- Leave the opacity at 100%.
Close button
- Click Outside,
- Click Close button color and select a color from the palette or enter its hexadecimal value in the Hex field,
- Leave the opacity at 100%.
Animation
- Select Fade In,
- Click the Conditions tab.
Conditions tab
- In the drop-down list, set the recurrence to “Every session”,
- Leave the default value in the Triggers on drop-down list,
- Click Save.
Comments
0 comments
Please sign in to leave a comment.