❄️  WINTER SALE  ❄️ Get 20% OFF everything using the WINTER2023 coupon code at checkout! View Pricing →

Derive – How to Add World Map

Written by Pavel Ciorici on in 0 comments

Probably you’ve noticed that there’s a World Map section on the front page of Derive Demo.

You can also add a similar map anywhere on your website using the free RVM – Responsive Vector Maps plugin.

How to Create a Map

Since RVM plugin is a recommended one in Derive theme, probably you have already installed and activate it. If not, you can do that now from the Plugins > Add New page in your website’s Dashboard.

Now go to the RVM Maps section in admin area and create a new Map:

After selecting the needed map (in our case World map), Publish the new map.

When the page will refresh after publishing the map, a new tab called Subdivisions will appear. This tab includes all countries in the world, and you can assign a link to the needed countries to relevant pages or categories from your website:

How to Embed the Map in a Page

Each Map you will create automatically will have a shortcode which you can copy from the RVM Maps page:

For example, in Derive demo page we’ve inserted the shortcode in a simple Text Editor module:

Derive – Add Captions to Wide & Full-width Images

Written by Pavel Ciorici on in 0 comments

In Derive you can add captions to wide and full-width images in a very unique style:

You can view a live example in this post from the demo.

In order to add a similar caption, you will need to install the free EditorsKit plugin.

Keep in mind that that the captions will look in this style only if the image has Wide or Full width:

The next step is to choose either left or right alignment for caption text:

Derive – Homepage Slideshow Set up

Written by Pavel Ciorici on in 0 comments

Unlike other WPZOOM themes, the Slideshow used in this theme is a part of our free plugin called Beaver Builder Addons by WPZOOM. This is great news, because this module offers you much more flexibility and you can insert the slider in other pages without any difficulties.

You can display static content like images in the slideshow, or you can configure it to show specific posts from your blog.

Displaying Featured Posts in the Slideshow

In the demo, the slideshow displays the most recent featured posts:

This is an option available only in some of our themes, including in Derive.

To “Feature” a post, just check the following option when you edit a post:

On some websites, this option may be located in the Sidebar or below the post content:

Slideshow Height

The Slideshow module in Beaver Builder offers you many options, so you can customize it as you want.

An important option is the Slideshow Height, which can be changed from the General tab:

If you want to create a fullscreen slideshow on a page, make sure to use a special page template which is not limited in the width.

You can also click on the small icon with a desktop icon to set a different height for tablets and mobile devices, in case you don’t want it to be full-height on these devices.

If you get some white space around the Slideshow module, make sure to edit the Row settings and Widget settings, and set in the Advanced tab all margins and paddings to 0.

Derive – Beaver Builder Integration

Written by Pavel Ciorici on in 0 comments

On this page:

  • How to use Beaver Builder
  • How to load a demo template in Beaver Builder
  • How to use regular widgets in Beaver Builder

Some information from this article may refer to our Inspiro theme, but the instructions are actual for Delicio theme too.

Using Beaver Builder

After the installation of Derive theme, you will be asked to install and activate recommended plugins.

Two of the recommended plugins are:

Beaver Builder (Lite)
WPZOOM Addons for Beaver Builder

Once you will have both these plugins installed, you will be able quickly to load layouts from the demo of Derive or create your own page layouts.

If you haven’t used Beaver Builder before, we recommend you to start here.

How to load Demo Templates in Beaver Builder?

When you create or edit a page, you will see a block called Beaver Builder where you can launch the builder:

Clicking that blue button, you will open the front-end page builder.

Video: Getting Started with Beaver Builder

If you want to quickly load pre-built templates for Derive, click on the Templates area:

If you use a premium version of Beaver Builder, then you will need to select the Derive group to see these templates:

If you want more templates and content templates, consider upgrading to Beaver Builder Standard ($99):

Use the right Page Template

In order to get the best results, make sure to set the correct Page Templates to pages you create using the Beaver Builder:

How to add Widgets in Beaver Builder

One thing that we like about Beaver Builder is that it’s not limited to a specific number of modules that you can use in your pages. Beaver Builder allows you to use any existing WordPress widgets you want! For example, you can easily insert regular widgets or shortcodes to display a map in a page with a custom layout created using the page builder.

You can find these widgets in the WordPress Widgets group from Modules:

Recommended links

Beaver Builder Documentation
Beaver Builder Tools Tour

Derive – Setting up the Homepage

Written by Pavel Ciorici on in 0 comments

By default, WordPress displays your latest blog posts on the homepage.

In order to change that, you will have to create a new page and assign it as your homepage.

Thanks to the Beaver Builder integration, you can build easily any kind of layout with custom sections on your front page.

1. Create the front page & choose the right Page Template

The theme includes a special Page Templates which you have to use for your front page in order to get the slideshow at the top:

– Homepage

You can find more details about the slideshow here.

First, create a new page or edit an existing page (e.g. your current static page) and make sure to select the right Page Template:

Additional details and instructions for the homepage when the Page Builder template is selected can be found here.

2. Assign the new page as your Front Page

Once you’ve published or edited the page you want to use as your front page, go to Settings > Reading page and select your page in the option: “A static page > Homepage“:

3. Start building!

Now that the right page with the right template is assigned as your front page, you can proceed on configuring the sections from it.

Unlike other WPZOOM themes, the Slideshow used in this theme is a part of our free plugin called Beaver Builder Addons by WPZOOM. This is great news, because this module offers you much more flexibility and you can insert the slider in other pages without any difficulties.

If you selected to built your homepage using the Page Builder, go back to edit that page, and click on the blue button “Launch Beaver Builder“:

If you don’t see this block or the button available, probably the Beaver Builder plugin is not installed or active on your website.

Additional instructions and tutorials can be found in Beaver Builder support guides.

In this article you can find some useful instructions about the Page Builder integration in Derive theme.