How to Replicate the Theme Screenshot?

The theme screenshot that you can see below, has been created only with OceanWP, follow the different steps in this article if you want to re-create it for your own purpose.

Before the Steps

Before we start, you need, of course, to use the OceanWP theme, and to install the Ocean Extra, WooCommerce and the WooCommerce Wishlist Plugin plugins.

Step 1 - The Top Bar

By default, the top bar is white, in my screenshot, I made the top bar blue.

a. For the styling, go to the Top Bar > General section of the customizer. In the Padding field, add 6 for the top and bottom, and add 0 for left and right. As Background and Border Colors, add #13aff0, for the Text and Links Colors add #ffffff. Now go to Top Bar > Social, add your own social links, add 12 in the Font Size field and in the Social Links Color field, add #ffffff.

b. For the top bar menu at the right side, go to your dashboard, click Appearance > Menus, create a new menu, name it as you want, add menu items in it and check Top Bar in Menu Settings.

Step 2 - The Header

By default, the header the navigation is to the right, in my screenshot, I made it to the left with a wishlist and cart icon to the right.

a. For the menu, go to Appearance > Menus, create a new menu, name it as you want, add menu items in it and check Main in Menu Settings. Then, go to the Header > Menu section of the customizer and choose Left in the Position field.

b. For the header height, go to the Header > General section of the customizer and add 74 in the Height field.

c. For the right icons in the header, go to the Header > General section of the customizer and add the following shortcodes in the Content After Header field:

<span style="margin: 0 10px">[ti_wishlist_products_counter]</span>

<span class="cart-divider" style="margin-right: 8px;">|</span>

[oceanwp_woo_cart total="true"]

d. For the header logo, go to the Header > Logo section of the customizer and add your own logo.

Step 3 - The Hero Header

The hero header is the page with the background image and big texts.

a. Go to your dashboard, create a new page named as you want. Then still on your dashboard, click Settings > Readings, In "Your homepage displays" select A static page and in the Homepage field, select the page you just created.

b. Go on the page you have created, in OceanWP Settings, click the Title tab and in the Custom Title field, add this text:

Just do it!

c. In the Subheading field, add this text:

<div class="header-icons"><i class="fa fa-cog"></i><i class="fa fa-bolt"></i></div>

d. In the Title Style field, Select Background Image. More fields will appear. In the Title: Background Image field, add your own image, I have added a 1920x1080px JPG image. In the Position and Attachment fields, leave Default, in Repeat, select No Repeat, in Size, select Cover, in Title: Background Height, add 760, in Title: Background Overlay Opacity, add 0.9 and in Title: Background Overlay Color, add #2e3243.

Step 4 - The Content

As you can see on the theme screenshot, there are products, to display them, you need first to add products in the Product post type which will be displayed after the WooCommerce plugin activation.

a. On the page selected as Homepage in Settings > Reading, add this WooCommerce shortcode:

[products limit="4" columns="4"]

Step 5 - The Custom CSS

Some custom CSS codes are needed for the hero header.

a. Go to the Custom CSS section of the customizer.

b. Add this CSS code in the first textarea:

body.home .page-header-inner {
    width: 100%;
}

.page-header .container {
    position: initial;
}

body.home .page-header.background-image-page-header .page-header-title {
    font-size: 160px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.3em;
    letter-spacing: 1px;
}

body.home .background-image-page-header .page-subheading {
    position: absolute;
    font-size: 88px;
    bottom: 30px;
    left: 50%;
    margin-left: -87.5px;
    z-index: 2;
}

body.home .background-image-page-header .page-subheading i {
    padding: 0 14px;
}

body.home .background-image-page-header .page-subheading i.fa-cog {
    color: #ddd;
}

body.home .background-image-page-header .page-subheading i.fa-bolt {
    color: #fbfe52;
}

Step 6 - Small Details

Everything is almost done.

a. Go to your dashboard and click the TI Wishlist post type.

b. In the Product listing Button Settings section, un-check the "Show button text" field.

c. In the Wishlist Products Counter section, un-check the "Show counter text" field.

That it! Now you know how to replicate the theme screenshot for your own purpose.