Oceanly

Oceanly is a fast, responsive, modern, and multi-purpose WordPress theme which is great for the blog, news, education, and portfolio website. Every element in a theme is designed to make sure it grabs the highest engagement from the readers and visitors. It offers a seamless and user-friendly interface to the users. Also, it is very SEO friendly and fast loading theme.

Theme Version 1.2.6
WordPress Version 5.0 or higher
PHP Version 5.6.x, 7.x, 8.x
Translation Ready Yes
RTL Language Support Yes
Compatible Browsers All Major Browsers: Edge, Firefox, Chrome, Brave, Opera, Safari

Oceanly is suitable to build marketing, news, blogging, consulting, academic, institute, school, and educational websites. Also, it is great for publishing events, tutorials, music, videos, ebooks, etc. It comes with a custom header image section with parallax effect, custom background, multiple footer widgets locations, and the main sidebar widget area.

The theme supports three different locations for the menu which include the primary menu, footer menu, and social links menu. The primary menu supports multi-level, drop-down sub-menus which are fully accessible to the keyboard users.

Also, the theme supports breadcrumbs navigation in the header which can act as secondary navigation for the users. The theme offers a conditional header block area that can be used to place any content in the header like slider, services, etc. and this can be configured to be shown on specific pages depending on the settings. The theme comes with various options to customize the website as per need with many different possibilities.

Frequently Asked Questions

Where to find the Theme Options?

In your WordPress admin dashboard, you can find the theme options in the menu “Appearance” > “Customize”.

How to change the Header Background Image or Color?

You can change the header background image from theme options “Appearance” > “Customize” > “Header Image”. Also, you can change the header background color from “Customize” > “Colors”.

Where to manage the Sidebar or Footer Widgets?

You can add and manage the sidebar or footer widgets in “Appearance” > “Widgets”. You can drag and drop widgets in the widget sidebar area.

Oceanly theme comes with 4 sidebar widgets areas which include a main sidebar widget area and 3 footer widgets areas. And, the premium version comes with 6 footer widgets areas with a theme option to change the number of footer widgets per row.

How to hide the Page Title?

When adding or editing the page, on the right side of the block editor, you will find “Oceanly Settings” > “Hide Header Title”. Check this checkbox field to hide the title of this page.

How to set the Left Sidebar for Pages or Blog Posts?

For pages, there are many page templates to choose from. You can set the page template when adding or editing the page from “Template” to “Page with left sidebar”. You can find this option on the sidebar area of the page editor screen.

For blog posts, you can set the left-sidebar layout from the “Appearance” > “Customize” > “General Options” > “Blog Page Sidebar” to “Left Sidebar”.

How to show the Comment Form for Pages?

When editing or adding the page, you can turn on the comments by going to “Page” (on the top-right side) > “Discussion” and check “Allow comments”.

How to make full container width for the blog posts when there is no active sidebar?

When there is no sidebar widget, you can make the blog posts width to fit in the container from “Appearance” > “Customize” > “General Options” > “Blog Page Width (No Sidebar)” to “Full”. It is “Compact” by default for the blog posts with no sidebar.

How to create Social Links Menu?

You can create a menu from “Appearance” > “Menu”. Then, create “Custom Links” for menu items. For URL in a custom link, enter your social page URL. Finally, assign this newly created menu to a menu location “Social Links Menu”. Then, the social links will be shown in the footer.

For the social links menu in the header, you may want to check our premium version. It is available in the premium version with extra features.

How to add a Slider, Shortcodes, or Blocks in the Header?

You can use the conditional header block for this. You can find this option in the “Appearance” > “Customize” > “Header Block Area”. Then, create a reusable block and select this block in the “Header Block Area”. In this block area, you can insert the slider shortcode or any other shortcode or other blocks.

Also, you can set conditions of where to show this block area. For example, check “Show in Front Page” to show this block area on the front page.

The theme comes with 1 header block area. And, the premium version comes with 3 header block areas and 2 footer block areas.

For any block area, you can also specify if you want to make it full width or contained width.

How to Replace the Hero Header with a Custom Header having a Slider?

Firstly, you would have to disable the hero header from “Appearance” > “Customize” > “Hero Header”. Here, you can uncheck the “Enable Hero Header” option and check the “Site Header Bottom Margin” option.

Next, you can go to “Appearance” > “Customize” > “Header Block Area”. Then click on “Reusable Blocks Manager (opens in a new window)”. Here, you will need to add a block to be shown in the header. You can insert any content in this block like a slider shortcode. After, you can give it any title like “Header Block Area 1 Content” and publish the block.

To get the slider shortcode, you can search for any slider plugin.

Next, go to “Appearance” > “Customize” > “Header Block Area”. You will also need to refresh the page.

Then select the block that you just created above in “Header Block Area 1”. In this way, any content you place in the block will appear in the header. Also, you may set the width of the block area to full width by checking the “Set Full Width” option for “Header Block Area 1”.

In case you see the background color on the left and right side of the menu. That is the header background color. You may change it to white or any other color from “Appearance” > “Customize” > “Colors” > “Header Background Color”.

How to Shift the Menu inside the Custom Header at the top?

If you have followed the above guidance for replacing the hero header with a custom header, then you may also want to shift the menu inside the custom header. To achieve this, you can use the following CSS code:

.site-hero-header {
    height: 0;
    min-height: 0;
}
.site-main {
    margin-top: 40px;
}

You can use the above CSS code in “Appearance” > “Customize” > “Additional CSS”. Also, you can adjust the 40px value as you see fit.

How to change the “Read More” text?

You can change the “Read More” text from the “Appearance” > “Customize” > “General Options”. Then, enter any text in the field “Read More Text”. This text will replace the default “Read More” text. Also, you can leave this field blank to keep the default text.

Why the Widget Heading has no Underline Style?

If your website is running on WordPress version 5.8 or later, then it comes with a block-based widgets screen. In that widgets screen page, to properly add a widget heading in the block widget, you will have to add a “Group” block, then within the “Group” block, you can add the heading level 2 or 3. Similarly, you can put any other blocks like images, links, or paragraphs below the heading but it should also be within the “Group” block. In this way, the widget heading comes with an underline style in the widgets area.

How to disable the Block-based Widgets Screen?

In case your site is running on WordPress 5.8 or later, then you can restore the classic widgets screen and disable the block-based widgets screen by simply activating the “Classic Widgets” plugin. Go to “Plugins” > “Add New” and search for the “Classic Widgets” plugin, then you can install and activate it.

How to do the Translation of the theme into another language?

Check out our guide on how to translate a WordPress theme or plugin into another language.

Oceanly Theme Features

  • Breadcrumbs Navigation

    The theme supports SEO optimized breadcrumbs navigation for archive and other pages which acts as secondary navigation for the users.

  • Branding Options

    Supports a header branding area with logo, title, and tagline. The theme options for branding offers settings for various alignments, logo, title, and tagline size to fine-tune the site branding area for small, medium, and large screen size devices.

  • Multi-Level Drop-down

    The theme offers a fully responsive multi-level drop-down menu in the header as the main navigation for the theme which also has an alignment option to the left, center, or right for both the desktop and mobile navigation menu.

  • Header Background

    The custom header background supports the image in the header and background color. From the theme options, you can select multiple images for the header images which can be configured to show in a random order to the visitors.

  • Header Block Area

    Using the header block area in the theme options, you can insert any content in the header like slider, shortcodes, any block or group of blocks.

  • 3 Menu Locations

    The theme supports 3 different menu locations which include the main drop-down navigation, footer menu, and social links menu in the footer.

  • Left and Right Sidebar

    The theme offers a layout for pages and blog posts with left or right sidebar. For any page, you can select a template with the left or right sidebar. For any post, you can globally set the layout from the theme options.

  • Full and Compact Width Templates

    The theme can also have full width or compact width layout. For pages, the layout is by default set to full width and for blog posts, the layout is set to compact width by default.

  • Modern Typography

    The theme utilizes modern layout and typography techniques. More specifically, the theme layout is completely based on the flexbox layout and responsive typography.

  • 4 Footer Widgets

    The theme offers 4 footer widgets areas to place the widgets. You can also set the number of widgets per row for desktop and mobile size devices from the theme options.

  • Footer Social Links

    The social links menu location allows you to place the social icons with links in the footer of the site. The premium version also supports the social links in the header section of the theme.

Oceanly Theme Pricing

Free
Free Version
$ 0
  • Breadcrumbs Navigation
  • Multi-Level Drop-down
  • Header Background
  • 3 Menu Locations
  • Sticky-Floating Sidebar
  • Top Header Bar
  • Header Social Links
  • Footer Social Links
  • 1 Header Block Area
  • Footer Block Area
  • 3 Footer Widgets Locations
  • Menu RGBA Color
  • Breadcrumbs RGBA Color
  • Theme Accent Color
  • Site Title & Tagline Colors
  • Custom Header Height
  • Custom Google Fonts
  • Remove Footer Credit
  • Unlimited Color Options
  • Advanced Theme Options
  • Regular Updates
Premium
Oceanly Premium
$ 59 $ 39 One-time Payment
  • Breadcrumbs Navigation
  • Multi-Level Drop-down
  • Header Background
  • 4 Menu Locations
  • Sticky-Floating Sidebar
  • Top Header Bar
  • Header Social Links
  • Footer Social Links
  • 3 Header Block Areas
  • 2 Footer Block Areas
  • 6 Footer Widgets Locations
  • Menu RGBA Color
  • Breadcrumbs RGBA Color
  • Theme Accent Color
  • Site Title & Tagline Colors
  • Custom Header Height
  • Custom Google Fonts
  • Remove Footer Credit
  • Unlimited Color Options
  • Advanced Theme Options
  • Regular Updates