Pages & Special Pages - Customizer

The OceanWP Customizer Pages & Special Pages panel enables you to apply global pages settings (layout, content padding, Page Title etc), as well apply settings for special pages like the 404 Page and the Search Results Page.

Available Pages & Special Pages options include:

• Page Layout settings,
• Content Padding (px) settings,
• Additional Layout Settings panel,
• Responsive Page Settings panel,
• Page Title section,
  • Page Title panel,
  • Page Breadcrumbs panel.
• Special Pages section.
  • Search Results Page panel,
  • 404 Error Page panel.

Page Layout

The Page Layout toggle panel contains options that enable you to choose the main layout style for your website pages (WP Dashboard > Pages).

You can choose between:

• Right Sidebar: the sidebar displayed on the right, content displayed on the left.
• Left Sidebar: the sidebar displayed on the left, content displayed on the right,
• Full Width: no sidebars displayed. The website content displayed within the main container width you assigned in Site Style & Settings > Site Layout: Main Container Width option.
• 100% Full Width: no sidebars displayed. The content goes from edge to edge of the screen.
• Both Sidebars: left sidebar on the left, right sidebar on the right, content in the middle.

To select a page layout, simply click on the arrow button to expand the panel and select the correct thumbnail for the page layout on your website:

Content Padding (px)

The Content Padding option enables you to assign padding (space) before (top) and after (bottom) main page content.

This option is always measured in pixels (px).

Additional Layout Settings

The Additional Layout Settings panel contains options for the Both Sidebars page layout.

If you're using the Both Sidebars page layout, visit this panel for more adjustments.

The Additional Layout Settings panel includes the following options:

• Both Sidebars: Content Order Style,
• Both Sidebars: Content Width,
• Both Sidebars: Each Sidebar Width.

Both Sidebars: Content Order Style

The Both Sidebars: Content Order Style option enables you to choose the way your content is displayed when using the Both Sidebar page layout.

You can choose between the following options:

• Sidebar / Content / Sidebar (default option),
• Sidebar / Sidebar / Content, and
• Content / Sidebar / Sidebar.

Both Sidebars: Content Width

The Both Sidebars: Content Width option enables you to determine the width of the main page content.

Though you're able to pick any measurement unit you like, we recommend to keep it in percentage (%).

Both Sidebars: Each Sidebar Width

The Both Sidebars: Sidebars Width option enables you to determine the width of the sidebar content area.

Though you're able to pick any measurement unit you like, we recommend to keep it in percentage (%).

Responsive Page Settings

The Responsive Page Settings panel contains additional options for any of the single sidebar page layouts: Left Sidebar or Right Sidebar.

The Responsive Page Settings enable you to determine the way your page content is going to be displayed on tablet and mobile devices, ie. you can choose whether to display the main content or the sidebar content first.

The Responsive Page Settings enable you to choose between:

1. Content / Sidebar: display main content first, then display sidebar content.
2. Sidebar / Content: display sidebar content first, then display main content.

Page Title

The Page Title section holds options related to the Page Title area on your website, ie. content displayed between the website's header and main content and usually holds the information like the title and breadcrumbs.

The Page Title section includes the following panels:

1. Page Title,
2. Page Breadcrumbs.

Page Title

The Page Title panel enables you to enable or disable the Page Title area on your website, apply a specific style and more.

The Page Title panel includes the following options:

• Enable Page Title,
• Visibility,
• Heading Tag (Content Settings section),
• Style panel (Content Settings section),
• Padding (px) (Content Settings section),
• Additional Title Settings panel (Content Settings section),
• Background Color (Typography and Colors section),
• Text Color (Typography and Colors section),
• Title Typography (Typography and Colors section),
• Title Color (Typography and Colors section),
• Subtitle Typography (Typography and Colors section),
• Subtitle Color (Typography and Colors section).

Enable Page Title

The Enable Page Title option enables you to determine whether or not the Page Title area will be displayed on your website.

Visibility

The Visibility option enables you to choose devices that will display the Page Title area:

• Show on All Devices: display on desktop, tablet and mobile.
• Hide on Tablet: display on desktop and mobile, but hide on tablet.
• Hide on Mobile: display on desktop and tablet, but hide on mobile.
• Hide on Tablet and Mobile: display on desktop only.

Heading Tag

The Heading Tag enables you to assign the correct H tag to the Title of the page: H1, H2, H3, H4, H5, H6, div, span, p.

Style

The Style panel enables you to choose the style of the Page Title area.

To select a Page Title style, simply click on the arrow button to expand the panel and select the correct thumbnail based on the style you want to use:

• Default: title on the left, breadcrumbs on the right.
• Centered: all content in the center.
• Centered Minimal: almost exactly the same as Centered, but less spacing (padding) before and after the title, and the default background color is white.
• Background Image: use an image instead of a solid color for the background.

Padding (px)

The Padding (px) option enables you to assign padding (spacing) values around the content inside the Page Title area.

This option is always measured in pixels (px).

Additional Title Settings

Additional Title Settings panel holds additional styling options for the Background Image page title style.

The Additional Title Settings panel contains the following options:

• Title / Breadcrumbs Position: Left, Center, Right. Choose where should the content be displayed.
• Image: select the image you want to use for the background.

• Height: select the height of the entire Page Title area.

• Position: position the background image display.
• Repeat: choose the repetition pattern for the background image.
• Attachment: Initial, Scroll, Fixed. In this case, the Initial is the same as Scroll - no specific animations. The Fixed option will give you an animation like the Page Title background image holds in place while all the content goes above it while scrolling down. This animation is supported only by desktop browsers.
• Size: apply the size of the background image.
• Overlay Opacity: choose the level of opacity for the overlay color - color displayed over the background image.
• Overlay Color: select the color for the overlay effect.

Background Color

The Background Color option enables you to assign a color the background of the Page Title area.

Text Color

The Text Color option enables you to assign a color to all textual elements in the Page Title area.

Title Typography

The Title Typography option enables you to apply the main title typography settings in the Page Title area.

Title Color

The Title Color option enables to assign a color to the main title in the Page Title area.

Subtitle Typography

The Subtitle Typography option enables you to apply the subtitle typography settings in the Page Title area.

Subtitle Color

The Subtitle Color option enables to assign a color to the subtitle in the Page Title area.

Page Breadcrumbs

The Page Breadcrumbs panel enables you to configure breadcrumbs displayed in the Page Title area on your website.

The Page Breadcrumbs panel includes the following options:

• Enable Breadcrumbs,
• Breadcrumbs Source,
• Position,
• Typography and Colors section:
  • Breadcrumbs typography,
  • Text color,
  • Links color,
  • Separator color,
• Additional Settings section:
  • Breadcrumbs Homepage Settings panel,
  • Breadcrumbs Trail Settings panel,
  • Breadcrumbs Taxonomy Settings panel,
  • Breadcrumbs Custom Text panel.

Enable Breadcrumbs

The Enable Breadcrumbs option enables you to choose whether or not you want to display breadcrumbs in the Page Title area.

Breadcrumbs Source

The Breadcrumbs Source option enables you to choose the source for breadcrumb settings.

OceanWP uses its own breadcrumbs feature by default.

If you're using an SEO plugin that offers specific breadcrumbs option, these choices may appear in the Breadcrumbs Source dropdown. Not all SEO plugins include breadcrumbs, neither specific breadcrumb options.

OceanWP offers integration with the following SEO plugins regarding the Breadcrumbs Source:

• Rank Math,
• SEOpress,
• Yoast.

Position

The Position option enables you to determine the display position of breadcrumbs in the Page Title area.

The available options may vary depending on the Page Title style.

Breadcrumbs typography

The Breadcrumbs typography option enables you to apply typography settings for breadcrumbs in the Page Title area.

Text color

The Text color option enables you to apply a color to all textual parts of your breadcrumbs. Note that some portions of your breadcrumbs will be displayed as links, and some as regular text (no links), depending on your breadcrumb settings.

Links color

The Links color option enables you to apply a color to all links in your breadcrumbs, including regular and hover color.

Separator color

The Separator color option enables you to apply a color to the separator (sign) between breadcrumb trails items.

Breadcrumbs Homepage Settings

The Breadcrumbs Homepage Settings panel holds breadcrumbs option that are specific to the assigned Homepage appearance in the breadcrumbs (see Customize > Homepage Settings or WP Dashboard, Settings > Reading to assign a Homepage).

The Breadcrumbs Homepage Settings include the following options:

• Display Home as Icon / Text:
  • Icon (default option), an icon will be displayed.
  • Text, display text instead of an icon.
• Homepage Custom Text: add what text to display instead of the icon (see previous option). Default text is: home. Live Customizer preview may not be available for the text change option, so make sure to Publish changes.

Breadcrumbs Trail Settings

The Breadcrumbs Trail Settings panel contains options that enable you to control separators and the display of the breadcrumbs item title.

The Breadcrumbs Trail Settings panel includes the following options:

• Separator: add own sign that will be displayed between different portions of the breadcrumbs. Live Customizer preview may not be available for the separator option, so make sure to Publish changes and reload the website.

• Display Item Title: choose whether the breadcrumbs should display the Item Title in its trail, ie the name of the current page.

Breadcrumbs Taxonomy Settings

The Breadcrumbs Taxonomy Settings panel contains options that enable you to choose what breadcrumb items to display for specific website items, such as blog posts.

By default, the Breadcrumbs Taxonomy Settings panel will display taxonomy options only for blog posts (WP Dashboard, Posts). Additional options will appear based on whether you have WooCommerce or Easy Digital Downloads (Products Taxonomy) or Ocean Portfolio plugins installed (Portfolio Taxonomy).

Breadcrumbs Custom Text

The Breadcrumbs Custom Text panel includes breadcrumbs option for special pages, such as the 404 Error page and the Search Results Page.

You can add custom texts for:

• Custom Text: 404 Not Found,
• Custom Text: Search results for.

Special Pages

The Special Pages sections contains panels with features that enable you to customize and personalize the Search Results Page and the 404 Error Page.

Search Results Page

The Search Results Page panel contains option that enable you to personalize the Search Results Page.

The Search Results Page appears when someone performs a search on your website, looking for a specific term. This also depends whether or not you're displaying search options on your website.

The Search Results Page includes the following options:

• Layout,
• Sidebar Layout Settings panel,
• Select Source for SERP,
• Logo.

Layout

The Layout option enables you to apply an independent layout for the Search Results Page:

• Right Sidebar,
• Left Sidebar,
• Full Width,
• 100% Full Width, and
• Both Sidebars.

Toggle the icon for the Layout panel, and select the thumbnail of the page layout you want to apply to the Search Results Page.

Sidebar Layout Settings

The Sidebar Layout Settings panel contains additional options specific only to the layouts containing a sidebar: Right Sidebar, Left Sidebar and Both Sidebars.

The Sidebar Layout Settings contains the following options:

• Left Sidebar and Right Sidebar layouts:
  • Enable Custom Sidebar: decide whether or not the Search Results Page will display dedicated sidebar content.
  • Mobile Sidebar Order: choose in which order will the content be displayed on mobile devices: main content first or sidebar content first.
• Both Sidebars layout:
  • Enable Custom Sidebar: decide whether or not the Search Results Page will display dedicated sidebar content.
  • Both Sidebars: Content Order Style: functions the same as any Both Sidebars: Content Order Style.
  • Both Sidebars: Content Width: functions the same as any Both Sidebars: Content Width option.
  • Both Sidebars: Each Sidebar Width: functions the same as any Both Sidebars: Each Sidebar Width option.

Select Source for SERP

The Select Source for SERP option enables you to choose the search source. For example, if a user performs a search on your website, should the website take into account all your website content, only blog posts, only products, etc.

Available options for the Select Source for SERP depend on your website's content. These options may include but are not limited to:

• All Post Types: default option, search through all website content.
• Posts: search only through blog posts (WP Dashboard, Posts).
• Pages: search only through pages (WP Dashboard, Pages).
• Products: search only through products (if WooCommerce or Easy Digital Download installed).
• Portfolio: search only through portfolio items (if Ocean Portfolio installed).

Logo

The Logo option enables you to assign a dedicated logo for the Search Results Page only, which is going to be displayed above the Search Results Content.

This is optional.

If you do not assign a dedicated logo, then nothing is displayed.

404 Error Page

The 404 Error Page panel contains option that enable you to personalize the 404 Error page.

The 404 Error page appears when someone wants to access content on your website that doesn't exist. For example, incorrect page URLs.

The 404 Error Page includes the following options:

• Layout,
• Logo,
• Custom 404,
• Select Template.

Layout

The Layout option enables you to apply an independent layout for the 404 Error Page:

• Right Sidebar,
• Left Sidebar,
• Full Width,
• 100% Full Width, and
• Both Sidebars.

Toggle the icon for the Layout panel, and select the thumbnail of the page layout you want to apply to the 404 Error Page.

Logo

The Logo option enables you to assign a dedicated logo for the 404 Error Page only, which is going to be displayed above the 404 Error Page content.

This is optional.

If you do not assign a dedicated logo, then nothing is displayed.

Custom 404

The Custom 404 option enables you to choose whether or not you want to display the usual website elements:

• On: the usual website elements are not going to be displayed (header, menu, page title, footer, etc). Instead, only the main content will be displayed. You can use this feature in combination with the Select Template option.
• Off: default. All website elements are displayed as usual.

Select Template

The Select Template option enables you to choose a custom template you created via WP Dashboard, OceanWP > My Library, which then you can use to replace the default 404 Error Page content.

You can use this option in combination with the Custom 404 feature.

That's it!

Enjoy building your WordPress website with OceanWP!