OceanWP is one of the most popular free themes available on the market. It integrates with many WordPress page builder plugins, giving you plenty of ways to design full WordPress websites through simple drag-and-drop maneuvers.
In this post, we’re going to focus on how to use the Elementor WordPress plugin to build a WordPress site with OceanWP. Let’s get started.
Installation & Setup
It starts with installing the theme. It’s fairly straightforward, even if you’ve never installed a WordPress theme before. Start by going to the OceanWP homepage and clicking Get OceanWP.
Clicking this button triggers a download. Download the ZIP folder of the OceanWP theme.
Navigate to Appearance → Themes.
Click the Add New button at the top of the page, and click the Upload Theme button on the next page.
Click Choose File on the next page, and choose the ZIP folder you downloaded. Click Install Now to install the theme.
The theme should install successfully without any trouble. Click Activate once it does.
You’ll be redirected to the main Themes page once again. You’ll notice the other theme, named after the current year, has been deactivated. These are the default themes within WordPress if you’re still new to the platform. Keep at least one of these default themes. You’ll need it for testing if there’s ever any trouble with your main theme.
Installing Required Plugins
The OceanWP theme works best with a few additional plugins to function correctly. One of them is Elementor, a free drag-and-drop page builder plugin for WordPress, but we’ll get to that in a bit. However, Ocean Extra is required.
There should be a notice on the main themes page after you activate the theme. Click the Begin Installing Plugin link attached to this notification to install Ocean Extra.
Click Install on the next page.
The plugin should install and activate automatically. If so, you’ll see this screen.
Go ahead and click Return to the Dashboard.
In order for the “how to create a WordPress site with Elementor” part of our tutorial to work, we need to install and activate the Elementor WordPress plugin.
Navigate to Plugins → Add New.
Enter “elementor” in the search box, and install and activate the Elementor Page Builder plugin by Elementor.com.
Any other plugins you might need are dependant on the demo you install, if you choose to install one. Let’s talk about the OceanWP demos.
The OceanWP Demos
All of our demos are compatible with Elementor, but here are the demos that require Elementor, meaning they won’t function the way they look in the preview without it:
- Mega Gym
- Gym Club
Selecting a Demo
Importing a demo streamlines the process of building a website, especially if you’re new to WordPress. They work in a “what you see is what you get” format in that they allow you to import a fully-developed design to your site. All you really need to do is change the content to match your brand and truly make the demo you’re own.
It should be noted, again, that you don’t necessarily need to install a demo. You can design and build your very own website with WordPress, OceanWP, and Elementor alone. We’ll get to that in a bit. Importing a demo simply cuts out the process of having to come up with and build your own layout.
If your niche isn’t represented by one of our demos, try to choose the most suitable one. For example, our Architect and Stylish demos would suit service-based businesses who build portfolios, such as freelance photographers, freelance graphic designers or creative agencies, quite well.
If you’re interested in installing a demo, check out these resources to learn how:
- Documentation: Importing the Sample Data
The process basically involves installing and activating all of the plugins the demo you’re interested in requires and following the provided steps to import your demo.
Editing an OceanWP Demo
Click your site title in the upper, left-hand corner of the WordPress admin area to visit the frontend of your site, and click Edit with Elementor.
Alternatively, you can go to Pages → All Pages, and click the Edit with Elementor link associated with the Home page.
You’ll be presented with the Elementor editor, which looks like this in the Architect demo.
Things are easy to edit from here. If you want to change the “WELCOME TO ARCHITECT!” text, simply click on it to open that element’s editor. You can change the text in the text editor.
Open the Style editor to change the element’s color, font, and other aspects.
Just make sure you click the green Save button else all of the changes you make will be lost.
If you want to change the background image or the logo, click the X, and select View Page.
This opens the front-end of the page in a new tab and strips away the Elementor editor. Click Customize.
Click the pencil icon near the Architect logo.
Click Change Logo to upload your logo to the site.
If you want to go back to the page editor on the backend from the Elementor editor, click the X, and select Go to Dashboard.
Starting from Scratch
OceanWP is 100% compatible with Elementor, as stated before. You can create your own design with Elementor’s drag-and-drop editor because of this. You can even import a template of Elementor and simply change the content (similar to what we demonstrated in the previous section) if you don’t want to create your own design.
Going this way assumes you only installed the OceanWP theme and Elementor plugin on your site. Let’s go over how to do this.
Building a Homepage with Elementor
Create a new page and name it Home.
Scroll down to the OceanWP Settings section, and select 100% Full Width as a Content Layout.
Open the Header section, and enable the Top Bar and Header. You can disable these later if you decide you don’t want them.
Open the Title section, and disable it. This ensures the page title, “Home,” doesn’t display at the top.
Open the Footer section, and enable the Footer Widgets Area and Copyright Area. Again, you can disable these later if you decide not to use them.
Update the page to save the changes we made, and then go to Settings → Reading, to change the Front Page Displays setting to A Static Page, then select Home.
Make sure you save your changes. Then, go to Appearance → Customize to open the live theme customizer. You’ll be presented with a bare website.
Customizing the Top Bar
Click Top Bar to open the top bar settings section. Click General so we can start by adding a background color. We’ll also change the text color to white.
Feel free to set your background color to one that matches your brand. You can use a tool like HTML Color Picker from W3Schools or simply Google “html color picker” to use Google Search’s tool.
Click the back button once you’re done, and open the Content section for the top bar. I’m going to use a few Font Awesome icons for this tutorial. Go ahead and copy and paste this into the text editor if you want to follow along.
555-555-5555 [email protected]
If you want to add links to your social media accounts on the opposite end, open the Social section for the top bar, and add all relevant links. You should also change the Social Links Color.
If you want to switch which sides the content and social media links are on, go back to the General section, and select Left Social & Right Content under Style.
If you don’t like the padding (spacing) on the left and right-hand sides of the top bar, enable the Top Bar Full Width setting, and set your own padding using the Right and Left Padding settings.
Click Save & Publish to save your changes.
WordPress Header Design
Next up is the header, and there’s a lot you can do here. Let’s start with the logo by going to Header → Logo. Click Select Logo, and upload your logo. You can see we suggest a dimension of 164 x 45 px. Know that you can also design the header using the theme builder.
If you upload one of a larger size, you can upload, crop it at full width, and change the Max Width setting.
Next, you need to create a menu in order to add one to your header. If you’re new to WordPress, create a few pages called Blog, About and Contact, and use this guide from WordPress to learn how to create a menu.
Then, go back to the customizer, go to Menus → Menu Locations, and select your menu under Main.
That’s a pretty simple header, and it’s more than enough for most, but there’s a lot you can do with the header using OceanWP’s, as stated before. For example, if you don’t want the top bar but still wish to keep links to your social media accounts near the top of your website, you can go back into the page editor, disable the top bar, re-open the customizer, go to Header → Menu Social and enable them there.
You can also change the style of the icons.
Building a Footer
You can also add footer widgets to OceanWP’s footer widget areas to complete your footer.
Building a Custom Page with Elementor
Once you have your header and footer completed, you can start adding content to your page, specifically between the header and footer. Go back to the page editor for your Home page, and click Edit with Elementor.
From here, you can use Elementor’s sections and content elements to build your own page layout and design.
It’s all about learning how to use the Elementor plugin from this point on. Here are a few resources you can use:
Importing an Elementor Template
Alternatively, if you don’t want to learn how to create and build your own design, you can import an Elementor Template. These templates work in a way that’s very similar to the way OceanWP demos work. You choose a design you like, import it, and use simple point-and-click operations to change the content to your liking.
Click Add Template.
There are six free Homepage templates to choose from, but the Landing Page templates would work well for a homepage as well so long as you have a service or product to promote. Hover over the template you want to use for your homepage, and click Insert.
Here’s what we have now:
Now, you’re free to hover over any element to edit it.
If you want to change the background image, click the Section button.
You’ll find the image editor under the Style section.
As always, make sure you click Save before exiting the editor to ensure your changes are saved.
The OceanWP Core Extensions Bundle
OceanWP offers free and premium extensions you can use to extend the functionality of the theme. One of these extensions is called Elementor Widgets. The extension adds six new widgets to the Elementor editor, which are:
- Alert Message Widget
- Blog Carousel Widget
- Blog Grid Widget
- Newsletter Widget
- Pricing Widget
- Skillbar Widget
These widgets give you new ways to use already-available elements, but some, such as the Blog Grid (Here you can learn how to create a blog), Newsletter, and Pricing widgets, are new.
The Elementors Widget extension costs $39 for a single-site license, $59 for five site licenses and $79 for 20 site licenses. However, you can save on this extension as well as every other extension OceanWP offers by purchasing the OceanWP Core Extensions Bundle.
The bundle gives you access to current widgets as well as any widget we add throughout your time as a paying member. The Core Extensions Bundle is available for $44.50 per year.