How can I create a pop-up window with specific dimensions, containing an H1/H2 title, paragraph text with external links, and a close button in Webflow?
TL;DR
- Add a fixed-position wrapper div with a semi-transparent background and centered flex layout.
- Insert a styled box inside it with title, text, external links, and close button.
- Hide the wrapper by default and create open/close interactions using Webflow’s interaction panel.
To create a custom pop-up (modal) in Webflow with a title, paragraph, external links, and a close button, you’ll build and style its elements, then use interactions to control when it appears/disappears.
1. Create the Pop-Up Structure
- Add a new Div Block to your page and give it a class like
Popup Wrapper. - Set its Position to Fixed, Top: 0, Left: 0, and Width/Height: 100%.
- Set Display: Flex, Justify: Center, Align: Center, and a semi-transparent background color (e.g., rgba(0,0,0,0.6)).
2. Style the Pop-Up Box
- Inside
Popup Wrapper, add another Div Block calledPopup Box. - Set its fixed dimensions (e.g., Width: 500px, Min-Height: 300px).
- Style it with a white background, padding, border-radius, and box-shadow for better visibility.
3. Add Content to the Pop-Up
- Within
Popup Box, add: - An H1 or H2 heading for the title.
- A Paragraph block containing your text and external links (select the text, click the link icon, and choose "URL" to add external links).
- A Button or Text Link with the label Close, and give it a class like
Close Button.
4. Initially Hide the Pop-Up
- Select
Popup Wrapperand go to the Style panel. - Set its Display: None so it doesn’t appear on page load.
5. Create an Open Pop-Up Trigger
- Add a Button or Link anywhere on your page to trigger the pop-up.
- Give it a clear ID or class, like
Open Popup Button.
6. Add Interactions
- Go to the Interactions panel (lightning icon).
- Select the trigger button, click + Element Trigger, choose Mouse Click (Tap).
- On First Click, choose Show/Hide, then target
Popup Wrapper, set Display: Flex. - Select the Close Button, add a new Mouse Click interaction.
- On First Click, choose Show/Hide, and set
Popup Wrapperback to Display: None.
Summary
To create a custom pop-up in Webflow: design a wrapper div with fixed positioning and semi-transparent background, insert a styled content box with title, text, and close button, hide the wrapper by default, and use Webflow interactions to toggle visibility. This allows full control over size, design, and content while keeping it manageable.