1.1 - Installing the Pro Version

Step 1: Activate your account

Upon finalizing your order, you’ll get an email with the account activation link like shown below. Click the link to activate the account.

Step 2: Download the PRO version

Click the “Download the latest Pro version” link to download the ZIP file.

Step 3: Install the PRO version

You can easily install the Pro version via the Plugin / Add New (Upload Plugin) screen. Upload the ZIP file and activate the plugin to get pro features.

1.2 - Activating the License

If you move your website from staging to live or installing to a new domain, you’ll need to activate the license. Navigate to the Plugins page and click the “Activate License” link below the plugin name. You can find your License Key inside the “Thanks for upgrading” email sent from WPBits after your purchase.

1.3 - Requirements

PHP Version

Make sure you have PHP 7 or higher version in order to use this plugin. You can contact to your hosting provider to learn how to upgrade your PHP version.

PHP Memory Limit

WordPress Memory limit should be 128MB or greater (256 MB is recommended by WooCommerce) For further reading check https://codex.wordpress.org/Editing_wp-config.php#Increasing_memory_allocated_to_PHP.

Sources:

• https://codex.wordpress.org/Editing_wp-config.php#Increasing_memory_allocated_to_PHP
• https://docs.woocommerce.com/document/increasing-the-wordpress-memory-limit/
• https://premium.wpmudev.org/blog/increase-memory-limit/
• http://www.wpbeginner.com/wp-tutorials/fix-wordpress-memory-exhausted-error-increase-php-memory/

PHP Maximum File Size, Post Size and Execution Time values

If you are getting errors/warnings during file uploads, demo imports, saving customizer, or page builders; it is recommended to increase these values. Contact your web hosting provider if you don’t have permission to change the PHP.ini file.

• http://www.wpbeginner.com/wp-tutorials/how-to-increase-the-maximum-file-upload-size-in-wordpress/

2.1 - Site Navigation

Use the site navigation widget to create any navigation menu you want. The widget has been designed to be used in a header or footer template. Add [WPBits] Site Navigation widget then select the menu to use this widget in your template. Click on the “Style” tab of the widget to customize it.

Drop Down Menus

You can select the direction of the drop down menu from the settings panel of the top parent menu item.

Multi-Column Drop Down Menus

To create a multi-column drop-down menu, expand the top-level menu item and chose the column size under the “WPBits Mega Menu” select box. You can also specify the column width and direction.

Mega Menus

Mega menus are a drop menu that displays content created with Elementor. Use the Elementor’s UI and widgets to create any content you want to be displayed as a mega menu on your navigation. In the following example, we have created a mega menu template that contains a WooCommerce Grid Master widget and assigned it to the “Mega Menu” top-level menu item. Here is a step-by-step guide to creating a mega menu.

We are going to use the WPBits Theme Builder templates. Please check this section if you don’t know how to create and assign a template to a site location.

Step 1: Create a new template and assign it to the “Navigation” location.

Step 2: Edit the template with Elementor and create your content.

Step 3: Assign the template to a top level menu item via the Template select menu.

2.2 - Decorative Slideshows

• Use decorative slideshows to create an image slider with masks. Select your images then select a pre-defined SVG mask or use your custom PNG or SVG images to create your own mask.
• There are pre-defined shapes available to use with any image you want.
• If you want to use your own mask, just change the “Mask Source” to upload a custom mask image. Mask images must be PNG or SVG and should contain transparent and filled areas. The filled (with any color) areas of your mask image will show the image and the transparent areas will be masked.

2.3 - One Page Navigation

Use One Page Navigation widget to add a navigation menu on a fixed position or sticky to the top of the window.

Navigation Links and Target Sections

You can link the navigation items independently. But, if you are targeting an internal section on the same page, then you need the mark that section with the same identifier given to the link. The only difference between them, the “Link to” part should contain the “#” character before it.

For example; the following screenshot shows how the “Clients” navigation item is linked to the “section-clients” id.

In order to mark a section;

• Open the “Edit Section” panel of the target section.
• Navigate to the Advanced tab
• Use the CSS ID field to add your unique identifier. Don’t use space or special characters other than dash or underscore.

2.4 - Grid Masters

Grid Master widget allows you to create any post loop you want from any custom post type. You can use your grid on a page individually or as a template for your archive pages combining with WPBits Templates.

• Query
• Grid Layout
• Elements
• Content Injections
• Filter Navigations
• Box Style
• Element Wrappers

Query

• Select your source post type to display.
• Use the include/exclude/filter terms to specify your query.
• Change the order logic.

Grid Layout

• Change the layout style, column size, etc. to customize the grid layout.
• Use the “Custom” option from the “Output Format” select box to take the control of the final HMTL output if you need to customize it.
  

Elements

• Elements are a group of elements that is available to build the content of the grid.
• Use the “ADD ITEM” button to add a new element to your output.
• Every element has its own set of options. Expand an element to reach the options.
• You can customize the style of these elements from the “Style” tab.

Content Injections

You can inject your content such as Google Adsense code to be displayed between the post loop boxes. Some of the use-cases of this feature might be advertising banners or a “call to action” content.

Filter Navigations

The filter navigation can be used for many purposes.

• Dynamic Query: The grid content (posts) will be replaced by sending a new query to the server when the user clicks on a navigation item. Note that, this option won’t work when the grid used as an archive template. Use this option to increase your page loading speed if you have more than 30 posts to show on the page.
• Use Styling Tab / Filter Navigation to change the navigation location and customize the styling.

Box Style

Use the “Box Style” settings to customize the box and the items globally. Select a global font, set colors for all elements, change the box background, align elements, etc. Remember, almost every element have their own styling section and the font type, and color settings.

Element Wrappers

Use Element Wrappers to distribute your grid elements into separate containers. There are 3 wrappers available to use. Let’s say, you have “Post Thumbnail”, “Post Title” and “Excerpt” elements and you want to display the post thumbnail on the left side and others to the right. In this case, you can use Element Wrapper 1 to wrap the post thumbnail and Element Wrapper 2 to wrap the others. Then, change the orientation of the two elements from the “Box Style” section.

You can import Grid Master templates from the WPBits Template Library and study how we used the element wrappers to create hover effects and advanced layouts.

2.5 - WooCommerce Grid Master

WooCommerce version of the Grid Master widget. Visit the Grid Master section to learn how to use this widget.

2.6 - Carousel Master

Use this widget to create a post carousel from a selected source. The Carousel Master widget uses the same design logic as the Grid Master widget. Visit the Grid Master section to learn how to create and design your loop elements.

2.7 - WooCommerce Carousel Master

Use this widget to create product carousels. The WooCommerce Carousel Master widget uses the same design logic as the Grid Master widget. Visit the Grid Master section to learn how to create and design your loop elements.

3.1 - Image Effects

• Use image effects (masks) to create a stylish image without open your image editor like PhotoShop.
• There are pre-defined shapes available to use with any image you want.
• If you want to use your own mask, just change the “Mask Source” to upload a custom mask image. Mask images must be PNG or SVG and should contain transparent and filled areas. The filled (with any color) areas of your mask image will show the image and the transparent areas will be masked.

3.2 - Parallax Background Effects

• Select a column or a section element and click the “Style” tab of the Elementor panel.
• Enable the feature by using the [WPBits] Parallax Background checkbox under the “Background” section.

3.3 - Scroll Effects

• Select an element and click the “Advanced” tab of the Elementor panel.
• Enable the feature from the [WPBits] Scroll Effects section
• Give start and end values based on the scroll position of the browser window.
• Activate one of the transformation effects then customize the start/end values of the effect between the given viewport. Viewport defines when the effect is going to be performed between the given values. For example, if you want to start the effect when the item appeared and end when disappeared, then leave the viewport bottom and top values “0”. Or, you may want to start the effect a while later when the item first appeared on the screen, in this case, you need to increase the Viewport Bottom value.

3.4 - CSS Animations

• Select an element and click the “Advanced” tab of the Elementor panel.
• Enable the feature from the [WPBits] CSS Animations section
• Give start and end values to the animation under the “From” and “To” tabs.

3.5 - Reveal Effects

• Select an element and click the “Advanced” tab of the Elementor panel.
• Enable the feature from the [WPBits] Reveal Effects section

4.1 - Template Library

Click to the WPBits logo on the Elementor start section then click any template to import your page.

5.1 - What is WPBits Theme Builder?

WPBits Theme Builder is a tool that lets you change the header, footer, archive, single post, and many other components that managed and styled by your currently active theme. For example; you can use Elementor builder to build a new template that contains your site logo, site navigation, etc. then use it as the header design of your website.

5.2 - Creating Location Templates

Step 1: Open WPBits AFE / Theme Builder screen.

Step 2: Click to the “Add new template” button

Step 3: Select the location of the template. Click to the “Edit With Elementor” button.

Step 3: Use Elementor widgets and sections to design your template. There are some widgets created specifically to use with the theme builder. These widgets are;

• [WPBits] Breadcrumb
• [WPBits] Post content
• [WPBits] Post title
• [WPBits] Archive title
• [WPBits] Archive description
• [WPBits] Site logo
• [WPBits] Site navigation

5.3 - Creating Header / Footer Templates

Step 1: Create a new template and assign it to the Header location.

Step 2: Edit the new template with Elementor by clicking to the “Edit with Elementor” button.

Step 3: Use Elementor widgets and sections to design your template. There are some widgets created specifically to use with the theme builder. These widgets are;

• [WPBits] Breadcrumb
• [WPBits] Post content
• [WPBits] Post title
• [WPBits] Archive title
• [WPBits] Archive description
• [WPBits] Site logo
• [WPBits] Site navigation

Pre-built Header Templates

You can also use the WPBits Template Library to import pre-built header templates for a quick start. Click on the WPBits logo on a new section toolbar to access the library.

5.4 - Creating Archive Templates

If you want to change the design of your category, archive, tag, search result, etc. pages then you can use the WPBits Theme Builder and the WPBits Grid Master together.

Step 1: Open WPBits AFE / Theme Builder screen.

Step 2: Click to the “Add new template” button

Step 3: Select the location of the template. Click to the “Edit With Elementor” button.

Step 4: Add a Grid Master to your template and select Global Query option as the Query. You can visit the Grid Master section to learn more about the widget.

Pre-built Grid Templates

You can also use the WPBits Template Library to import pre-built grid templates for a quick start. Click on the WPBits logo on a new section toolbar to access the library.

6.1 - Upgrading

1. Install the free WPBits Addons for Elementor plugin.
2. Click the “Upgrade” link under the “WPBits AFE” menu.
3. Click “Upgrade Now” button and complete the order.