Black Friday Super Sale! 🔥 Enjoy a jaw-dropping discount of up to 50% OFF on all Smart Slider plans. Hurry, the offer ends on December 2nd!

Buy Now
Themes

How to Add a Slider in OceanWP Theme

Bernadett Toth
Bernadett Toth
March 27, 2020
OceanWP

A good theme is the basis of your site. If you would like to make a good impression on your visitors, you should choose a great theme. If you like using page builders, your decision will often come to OceanWP. OceanWP is a free WordPress theme that has a lot of premium features. It has more than 600,000 active installs and a five-star rating with many great reviews. Also, a slider is almost a default feature on websites. To use OceanWP slider, Smart Slider 3 can be a good choice for creating powerful, clean and beautiful site.

Why is OceanWP a good choice?

OceanWP is fully responsive and e-commerce ready, furthermore it integrates very well with WooCommerce. It’s designed to work with the best page builders, therefore works well with Elementor, Visual Composer, Divi, and Beaver Builder too.

OceanWP Demo
Imported Demo from OceanWP Demo Library

It is always great when the theme customization options are integrated into the default WordPress editor. Here you can see a live preview of the changes you applied. In the customize menu you can set up different theme elements such as the header, footer, menu and sidebar. First of all, I can tell you that the OceanWP customize menu is very well collected, containing many settings. The WordPress customizer is where OceanWP really shines. With the extensions you get more and more options which you can customize your site.

Ocean Extra: recommended basis plugin

Ocean Extra is a recommended plugin for the settings. If you navigate to the Theme Panel, you have the option to enable/disable the customizer panels. You can upload your logo, favicon, similarly choose your primary color and typography. In the Theme Panel “My library” is available, where you can create your own template like custom header or footer.

OceanWP Settings
OceanWP Settings view under the post

With this plugin you get a detailed meta box under the posts or pages with the name Ocean WP Settings. There are a lot of options by which you can customize a post or page. I think this is one of the best features in the OceanWP with lots of options. You can add shortcode to many places, hide sidebar, change menu color or set a new header.

OceanWP Extensions: from OceanWP slider to the sticky header

OceanWP can be extended with free and even more premium plugins. You can buy separate extensions, or likewise a core bundle of extensions all at once. OceanWP has premium extensions like the Sticky Header or Footer which is the basis of many sites. One of my favourite ones is Elementor Widgets, it makes building your website easier with Elementor page builder. Navigation Widget, Ajax Search, Logged In/Out widget can be useful on your site as well.

However, there are a lot of free plugins you can download to the theme. What I suggest is the OceanWP Extra, as I have written above. The theme offers lots of demos that you can use and customize on your site with the Demo Import extension. It is probably the easiest way to make a site quickly. OceanWP slider plugin is a Posts Slider, which means that you can make OceanWP slider with 1 or 3 posts or products.

OceanWP slider
OceanWP Posts Slider

The plugin generates a shortcode, what you can use. I think it’s a basic extension but it is simple and can be easily set up. If you would like to use on OceanWP slider with even more functions, I recommend you Smart Slider 3.

Smart Slider 3 as OceanWP slider

Smart Slider 3 can be certainly a great alternative to OceanWP slider plugin. It can be easy to use as the default OceanWP slider. It helps you create beautiful and complex sliders, and you can customize everything. The best part is that Smart Slider 3 is free, just like OceanWP. Also, it’s available in the WordPress Plugin Directory. The plugin is, first of all, fully responsive, clean and powerful, furthermore user friendly. Using Smart Slider 3 is easy to learn, which also helps a lot documentations and videos.

Smart Slider 3 can be a great free alternative to many premium sliders, but it is more than average image sliders. It has layers, beautiful effects and dynamic slide generators. You can autoplay between the slides and set up the time to change it. In this plugin you can also make a video slider with YouTube or Vimeo which makes your site morFe professional. Also, the plugin has more wonderful features in PRO version.

The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
Get Started
Smart Slider 3 - The new way to build a Slider

How to create responsive OceanWP slider free with Smart Slider 3

After installing Smart Slider 3, you can load an example from our demo page or begin to make a new slider. Smart Slider 3 has different layers which have their own settings and you can customize them. For example, you can change the font color and family of the heading and text layers or set background color. You can choose slide background image fill, and also you can add a background animation. After you have finished your slider, you can publish it.

Insert to the OceanWP slider with Smart Slider 3 is very easy with shortcode:

OceanWP slider inserting
OceanWP slider inserting

OceanWP has more opportunity to insert a shortcode. You can just easily copy and paste the slider shortcode into a post or page. Also in OceanWP Settings you can customize the position: before/after the top bar, header, title or footer. Or customize it with Elementor.

How to make a custom header with Smart Slider 3?

In OceanWP you have the chance to make a custom header or footer. This is like a template, and Smart Slider 3 is a good opportunity to use it as a custom header. The easiest way of making a custom header, when you use a page builder like Elementor.

  • STEP 1: Navigate to the Theme PanelMy library, than Add New. If you use Elementor, choose Elementor Canvas template in Post Attributes, after that you can customize it.
  • STEP 2: When you are ready, go to the Customize menu → HeaderGeneral, and set your Custom Header. That’s all!

Reasons to use Smart Slider 3 in your OceanWP theme

  • Free: Smart Slider 3 is the most powerful free slider plugin in the plugin directory.
  • Responsive: You can customize the slider easily for any mobile devices.
  • User friendly: Drag & drop slide editor with intuitive tools.
  • Easy to insert: using shortcodes
  • Different layers: heading, text, button, image, YouTube, and Vimeo
  • Customizable: Every inch of the layers and the slides, such as color, font or size etc.
  • Design: It makes your site more professional

Dynamic Slider to your blog

Like the OceanWP slider plugin, the Smart Slider 3 also can create sliders from your posts. You should just once set it up, after that the slider will automatically refresh the content. That’s also easy to do, just choose to give dynamic slides to your slider and one of the WordPress generators. After that, a lot of settings appear, by which you can customize your dynamic slider.

I’ve made an example for you, where I’ve set 3 sliders. I used a free demo slider for the base. Than I gave the title and the date and the first 300 words of my posts as description. The dynamic post slider uses the post’s featured image as the slide background.
Dynamic Slider

WooCommerce slider to your webshop

OceanWP is e-commerce ready, you can build easily an awesome webshops with WooCommerce. In the PRO version of Smart Slider 3 you can build your website to be more efficient and spectacular. You have the possibility of making a dynamic WooCommerce slider with a lot of settings.

WooCommerce Slider

With this dynamic slide generator, you can show the contents of your products. You can set up how your slides will look with the data of the first slide. You can put down layers, and use the variables to put those data inside them what you want there to be. In our documentation you can find more information about filters and variables.

Conclusion

I really liked this theme, I found a solution or setting for everything what I needed. OceanWP works very well with the page builders and it’s easy to use and learn. If you would like to build a professional website free, you should try OceanWP with Smart Slider 3.

Bernadett Toth

About Author

I’m Bernadett Toth and I’m a member of Nextend‘s support team. I have two dogs, in my free time I teaching them. Besides that I often ride a bike, watching movies or reading.