• ▷ OceanWP - Configuration tutorial and user guide

But, Why is this topic so highly rated?

• Thousands of different designs can be created from the same theme.
• It is compatible with Elementor, one of the most popular builder pages.
• No maintenance issues
• Es gratis…. y sí, ¡supone un importante value added!

OceanWP it is highly customizable, but when you start with WordPress, this type of theme can be, perhaps, confusing. It offers so many options that new users have trouble understanding it! OceanWP is a bit the opposite of hestia theme of which we have already spoken.

This article has been written for this purpose, to help you configure most of its many options without missing a thing.

<>

1 - Prerequisites

Before installing any theme, either OceanWP or any other, it is necessary that the site already has some content and basic configuration to facilitate theme setup. In fact, if your site is completely empty, you will get trouble for check the execution of customization actions.

In this way, regularly, you should have made the first basic WordPress settings.

Once done, you should have already spread some pages that will be used to build the architecture of your site, as well as the main menu.

Even if your pages don't have "real" content yet, they will allow you to navigate, but fundamentally customize the header of the site with the options offered by the theme, and at the same time publish two or three articles and create some categories. This will help you customize la parte del Blog de su sitio.

Now that you have some material, you can determine and easily customize the design of your website.

All you have to do is go to the tab Appearance> Themes> Add to find, install and activate the OceanWP theme.

Once the theme is installed, you will notice that a message has appeared "This topic recommends the following plugins [….]" It is not uncommon to see this type of message appear and it is always important to pay attention to it, at the risk of missing important features.

You must click on "Start the installation of the extensions" to make the most of the benefits of OceanWP. This matter recommends Elementor, Ocean Extra and WPForm extensions. Install and activate them.

As a consequence of these actions, you will see that a new tab has appeared in the left sidebar. This is the Panel Theme, a kind of dashboard for managing the OceanWP.

We are not going to stop here because, in fact, there are several shortcuts that lead to the features initially present in the WordPress customizer, under the tab Appearance> Customize.

Here are the many options OceanWP available in the customizer:

At least, there are 14 tabs:

The first tab is a kind of "ad" to switch to the Pro version.

The following 4 tabs are basic tabs offered by WordPress:

• Eyelash Site identity to manage the name and theme of the site (initially present under Settings> General)
• Eyelash Menu to manage menu areas (this is a shortcut to Appearance> Menu)
• Eyelash Widgets to manage the widget areas (which at the same time are managed from the tabAppearance> Widget)
• Eyelash Home page settings which is nothing other than him direct access to an option in the tab Settings> Reading.

The other 9 tabs are provided by OceanWP to set all default theme settings. And this is where you can customize your entire website.

To do it right, we recommend check all these tabs and its innumerable sub-tabs. One after another. Nothing better than have a theme in your hands and do it to your liking. In spite of everything, we will try to facilitate this learning for you.

We have classified the most frequently asked questions by topic. We hope you find the answers to your questions in the rest of this article ...

2 - Establish the general appearance of the site

Before you start to configure OceanWP in detail, we will focus on the general styles to be determined.

2.1 Determine global colors

It is important that you have a graphic chart to follow, orodors related to your visual identity. This is very important to establish visual identity.

First, go to the tab Appearance> Customize> General options> General style for Determine the dominant color of your site. This will be used "by touch" here and there. Thus, will be the predominant color by default. Then you can act on some items to change it.

At the same time this is where you will choose:

• The general color of your links.
• The color of your links on the flyover.
• The background color.

2.2 Determine the layout of the site

We will define a default layout. This will be your preferred design, the fact that it will apply to your entire site. Later we will see how to determine the exceptions, the purpose of this configuration is to save time, so it is advisable to select the design that will be used the most and that you like the most.

In the tab Appearance> Personalize> General options> General settings you can determine the overall design style:

• Big: Fullscreen
• Box: The body of the site will be narrower
• Separated: Each section will be separated by a margin, it is very good if you want to add a background color or image (in this circumstance, the background image will be added from the tab Appearance> Customize> General options> General style).

The design style of your pages:

• Right sidebar.
• Left sidebar.
• Right and left sidebar.
• No sidebar.

We are talking about outline of your pages, it will not affect your blog (file, category, article) that will keep your sidebar.

By default OceanWP adds the sidebar to the pages of your site, few users want to keep it, really.

The other options on the General Settings tab:

Always on the account Appearance> Personalize> General options> General settings you can configure the design of the search results pages but at the same time activate the opengraph de Facebook.

A pesar de todo, me viene a la mente una pregunta: ¿no duplica esta opción la que ofrece Yoast SEO?

2.3 - Show, hide or customize the page title

By default, when you enable OceanWP, verás un banner debajo del encabezado que muestra el título de sus páginas. Conseguirás la opción de mantener este banner o disable it on all your pages.

To do this, go to the tab Appearance> Customize> General Options> General Options> General Options> General Options Page Title.

Here, one option is confusing: "visibility". We would tend to think that it is this option allows you to act on the banner with the title. But not. You must go to the option "style" and select the state "hidden" in the drop-down menu if you want to completely disable this banner that shows the title of your pages.

Regardless, if you select "background image" you can add a background image of your titles ... Although it is a matter of taste.

Please note the following:

• To influence the color of your titles, it is always in the tab Appearance> Customize> General Options> General Options> General Options> General Options Page Title.
• To change the font of the titles, you must go to the tab Apariencia > Personalizar > Tipografía > Tipografía > Tipografia > Titulación 1 (h1)

2.4 - Determine sources in general

Although you will be able to act on all types of sources, remember to determine the general source of your site. In other words, the source of the body of the page, to do this, go to the tab Appearance> Customize> Typography> Page Body.

Another option at the same time is available in Appearance> Personalize> Typography> Typography> Typography>general. If you live in France, the "Latin" subset will suffice.

2.5 - Configure the other general settings:

Since OceanWP It is highly customizable, you will find an option for each of the design items. Here are the most wanted:

• Where to modify the backup button? Eyelash Appearance> Personalize> General options> Scroll up
• Where to determine the style of the default buttons? Tabulator Appearance> Personalize> General options> Button theme
  
• ¿Dónde personalizar la página de Error 404? pestaña Appearance> Personalize> General options> 404 error page
  
• Where to determine the pagination? tabulator Appearance> Customize> General options> Pagination
  

3 - How to customize the header of a site with OceanWP?

The header - at the same time called header - is a part of the site that tiene su relevance en términos de diseño. We like to be able to customize it to our liking: how to organize the menu, if we add a top bar, what fonts and colors to use, where to put the logo, etc.

La mayoría de las opciones de personalización de headers are in the section Appearance> Customize> Header

Is in the General tab (Appearance> Customize> Header> General) is where you'll find your header style option. This is without a doubt the most important option. You can select one of 8 styles provided by OceanWP, namely:

• Minimal: this is the default OceanWP menu.
• Transparent: the menu has no background color.
• Best menu: the main menu is located in a top bar.
• Fullscreen: the navigation is hidden, when you click on the "sandwich", the menu covers the entire screen.
• Centered: the logo, or your site title if you don't use a logo, will be centered.
• Means, medium: the logo passes over the navigation items.
• Vertical: the menu is placed on the left by default but the options will allow you to place it on the right.
• Custom: it is a custom header that you can import from your library.

Keep in mind that, depending on your choice, new options will appear just below. Feel free to scroll to get to the all options of each menu style.

You can find common options for each menu, such as background colors, link colors, margins, etc. But at the same time specific options for each type of option, as an example add additional content via the shortcuts provided by OceanWP They exist for the minimal and transparent style, as an example.

OceanWP makes it possible for you to add a medium in the header. All you have to do is go to the Appearance tab > Customize> Header> Media Header. Whatever your support, the recommended dimensions are 2000 * 1200 px:

• You can insert a video. If you want, you can add the option to add a link to YouTube.
• Alternatively, you can insert an image at the same time.

Very interesting options allow you to add an opaque color filter on the support. Thanks to a drop-down menu, you can choose the position. In general, it is the centered position that is sought, but it may be a good option to choose another position.

Important note: when you add your media, you will notice that the menu is too narrow to distinguish your image or video. If this is your case, then you should play with the inner margins of the menu. To do this, you will have to change the tab and go back to the previous one Appearance> Customize> Header> General. This is where you will find the option to add padding at the bottom and top (inner margin) to enlarge the box showing the material.

3.3 - Add a logo in the header or change the color and font of the title in the header

OceanWP call "Logo" the location to add your company logo. If you don't import a logo, the name of your site, regularly the same as your brand or company, will be displayed in this location.

Therefore, it is necessary Appearance> Customize> Header> Logo who will find these characteristics.

If you decide keep the title instead of importing a logo, this is where you can change the title color and the color of the same. In spite of everything, if you want change the font of this title, will have to go to Appearance> Personalize> Typography> Logo

Finally, once you have identified the type of header that best suits your project, you can refine the style of your main menu.

It's in the Appearance> Customize> Header> Menu that you can play with very nice effects: add an animation and a color when hovering the mouse over the links in your menu.

A little further down in the options, you will access many settings to select the colors of the active links, the floating links, the background colors and even for the sub-elements if your menu is composed of them.

Even with all these options, you won't find where to manage fonts. To do this, you must go to the tab Appearance> Personalize> Typography> Main menu Y[…] Main menu: drop-down list

3.5 - Add social media icons in the header

One option allows you to add icons from many social networks. You should go to Appearance> Customize> Header> Social Menu and click "Enable Social Menu". All you have to do is add the links to your social networks so that they appear in the menu. You can choose from 4 different styles.

Warning: if you use the Minimal style or the Transparent style for your header type, look no further, social media icons won't appear on your menu.

Still in the header customizations, the last tab will allow you to determine the style of your mobile menu (Appearance> Personalize> Header> Mobile Device Menu).

In this tab, the first option will allow you to determine the «breakpoint», in other words, the size of the screen from which the menu of your site should be displayed in the form of a «hamburger».

It's by scrolling down that you will see a bunch of other options like link color, cursor color, icon style, etc.

3.7 - Customize the «top bar»

The top bar It is an area that will be placed at the top of the screen, above the main menu and the logo. OceanWP has provided a new menu area here, but not only that.

First, you can create a new menu in the tab Appearance> Menu> Create. You must add the items you want, such as the contact page.

Then, it will be necessary to make sure that this top bar is visible, to do this, go toAppearance> Personalize> Top bar> General and check "Activate the top bar" (or uncheck it if you don't want it to appear). You will take the opportunity to determine the style of the bar and the different colors.

In the tab Appearance> Customize> Top bar > Content you can add text that is not a menu item. A simple text to add a phone number, an email address or even a promotional text, as an example.

In short, in the tab Appearance> Customize> Top bar > Social media you can insert social media icons. You will need to add links to their networks to view them.

Be careful that these icons are not redundant With those inserted in the main menu, you will surely have to make a choice.

For the text font found in this top bar, you should go to Appearance> Customize> Typography> Top bar to change it.

 

4 - Customize the blog part with OceanWP

If you are considering maintaining a "blog" part within your WordPress site, or even if you simply want to start a blog itself, you will be delighted to be able to customize this part of the site. When you go to the tab Appearance> Customize> Blog You will only see two sub-tabs:

4.1 - Blog posts

This is where you will define the design of your blog page and the Files of you Blog (like the category page, as an example).

As a general rule, we do not usually have the possibility to choose the design of this page, which are dynamic pages in which each new published article will be placed.

In this tab «Blog entries» you can choose:

• Provision: sidebar position or full width (no sidebar)
• El tipo de etiquetado HTML de los títulos: H2 by default
• The blog style: large image, grid, or thumbnail

At the same time, you will get the luxury of being able to choose the position of each element that you can drag and drop and turn on / off.

The same can be done with "Goals", this information that is present in each blog article (author, publication date, category and number of comments).

4.2 - Single article

Here you will define the page layout of your articles (the one that uses the singular archive.php by OceanWP).

In this tab exclusive item You will find many options that will allow you to create an ultra custom design:

• The layout: sidebar on the right, on the left, on both sides or without a sidebar ...
• The marking of the titles.
• The choice of the title to display: «blog» or «article title».
• The option to display the image of the article in the bottom of the header.
• The title position and the breadcrumb path: right, center or left.
• The position: here we are talking about the position of the title background image.
• The position of the items to be displayed: click on the eye icon to activate / deactivate them
• The meta-box (article information).
• Related Posts

4.3 - Delete or customize the breadcrumb route

It is not in the blog options where you can act on the breadcrumb trail, no, you will find it in Appearance> Personalize> Personalize General Options> Page Title.

As you scroll with the mouse, you will see a checkbox or uncheck to enable or disable the breadcrumb path.

At the same time you can choose its position, the color of the links and the color when the mouse hovers over it.

5 - Customize the footer with OceanWP

The footer is he footer of your WordPress site. It appears on every page and article on your site. This is the ideal place to add credits / copyrights and widgets to help people contact or find you.

The OceanWP thematic footer it is divided into two parts:

• he footer of the part Widget: to show the famous widgets
• the part lower of footer: for show credits but at the same time the footer menu.

5.1 - Footer widgets

If you are not considering adding widgets to the footer of your site, it would be a good idea to disable this placement. To do this, go to Appearance> Personalize> Personalize Footer widgets and disable the option "Enable footer widgets".

If, apart from this, you want to show widgets at the bottom of the page, keep the check mark in this box and configure the few options available to you:

• Visibility: on all devices or only on PC versions
• Make widget area fixed
• Add a parallax effect
• Determine the number of columns: 1, 2, 3 or 4
• Add inner margin (padding)
• Determine the background, text and colors of the links

To change the font (type) of the titles of your widgets, you will be in the tab Appearance> Personalize> Typography> Typography> Typography> Footer widget title that you will be able to perform this action.

To determine the widgets to display at the bottom of the page, you can use the tab Appearance> Widgets. Drag the widgets to the appropriate locations. Read this article on widgets to learn more.

5.2 - Footer credits

Default, the credits that appear in the footer of the OceanWP are «Copyright 2018 – OceanWP Theme by Nick».

Obviously, you will want to change this text.

To do this, a dedicated field will welcome your changes to the tab Appearance> Personalize> Personalize Bottom of footer. You will be able to enter not only your own copyright, but at the same time a shortcode provided by OceanWP which is listed here.

As an example, introducing[oceanwp_date] the year will be displayed in real time: 2018, 2019, 2020… and you will not have to change your every new year.

To change the font (typo) of the footer credits, you will be in the tab Appearance> Personalize> Typography> Typography> Typography> Footer copyright that you will be able to perform this action.

OceanWP has provided a location for a menu at the bottom of the page. The menu must be created in the tab Appearance> Menu As you always do. This menu only needs be assigned to the position "Footer".

To change the colors, at the same time you will be in the tab Appearance> Personalize> Personalize Bottom of footer.

To change the font type and size, you will be in the tab Appearance> Personalize> Typography> Typography> Typography> Footer menu

Please note that there is no possibility to add social media icons in the footer. The only places where you can display them are the main menu and the top bar (as seen previously in this article)

Until this part of the article, we have set up the layout of the site as a whole. This means that all selected settings will be our default settings.

Regardless, for a few reasons, you may need to determine unique settings on a few pages only.

This functionality is feasible thanks to the activation of the Ocean EXTRA extension, available after installing the OceanWP theme (see chapter 1 - prerequisites)

This plugin add a box at the bottom of the WordPress editor, which will vary slightly depending on if you are editing a page or article (tablet nr. 9 will not be present on its pages):

With this box, you can override the default settings to specify a single rule for the article or page you are editing.

For this, EXTRA offers you 8 to 9 tokens:

1. Principal: here you can modify the design of this particular page or article. The default setting is the one already specified in chapter 2.2 of this article.
2. Short codes: fields are available to add shortcodes in specific places on your site. As a reminder, here is the list of shortcuts.
3. Header: you can change the header design, like removing the top bar just for this page.
4. Logo: Thanks to this field, you can consider displaying a different logo on each page of your site.
5. Menu: here you can redefine everything in the menu settings, such as colors, fonts, sizes, etc.
6. Title: you can show or disable the page title. Or better yet, you can customize the text, add a caption, and more.
7. Bread crumb route: Easily modify the breadcrumb path just for this page or article.
8. Footer: you can show or disable widget areas or even copyright.
9. Article: this tab will only be present when you edit your articles. You can add specific content for each article, such as a quote.

Important: the options offered by Ocean Extra are designed to rewrite the default layout rules, already configured in advance ... It would be counterproductive do not configure default settings and having to configure the extra box on each page or article… If your basic design is enough, you will get almost nothing to enter in this box.

7 - Extensions for OceanWP

OceanWP recommends using Elementor, Ocean Extra (which we just saw) and WPForm, despite everything, you can choose to use other extensions.

Apart from Ocean Extra, which is irreplaceable for this topic, Elementor could be replaced by your favorite builder and even by Gutenberg since both are supported, for forms you can try OceanWP with Caldera Forms or Gravity Form. There should be no confrontations.

OceanWP at the same time it offers a premium extension package including many plugins to promote native features. The price of this premium package is € 39 / year:

• Portfolio is an extension that allows you to add a portfolio to your site. You can display it on any page using a shortcode. At the same time, the portfolio includes a filter bar.
• Woo popup is a WooCommerce extension that allows you to display a personalized message when you click the "Add to cart" button.
• The plugin Sticky footer allows you to customize your footer. You can add a menu in the footer or text bar, customize its color, make it fixed, etc.
• Ocean hooks is an extension that allows you to use shortcodes and add code to your theme to control the different items of the theme without having to create a child theme.
• Elementor Widgets is an extension to promote Elementor by adding new items to the page builder.
• Side Panel is a plugin that enables you to add a highly customizable sidebar to your website.
• The plugin Sticky header proposes to add a fixed header (sticky = sticky) and determine its display and behavior.
• With the footer, you can add a section at the top of your footer. You will be free to add a link or a call to action button to it.

The free version of OceanWP is already very feature-rich, You will find many free extensions in the official repository, feel free to browse them => discover all the free OceanWP extensions.

8 - Optimize OceanWP

It is true that with all these options, one might wonder if OceanWP it will slow down your WordPress sites. Of course, the more options there are, the more code there will be in the theme files.

Precisely, you can act on some optimizations by going to the tab Thematic panel> Scripts and style. You can disable the scripts and styles that you don't need. This will improve the loading speed of your website. All you have to do is uncheck the unused options.

[Back to summary]

9 - Import / export functionalities

Along with all the options that OceanWP offers, at the same time you can save a lot of time importing or exporting configurations or demos. OceanWP at the same time enables you to do this.

9.1 - Import an OceanWP demo

Although it is not always good to import a complete design, it may be your choice. If you need to do this, you will need to add a plugin: Ocean Demo Import.

Thanks to it, you can install a predefined layout with just one click!

After installing Ocean Demo Import, a new sub-tab will be available under «Theme Panel», this is the tab "Install demos". Here are 13 designs to import for free and preview live.

By doing click In a demo, a pop-up window will open, asking you to add new extensions so that the import of the mockup is consistent with the initial demo.

When the button shows Install now), it means that the module is free. When the button shows "Get this module", it means that it is a premium extension. But that's not the problem.

Caution is advised if you need install a demo on a site that already has content and the next import step will be decisive.

If you check the 3 import options on a site that already has its own content, the import could remove your old customization settings, menus, pages, architecture, etc….

Whatever the case, the topic strongly recommends installing these demos on trial sites or "new" sites.

Feel free to install a WordPress in a local environment to do your import tests, it is more prudent.

9.2 - Import or export theme settings

Another possibility: if you use OceanWP normally, you can quickly make the basic settings in Customizing by importing the settings from plant A to insert them into plant B.

Then go to the tab Import Export located below Thematic panel.

From the right insert (blue box), you can export the settings in .json format. When you set up a new site, it will use the import function (pink box) which will allow you to print the previously exported .json file.

10 - OceanWP VideoTutorial on YouTube

A video that speaks better than 1000 words, I suggest you discover in the video the free OceanWP theme (about 25mn), what I like, what I don't like and how to use it the best possible way.

conclusion

Those of you who are looking for a good free WordPress design will appreciate what OceanWP offers.

The theme places most of the layout and styling options in the WordPress theme customizer so you can see what the edits look like in real time.

Beginners will appreciate how much this helps to make changes.

Additional settings shown in the WordPress visual editor can be used to uniquely personalize each of the pages of your website. This opens up an unlimited number of possibilities on how to build your website.

Los creadores de páginas al mismo tiempo son compatibles, dado que puede deshabilitar items de la página como el encabezado, el pie de página y las bars laterales con sólo hacer clic en un botón. Cabe señalar, a pesar de todo, que OceanWP tiene mejor incorporación con Elementor que otros creadores de páginas.

I think developers should improve the OceanWP installation process for beginners and maybe add Ocean Extra functionality directly into the theme itself; Regardless, a bigger concern is the implementation of OceanWP's free theme demos.

The thematic demo system is without a doubt one of the best features of OceanWP, as it enables users to access a catalog of high-quality designs.

Hence, it is disappointing that every free theme demo requires a premium plugin extension to function properly.

In this regard, the full version of OceanWP is a better representation of what OceanWP can do.

Each premium plugin extension is competitively priced at $9.99 per year, despite everything, the personal license which is available for € 34.99 is the best buy.

By purchasing the Core Extensions Bundle you get a full year of support and updates, access to all premium plugin extensions, and access to all demos of professional themes.

Yes you want more information about OceanWP, I recommend you to install the free version to see for yourself how it works.

You can get more information about the theme, available theme demos, and available plugin extensions at OceanWP's official website.

Take a look at their extensive documentation area at the same time. Includes video tutorials and written tutorials of the main OceanWP features and explains how each plugin extension works.