Configure Homepage Sections

  • Created:
  • / Author: Hans (Support Admin)

There are many sections which make up the homepage. Each section can be customized in the Admin panel by going to the Integral Options tab.

highlights-two

It includes the following sections (in order from top to bottom).

  • Hero (Welcome) Section
  • Features Section
  • Work Section
  • Projects Single Section
  • Projects Grid Section
  • Clients Section
  • Testimonials Section
  • Services Section
  • Pricing Tables Section
  • Call to Action Section
  • About Section
  • Skills Section
  • Team Section
  • Newsletter Section
  • Contact Section
  • Copyright (Footer) Section

Most sections are quite straight forward and only require adding titles and text. Some sections may need clarification and we cover those below.

Changing the Order of Sections

You can change the order in which the homepage sections appear in Integral Options > General Settings > Homepage Layout. Simply drag and drop into the order you wish or disable by placing in the right Disabled column.

highlights-six

Welcome (Hero) Section

Adding an Image Slider
Instead of using a static background image (or color) the Master Slider WordPress Plugin is used for adding image sliders to the Welcome section. Make sure you have installed and enabled the plugin before enabling the slider. To configure the slider settings, in the Admin Panel go to MASTER SLIDER > Settings.

Slider Shortcode
Once you’ve installed the plugin, create a slider and grab the slider’s shortcode. To display the slider, paste the shortcode in the Slider Shortcode field inside the Integral Options Panel.

Features Section

Adding Features
Features are created using Widgets. In the Admin Panel go to APPEARANCE > Widgets and locate [Homepage Features Section]. Add widgets entitled [Integral – Feature Widget] to this area to add features. Add as many as you like.

Feature Icon
This is the icon to be used for the feature. Copy and paste the required icon class from the Fontawesome Icons List and choose from 480+ icons. Or you can chose to upload an image instead.

Example icon class: fa-bookmark

Features Layout 
You can configure the number of features to appear in a row. Additional features will automatically default to the next row. Your options are:

  • 1 per row (1 column)
  • 2 per row (2 columns)
  • 3 per row (3 columns)
  • 4 per row (4 columns)
  • 6 per row (6 columns)

Features Icon Styles 
This will specify the height and color of ALL the icons in the Features section. You can override styling for specific icons in Integral Options > Custom Code > Custom CSS. Or you can include the styles in the theme’s stylesheet (styles.css). For color ideas visit ColourLovers.

Simply enter the class of the icon and add a color style. See example:

highlights-seven

Projects Single Section

Adding Projects
Projects are created using Widgets. In the Admin Panel go to APPEARANCE > Widgets and locate [Homepage Single Projects Section]. Add widgets entitled [Integral – Single Project Widget] to this area to add projects. Add as many as you like.

Project Images/Gallery
You can add multiple images by adding a gallery. If you add only 1 image, it will be shown. However, the flexslider will not be enabled. The slider is automatically enabled once you upload 1 or more images into the gallery.

Projects Grid Section

Adding Projects
Projects are created using Widgets. In the Admin Panel go to APPEARANCE > Widgets and locate [Homepage Projects Grid Section]. Add widgets entitled [Integral – Grid Project Widget] to this area to add projects. Add as many as you like.

Projects Grid Layout
You can configure the number of projects to appear in a row. Additional projects will automatically default to the next row. Your options are:

  • 1 per row (1 column)
  • 2 per row (2 columns)
  • 3 per row (3 columns)
  • 4 per row (4 columns)
  • 6 per row (6 columns)

Project Image
Only 1 image is supported at this time.

Clients Section

Adding Clients
Clients are created using Widgets. In the Admin Panel go to APPEARANCE > Widgets and locate [Homepage Clients Section]. Add widgets entitled [Integral – Client Widget] to this area to add clients. Add as many as you like.

Clients Layout
You can configure the number of features to appear in a row. Additional features will automatically default to the next row. Your options are:

  • 1 per row (1 column)
  • 2 per row (2 columns)
  • 3 per row (3 columns)
  • 4 per row (4 columns)
  • 6 per row (6 columns)

Testimonials Section

Adding Testimonials
Testimonials are created using Widgets. In the Admin Panel go to APPEARANCE > Widgets and locate [Homepage Testimonials Section]. Add widgets entitled [Integral – Testimonial Widget] to this area to add testimonials. Add as many as you like.

If you add only 1 testimonial, it will be shown. However, the flexslider will not be enabled. The slider is automatically enabled once you add 1 or more testimonials

Services Section

Adding Services
Services are created using Widgets. In the Admin Panel go to APPEARANCE > Widgets and locate [Homepage Services Section]. Add widgets entitled [Integral – Service Widget] to this area to add services. Add as many as you like.

Services Layout
You can configure the number of features to appear in a row. Additional features will automatically default to the next row. Your options are:

  • 1 per row (1 column)
  • 2 per row (2 columns)
  • 3 per row (3 columns)
  • 4 per row (4 columns)
  • 6 per row (6 columns)

Service Icon
This is the icon to be used for the service. Copy and paste the required icon class from the Fontawesome Icons List and choose from 480+ icons. Or you can chose to upload an image instead.

Example icon class: fa-paint-brush

Icon Properties
This will specify the height and color of ALL the icons in the Services section. You can override styling for specific icons in Integral Options > Custom Code > Custom CSS. Or you can include the styles in the theme’s stylesheet (styles.css). For color ideas visit ColourLovers.

Simply enter the class of the icon and add a color style. See example:

highlights-seven

Pricing Tables Section

Adding Pricing Tables
Pricing tables are created using Widgets. In the Admin Panel go to APPEARANCE > Widgets and locate [Homepage Pricing Tables Section]. Add widgets entitled [Integral – Pricing Table Widget] to this area to add Pricing tables. Add as many as you like.

Pricing Tables Layout
You can configure the number of pricing tables to appear in a row. Additional tables will automatically default to the next row. Your options are:

  • 1 per row (1 column)
  • 2 per row (2 columns)
  • 3 per row (3 columns)
  • 4 per row (4 columns)
  • 6 per row (6 columns)

Feature 1, 2, 3, 4, 5, 6
You can enter up to 6 features per pricing table. The feature row will only appear if you enter text.

Team Section

Adding Team Members
Team members are created using Widgets. In the Admin Panel go to APPEARANCE > Widgets and locate [Homepage Team Members Section]. Add widgets entitled [Integral – Team Member Widget] to this area to add team members. Add as many as you like.

Features Layout
You can configure the number of team members to appear in a row. Additional members will automatically default to the next row. Your options are:

  • 1 per row (1 column)
  • 2 per row (2 columns)
  • 3 per row (3 columns)
  • 4 per row (4 columns)
  • 6 per row (6 columns)

Social Profile URL’s
Only those which have a URL entered will be shown.

Newsletter Section

Form Code
You can enter any form code here but styling is supported for Mailchimp and ConstantContact. You can override form styling in Integral Options > Custom Code > Custom CSS.

In order to display just the email field you will have to modify your form code when you grab the embed code from Mailchimp or ConstantContact.

Here is an example of our customized form code:

Highlighted in RED is what we removed, in GREEN what we added.

Before Modification

newsletter-before

After Modification

newsletter-after

Getting the embed code

When getting the code from Mailchimp or ConstantContact to embed the form into your website, make sure to select the NAKED FORM option. This is basically a form with no styling.

newsletter-form

Contact Section

Contact & Address Fields
Only fields with data entered will be displayed.

Social Profile URL’s
Only social profile URL fields with links entered will be displayed.

Contact Form
Simply install the Contact Form 7 plugin and paste the shortcode into the field. The form will automatically display.