Creating a Demo 4 Layout Homepage

UPDATE: We have a new plugin called the Kadence Importer. You can now install the plugin, choose a demo and install all that content in one click. Check it out here: Kadence Importer

[clear]
  •  Create a Page

1. Go to Pages > Add New and name your page “Home”.

2. Publish Page.

  • Page Display Settings

1. Go to Settings > Reading.

2. Select “Static Page” beside “Front Page Displays”

3. Beside Front Page choose “Home.” Do nothing for Post Pages.

4. Save changes.

  • Theme Options

Note* – There are theme options export for style 4 in the demo content.

1. Go to Theme Options > Home Layout and enable Page Content beside Homepage Layout Manager.

2. In Theme Options > Topbar Settings select “Off” beside “Use Topbar?”

3. In Theme Options > Main Settings scroll to the bottom and select Header Style “Basic with shrink”

  •  Adding an Image Menu

1. Go back into the home page that you just created and select the Page Builder tab (on the right) and then click the Add Row tab (on the left).

2. Give the row 3 columns.

3. Click the Add Widget tab and choose the Virtue: Image Menu Item widget.

4. Upload an image and give it a title, description and link.

5. Repeat this process so that each column has a menu item.

Virtue Premium

  • Adding a Parallax Image

 Uploading an Image:

1. Add a new row and give it 1 column.

2. Hover over the toolbar on the top-right of the row and click “edit row.”

3. Open the Layout tab and set the Row Layout to “Full Width.”

4. Set the top and bottom padding to 80.

5. Open the Design tab and upload a Background Image.

6. Set the Background Image Style to “Parallax.”

Adding a Call to Action

1. Add a Virtue: Call to Action widget to the row.

2. Click Edit and add in your own content/settings.

 

Virtue Premium2

  • Adding Info Boxes

1. Add another row and give it 3 columns.

2. Add a Virtue: Info Box widget.

3. Choose or upload an icon and give it a title and description.

4. Repeat this process so that each column has an info box.

Virtue Premium3

  • Adding a Latest Post Grid

1. Go to Theme Options > Homepage Layout and enable latest blog posts under page content in Homepage Layout Manager.

2. Scroll down to Home Blog Settings and customize as desired.

Virtue Premium4

  • Adding a Kadence Slider

1. Make sure you have the Kadence Slider installed and activated in your admin.

2. Add a new slider and customize as desired.

3. Once your slider is set up, go to Theme Options > Slider Settings.

4. Choose Kadence Slider as your Home Image Slider.

5. Choose your slider.

6. Choose to move slider above the header.

7. Choose to add arrow at the bottom of the slider. *Note these slider features can also be done using the Kadence Slider.

Virtue Premium5

  • Adding a Custom Menu

1. See here to learn about creating custom menus.

2.  Once your menu is set up, be sure to select “Primary Navigation” under Menu Settings.

Virtue Premium6

  • Header settings

Menu Settings:

1. Go to Theme Options > Menu Settings.

2. Here you can edit your font-color, background-color, hover-color, etc.

Logo Options and Header Style:

1. Go to Theme Options > Main Settings.

2. Here you can customize the font family and color of your logo or choose to upload an image as the logo.

3. Scroll down to Header Style and choose “Basic, with shrink for sticky”.

4. Set the Header Start Height to around 100.

5. Set Enable Sticky Header to on.

Header Background:

1. Go to Theme Options > Advanced Styling.

2. Scroll down to Header Background and set the background color to your whatever you would like.

Virtue Premium7

  • Footer Settings

1. Go to Theme Options > Main Settings.

2. Set the Footer Widget Layout to a 4 column layout.

Adding Widgets:

1. Go to Appearance > Widgets.

2. Find the Text widget and add it to footer column 1.

3. Give it a title and description.

4. Find the Virtue: Contact/Vcard widget and add it to footer column 2.

5. Fill out the form with desired information.

6. Find the Virtue: Social widget and add it to footer column 2.

7. Give it a title and fill in your own social URL’s.

8. Find the Virtue: Post Grid widget and add it to footer column 3.

9. Give it a title and fill out settings as desired.

10. Find the Custom Menu widget and add it to footer column 4.

11. Give it a title and select a pre-built custom menu.

Footer Colors:

1. Go to Theme Options > Advanced Styling.

2. Scroll down to Footer Background and select a background color.

3. Go to Theme Options > Basic Styling.

4. Choose your Footer Font Color.

Virtue Premium8