EverWeb gives you a few ways to show something when a visitor clicks:
| You want | Use |
|---|---|
| A box you design, such as an offer, a sign-up form, extra text or a video, to open when someone clicks a button | A Popup Window opened by an On Click Action |
| A box that opens on its own, after a few seconds or when someone scrolls | A Popup Window with a Popup trigger |
| A photo to open large when clicked | The Responsive Image Gallery or Image Gallery widget |
| Another page, a PDF or a video to open in a window over your page | A link with Behavior set to Open in Popup Window |
Popup Windows and On Click Actions need EverWeb 4.5 or later.
Open a Popup Window when someone clicks a button
- Open the page. To have the popup on every page, open your Master Page instead.
- Click Popup Window in the toolbar (or choose Insert > Popup Window > New Popup Window).
- Add your content: click the + button in the popup, or drag text, images and widgets into it. A Popup Window works like a Container.
- Name it: click the cog in the popup's own toolbar, choose Name…, type a name and press Return. You'll need the name in step 9.
- Go to Inspector > Widget Settings and set Popup trigger to Manual.
- Click the page outside the popup to finish editing it.
- Select the button, text or image visitors will click.
- Go to the Hyperlinks tab of the Inspector (the fifth icon) and open On Click Actions by clicking the small triangle.
- Set Action to Show and Element to your popup's name, then click Add.
- Click Preview and try it.
Each popup has a close button (an X in a circle) in its top right corner. Visitors can also click outside it to close it while Close when clicking outside popup is ticked. Want one button to open and close it? Use Toggle instead of Show.
To edit the popup again, choose Insert > Popup Window and pick it, or right-click an empty part of the page and choose Popup Windows.
A popup that opens on its own
Select the popup and choose a Popup trigger in Inspector > Widget Settings:
| Popup trigger | When it opens |
|---|---|
| Immediate | As soon as the page opens |
| Delay | After the Time delay trigger, in thousandths of a second (3000 is 3 seconds) |
| Scroll | When the visitor scrolls down by the Scroll trigger amount, in pixels |
| On Page Exit Intent | When the visitor looks like they're leaving the page |
| Manual | Only when someone clicks something with a Show or Toggle action |
In the same place, Position sets where it appears (such as Center or Bottom Right), and Background overlay color sets the shade behind it. Under Cookie Settings, type a Cookie name and a Cookie expiration (days) so a visitor who closes the popup doesn't see it again for that many days. With no cookie name, it opens on every visit.
Use these sparingly: a popup on a Master Page opens on every page that uses it. On a phone, a popup narrows to fit the screen.
Enlarge a photo when it's clicked
Gallery widgets open a photo large over your page (a "lightbox"), with arrows to move between photos:
- Responsive pages: drag the Responsive Image Gallery widget from the Widgets tab and add your photos. Click to Open SlideShow is on to start with. You can change the background behind the large photo with Slide Show Background Color, for example to white.
- Centered Layout pages: use the Image Gallery widget. Clicking a thumbnail opens the large photo, with zoom and full-screen buttons you can turn on or off in its Widget Settings.
For one photo on its own, put it in a gallery by itself, or make a Manual Popup Window with the large photo and give the small photo a Show action.
The Image Slider and Carousel widgets play photos on the page itself. See Add a slideshow to your website: Image Slider, Carousel, Slide Show Fill or a gallery.
Open a page, PDF or video in a popup
- Select the button, text or image.
- Go to the Hyperlinks tab and tick Enable as Hyperlink.
- Under Link To, choose One of My Pages, An External Page or A File, and pick what to open.
- Set Behavior to Open in Popup Window.
If you make pages that are only for opening in a popup, untick Include page in navigation menu in Inspector > Page Settings so they don't appear in your menu. For more on links, see How to link to another page, a website, an email address, a phone number, a PDF, or a section of a page.
"Read more" text
EverWeb 4.5 has no "Read more" control that expands text on the page, and no setting to keep an object hidden when the page first opens. You can get a similar result in other ways:
- Put a short introduction on the page, add a Read more button, and put the full text in a Manual Popup Window that the button opens.
- Link the button to a separate page with the full text.
- On a blog, the main page shows the start of each post and the post title opens the full post.
Related articles
- Add a slideshow to your website: Image Slider, Carousel, Slide Show Fill or a gallery
- How to link to another page, a website, an email address, a phone number, a PDF, or a section of a page
- Build a responsive page with Containers so it stacks neatly on a phone
- Put the same header, menu and footer on every page with a Master Page