General / Main - OceanWP Settings
Welcome to OceanWP Settings!
In this article we'll cover default options of the General section of OceanWP Settings. If you're running the old / classic OceanWP Settings, this section is called Main on your end.
Content Layout - General / Main OceanWP Settings
The Content Layout option allows you to set an independent layout for your page, post, product, etc, regardless of the global website settings you applied in the Customizer.
Example, you set the main layout for all your pages in the Customizer to "Full Width" (Customize > General Options > General Settings, section Pages, option Layout).
Using the OceanWP Settings, you can create pages that use a different layout. Example, a left or right sidebar.
Available content layout options:
- Default (settings inherited from the Customizer),
- Right Sidebar (full width page displaying the sidebar on the right side of the content),
- Left Sidebar (full width page displaying the sidebar on the left side of the content),
- Full Width (full width page, no sidebars),
- 100% Full Width (edge to edge content, no sidebars),
- Both Sidebars (full width page, displaying sidebar areas on both left and right side of the content).
In this case, the term full width page is referred to content width you assigned in the Customizer (Customize > General Options > General Settings, Main Container Width) and which utilizes margins on the sides.
Sidebar - General / Main OceanWP Settings
The Sidebar option allows you to select a custom sidebar for your page.
The Sidebar option functions only with page layouts that display Sidebar areas.
Sidebar areas are located via your WP Dashboard, Appearance > Widgets. Each sidebar contains a set of WordPress widgets you assigned to them.
Hint: Using the free Ocean Custom Sidebar plugin, you can create an unlimited number of sidebars. This allows you to create any widget combination you want for all intents and purposes.
Sidebar available options:
- absolutely all options you have listed under Appearance > Widgets.
Check out the examples below on how you can utilize the Sidebar option.
Sidebar Example #1
You set the main layout for your pages in the Customizer to Right Sidebar layout (Customize > General Options > General Settings, section Pages, option Layout). By default, the content of this sidebar will use what is assigned to the Default (Right) Sidebar via Appearance > Widgets.
Let's say you have a page where you wish to use a sidebar with different content.
Using the Sidebar OceanWP Settings, you can choose any sidebar you want for that specific page.
Sidebar Example #2
You set the main layout for your pages in the Customizer to Full Width layout. This layout does not display any sidebars.
Let's say you have a page where you wish to use the Sidebar layout.
First, using the Content Layout choose the Sidebar layout you want (Right or Left).
Then, select the sidebar you wish to display. If you wish to display the same content that is assigned to the Right or Left sidebar via Appearance > Widgets, set the Sidebar settings to Default.
Padding - General / Main OceanWP Settings
Padding is the spacing that separates your content (content area) from the Header (with or without the Page Title) and Footer area.
Padding (spacing) is available on top and bottom.
Global Padding values are assigned via the Customizer > General Options > General Settings, section Pages, Content Padding settings.
Default OceanWP theme padding values are 50px on top and bottom.
If the Content Padding settings in the Customizer are empty (screenshot above), your website will use default OceanWP theme padding (50px). You can assign your own values, and also assign different values for all devices.
The Padding option in OceanWP Settings allows you to disable that padding (spacing) on a specific page (if there's a need for it).
Custom Body Class - General / Main OceanWP Settings
Let's say you wrote a custom CSS code you wish to be executed only on a specific page (add all custom codes via Customize > Custom CSS), so it doesn't load on your entire website unnecessarily.
Add that custom CSS class(es) to the Custom Body Class field in the OceanWP Settings of the page (post, product) where you wish for the code to be executed.
The correct way of adding custom CSS class(es) into the Custom Body Class field:
- use only class names,
- separate multiple values using space,
- do not add dots (.), commas (,), pound keys (#) or any other characters not representing the class name itself.
The correct way of adding custom CSS classes in the Custom Body Class field:
- class-1 class-2 class-3
The incorrect ways of adding custom CSS classes in the Custom Body Class field:
- .class-1
- class-1, class-2
- class-1. class-2 #class-3
That's it!
Happy website building