Warning: Invalid argument supplied for foreach() in /home/rossf549/public_html/legacydocs.flothemes.com/wp-content/themes/documentation-old/functions.php on line 209
» Granite – Demo Home Page

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:

granite-visual-composer

Video Tutorial

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

Adding Slideshow

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:

pages-add-new

Step 2  – Add Slideshow

Granite_–_Just_another_Flothemes_Demos_site

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:

Cursor_and_Edit_Page_‹_Mark_Allen_—_WordPress

Step 3 – Select Layout Option

We have used the following options:

Edit_Page_‹_Granite_—_WordPress

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.

Main Content

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

Granite_–_Just_another_Flothemes_Demos_site

Full Width Image with quote

Granite_–_Just_another_Flothemes_Demos_site

Mailchimp Newsletter Sign Up

Granite_–_Just_another_Flothemes_Demos_site

Recent Posts

Granite_–_Just_another_Flothemes_Demos_site

Contact Form

Granite_–_Just_another_Flothemes_Demos_site

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:

como-main-body-visual-composer

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:

como-main-body-visual-composer

Section 1 – Image and Links text below

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

image-link-block

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_Page_with_Visual_Composer

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):

pretitle-title

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:

Screenshot_5_18_16__5_51_PM

Section 2 – Full Width Image with quote

In the next section, edit the middle row:

Screenshot_5_18_16__6_38_PM

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

Desktop_and_Edit_Page_with_Visual_Composer

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.

Screenshot_5_18_16__7_06_PM

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

Edit_Page_with_Visual_Composer

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:

Embedded_Form_Code___MailChimp

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

Edit_Page_with_Visual_Composer

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:

Screenshot_5_25_16__7_05_PM

 

General

Update the link in the general tab:

Edit_Page_with_Visual_Composer

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):

Edit_Page_with_Visual_Composer

Bottom Color

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

Edit_Page_with_Visual_Composer

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

Edit_Page_with_Visual_Composer

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:

Screenshot_5_18_16__7_31_PM

Update Page

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

Edit_Page_with_Visual_Composer