Blog - Customizer

The OceanWP Customizer Blog panel enables you to enable, style and personalize the blog post archives and single blog post pages on your website.

Available Blog options include:

• Blog Archives panel,
• Single Post panel.

Blog Archives

The Blog Archives panel enables you to style and customize the main blog posts page, as well as post archives (category and tag), by applying specific styling, using the loop content builder and more.

Available Blog Archives options include:

• Archives Layout panel,
• Layout Settings panel,
• Responsive Settings panel,
• Blog Style panel (Blog Style section),
• Blog Style Settings panel (Blog Style section),
• Heading Tag (Blog Archives Content section),
• Content Builder panel (Blog Archives Content section),
• Excerpt & Pagination panel (Additional Blog Options section),
• Blog Image Settings panel (Additional Blog Options section),
• Typography and Colors panel (Typography and Colors section).

Archives Layout

The Archives Layout toggle panel enables you to choose the general layout for the main blog page, as well as all blog archives (categories and tags).

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:

Layout Settings

The Layout Settings panel contains additional layout settings for the Both Sidebars layout.

The 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.

Both Sidebars: Each Sidebar Width

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

Responsive Settings

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

The Responsive Settings enable you to determine the way your blog archives 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.

Blog Style

The Blog Style toggle panel enables you to apply the main style (appearance) of blog posts on blog archive pages.

You can choose between 3 available styles:

1. Large Image,

• Grid, and

• Thumbnail.

Select the image for the style you want to apply.

Blog Style Settings

The Blog Style Settings panel contains settings, depending on your Blog Style selection.

Blog Style Settings are available for the:

• Grid, and
• Thumbnail styles.

Grid Blog Style

Available Blog Style Settings for the Grid Blog Style include:

• Image Size: determines the size of the featured image on blog archives. Available options include: thumbnail, medium, medium large and large. These dimensions depend on your Media Settings (WP Dashboard, Settings > Media). We recommend using the Medium Large option, due to image responsiveness for all devices.
• Grid Columns: lets you determine the number of columns you want to display on each device.
• Grid Style: you can choose between Fit Rows and Masonry styles.

Thumbnail Blog Style

Available Blog Style Settings for the Thumbnail Blog Style include:

• Image Position: you can choose between Left and Right. Enables you to choose whether to display the image on the left or the right side.

• Vertical Position: you can choose between Top, Center and Bottom. This option enables you to choose whether to display the content at the top, center (middle) or the bottom of the container. The container height is usually dictated by your image.

Heading Tag

The Heading Tag enables you to assign the correct H tag to each of the blog post titles displayed on blog archive pages: H1, H2, H3, H4, H5, H6, div, span, p.

Content Builder

The Content Builder is available for the Large Image and Grid blog styles.

This feature enables you to determine which elements are going to be displayed in a blog post card on a blog archive pages, as well as the order of elements.

Available Content Builder options include:

• Main Content Elements,
• Meta Section Elements, and
• Meta Separator.

Main Content Elements

The Main Content Elements content builder enables you to design the looks of the blog posts cards appearing on blog archive pages:

• Featured Image: a blog post's featured image.

• Title: a blog post's title.

• Meta: a blog post's meta data (author, date, modified, date, etc.)

• Content: a blog post's excerpt or full content.

• Read More: the continue reading button.

Meta Section Elements

The Meta Section Elements content builder enables you to design the looks of the blog post meta data appearing on blog archive pages, and is related to the Meta element of the Main Content Elements content builder:

• Author: display the name of the blog post author in the meta data area.
• Date: display the blog post's published date in the meta data area.
• Categories: display categories the blog post is linked to.
• Comments: display the comments number for the blog post.
• Modified Date: display the date the blog post has been modified.
• Reading Time: display the estimated reading time.

Meta Separator

The Meta Separator feature enables you to choose a sign which separates the meta data elements in the Meta section:

• Default: meta data separated with a dash ( - ).
• Modern: meta data separated with a vertical line ( | )
• Stylish: meta data separated with two forward slashes ( // )
• None: no separator, only space between meta data.

Excerpt & Pagination

The Excerpt & Pagination panel enables you to control the length of the excerpt (content) which appears on blog archive pages, as well as choose the pagination style:

• Excerpt Length,
• Blog Archives Pagination Style.

Excerpt Length

The Excerpt Length option enables you to choose the number of words you want to display in the content area on blog archive pages.

To adjust the number of words, use the slider or enter the number manually.

Blog Archives Pagination Style

The Blog Archives Pagination Style enables you to choose how your blog archive pages are going to be paginated:

• Default: displays page numbers numbers (1, 2, 3, .... ). Adjust and style this pagination via Customize > Site Style & Settings > Site Pagination.
• Infinite Scroll: this option refreshes and loads more content to display, until the end of the content has been reached.
• Next / Prev: this option displays the Newer Posts (next page) and Older Posts (Previous page) navigation.

Infinite Scroll Settings

The Infinite Scroll Settings panel contains styling options for the Infinite Scroll blog archives pagination style:

• Spinners Color: adjust the number of animated spinners which appear when more content (next page) is loading.
• Infinite Scroll: Last Text: text which displays when the user reaches the end of content (no more pages to load).
• Infinite Scroll: Error Text: text which displays when there has been an error loading content (next page or end of the content).

Blog Image Settings

The Blog Image Settings panel offers additional settings for the featured images appearing on blog archive pages:

• Display Overlay on Image Hover: choose whether the featured image will display a color effect when users hover over it with a mouse cursor.
• Overlay Color: choose the color for the Display Overlay on Image Hover effect.
• Custom Image Width (px): manually adjust the featured image width. This option is always measured in pixels (px).
• Custom Image Height (px): manually adjust the featured image height. This option is always measured in pixels (px).

Typography and Colors

The Typography and Colors panel enables you to adjust typography and colors for textual elements of the blog post cards appearing on blog archive pages. Available options depend on your chosen Blog Style (Large Image, Grid or Thumbnail):

• Large Image and Grid blog styles:
  • Blog Archives Title typography: adjust typography settings for the blog posts' title.
  • Meta typography: adjust typography for the blog posts' meta data.
  • Content typography: adjust typography for the blog posts' excerpt.
  • Read More typography: adjust typography for the blog posts' Continue Reading button.
  • Blog Archives Title color: adjust regular and hover color for the blog posts' title.
  • Meta color: adjust regular and hover color for all the posts' meta data.
  • Meta Icons color: adjust color for icons appearing next to the meta data.
  • Content color: adjust color for the blog posts' excerpt.
  • Read More color: adjust color for the Continue Reading button link.
• Thumbnail blog style:
  • Blog Archives Title typography: adjust typography settings for the blog posts' title.
  • Meta typography: adjust typography for the blog posts' meta data (comment and date).
  • Content typography: adjust typography for the blog posts' excerpt.
  • Blog Archives Title color: adjust regular and hover color for the blog posts' title.
  • Meta Icons color: adjust color for icons appearing next to the meta data.
  • Content color: adjust color for the blog posts' excerpt.
  • Category color: adjust the regular and hover color of the blog posts' categories.
  • Comment color: adjust the regular and hover color for the comment meta data.
  • Date color: adjust the color for the published date meta data.

Single Post

The Single Post panel enables you to style and customize the single blog post page by applying specific styling, using the loop content builder and more.

Available Single Post options include:

• Single Layout panel,
• Layout Settings panel,
• Responsive Settings panel,
• Single Post Title Style panel (Single Post Title section),
• Single Post Title Options panel (Single Post Title section),
• Content Builder panel (Single Post Content section),
• Single Post Options panel (Single Post Content section),
• Typography and Colors panel (Typography and Colors section).

Single Layout

The Single Layout toggle panel enables you to choose the general layout for all single blog post 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 can manually adjust via the Layout Settings panel.
• 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:

Layout Settings

The Layout Settings panel contains additional options for the Full Width and Both Sidebars single blog post layouts:

• Full Width,
• Both Sidebars.

Full Width

The Full Width Content (px) option enables you to adjust the width of the content area for the single blog post.

You can use the slider to adjust the width, or insert the value manually.

Both Sidebars

The Layout Settings for the Both Sidebars single blog post layout 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 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 content for the single blog post.

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 Settings

The Responsive Settings panel contains additional options for any of the Single Sidebar single blog post layouts: Left Sidebar or Right Sidebar.

The Responsive Settings Sidebar Position for Mobile option enables you to determine the way your blog post 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:

1. After Content: display main content first, then display sidebar content.
2. Before Content: display sidebar content first, then display main content.

Single Post Title Style

The Single Post Title Style enables you to style and customize the Post Title area (ie. Page Title for single blog posts).

You can choose between the following styles:

• Default: inherit settings from Customize > Pages & Special Pages > Page Title > Style. Additional options available within Single Post Title Options panel.
• Intro: a large post title, followed by meta data, breadcrumbs, and the large featured image display.

• Cover: large block with the single blog post featured image used as a background, displaying multiple elements on top of it: blog post author gravatar, blog post author, blog post title, and blog post meta data.

• Card: large single solid color block, displaying multiple elements: blog post author gravatar, blog post author, blog post title, and blog post meta data.

• Cart Invert: almost exactly the same as the Card style, except the blog post author and blog post author gravatar are displayed at the bottom.

• Screen: the blog post featured image displayed in a large block, followed by a smaller solid color block containing multiple elements: blog post title, blog post author gravatar and name, blog post meta data.

• Screen Invert: almost exactly the same as the Screen style, except the smaller solid block containing multiple elements appears before the featured image block.

Single Post Title Options

Available Single Post Title Options depend on your main Single Post Title Style selection:

• Default,
• Intro,
• Cover,
• Card and Card Invert,
• Screen and Screen Invert.

Default

The Default single post title style includes the following additional options:

• Single Post Title: choose what will appear in the single post title area:
  • Blog: default option, appears the same for all blog posts.

• Post Title: replaces the word Blog and displays the individual post title instead.

• Featured Image in Post Title: disabled by default. When enabled, it allows you to display the featured image of the blog post as the background image for the title, and offers additional options:
  • Title and Breadcrumbs Position: select the desired position of the Post Title and breadcrumbs (Left, Center, or Right).
  • Post Title Height (px): adjust the height of the single blog post title area.
  • Position: position of the background image display.
  • Repeat: choose whether or not should the background image repeat itself (use in case of image patterns).
  • Attachment: choose whether or not you want to add an animation effect which is visible only on desktop browsers because it's not supported by mobile devices.
  • Size: select how should the background image behave based on the container and image size. Available options are: Default (default image size), Auto (automatically choose the best display size of the image, based on the default image size), Cover (cover the entire background area, from edge to edge), and Contain (adjust the image size based on the Post Title Height (px)).
  • Overlay Color: choose a color to overlay the background image.
  • Overlay Opacity: adjust the opacity of the Overlay Color.

Intro

The Intro single post title style includes the following additional options:

• Post Title Background color: adjust the background color of the Post Title area.
• Post Title Meta Style:
  • Minimal: no icons displayed next to the meta data options.
  • Stylish: icons displayed.
• Post Title Meta Separator:
  • None: no separator, only space between meta data.
  • Classic: meta data separated with a dash ( - ).
  • Stylish: meta data separated with two forward slashes ( // ).
  • Modern: meta data separated with a vertical line ( | ).
• Post Title Meta Elements: content builder enables you to design the looks of the blog post title meta data:
  • Author: display the name of the blog post author in the meta data area.
  • Date: display the blog post's published date in the meta data area.
  • Categories: display categories the blog post is linked to.
  • Comments: display the comments number for the blog post.
  • Modified Date: display the date the blog post has been modified.
  • Reading Time: display the estimated reading time.
  • Tags: display tags the blog post is linked to.

Cover

The Cover single post title style includes the following additional options:

• Post Title Overlay color: adjust the post title image overlay color.
• Post Title Meta Style: exact same options and functionality as the Intro post title style.
• Post Title Meta Separator: exact same options and functionality as the Intro post title style.
• Post Title Meta Elements: exact same options and functionality as the Intro post title style.

Card and Card Invert

The Card and Card Invert single post title styles includes the following additional options:

• Post Title Background color: adjust the post title background color.
• Post Title Meta Style: exact same options and functionality as the Intro post title style.
• Post Title Meta Separator: exact same options and functionality as the Intro post title style.
• Post Title Meta Elements: exact same options and functionality as the Intro post title style.

Screen and Screen Invert

The Screen and Screen Invert single post title styles includes the following additional options:

• Post Title Background color: adjust the post title background color.
• Post Title Meta Style: exact same options and functionality as the Intro post title style.
• Post Title Meta Separator: exact same options and functionality as the Intro post title style.
• Post Title Meta Elements: exact same options and functionality as the Intro post title style.

Content Builder

This feature enables you to determine which elements are going to be displayed in a blog post card on a blog archive pages, as well as the order of elements.

Available Content Builder options include:

• Title Tag,
• Main Content Elements,
• Meta Section Elements, and
• Meta Separator.

Title Tag

The Title Tag option enables you to assign the correct H tag to single blog post title element, which is used in the single post Content Builder. This element is not the same as the Single Post Title, which is used as the Page Title.

Available options include: H1, H2, H3, H4, H5, H6, div, span, p.

Main Content Elements - Single Post

The Main Content Elements single blog post content builder enables you to design the looks of the single blog post page:

• Featured Image: blog post featured image.
• Title: blog post title.
• Meta: blog post meta data (author, date, modified, date, etc.)
• Content: blog post's main content.
• Tags: all tag the blog post is associated with.
• Social Share: social sharing buttons. This option becomes available if Ocean Social Sharing free WordPress plugin is installed and active.
• Next/Prev Links: next and previous blog post navigation.
• Author Box: blog post author biography box.
• Related Posts: all related posts display.
• Comments: blog post comments and comment form.

Meta Section Elements - Single Post

The Meta Section Elements content builder enables you to design the looks of the blog post meta on a single blog post page, and is related to the Meta element of the Main Content Elements content builder:

• Author: display the name of the blog post author in the meta data area.
• Date: display the blog post's published date in the meta data area.
• Categories: display categories the blog post is linked to.
• Comments: display the comments number for the blog post.
• Modified Date: display the date the blog post has been modified.
• Reading Time: display the estimated reading time.

Meta Separator - Single Post

The Meta Separator feature enables you to choose a sign which separates the meta data elements in the Meta section:

• Default: meta data separated with a dash ( - ).
• Modern: meta data separated with a vertical line ( | )
• Stylish: meta data separated with two forward slashes ( // )
• None: no separator, only space between meta data.

Single Post Options

The Single Post Options panel enables you to set the comment form position, choose Next and Prev posts taxonomy, Related Posts taxonomy, as well as style Related Posts section appearance.

Available Single Post Options include:

• Comment Form Position,
• Next/Prev Post Taxonomy,
• Related Posts Taxonomy,
• Related Posts Count,
• Related Posts Columns,
• Related Posts Image Width (px),
• Related Posts Image Height (px).

Comment Form Position

The Comment Form Position option enables you to choose where to display the form to leave a comment:

• Before: before existing comments, if any.
• After (default): after existing comments, if any.

Next/Prev Post Taxonomy

The Next/Prev Post Taxonomy option enables you to choose the query for the Next and Previous (Newer and Older) post navigation, so you can sort the posts by:

• Category: blog post categories,
• Tag: blog post tags,
• Date: blog post published date.

Related Posts Taxonomy

The Related Posts Taxonomy option enables you to choose the query for posts displayed in the Related Posts section, so you can sort these posts by:

• Category: blog post categories,
• Tag: blog post tags.

Related Posts Count

The Related Posts Count option enables you to choose how many posts do you want to display in the Related Posts area.

Related Posts Columns

The Related Posts Columns option enables you to choose how many columns you wish to display in the Related Posts area. Maximum number of columns is 6.

Related Posts Image Width (px)

The Related Posts Image Width (px) option enables you to apply a custom image width for the featured image thumbnail of a blog post in the Related Posts area.

This feature is always measured in pixels (px).

Related Posts Image Height (px)

The Related Posts Image Height (px) option enables you to apply a custom image height for the featured image thumbnail of a blog post in the Related Posts area.

This feature is always measured in pixels (px).

Typography and Colors

The Typography and Colors panel provides multiple typography and color options that enable you to style the single blog post page.

Depending on your Single Post Title Style and Single Post Title Options settings, available settings include:

• Mutual settings for all:
  • Typography:
    • Blog Post Content Title typography: related to the Content Builder > Main Content Elements > Title. Enables you to apply typography settings for the single blog post title.
    • Blog Post Content Meta typography: related to the Content Builder > Main Content Elements > Meta. Enables you to apply typography settings for the single blog post meta data.
  • Colors:
    • Blog Post Content Title color: elated to the Content Builder > Main Content Elements > Title. Enables you to apply color to the single blog post title.
    • Blog Post Content Meta color: related to the Content Builder > Main Content Elements > Meta. Enables you to apply regular and hover color settings for the single blog post meta data.
    • Blog Post Content Meta Icons color: enables you to apply color settings to the icons displayed in the meta section.
    • Blog Post Content Links color: enables you to apply regular and hover color for all links in the single blog post content.
    • Related Posts Title color: enables you to apply regular and hover color for the titles of all blog posts displayed in the Related Posts section.
    • Related Posts Date color: enables you to apply color settings for the date element displayed for each of the blog posts in the Related Posts area.
• Default Single Post Title Style applied, with Featured Image in Post Title enabled in Single Post Title Options:
  • Typography:
    • Page Title typography: enables you to apply independent typography settings for the Page Title only on single blog post pages.
    • Page Title Breadcrumbs typography: enables you to apply independent typography settings for breadcrumbs displayed in the Page Title area, only on single blog post pages.
  • Colors:
    • Page Title color: enables you to apply independent color for the Page title, only on single blog post pages.
    • Page Title Breadcrumbs color: enables you to apply independent color for breadcrumbs displayed in the Page Title area, only on single blog post pages.
    • Page Title Separator color: enables you to apply independent color for the breadcrumbs separator, only on single blog post pages.
• All other non-Default Single Post Title Styles (Intro, Cover, etc):
  • Typography:
    • Blog Post Page Title Heading typography: enables you to apply typography settings for the main heading.
    • Blog Post Page Page Title Meta typography: enables you to apply typography settings for the meta data.
    • Blog Post Page Title Author typography: enables you to apply typography settings for the blog post author name.
    • Blog Post Author Bio typography: enables you to apply typography settings for the blog post author biography.
  • Colors:
    • Blog Post Page Title Heading color: enables you to apply color settings for the main heading.
    • Blog Post Page Page Title Meta color: enables you to apply color settings for the meta data.
    • Blog Post Page Title Author color: enables you to apply color for the blog post author name.
    • Blog Post Author Bio color: enables you to apply color for the blog post author biography.

That's it!

Enjoy building your WordPress website with OceanWP!