loading
please wait

How To Create Your Own Netflix-Like Website With WpStream

September 4, 2019

With the VOD industry booming and becoming more popular among content producers and consumers alike, the way we perceive and enjoy video content has changed too. Original content creators are making a shift and moving away from the giant VOD providers such as YouTube or Vimeo due to various reasons. This article is a tutorial on how to create your own Netflix-like WordPress website.

Prerequisites

You will have to follow our previous guide on installing the theme and importing demo content to the letter before continuing with this guide.  The complete guide can be found HERE. When importing the demo content, make sure you import the Hollywood Demo, focused on Videos On Demand, and not the GoLive Demo, which is built around live sports streaming.

WpStream “Hollywood” Demo Features & How To Build Them

Building your Netflix-like homepage is really easy to do with the WpStream platform. Let’s take a quick look at our “Hollywood” demo and see all the different elements from the homepage.  

1.    Header Slider

Adding a Header Slider

To add a header slider, simply edit your home page with WpBakery and then go down to “Appearance Options”. Here you will have to select “Theme Slider” from the “Select Header Type” dropdown. 

You can also edit the Theme slider from Theme options:

2.    Recent Items

Adding Recent Items

To add recent items to your home page, simply edit the page with WpBakery and add the recent items shortcode:

You can also edit the recent items shortcode and select what type of items or products you want to display by category, actors, ratings, as well as the number of items you wish to display:

3.    Call To Action

Adding a Call To Action

To add a similar call to action on your homepage, you will first have to add a new column and go to Design options. Here you will have to add a background image for your column:

Next, you will have to add a text block to your column. Extra appearance details can be added to the text block from the text editor:

Here is our text block code for reference: <h2 style=”text-align: center; font-size: 50px;”><span style=”color: #ccffff;”><strong>See The Best Movies &amp; Tv Series</strong></span></h2>

Now it’s time to add our sub-heading. Use the custom heading shortcode to do it:

To finish off, simply add a button to your call to action segment:

4.    Featured Products

Adding Featured Products

To add featured products, you will have to edit the column width and keep the heading as full width but divide the second row into three equal columns:

Then you will have to add featured product shortcodes:

In the end, you will have three featured product shortcodes on the same row, with a custom heading shortcode above:

5.    Product Slider

Adding a Product Slider

To add a product slider with a custom heading, you will have to first add a custom heading shortcode:

Then, you will have to add the recent items slider shortcode:

You will also be able to set which types of products will be displayed, the number of products or products from different categories:

6.    Featured Article

Adding a Featured Article

Adding a featured article is done with the featured article shortcode:

You can also add a custom heading before your featured article. The featured article needs to be set by name, not by page ID, as shown below:

7.    Featured Product Type 2

Adding Featured Product Type 2

Adding a full width featured product can be done with the featured product shortcode:

After adding the product, you will have to add a product ID, set design type to “2” and add a background image:

8.    Category Slider

Adding a Category Slider

Adding the category slider is done much in the same way as a product slider. Search for the category slider shortcode and add it to the home page: 

You will have to add the category IDs you want to be displayed, as well as the number of categories to display per row:

9.    Recent Blog Articles

Adding Recent Blog Articles

Recent articles are added with the recent items shortcode:

But instead of products, we will switch it to display articles:

You can also set the number of items to display.

Conclusion

The WpStream Platform offers content creators plenty of flexibility when building, managing and customizing their website. With full WooCommerce integration, monetizing your videos on demand is easier than ever before.

Recent posts