Link Overlay

2 min read Updated

Link Overlay turns a whole Page Builder row, column or widget into one link. Visitors can click anywhere on it to open the address you set.

Requirements

Go to SiteOriginPremium Addons and activate Link Overlay.

The addon adds a Link Overlay group to the Page Builder style settings of rows, columns and widgets.

  • Row: open the row’s settings menu and choose Edit Row. The settings are in Row Styles.
  • Column: in the Edit Row dialog, click a column in the row preview. The settings are in the column’s styles, for example Column 2 Styles.
  • Widget: open the widget to edit it. The settings are in Widget Styles.

Open the Link Overlay group and enter a URL.

The Link Overlay group in Row Styles with a URL and an accessibility label

URL
The address the element links to, for example https://siteorigin.com. Leave it empty for no link.

Open link in new window
Opens the link in a new tab or window. Default: off.

Accessibility Label
Describe the link for screen readers, for example “View the Harrogate Bakery project”. The overlay has no visible text. Without a label, screen readers announce a link with no name.

How the Overlay Works

The addon places an invisible link over the whole row, column or widget. The link sits on top of the content. So links, buttons and form fields inside the element can’t be clicked, and visitors can’t select its text. Use Link Overlay on elements that don’t hold other links, such as a card with an image, a heading and a short text.

Advanced Customizations

The overlay link has the CSS class so-premium-link-overlay. For example, this CSS adds a light hover effect. Add it in AppearanceCustom CSS with SiteOrigin CSS, or in your theme’s custom CSS.

.so-premium-link-overlay:hover {
	background: rgba(255, 255, 255, 0.1);
}