# Home Page

You can quickly build a home page using Visual Composer for WordPress that is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required

From your **Dashboard** admin Navigate to **Pages**

   \- Select **All Pages** to see all page then click edit one page you want

   \- Select **Add New** to create new page .One page always include a lot of parts like Header , Main Page, Widget Sidebar and Footer. In that section we guide you create Main page by using Visual Composer.

**A. How to use Visual Composer**

Have you ever used Visual Composer ? Please follow that guide first : [**Visual Composer guide**](http://docs.visualcomposer.com/basic)

[Official Plugin Documentation](https://kingcomposer.com/) For More information about the Visual Composer check the official documentation.

[Watch video about Visual Composer](https://youtu.be/LFZVXQhIs9I)

**1. Classic Mode.**

 You can insert code on table then Home page will be created automatically.

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LsPK0mvSvBTINQbwIY_%2F-LsPK2oe7Wi0DtZn3G_u%2F-LsPPlnV6-FjAzUvlUD6%2Fimage_100.jpg?alt=media\&token=5a53aa8d-46c8-41e8-9621-07021b19e23c)

**2. Backend Editor Mode**

 Drag and drop elements you need to build your page layout.

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LsPK0mvSvBTINQbwIY_%2F-LsPK2oe7Wi0DtZn3G_u%2F-LsPPofOxhun2msNkM4g%2Fimage_99.jpg?alt=media\&token=fbcc12da-a762-4134-951e-d4430c774bbe)

**How to use Back End Mode**

 **a. Add and modify Row Layout**

 **Step 1** - Go to your page / post, first activate the backend editor and click **Add Element** .

**Step 2** - Select the **Elements** you want to use.

![](https://670274868-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsVkj2IKO4moRVo_nEj%2F-LsuSt_j_3ed1azbSiVF%2F-LsuY5BLLXHzS3IX5Sw8%2Fimage_3.jpg?alt=media\&token=2358f9d6-84f3-4ff5-a444-847682a4d555)

![](https://670274868-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsVkj2IKO4moRVo_nEj%2F-LsuYB-_0N9kaNpBISV6%2F-LsuYDrGideKKzb6ZYgH%2Fimage_3.jpg?alt=media\&token=15108e4f-5f31-49e8-8166-d0aee7b0fad6)

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvUfVcwKuRS5Vp8Z1M%2Fimage_34.png?alt=media\&token=76d14697-3d16-4904-821d-11ddb9245384)

**Step 3** - Click on the Edit This Row (pencil icon) to Edit the Row element ( in our example we use row with 3 columns filled with text block ) .

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvUjeeOoM54bxR3PjV%2Fimage_4.jpg?alt=media\&token=b3b4edca-3681-49dd-97f7-5ef4bd2109dc)

**Step 4** - To change the Row layout ( number of columns ) you only select a layout or custom to make your own

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvUnot_dBEDjLFz3Ea%2Fimage_6.jpg?alt=media\&token=85e5825c-126c-4170-a157-9300883d0172)

**b. Edit Element**

Pencil Icon - To Edit Row, Column or Element you need to click the Pencil icon.

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvUtSOz5MT8LAhS1VF%2Fimage_7.jpg?alt=media\&token=bde704c1-2bdf-4f57-bf00-472731231365)

**c. Duplicate Element**

 Pages Icon - To Duplicate Row or Element you need to click the Pages icon.

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvUwC4glpofJs-Pgyh%2Fimage_8.jpg?alt=media\&token=6425bb00-a10c-46e5-bed7-2ead2a9097be)

**d. Remove Element**

 Trash Box Icon - To Remove Row, Column or Element you need to click the Trash Box icon.

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvV0FQBzimDoXI3DkT%2Fimage_9.jpg?alt=media\&token=a8133fbb-3090-4957-93c2-29fb3c158d33)

**e. Copy Element**

 Copy Icon - To Copy Row, Element you need to click the Copy icon.

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvV8UeKP1CwxocmRk0%2Fimage_14.jpg?alt=media\&token=c73a05b5-2784-4838-b283-2a4faceeecde)

**f. About Row / Column / Custom heading / Text Block Design options**

 Design Options - When you edit row / column / custom heading / text block Element, you can edit the design options 

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvVCYGdZqxgccf5RuN%2Fimage_10.jpg?alt=media\&token=168ac6f9-1ed2-443e-ae96-8a47877ef598)

Row / Custom Heading / Text Block element have a default Bottom Margin of 30 pixel, you may want to set it to 0 if you don't want to have bottom space

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvVGuxbdhdBHLQXeVH%2Fimage_11.jpg?alt=media\&token=4bcd49f7-88f1-4140-a370-0f9199a24978)

It is Good to add bottom Padding to your Column, so they will looks good on mobile

![](https://670274868-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsVkj2IKO4moRVo_nEj%2F-LsZhX8P2kl463gHn_L1%2F-LsZvdeYRerPMPGs46HY%2Fimage_12.jpg?alt=media\&token=d8f0d198-6fc6-4805-9ac0-13ca2df335a6)

Left and Right Margin should NEVER be modified, please left blank

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvVPSz5KW3GgPhX-NR%2Fimage_13.jpg?alt=media\&token=07649c17-915a-4ead-bc2a-166ab3bbe26d)

For Row Element the Left and Right Padding should also NEVER be modified, please left blank

![](https://670274868-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsVkj2IKO4moRVo_nEj%2F-LsZhX8P2kl463gHn_L1%2F-LsZvvfogBFdmARypFIW%2Fimage_5.jpg?alt=media\&token=bb6180e9-3bb1-4c95-9e70-12e368cffcba)

**3. Page Options**

 **a. Page Attributes**

 You can select page attributes on right sidebar of page admin layout. Each Page templates have each styles .

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvVXWkMN6FwL1t8SHr%2Fimage_39.png?alt=media\&token=09621d75-99b3-45a3-8270-cbb38afd7809)

**b. Page configure default template**

 For each page you can change the page layout style, header skin, footer skin and much more! Check the screenshot and read the documentation to see how it works

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvVeex6EPNOm6cclCI%2Fimage_53.jpg?alt=media\&token=9ce681fe-b781-48de-9440-38713828f6be)

* **Enable Fullwidth Layout** - Select if you want the page to have a Fullwidth layout.
* **Header Layout** - Select skin specific for Header on page or use Global
* **Footer Layout** -  Select skin specific for Footer on page or use Globalsidebar.
* **Disable Breadcrumbs** - Select if you want to disable the subtitle and breadcrumbs.
* **Breadcrumbs Text Color** - Select color for text of breadcrumbs.
* **Breadcrumbs Background Color -** Select color background for breadcrumbs.
* **Breadcrumbs Background -** Select image to set background.
* **Layout Style** - Select style for page to have a Auto, Left-Main Sidebar or Main-Right Sidebar or Left-Main-Right Sidebar**.**

**C. Set a page as Home Page**

 **Step 1** - Go to **Settings** > **Reading** in your WordPress Dashboard panel.\
\
 **Step 2** - Set "Front page displays" to a "Static Page".\
\
 **Step 3** - In the drop down menu for "**Front Page**" choose a page which will be your home page.\
\
 **Step 4** - Leave the drop down menu for "Posts page" empty, as this is not used by the theme.\
\
 **Step 5** - Save changes.

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LrvLq7IRSwgdshqpQk3%2F-LrvMIFulfDlJBgzqseS%2F-LrvW5WLQUzawBE_Yhiw%2Fimage_91.png?alt=media\&token=8b1b6dc8-f901-4228-ba35-51b44bbd14af)