Demo Home Page

This article explains how our demo home page is built: http://demo.flothemes.com/monobooth.  The image below explains what each block represents.

monobooth_explanation_doc (1)

1. Use the default page template as a basis, the page consists of a slideshow and the rest is built using widgets. To show only these widgets on the homepage we use a plugin JP Widget Visibility.

2. Create a slideshow, learn how to do so here. Once you have created the slideshow assign it to the page, scroll down and select the slideshow, the slideshow type, the menu and the logo positioning options. Below are the options we have selected for our demo page:

Slideshow Options

3. The rest of the page is built using widgets.

a. The first block consists of footer 1 – first through third columns.
Footer 1 AreaWe use text widgets here, but you could use any 3 widget areas depending on what you wish to display. Using the Monobooth: Flo Images widgets would allow you to create a title with descriptions and linking the description to various URL’s which is useful for many users.

b. The second area is footer content width area here we use the Monobooth : About widget:

Monobooth : About Widget

The image is created in photoshop, if you want to replicate the look do so using photo editing software.

c. The next area consists of 3 widgets in the Footer Full Screen Width area, when added they are displayed one after the other:

Footer_Full_Screen_Width_Area

First we use the Monobooth : Flo Images widget, and add a wide image to the background image area.
Second we use the Monobooth : Packages, this has been created for Monobooth specifically and you can see how to create packages here.
Third we use the Flo Instagram Widget, using 12 images with 12 columns in width.

d. The final area is the Footer 2 – First through Third.
Footer first uses a basic text widget.
Footer Second uses a text widget, however there is some HTML code here that allows a button to be created. Add the title as normal, and If you wish to use the button here also you should use the following:

<a href=”http://demo.flothemes.com/monobooth/” rel=”nofollow”  class=”button”>BOOK NOW</a>

This will create a button with the link to our monobooth site, change the URL link above to where you wish the link to go.

Footer third uses the custom menu widget area.

If you follow the above instructions you can replicate the homepage as per our demo, however these are only guidelines and you have the creative freedom to add and remove areas as you please.

Take a look at our video below on creating the Demo Homepage: