How to create 3 popup styles
Looking for some inspiration and direction to get you started? Try one of these step-by-step guides!
On this page
- Logo at the top with a supporting image at the bottom
- Supporting image on the side
- Logo at the top and a background image
Create a popup with your logo at the top and an image at the bottom.
1. Open the Seguno Popups app and click “Create popup” in the top right. Choose the template that matches your goal. For this example, the first suggested template is a great starting point. In the modal, give your popup a title and click "Create popup."
2. Add an Image section, select an image, and add or select your logo. We recommend using a PNG format of your logo with a transparent background.
3. Drag the Image section to the top of the Section palette and adjust your logo width to fit. Don’t forget to add alt text.
4. Add another Image section and add or select your desired image. For this example, we used a high-quality horizontal product image with a transparent background. (For reference, this image size ratio is 10:4).
5. Freely customize the text, colors, sections, and steps based on your goal and brand. For this example, we’ve customized the copy, fonts, form button, and background color for a bold, playful look. Make sure to keep the style consistent across steps.
6. Customize the rest of your popup settings (such as Animation, Overlay, and Position) as much as you like. Set up triggers and tags for your popup and toggle on to activate. 🙌
Create a popup with an image on the side.
1. Open the Seguno Popups app and click “Create popup” in the top right. Choose the template that matches your goal. For this example, the suggested template under "I want to grow my list by asking visitors for their phone number" is a great starting point. In the modal, give your popup a title and click "Create popup."
2. Under Theme Settings, select a Background image, then add or select your desired image. Make sure to use a high-quality image (one that's designed at a larger size than its intended use). For reference, this example image is 1200 x 1200px.
3. Next, adjust the settings to create your desired layout. Background location, Background size, Horizontal position, and Vertical position allow you to change the way the background image is displayed inside the popup. Width and Height change the size of the popup itself.
For this example, we chose Background location: left, Background size: 40%, Horizontal position: 100%, Width: 640px, and Custom Height: 460px.
Note
Background images set on the left or right in Theme settings will automatically stack on mobile, so horizontal images will work best across devices. Prefer to use an image that's more square or vertical? Simply check the "Hide background on mobile" box to keep your visitors' mobile experience streamlined.
4. Freely customize the text, colors, sections, and steps based on your goal and brand. For this example, we’ve customized the copy and fonts, added Email content to the form, and modified the form settings for a modern look. 
5. To keep the style consistent, adjust the outermost section padding on subsequent steps. The amount of padding you need will vary depending on the sections and content you use. To access individual padding, open a section, click Show advanced styles, then click Change individual padding.
For this example, where we removed some text and added a button, we adjusted the Top padding on our first section to 200px and the bottom padding on our last section to 185px. 
6. Customize the rest of your popup settings (such as Animation, Overlay, and Position) as much as you like. Set up triggers and tags for your popup and toggle on to activate. 🙌
Create a popup with your logo at the top and an image in the background.
1. Open the Seguno Popups app and click “Create popup” in the top right. Choose the template that matches your goal. For this example, the first suggested template is a great starting point. In the modal, give your popup a title and click "Create popup."
2. Under Theme Settings, select a Background image, then add or select your desired image. Make sure to use a high-quality image (one that's designed at a larger size than its intended use).
If you don't have an image ready to use, you can easily design with Canva or access free stock photography images from Burst without leaving the editor. For this example, we're choosing a beautiful image from Burst's "Staff Favorites" category under Free images.
3. Add an Image section, select an image, and add or select your logo. We recommend using a PNG format of your logo with a transparent background.
4. Drag the Image section to the top of the Section palette and adjust your logo width to fit. Don’t forget to add alt text.
5. Freely customize the text, colors, sections, and steps based on your goal and brand. For this example, we’ve customized the copy and fonts, added Phone content to the form, and modified the form settings for a fresh look.
5. You can override the background image on subsequent steps by selecting a section background color. To access the section background color, open a section, click Show advanced styles, then click to select your color.
6. Customize the rest of your popup settings (such as Animation, Overlay, and Position) as much as you like. Set up triggers and tags for your popup and toggle on to activate. 🙌
