How to Create a WordPress Site with Elementor & OceanWP

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.

Installing Elementor

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
  • Yoga
  • Coach
  • Store
  • Travel
  • Lawyer
  • Gym Club
  • Lingerie
  • Architect
  • Stylish
  • Simple

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:

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.

View the Bundle

Liked This Article?

We have a lot more where that came from! Join 650,936 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

40 Responses

  1. Great demonstration!
    the blog design aspect is missing though, would really like to understand how to build a blog (post / archive) page with OceanWP and Elementor.

  2. Hi Ben,
    According to my user experience, Elementor is a revolution in wordpress. I have a website https://www.endlesseducation.in , when I create or edit a post with elementor, “All In One Schema.org Rich Snippets” plugin automatically stop working. At first I thought might be my mistake, but same issue occurred with my another website http://www.goproductreview.com .

    How to use elementor with “All In One Schema.org Rich Snippets” plugin?

  3. Hi Ben, I’m a great admirer of oceanwp theme, thanks to its astonishing look. But I am facing too many problems while its customization which i didn’t face with other themes having demo importing facility. First even after properly importing it’s not showing any image, demo text, or anything only footer widget is showing. also I am not able to edit the demo text directly going into customizer section while other theme provides an easy mean to change necessary settings through customizer. Do you have any Guide how to properly do necessary customization without any hassle. I went through 2 articles regarding Oceanwp customization but all of no use.

  4. Hello Ben. I’m building a photog portfolio site with Elementor (free) and OceanWP. I’m trying to create a responsive masonry gallery that contains both portrait and landscape oriented photos. When a photo is clicked I want it to open up a lightbox (and not a post). I tried doing this by using Elementor’s Image Gallery widget and keeping my photos Large size (1024 on the long end)….but there are gaps everywhere. It’s not filling in as a masonry should. Would purchasing Elementor Pro give me the right options I need, or do I need to look for a Masonry gallery plugin, such as the Smart Grid Gallery?

  5. Hi Ben,

    I’m trying to solve little issue with “connecting” Elementor plugin (free) with OceanWP Theme (free).

    WHERE: Elementor > settings > style tab

    PROBLEM: I cannot find out what are proper selectors for two sections:
    1 “Stretched Section Fit To” – default “h1.entry-title” doesnt work
    2 “Page Title Selector” – default “main” doesnt work

    Thanks in advance for replay 🙂

  6. Ben, this article really helped me, but i want guidance on how to totally customize the oceanwp travel theme. Please tell me if you have already written it. if not, please write it too, i would really appreciate that!

  7. There seems to be an issue with using the Image Box and OceanWP theme.
    Images set to 100% size in the Image Box are shifted to the Left Hand Side. Reducing the size will eventually bring the image back to centre.
    A vanilla install and example of this can be seen (while it lasts) at http://www.pi.x10host.com/test1
    Yes, will be contacting Support, but which one? Elementor or OceanWP?

  8. Hi Ben, this is great information thank you. I am trying to use the Yoga demo template to build a site for an acupuncturist. I can’t get the Site title and tagline to show. I’m wondering if this is because it is disabled in this template? However all the settings appear to suggest it SHOULD be showing. Would appreciate any help you can give.

  9. Hi new version of wordpress (4.9.5) I cant see the ‘wpOcean settings’ under the pages settings. (To disable page title and layouts)…. How can I reach it?

  10. Could not generate *post* format (not a page). How do I do that???
    Now with Elementor Pro I hope to find an easy way…

  11. Please note that any setting to elementor “single” destroy all pages – How can I set “single” format to posts in blog only?!

  12. Hi, I’m looking for help. I have different social icons in top menu, for example instagram icon on homepage is different than on blog page.

  13. Hi, I enjoyed your article very much so. I am rather new to WordPress. I would like to create a website for home decor products. Would Elementor – Ocean WP or WooCommerce (Storefront) be better to use? Thanks.

  14. Hi Ben,
    Elementor and Oceanwp are great. I have one problem though. If I use the Post Comment element from Elementor I have to turn on the comments on the wordpress page. This automatically turns on the Oceanwp commentbox on the bottom. How can I add the customizable Elementor comment element without also adding the Oceanwp comment box?
    Thanks!

  15. Hi, I have a fresh WP 5.0.2 installation with OceanWP and Elementor Pro. I imported the Contruction Demo from OceanWP. Beside this I have most of the OceanWP Extensions and the UnderContruction Plugin installed. When I click on Edit with Elementor I get the ‘Preview Could Not Be Loaded’ message. Do you have an idea? Maybe a conflict with Gutenberg? I also installed the WP classic editor, but get same error.

  16. WordPress is the best option for anyone thinking about starting a blog. You need a self hosted WordPress to start a good blog. It will give you a strong base to do anything with your blog.
    So anyone wanna start a new blog… forget about blogspot, tumblr etc just go with self hosted wordpress

    It will cost you some money but not very much. Nowdays shared hosting is very cheap and I guess anyone can afford $5 per month.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 650,936 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.