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

1. Open the variation editor on the desired website,
2. Click Widgets in the toolbar on the right-hand side,
3. Enter Simple Pop-in in the search field,
4. 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

1. In the Layout tab, click Left:
   The pop-in displays the title on the left and the body text on the right.
2. Click the Content tab,

Content tab

Title

1. Click in the Title field,
   A formatting toolbar appears,
2. Enter “SPECIAL OFFER” and select the text,
3. Use the toolbar to make it bold,
4. Click the Link icon,
5. In the URL field, enter the URL of the page users who click on the button will be redirected to,
6. 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,
7. Click OK to close the hypertext link configuration window.

Content

1. Click in the Content field,
2. Enter the following text: “Request a demo and get a 25,000 unique tested visitors credit”,
3. Select “25,000 unique tested visitors” and make it bold.

Button

1. Enable the Add a button option,
2. Enter “I would like to see a demo” as the button text,
3. Enter the URL of the page users who click on the button will be redirected to,
4. Click Button text color and select a color from the palette or enter its hexadecimal value in the Hex field,
5. Click Button background color and apply the same steps again,
6. Leave the opacity at 100%,
7. Click the Style tab.
   
   

Style tab

Pop-in width

1. Select Custom,
2. Use the + and - buttons to set the value to 24%.

Border

1. Move the Border thickness cursor to 5 px,
2. Move the Border radius cursor to 20 px,
3. Click Border color and select a color from the palette or enter its hexadecimal value in the Hex field,
4. Leave the opacity at 100%.

Close button

1. Click Outside,
2. Click Close button color and select a color from the palette or enter its hexadecimal value in the Hex field,
3. Leave the opacity at 100%.

Animation

1. Select Fade In,
2. Click the Conditions tab.

Conditions tab

1. In the drop-down list, set the recurrence to “Every session”,
2. Leave the default value in the Triggers on drop-down list,
3. Click Save.

Related articles

Simple Pop-in widget