Landing Page

3 min read Updated

The Landing Page Addon shows a single page or post on its own screen, without your theme’s header, footer or sidebar. Build the content as usual, then style the screen around it with the Design settings.

View the Landing Page demo.

Requirements

Go to SiteOriginPremium Addons and activate Landing Page. The addon has no global settings. You turn it on for each page or post.

Make a Landing Page

  1. Edit the page or post. Pages, posts and most custom post types can be landing pages.
  2. Scroll to the SiteOrigin Premium box below the editor and open Landing Page.
  3. Turn on Enable Landing Page.
  4. Optional: open Design and change the style.
  5. Click Update or Publish.

When other Premium addons add settings to the SiteOrigin Premium box, each addon has its own tab.

What Visitors See

  • The content of the page or post, in a box on its own screen. The theme’s header, footer, sidebar and comments don’t show. The page title doesn’t show either, so add a heading to your content.
  • The browser tab title is the title of the page or post.
  • Your theme’s styles still load, so fonts and colors from the theme can apply to the content.

We recommend Page Builder for landing page content. At the moment, content made with the WordPress editor loses embeds that use frames, such as YouTube videos and Google Maps, and form fields, such as the fields of a contact form. Landing Page doesn’t support password-protected pages or posts.

Settings

Enable Landing Page
Shows this page or post as a landing page. Default: off.

Design

Open the Design section, then click a group to open it.

Body

Background Color
The color of the whole screen. Default: #ffffff.

Background Image
An image that covers the whole screen, behind the content box. Default: none.

Background image opacity
Shows when you select a background image. Values from 10 to 99 set the image opacity in percent, so the Background Color shows through. Default: 100. At the moment, 100 shows the image at 10% opacity. For a full-strength image, set 99.

Content Container

The content container is the box that holds your text or layout.

Margin
The space around the box: top, right, bottom and left. Default: 30px 0px 0px 0px.

Box Shadow
Turn on to add a shadow to the box. Default: off. When it is on, you can set:

  • Color: default rgba(0, 0, 0, 0.07).
  • Horizontal Offset: default 0.
  • Vertical Offset: default 2px.
  • Blur: default 12px.
  • Spread: default 0.

Border Radius
Rounds the corners of the box: top, right, bottom and left. Default: 16px on each corner.

Background
The background color of the box. Default: #ffffff.

Padding
The space inside the box: top, right, bottom and left. Default: 35px 40px 20px 40px.

Alignment
The position of the box on the screen: Left, Center or Right. Default: Center.

Width
The width of the box. On small screens, the box is never wider than the screen. Default: 820px.

Heading

These settings apply to all headings in the content.

Font
The font family. Default: Helvetica Neue.

Font Size
Default: 32px.

Color
Default: #131313.

Text

Font
The font family of the text. Default: Helvetica Neue.

Font Size
Default: 16px.

Color
Default: #1b1b1b.

Link Color
The color of links. Default: empty. At the moment, this setting has no effect, and links keep their normal color.

Link Hover Color
The color of links when the pointer is over them or they have focus. Default: empty.