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

Demo Home Pages

In the following tutorial we show how the demo home pages are created, you will find details for both Como Light and Dark.

Video Tutorial Demo 1

Como Regular Demo Homepage Tutorial

The demo homepage can be broken down into 4 sections and we will explain how to create each. The header image, main content, footer area 1-3 and the Flo Instagram widget.

Before getting started, make sure to install the recommended plugin “WPBakery Visual Composer”. Go to Plugins and check if its installed.

Step 1 – Create your page

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

pages-add-new

Step 2  – Create Header or Slideshow
como-homepage-header-section

In Como Regular, we simply use a featured image for the page to create this header image.

Go to the page and on the right hand side, upload a featured image:

como-featured-image

Step 3 – Main Body Visual Composer

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

como-homepage-main-section

Copy and Paste Code

To replicate the main body section you can simply copy and paste the following code into the text view in the page content:

como-main-body-visual-composer

Note: Different spacings and font sizes are needed for the mobile version of this page. For that, open the Custom CSS tab of the page and add the following snippets:

como_demo_homepage_custom_css

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:

como-main-body-visual-composer

To edit text, hover over any text options and simply click the pencil icon:

Cursor

You can change the text, the header types, colors, alignments and animations amongst other things:

Edit_Page_with_Visual_Composer

To edit the placeholder images, hover over the main block, go to design options and then upload an image in the background area:

Cursor

Cursor_and_Edit_Page_with_Visual_Composer

For the greyed out blocks (these are rows), hover over and find row, then click the arrow, and then the pencil icon will be available, select this, and again update the background:
Cursor

Cursor

Cursor_and_Edit_Page_with_Visual_Composer

When complete scroll to the top of the page and update.

Step 5 – Footer Widgets 1 – 3

como-footer-1-3

To create the footer area shown above, go to Appearance > Widgets, and we use text widget areas for footer 1st and 2nd, and footer 3rd we use the Como : Social Networks Widget.

Widgets_‹_Como_—_WordPress

Widgets_‹_Como_—_WordPress

Widgets_‹_Como_—_WordPress

Step 6 – Footer Instagram

You can download our Flo Instagram plugin and view the tutorial for installation here.

como-instagram-footer

Then go to appearance > widgets, and add the Flo Instagram Widget to the “Footer Full Width Area”:

Widgets_‹_Como_—_WordPress

You can then use the following settings:

Widgets_‹_Como_—_WordPress

Como Dark Demo Homepage Tutorial

The demo homepage can be broken down into 5 sections and we will explain how to create each. The header/slideshow image, below page widgets area, Visual Composer Main Content, footer area 1-3 and the Flo Instagram widget.

Before getting started, make sure to install the recommended plugin “WPBakery Visual Composer”. Go to Plugins and check if its installed.

Step 1 – Create your page

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

pages-add-new

Step 2  – Create Header or Slideshow
Como_–_Just_another_Flothemes_Demos_site_png

In Como Dark, we use a slideshow for the main header image. See the following article on creating a slideshow for pages:

Creating a Como Slideshow

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 – Widget Area before Page Content

Description in Detail

Cursor_and_Como_–_Just_another_Flothemes_Demos_site_png

The following step describes how we use the Mosaic Shortcode and the Como : Flo Posts Slider to create the top section of the DARK home page.

Mosaic Shortcode

First lets set up the mosaic shortcode thats used in the first section. This shortcode will then be used in a text widget. See the following guide on using mosaics. You will want to use the 4th option, and once created copy the shortcode.

 

Cursor_and_Edit_Mosaic_‹_Como_—_WordPress

Adding Widget Areas

The next step is to set up the widgets used for the before page content area, and then once prepared we can add them to the page.

Go to Appearance >  Widgets:

Widgets_‹_Como_—_WordPress

We will be using the widget area “Below Page Content” with a text widget (and mosaic shortcode) and a Como : Flo Post Slider widget:

Cursor_and_Widgets_‹_Como_—_WordPress

Mosaic Shortcode and Text Widget

First Add the text widget and paste in the Mosaic shortcode you previously created:

Cursor_and_Widgets_‹_Como_—_WordPress

Como : Flo Posts Slider

Next Add a Como : Flo Post Slider from the left hand side and use the following settings:

Cursor_and_Widgets_‹_Como_—_WordPress

You can use blog posts, galleries, or videos if desired and increase the number of posts if necessary. The option selected is the text only option. If using galleries, make sure to have some text in the content area for each to show as a quote.

Save both options and then continue to the main body.

Step 4 – Main Body Visual Composer

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

Cursor_and_Como_–_Just_another_Flothemes_Demos_site_png

Copy and Paste Code

To replicate the main body section you can simply copy and paste the following code into the text view in the page content:

como-main-body-visual-composer

Step 5 – 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:

como-main-body-visual-composer

To edit text, hover over any text options and simply click the pencil icon:

Cursor

You can change the text, the header types, colors, alignments and animations amongst other things:

Edit_Page_with_Visual_Composer

To edit the placeholder images, hover over the main block, go to design options and then upload an image in the background area:

Cursor

Cursor_and_Edit_Page_with_Visual_Composer

For the greyed out blocks (these are rows), hover over and find row, then click the arrow, and then the pencil icon will be available, select this, and again update the background:
Cursor

Cursor

Cursor_and_Edit_Page_with_Visual_Composer

When complete scroll to the top of the page and update.

Step 6 – Footer Widgets 1 – 3

como-footer-1-3

To create the footer area shown above, go to Appearance > Widgets, and we use text widget areas for footer 1st and 2nd, and footer 3rd we use the Como : Social Networks Widget.

Widgets_‹_Como_—_WordPress

Widgets_‹_Como_—_WordPress

Widgets_‹_Como_—_WordPress

Step 7 – Footer Instagram

You can download our Flo Instagram plugin and view the tutorial for installation here.

como-instagram-footer

Then go to appearance > widgets, and add the Flo Instagram Widget to the “Footer Full Width Area”:

Widgets_‹_Como_—_WordPress

You can then use the following settings:

Widgets_‹_Como_—_WordPress

Page Settings

With Como we’ve added some additional page settings that can be applied separately on any page. The options will be available just below the main page content.

como-page-settings

Show Page Title

Do you want to display the page title, select “Yes” or “No”

Use Big Title

One of the key features to Como is the option for oversized and large titles. To enable this for the page, select “Yes” for this option.

Enable Widget Area Located before page content

If you have added any widgets in the widget area before page content in Appearance > Widgets you can show them on the page.

Enable Widget Area Located below page content

If you have added any widgets in the widget area below page content in Appearance > Widgets you can show them on the page.