X builder Documentation

  • Getting Started
  • X Builder Plugin Settings
  • General Overview
  • Content Area
  • Add Sections
  • Settings Tab
  • Design Settings
  • Add Rows
  • Column Settings
  • Import/Export & Save Settings
  • Basic Elements
  • Elements
  • Custom Post Types
  • Content Elements
  • Image Element
  • Google Map
  • Woocommerce Elements
  • Product Elements & Options
  • Product Categories
  • Slider Elements
  • Revolution Slider
  • Contact Form 7 Elements
  • Contact Form

Getting Started

Getting Started

X Builder plugin is a new page builder plugin powered by StylemixThemes. The plugin pre-packaged in the eLab Electronics Store WooCommerce theme. This is a comprehensive plugin for creating page layouts with intuitive drag & drop builder.

You can build a responsive website and manage your content with the ready to use elements. The drag and drop interface allows to build fabulous and beautiful WordPress pages without touching a single line of code.

Some of the features of the X Builder plugin include:

 Drag & drop builder to create page layouts;
 Fully customizable and ready to use content elements;
 Fully customizable page rows and columns;
 Content elements for WooCommerce;
 Responsive design options to create beautiful pages on all devices;
 Possibility of importing/exporting pages;
 Possibility of using unlimited sections and rows;
 Divide page rows into multiple columns;
 Add full and boxed width sections;
 Possibility of loading images via CDN.

X Builder Plugin Settings

X Builder Plugin Settings

You can set up general settings of the X Builder in the Dashboard > X Builder section. The X Builder settings panel was build based on the Redux Framework and contains General Settings, Post Typs, and Import /Export sections.

General Settings section contains options for inserting CDN URL. So all the images inside the X Builder elements will be loaded through CDN.

Within Post Types settings, You are allowed to enable or disable X Builder features globally for posts, pages, media, etc.

Moreover, you can enable/disable X Builder on certain pages and post types via appropriate switcher in WordPress admin bar

 

The Import/Export offers users the ability to back up and restore their Redux options data in one of three ways: raw data, file and URL.

General Overview

Content Area

Content Area

The content area consists of a section, a row and a column. Section is a root type container that allows to group multiple rows. Section can contain only rows and it can’t be inserted into any other element.

Row is a main part of the content area. It allows to build composite layouts by inserting inner rows and dividing a page into logic blocks with columns.

Columns are part of the row which carry your content elements inside them. You can click and drag columns between rows.

Add Sections

Add Sections

There is one active section with row and column in the editor by default. You can add more sections by clicking on Add Section icon on the top and bottom of the content area.

The Add Section includes a new section to the working area. The default section consists of a single row and a single column.

Hover a mouse pointer on the Section to display edit, copy, and delete buttons. Click on Edit button to open additional settings of the Section container on the right bar.

The Section settings are divided into two tabs which are Settings and Design. The Settings tab contains layout and index level selections.

Settings Tab

Settings Tab

There are 3 section layouts - Boxed, Full Width, and Fullwidth Without Paddings. Those options allows to display your sections in boxed and full width.

Boxed layout outcome:

Full Width layout outcome:

Fullwidth Without Paddings outcome:

Tip. Fullwidth Without Paddings disables paddings of the main page container. Paddings of rows, columns and elements remain untouched.

Design Settings

Design Settings

The X Builder plugin offers additional design options for Section, Row, Column and content elements which can be found under Design Tab. It is allowed to set different design styles for desktop, laptop, landscape, tablet and mobile views.

Note. The settings in the Design tab relates to rows, columns and elements as well. The following instructions are useful for all of them.

Within Design options it is possible to control:

  • Responsive options
  • Background image, color, and position
  • Margins, Padding control settings
  • Border style
  • Box shadow style

Resposnsive Options

Click on device icons to switch and set design styles to certain device.

Within settings, it is possible to disable or hide any section, row, column and content element across multiple devices.

Tip. It is allowed to set different background color/image, border, box shadow, margins and paddings for different devices.

Background Options

Besides that, there are background style settings. You are allowed to set background color and image, its position and size to sections, rows, columns and elements.

Select a background color easily from the color picker or upload a background image to your section, row, column or even to certain element.

Margins and paddings

In addition, you are able to add margins and paddings for overall element, section, etc. or just left, right, top or bottom part. You need to just set a value without “px”. Mergin and Padding fields accept negative values as well.

Border & Box Shadow Options

Add a border for overall element or right, left, top and bottom part as well as box shadow. You can control the size, radius and color of borders and shadow.

Add Rows

Add Rows

In order to add a new row, click on Add Row icon on the top-right corner of the Section. You can add rows as much as you need.

Row Settings

Hover your mouse pointer over the Row area to see control buttons. There are Edit, Copy and Delete buttons as well. Click on Edit button to open Row Settings menu. Row settings consist of row layout options and grid presets.

Row Layout

Within row settings, you can select whether display a row in boxed width or stretch a row width to Section.

Row Boxed layout outcome:

"Stretch to Section" layout uses the Section layout settings where the row is located. In the image below, the Fullwidth Without Content layout is enabled in the Section settings.

Grid Presets

Grid Presets option is the main part of row settings. Within the option, rows can be divided into multiple columns according to presets (eg. One, Two, Three, Five, Six columns).

Column Settings

Column Settings

Columns are part of the row and they hold content elements inside them. Each row contains at least one column by default.

Hover your mouse over the Column area and click on Edit Column button to display column settings menu.

Within settings, you can control a width of your columns individually. Also, it is possible to set column width to different screen sizes – Extra Large, Medium, Small, and Extra Small.

You can select columns width depending on the percentage ratio of the full-width of the row. Those settings allows to create various types page structures.

Tip. In order to display more than column, you should select the needed Grid presets from the Row Settings and after, set column width.

In the image below, the Row is divided into 3 columns and set 100% default width to the first column.

Import/Export & Save Settings

Import/Export & Save Settings

In order to apply all the changes click on Save Content button in the box below Elements list.

Import/Export Pages

There is an option for importing or exporting ready content which was built using X Builder plugin. It allows saving ready pages as templates and uploading them to new pages.

Basic Elements

Elements

Elements

In the X Builder editor, you should drag to the working canvas from the bar in the right section, to add a content element or inner row to your page.

Additionally, you can click on the “plus” icon inside columns to open the content element section menu. From that element menu, you should drag an element to the active column.

Element Settings

You are allowed to edit, copy, and remove the content elements. Just hover your mouse pointer over the needed element are in order to display element control buttons.

Element settings are divided into several tabs – Settings, Design, Parallax. There is an additional Typography for elements which contain text. Options in the Settings tab depends on the element type.

Tip. See Design Settings in order to read the detailed overview of the Design tab.

Parallax tab contains field to set a Parallax Speed value. This option enables a parallax effect to elements

Inner Row

Inner Row element allows inserting a row inside a column for building more complex page layouts. Inner Row contains similar settings like Row.
To open Inner Row settings, hover your mouse pointer over the inner Row area and click on Edit button.

Note. It isn’t allowed to insert the Inner Row element inside the Inner Row.

In addition, you can edit column settings inside the Inner Row element. That column settings are similar to the main Column settings.

Tip. See Column Settings to review instructions regarding column settings.

Custom Post Types

Custom Post Types

Testimonials

X Builder contains special elements for displaying certain custom post types. The Testimonials element displays testimonial posts.
To open Testimonials, click on Edit button of the element.

Testimonials settings incorporate two options: Per Row and Number of Posts.

  • Per Row – a number of testimonials per a single row;
  • Number of posts – a total amount of testimonials to display.

Portfolio

Another special element for displaying custom post types. Portfolio displays all portfolio posts published in the website.

Portfolio element allows sorting portfolio posts by categories. Thus, you can display different portfolios on your pages

Post List

Post List element allows displaying a list of blog posts on any page of website. Options that Post List element includes.

 

  • Enable carousel - displays posts as carousel
  • Simple view - displays only published date and title of posts
  • Title - enter title to list of posts
  • Categories – select post category to display certain posts
  • Total Posts to show – set max amount of posts
  • Trim Words – number of words in short description of post
  • Typography – set up font styles of Post List items
  • Design – apply design settings
  • Parallax – enable parallax effect

Post List Carousel

Another element for displaying posts in list and carousel modes. Options that Post List Carousel includes.

 

  • Enable carousel - displays posts as carousel
  • Categories – select post category to display certain posts
  • Trim Words – number of words in short description of post
  • Design – apply design settings
  • Parallax – enable parallax effect

 

 

Content Elements

Content Elements

Text

Text element for displaying text content. There is a standard text editor in the element settings.

  • Text Editor - contains text formatting options such as bold, italic, underline, content alignment, text color, text highlight color as well as image/file upload.
  • Typography – set up font styles of text in the editor;
  • Design – apply design settings;
  • Parallax – enable parallax effect;

Heading

Element for displaying heading/title on pages. Within element settings, you can select heading tag and control typography options.

Heading settings contain two options:

  • Text - write a text that will display as title/heading
  • Tag – select an appropriate heading tag from the list (h1, h2, h3 …).
  • Typography – set up font styles of heading;
  • Design – apply design settings;
  • Parallax – enable parallax effect;

Widget

Widget element allows displaying widgets on your pages. It includes all available WordPress and plugins widgets on a website

Within settings, you can select a certain widget and its title.

  • Widget - select the needed widget from the widgets list
  • Widget Title – type a title of your widget
  • Typography – set up font styles of widget title
  • Design – apply design settings;
  • Parallax – enable parallax effect;

Button

Button element allows to add custom buttons to your page and to style it. Add custom colors, control typography options or apply Design settings.

Within settings, you can apply:

  • Button Label - add a text of button
  • Button Link – put a link to a page/site
  • Button Type – select a style of button (Solid, Outline)
  • Button Color – set color of button text
  • Button Color on Hover – set color of button text on hover;
  • Button Border Color – set border color of button
  • Button Border Color on Hover – set border color of button on hover
  • Button Background Color – set background color of button
  • Button Background Color on Hover – set background color of button on hover
  • Inline Button – displays button according to button text. If it is disabled, button fills column width
  • Typography – set up font styles of button
  • Design – apply design settings
  • Parallax – enable parallax effect

Countdown

The countdown element allows displaying a countdown until the selected date.

Options that Countdown element includes:

  • Time - set finish time of countdown
  • Date – select end date of countdown (max amount of days is 99)
  • Design – apply design settings
  • Parallax – enable parallax effect

Iconbox

Display boxes with icon, title and content on your pages via Icon Box element. Options that Icon Box element includes.

 

  • Set Icon - select an appropriate icon
  • Iconbox Type – select a type of icon box (Icon Top, Icon Left, Icon Right)
  • Title – enter icon box title
  • Text Editor – enter some content to icon box
  • Typography – set up font styles of icon box items
  • Design – apply design settings
  • Parallax – enable parallax effect

 

Image Element

Image Element

You can add a single image to your content via Image element. There is a list of feature that Image element includes:

  • Add Image - upload an image to the element
  • Image Width – set an appropriate width to an image
  • Image Height – set an appropriate height to an image
  • Image Align – control alignment of an image (left, right, center);
  • Image Style – set style to an image (normal, rounded with shadow)
  • Design – apply design settings;
  • Parallax – enable parallax effect;

Banner

Create custom banners and display them on any page of your website via Banner element.

Banner element includes these settings:

  • Banner Title - put title of your banner
  • Banner Link – add a custom link in banner
  • Banner Subtitle – type subtitle of your banner
  • Banner Title Max width – set max width to title
  • Banner Subtitle Max width – set max width to subtitle
  • Banner Content Max width – set max with to content
  • Banner Min Height – set default min height to banner
  • Text Editor – add content to your banner
  • Button Title – text label of banner button
  • Position order – select predefined order of banner items
  • Banner Overlay – set overlay color to banner
  • Typography – set up font styles of banner items
  • Design – apply design settings
  • Parallax – enable parallax effect

Brands

Element for displaying logos of popular brands, logos of partners, etc. in carousel mode. Within Brands element settings you can add unlimited amount of logo images.

Options that Brands element includes:

  • Grid View - displays logos in two columns grid (disables carousel)
  • Image Field – add logo image and a link
  • Design – apply design settings
  • Parallax – enable parallax effect

Hint Images

Element displays images in masonry grid style. Also, you can add hint text to images that displays with images. Options that Hint Images element includes.

  • Image Field - add image to masonry grid
  • Hint text – click on the added image to enter a hint text
  • Design – apply design settings
  • Parallax – enable parallax effect

Google Map

Google Map

The element allows displays Google Maps on your pages. Firstly, you need to enter Google Maps API key in the theme settings.

Tip. You can review a detailed overview of how to generate Google Maps API key here.

Options that Google Map element includes:

  • Latitude - put latitude coordinate of your location
  • Longitude – put longitude coordinate of your location
  • Map height – set height of your map
  • Map zoom – set default zoom
  • Map X Offset – set offset value in vertical axis
  • Map Y Offset – set offset value in horizontal axis
  • Design – apply design settings
  • Parallax – enable parallax effect
Tip. You can find your location coordinates (latitude & longitude) following these instructions.

Woocommerce Elements

Product Elements & Options

Product Elements & Options

Products in tabs

Products in tabs element allows displaying WooCommerce product categories as tabs. Options that Products in tab element includes.

 

  • Module Title - enter a title of element
  • Include Latest Products – display recently added products
  • Include Products with low quantity – display products with less than 5 pieces
  • Include Recently Viewed Products – display products recently viewed by users
  • Show Products in carousel – enable carousel mode for products
  • Total Products to show – set max amount of products to display
  • Products Per Row – set number of products per row
  • Product view – type of product view (Vertical/Horizontal)
  • Categories – select categories that will display as tabs
  • Products Per Row in carousel Horizontal/Vertical Tablet – – set a number of products per row in carousel for tablet
  • Products Per Row in carousel Mobile – set a number of products per row in carousel for mobile
  • Design – apply design settings
  • Parallax – enable parallax effect

Deal Of The Day

Display special offer products in carousel mode. Options that Deal of the Day element includes.

  • Title - enter title of element
  • Posts To Show – select products to display
  • Design – apply design settings
  • Parallax – enable parallax effect

Featured Products

Select your products to display them as featured products on any part of your pages. Options that Featured Products element includes.

  • Title - enter title of element
  • Posts To Show – select products to display
  • Design – apply design settings
  • Parallax – enable parallax effect

Hot Deals

Display discount products and sort them by categories. Options that Hot Deals element includes.

 

  • Title - enter title of element
  • Categories – select product categories to display
  • Total Products to show – max amount of products to display
  • Products Per Row – number of products per row
  • Design – apply design settings
  • Parallax – enable parallax effect

Product Hint Image

The element displays images of the selected products with a hint text. Options that Product Hint Image element includes.

  • Add Price - enable to display product price
  • Post To Show - select products to display
  • Image Width - set width value of image
  • Image Height - set height value of image
  • Design – apply design settings
  • Parallax – enable parallax effect
Tip. In order to use Product Hint Image element, you need to add images and hint text in the Hint Images section in a single product settings. For detailed overview, see the eLab Theme manual.

Products Grid

The element allows displaying products in grid view and sorting them by product categories. Options that Products Grid element includes.

 

  • Title - enter title of element
  • Show tabs as – select appearance of tabs (Icons/Buttons)
  • Include Bestsellers – display bestseller products
  • Include Popular – display products with the highest rating
  • Include Trending – display the most viewed products
  • Categories – select product categories to display
  • Banners – select banners from list of banners
  • Eight Products Style – enable to display products in masonry grid with 8 products
  • Design – apply design settings
  • Parallax – enable parallax effect

 

 

 

Product Categories

Product Categories

Product Categories Carousel

The element allows selecting multiple categories and displaying them in carousel. Options that Product Categories Carousel includes.

  • Title - enter title of element
  • Categories – select product categories to display
  • Inverse Style – change appearance of items in carousel
  • Design – apply design settings
  • Parallax – enable parallax effect

Product Categories Grid

The element allows selecting multiple categories and displaying them in grid view. Options that Product Categories Grid includes.

 

  • Title - enter title of element
  • Categories – select product categories to display
  • Typography – set up font styles of element items
  • Design – apply design settings
  • Parallax – enable parallax effect

Products Grid with Categories

Display products in masonry grid with a banner and filter them by categories. Options that the element includes.

  • Title - enter title of element
  • Category - select product category
  • Banner - select a banner to display with products
  • Typography – set up font styles of element title
  • Design – apply design settings
  • Parallax – enable parallax effect

Category Banner

Display any product category as banner via Category Banner element. Options that Category Banner element includes.

  • Title - enter title of element
  • Image – add image with recommended dimensions (270x220)
  • Category – select product category
  • Show Category name – enable to display category name
  • Show Category price – enable to display less price of a product
  • Design – apply design settings
  • Parallax – enable parallax effect

 

 

 

 

Products Grid Carousel

Products Grid Carousel

Display your products in masonry grid carousel view. Options that Products Grid Carousel element includes.

 

  • Title - enter title of element
  • Typography – set up font styles of element title
  • Design – apply design settings
  • Parallax – enable parallax effect

Products Sale Carousel

Display all your discount products in carousel mode. Options that Products Sale Carousel element includes.

 

  • Title - enter title of element
  • Products Per Row - set number of products per row
  • Number of items - max amount of products to display
  • Typography – set up font styles of element title
  • Design – apply design settings
  • Parallax – enable parallax effect

Departments Carousel with Grid Products

The element allows displaying products according to the selected categories. Categories display in carousel view. Options that the element includes.

 

  • Products Per Row - set a number of products per row
  • Categories - select categories to display
  • Design – apply design settings
  • Parallax – enable parallax effect

Product Grid with Sync Carousel

The element displays categories in carousel grid view sorted by latest, trending, bestsellers, and rating options. Options that the element includes.

  • Title - enter title of element
  • Number of items - max amount of products to display
  • Sort by - select option to sort products by latest, trending, bestseller and rating
  • Typography - set up font styles of element title
  • Design – apply design settings
  • Parallax – enable parallax effect

Products Carousel

The element displays products in carousel view. Within settings, you are allowed to select categories to display products belongs to those categories. Options that Products Carousel includes.

  • Title - enter title of element
  • Categories - select categories to sort products
  • Products count - max amount of products to display
  • Typography - set up font styles of element title
  • Design – apply design settings
  • Parallax – enable parallax effect

 

 

 

Slider Elements

Revolution Slider

Revolution Slider

Display sliders created by Revolution Slider on any part of your pages. Options that Revolution Slider element includes.

  • Choose Slider - select your slider
  • Design – apply design settings
  • Parallax – enable parallax effect

Contact Form 7 Elements

Contact Form

Contact Form

Special element for displaying forms created using Contact Form 7 plugin including additional contact information. Options that Contact From element includes.

  • Contact Form Title - enter form title
  • Choose Contact Form – select a contact form to display
  • Location title – additional section to display address details
  • Contact title – additional section to display contact details
  • Phone title – additional section to display phone numbers
  • Design – apply design settings
  • Parallax – enable parallax effect