Guides & DocsTemplates   Community   Information
Cargo
Basics       Overview Videos       Rates & Services       Managing your Sites      Editing & Publishing      Collaborating      Account Settings      Moving from Cargo 2 to 3     
 Site Building      Site and Page Layout       Pages and Sets      Text Styles       Adding Fonts       Pinning      Overlays      Linking       Tags      Images       Files      Columns      Galleries      Thumbnail Index       Marquee       Clock       Effects       Page Options       Commerce       Audio & Video       Backdrops       Layering Effects       Scroll Animation       Quick View       Mobile       Site Menu       Third-party embeds       CSS and HTML       Social Sharing & SEO       Adding Google Analytics       Browser Support  Domains      Buying a domain from Cargo       Domains purchased elsewhere      Using Subdomains      DNS Editing       Domain Configuration Service      Setup Email with a Domain

Overlays

Pages that are set to “Overlay” load above all other contents and can be linked-to from the Link menu. To use, right-click a page in the Pages menu and choose “Overlay.”

Use overlays for site menus, popup windows or information panels — generally, layering the contents of one page on top of another.







 Next, set up a link to it. Select text, an icon, or an image on a different page of your site, open the Link menu ⌘K, and choose your overlaid page from the “Link to Page” menu. When the link is clicked, the overlay loads on top of the current page without affecting it. Clicking the link again closes the overlay.

Unlike links to regular pages, a link to an overlaid page doesn’t show its URL in the browser’s address bar. You can still share an overlay’s URL: visiting it directly opens the overlay on top of the page beneath it.

Overlays can be layered on top of each other, with the most recently opened one on top. There is no limit to the number of overlaid pages you can create.

Right-clicking a page and choosing “Overlay” opens Overlay Settings, where you choose how the page opens and closes:

Opening options
  • Open on load
    The overlay opens when the site first loads. If the overlay is inside a Set, it opens when any page in that Set is visited.
  • Close other Overlays
    Opening this overlay closes any other open overlays.

Closing options
  • Close on clickout
    Clicking outside the overlay closes it.
  • Close on navigate
    Going to another page, or using the browser’s back and forward buttons, closes the overlay.
  • Close self
    The overlay closes by itself after the number of seconds set in “Delay”. This is useful for splash screens and announcements.
  • Close Overlay link
    Select text or an icon inside the overlay, open the Link menu, and choose “Close Overlay” from the “Navigate” menu. Use it to make a close button (e.g. “×”).
  • Esc
    Pressing Esc always closes the overlay on top.

Transitions
By default, an overlay simply appears. To animate it, choose a “Transition”: Fade, Glide, Slide, Wipe, Grow, Shrink or Rotate. Pick a “Variation” (1–3) to go from subtle to more pronounced, and click “Preview” to see it.

Click “Customize” to set the open and close transitions separately. You can adjust speed, easing, fade, slide, wipe, grow and rotate. Click “Reset” to go back to the preset. 
Tip: Overlays are a good way to make a “site menu”  — see this page for more info.

Tip: to make a persistent navigation menu that is visible alongside the other contents of a site, see Pinning.