The following video explains how to set up the demo home page on the Granite demo site.

Firstly you should create a slideshow. You can see documentation on how to do so here.

Step 1 – Create your page

Go to Pages > Add New, add your page name:

Step 2  – Add Slideshow

In Granite, we use a slideshow for the top of the page.

If using a slideshow, go to page settings, and then add the slider:

Now that you’ve created a slideshow, head over to pages, and then navigate to the page you want to add your slideshow to. In the page scroll down to “Slideshow Settings” and select the slideshow:

Step 3 – Select Layout Option

We have used the following options:

Step 4 – Custom Logo and Menu Color

With the full screen slideshow options, you’re able to upload a custom logo, or a larger logo over the slideshow. As you can see we’ve dded a custom logo for over the slideshow, go ahead and upload your .png logo here with a transparent background.

Menu color

If using dark images, its best to select the menu items to be white. To do so, select white in the option “set item colors on slideshow” this will make the menu items white.

Step 3 – Main Body

The main body section is built with Visual Composer. We will provide you with the code and you can copy and paste it, then modify the selection. The following section will show the main components:

Page Links

Full Width Image with quote

Mailchimp Newsletter Sign Up

Recent Posts

Contact Form

Visual Composer Code

To replicate the main body section you can simply copy and paste the following code into the text view in the page content. HINT! Click see original and then scroll to the bottom of the page and copy the raw data:

UPDATE AND SAVE THE PAGE. Once the page is updated you can then begin to edit the information using visual composer.

Step 4 – Update Filler images and text

Once the code has been pasted into the page content, scroll to the top, and then click the front end editor option for Visual Composer NOTE! There will only be filler images available due to copyright reasons:

Section 1 – Image and Links text below

Firstly, click edit (the pencil) on the image link block for each image:

Edit the image link block general settings, add a link to the post or page, insert a background image, and update the border color if required, other options can be changed, but aren’t required:

Edit the links, add the link to any page or post as required.

Next update the Pretitle/Title and Subtitle options as required (we don’t use the subtitle on the demo):

Repeat for both blocks and make sure to SAVE CHANGES.

Just below this, there is a text block, make sure to update the text block by editing the text area:

Section 2 – Full Width Image with quote

In the next section, edit the middle row:

To update the text, go to the text block, and edit, and then save the changes:

Section 3 – Mailchimp Newsletter

For the newsletter service, you should sign up for mail chimp if you wish to have newsletter sign ups. You can sign up for an account here, and get the plugin here.

If you wish to edit the sections, you can do so:

Finally you will see there is an embed code from mailchimp. When you’ve sign up for mailchimp, and created your lists you can then get the form shortcode embed:

You will want to add it to the embed code area:

For the full process, please see the following video:

**Insert Video**

Section 4 – Recent Posts

This section is available to link to any page, post, or gallery. Its currently an image link block with a title and date link that needs updated. Click edit on the image link block:

 

General

Update the link in the general tab:

Background Image

To add a background image, go to the top tab, and then add a background image (height can be adjusted also if required):

Bottom Color

To set the color behind the text, go to the bottom tab, and select the color:

Next update the title, pre-title and subtitle options (again we don’t use subtitle):

Once updated SAVE CHANGES.

Section 5 – Contact Form

Finally the contact form block is a custom element we have created. You can click edit on the form section, and then make sure to add your email address as this is required:

Update Page

Once this is completed, you’re done. Update the page top right: