Zerif Pro Documentation

Sample Content                    Admin Demo


Video Tutorial

Install & Configure Your New Theme

After you have purchased a theme, go to Purchase History to download the theme. After downloading the theme, navigate to Appearance > Themes > Add New > Upload, in your WordPress dashboard. Now, click the Choose File button, select the archive of your theme from your local computer and press the Install Now button. In few seconds, WordPress will upload and extract the theme archive for you. All you need to do next is to press the Activate link under the message for successful theme installation.

Now, navigate to Settings > Reading settings, and make sure that you are using Your latest posts option. If you've done all this, then you can visit your website and it will look similar to our theme demo.

Setting Up A Blog Page

Navigate to Pages > Add New, in your WordPress dashboard. In the screen that comes, title your page as Blog, and scroll down to find the Page Attributes metabox. In Page Attributes, click on the Template option and pick either Blog template or Blog template with large images, based on your preference. Publish the page, and now you can use this page as your Blog page.

Configuring Menu

Zerif theme focuses on the one-page parallax design. And to do that, we have divided the front-page of our theme in multiple sections. And linking those sections from menu is very simple, all you need to do is assign section anchor to the menu. Navigate to Appearance > Menus, in your WordPress dashboard. And create anchors to the sections, as seen below:

  Here are all the anchors:

  • Our Focus - #focus
  • About Us - #aboutus
  • Portfolio - #works
  • Our Team - #team
  • Packages - #pricingtable
  • Testimonials - #testimonials
  • Bottom Ribbon - #ribbon_bottom
  • Right Ribbon - #ribbon_right
  • Shortcodes - #shortcodes-section
  • Contact - #contact
  • Subscribe - #subscribe
  • Latest News - #latestnews
  • Google Maps - #map

Customization

Zerif Pro uses WordPress' Customizer API, so it's really simple to customize. Just navigate to Appearance > Customize, in your WordPress dashboard, and there you can find all the customization options.

Setting Up Background

Zerif theme supports multiple background options, which can be configured from Appearance > Customize > Background. First you need to select which type of background you wanna use (image/slider/video) and then you need to select it from its respective section.

Adding Logo & Customizing Big Title Section

You can add a logo to your website from Appearance > Customize > Site Identity, in your WordPress dashboard. And to customize the Big Title section, you navigate to Customize > Big Title section. There you will find all the options, such as adding text to the areas, adding background/parallax images, sections settings, and such.

Customizing Colors

To customize the colors you can navigate to Appearance > Customize, in your WordPress dashboard. For general colors, you can click on the Colors panel, and for homepage sections you can navigate to [Section Name] > Colors, in the Customizer.

Our Focus Section

To customize Our Focus section navigate to Appearance > Customize > Our Focus Section. There are four panels in this customizer section, which Settings, Header, Colors & Our focus section widgets. In Settings panel, you can choose if you want to display the section or not, and Header panel allows you to edit section's title/subtitle. Colors panel is for customizing colors of the section. And to add content to the section, you will have to add Our Focus widget from Our focus section widgets.

Portfolio Section

First you need to make sure that it's enabled from Appearance > Customize > Portfolio section. If it is, then you need to navigate back to your Dashboard and add some items into your Portfolio. The option to add items to your Portfolio is available in your Dashboard menu. There should be, at least, one portfolio item, in order for the Portfolio section to show up.

Portfolio section also has a new option display portfolio items in an overlay upon clicking, instead of taking you to a new page. Don't forget to update to the latest version.

And make sure that you've added a Featured Image to your Portfolio item. If there isn't a Featured Image then it won't appear on the front page.

About Us Section

To customize About Us section navigate to Appearance > Customize > About us Section. There are multiple panels in this customizer section, such as Settings, Main Content, Colors & Features. In Settings panel, you can choose if you want to display the section or not, and Main Content panel allows you to edit section's content. Colors panel is for customizing colors of the section. And to edit the feature knobs on the right, there are multiple Feature options.

Happy Clients Section

Happy Clients section can be also customized from Appearance > Customize > About us section. To add client's logo to this section, you need to click on the About us section widgets panel.and add Clients widget to your site.

Our Team Section

To customize Our Team section navigate to Appearance > Customize > Our Team Section. There are four panels in this customizer section, which Settings, Header, Colors & Our team section widgets. In Settings panel, you can choose if you want to display the section or not, and Header panel allows you to edit section's title/subtitle. Colors panel is for customizing colors of the section. And to add content to the section, you will have to add Our Team widget from Our team section widgets.

Testimonials Sections

To add Testimonials of your clients to your website, you can navigate to Appearance > Customize > Testimonials Section.There you can find all the options to customize the section, just as header text, colors, and adding the main widgets. And yes, it should be "clients say," There are four panels in this customizer section, which Settings, Header, Colors & Testimonials section widgets. In Settings panel, you can choose if you want to display the section or not, and Header panel allows you to edit section's title/subtitle. Colors panel is for customizing colors of the section. And to add content to the section, you will have to add Testimonials widget from Testimonials section widgets.

Testimonials section also has an option to change its default design to Pinterest design.

Ribbon Sections

Zerif Pro theme comes with two ribbon sections - BottomButton Ribbon & RightButton Ribbon. To customize them you can navigate to Appearance > Customize > Ribbon sections, and there you can find two ribbons. And the ribbon will only appear on your site when you will add some text to it.

Shortcodes Section

This Shortcodes Section allows the user to create a section just the way he wants it and needs it. In this tutorial we added a shotcode from WooCommerce so that it will display the recent products from the shop, but the shortcode options are multiple.

If you consider adding more than just one shortcode and want the anchor to take you to a specific part of the section, you can use the  inspect element function on part of the section and there you will find a dynamic id which generates in a different way depending on the shortcode added.

Contact Section

Zerif Pro theme comes with a built-in contact form, which makes it easier for you to get emails from your viewers without installing any additional plugins. This form can be configured from Appearance > Customize > Contact Us Section. There you can configure the email which you want to use to receive these emails, in Settings tab. Additional from display and email settings, you can add your reCaptcha keys to Settings tab to enable reCaptcha to prevent spam.

Also, you can configure contact form text in Main Content tab, and colors in Colors tab. If you're unable to receive after configuring your contact section settings, then check this troubleshooting guide.

Packages Section

If you want to display your packs or packages in an elegant pricing table then you can do it by navigating to Appearance > Customize > Packages Section. Just like other sections, in Settings panel, you can choose if you want to display the section or not, and Header panel allows you to edit section's title/subtitle. Colors panel is for customizing colors of the section. And to add content to the section, you will have to add Packges widget from Packages section widgets.

Google Map Section

If you want to display a map so that people could find your business/location easily then it can also be done within our one page design. Just navigate to Appearance > Customize > Google Map Section, and there you just need to enable to Map section and put down your location. That's it!

Latest News Section

Latest News section displays your latest blog posts on the front page of your site. You can configure the display settings from Appearance > Customize > Latest News Section. In Settings panel, you can choose if you want to display the section or not, and Header panel allows you to edit section's title/subtitle. Colors panel is for customizing colors of the section.

And to add content, you can navigate to Posts > Add New, in your WordPress dashboard. Make sure to add a featured image to your blog posts. And the number of blog posts displaying can be configured from Settings > Reading settings. It's 8, by default.

Subscribe Section

You can also add your email list sign up form to your website, using our Subscribe Section with Sendinblue.com. First, you will have to create an account on sendinblue.com, and get your API from there from this page. After setting up your free account, navigate to Plugins > Add New, and search and install Sendinblue plugin, as seen in above GIF. Install the plugin, and put your API in its option panel to complete the Sendinblue setup.

Now to add this to your front page, navigate to Appearance > Customize > Subscribe Section, and add Sendinblue widget from Subscribe section widgets. And you can configure all the settings fro the section from this area.

Suggested Image Sizes

  • Background Image/Slider/Video: 2048×1365px, 20mb mp4 video
  • Our Focus - 150x150px
  • Our Team - 174x174px
  • Testimonial - 73x73px
  • Client Logo - 130x50px