Demo Home Page
The following tutorial explains in detail how to create the demo home page of Granite.
The demo homepage can be broken down into 2 sections and we will explain how to create each. The top slideshow image, and main content.
Before getting started, make sure to install the recommended plugin “WP Bakery Visual Composer”. Go to Plugins and check if its installed.
If its not available, you can download it by logging into your account at Flothemes and go to the download section, find your theme and in additional download files, select download:
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.
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:
Full Width Image with quote
Mailchimp Newsletter Sign Up
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
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:
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:
Update the link in the general tab:
To add a background image, go to the top tab, and then add a background image (height can be adjusted also if required):
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:
Once this is completed, you’re done. Update the page top right: