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:

Step 2  – Create Header or Slideshow

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:

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

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:

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:

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:

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

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

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

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:

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

Step 5 – Footer Widgets 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.

Step 6 – Footer Instagram

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

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

You can then use the following settings:

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:

Step 2  – Create Header or Slideshow

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:

Step 3 – Widget Area before Page Content

Description in Detail

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.

 

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:

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

Mosaic Shortcode and Text Widget

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

Como : Flo Posts Slider

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

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

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:

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:

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

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

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

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:

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

Step 6 – Footer Widgets 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.

Step 7 – Footer Instagram

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

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

You can then use the following 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.

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.