Introduction

 

Custom Front Page Builder feature available in the customizer is a great way how to build a front page in a very short time. It contains 2 main areas - Header Area and the Content Area.

Below are instructions for configuring different sections of the front page. You will need to go to Appearance   Customize   Custom Front Page Builder in order to access controls for these sections.

 

Customize

 

Custom Front Page Builder

 

Elements Display & Reorder

 

To start customize the front page elements display and order, click on the Elements Display & Reorder link.

 

Elements Display & Reorder

 

Header Area

 

In order to display or not a slider in the header area, use these options. By dragging you can reorder the elements as you need - 1. By clicking on the eye icon, you can show or hide the element - 2. Also note, if you have a particular slider type enabled already, it will be marked as ACTIVE, otherwise INACTIVE - 3. To enable/disable a slider, please learn more in the respective part of the docs - Bootstrap Slider, Parallax Slider.

 

Header Area

 

Content Area

 

Content Area lets you to display and reorder any of the available elements on the front page builder. By dragging you can reorder the elements as you need - 1. By clicking on the eye icon, you can show or hide the element - 2. You can also select, if the elements will be inside of the content container (next to sidebar) or above/under the content container - 3. Element with the title Blog/Page Content is the main content of the page assigned to the front page - it can be a static page or latest posts - 4.

 

Content Area

 

Content Elements

 

Elements available for the content area come with many useful options. Click on any element to see all available settings for the particular section. Also, some elements have unique functionalities, as adding items with unique contents, color designs of an item, typography options etc.

 

Content Elements

 

Content Boxes

 

Content Boxes

 

Content boxes comes with the following options:

  • Enable Content Boxes On Front Page
    • enable/disable the element on the front page
  • Items
    • here you can add and reorder the items for this element with a number of available fields
  • Content Boxes Background Color
    • controls the background color of the content boxes
  • Maximum Number Of Content Boxes Per Row
    • you can choose how many content boxes will be displayed per row on higher resolution devices
  • Title of Content Boxes Section
    • the main title of the section
  • Title Font, Alignment and Color
    • typography, color and style of the title section
  • Section Padding
    • sets up spacing of the section
  • Section Background Image
    • defines background image of the section
  • Background Image Responsiveness Style
    • select how the background image attachment should be displayed
  • Background Repeat
    • defines the repeat of the background image
  • Background Position
    • position of the background image for the section
  • Section Background Color
    • main background color of the section

 

Testimonials

 

Testimonials

 

Testimonials comes with the following options:

  • Enable Testimonials On Front Page
    • enable/disable the element on the front page
  • Items
    • here you can add and reorder the items for this element with a number of available fields
  • Background Color
    • controls the background color of the testimonials
  • Text Color
    • controls the text color of the testimonials
  • Title of Testimonials Section
    • the main title of the section
  • Title Font, Alignment and Color
    • typography, color and style of the title section
  • Section Padding
    • sets up spacing of the section
  • Section Background Image
    • defines background image of the section
  • Background Image Responsiveness Style
    • select how the background image attachment should be displayed
  • Background Repeat
    • defines the repeat of the background image
  • Background Position
    • position of the background image for the section
  • Section Background Color
    • main background color of the section

 

Counter Circle

 

Counter Circle

 

Counter Circles element comes with the following options:

  • Enable Counter Circles On Front Page
    • enable/disable the element on the front page
  • Items
    • here you can add and reorder the items for this element with a number of available fields
  • Counter Circle Text Font
    • typography, color and style of the counter text
  • Title of Counter Circle Section
    • the main title of the section
  • Title Font, Alignment and Color
    • typography, color and style of the title section
  • Section Padding
    • sets up spacing of the section
  • Section Background Image
    • defines background image of the section
  • Background Image Responsiveness Style
    • select how the background image attachment should be displayed
  • Background Repeat
    • defines the repeat of the background image
  • Background Position
    • position of the background image for the section
  • Section Background Color
    • main background color of the section

 

WooCommerce Products

 

WooCommerce Products

 

WooCommerce Products element comes with the following options:

  • Product Categories
    • select which product categories will be included
  • Number Of Products To Display
    • sets up how many products will be displayed in the section
  • Title of WooCommerce Product Section
    • the main title of the section
  • Title Font, Alignment and Color
    • typography, color and style of the title section
  • Section Padding
    • sets up spacing of the section
  • Section Background Image
    • defines background image of the section
  • Background Image Responsiveness Style
    • select how the background image attachment should be displayed
  • Background Repeat
    • defines the repeat of the background image
  • Background Position
    • position of the background image for the section
  • Section Background Color
    • main background color of the section

 

Custom Content

 

Custom Content

 

Custom Content element comes with the following options:

  • Enable Custom Content On Front Page
    • enable/disable the element on the front page
  • Custom Content
    • in this editor field you can add a content as you need - text, image, lists etc.
  • Title of Custom Content Section
    • the main title of the section
  • Title Font, Alignment and Color
    • typography, color and style of the title section
  • Section Padding
    • sets up spacing of the section
  • Section Background Image
    • defines background image of the section
  • Background Image Responsiveness Style
    • select how the background image attachment should be displayed
  • Background Repeat
    • defines the repeat of the background image
  • Background Position
    • position of the background image for the section
  • Section Background Color
    • main background color of the section