How to setup the SqareOne homepage (like the demo)

By default the SquareOne theme will automatically show your Blog page if you have no widgets added inside of the Home Feature widget areas. Once you add a widget in one of the Home Feature widget areas, then your homepage will automatically activate the widget sections (this will only activate the widget sections you use). Once this is done, your blog will disappear from the homepage (as it should). You can create a page and label it Blog (or whatever title you want), just make sure to select the Blog template so your blog will show up on this page.

You’re not required to add code if you don’t want or need to. You can add basic text, images, or whatever widgets you want to use inside of the widget areas. Here is how we setup some of the widgets on the demo –

In the first widget area we added the following code inside the Slider widget area –

<h4>Simple is better.</h4>
<p>Inspire your customers by keeping your site simple and elegant.</p>

<div style="position: relative; top: 60px;">
    <a href="#home-feature-1"><span class="arrow"></span></a>
</div>

You can add the above code inside of a Text widget. To do this, just drag the Text widget over to the Slider Widget area, or whichever widget section you want to use.

The arrow that you see on the demo is added by using this code –

<div style="position: relative; top: 60px;">
    <a href="#home-feature-1"><span class="arrow"></span></a>
</div>

If you want that arrow to link to a different section, then change the ID – #home-feature-1 to whichever section you want it to link to. Example, if you want an arrow to link to the 2nd section, then change it to this – #home-feature-2

For the next section (the widget area with a blue background) we added this code inside of a Text widget –

<h4 class="widgettitle">Incredible Designs.</h4>
<hr>
<img src="http://demo.appfinite.net/squareone/img/3themes.png">

You can either add the title inside of the Title section of the Widget, or you can directly add the code inside of the text area of the widget like this – <h4 class="widgettitle">Incredible Designs.</h4>

The <hr> code above is what adds the line/border that you see directly under the title. You can add this in any of the widget areas.

This is how we’ve setup the entire homepage. All of the images, the graphs/numbers, etc are all sample images that were added in with the exact same methods as shown above.

The pricing plans were added by using html code. This code can be found on this thread – https://appfinite.com/topic/how-to-add-pricing-plans-in-the-squareone-theme/ Simply copy/past this code into a Text widget and replace the text with your own.

Here is how to add background images to each section – https://appfinite.com/topic/how-to-add-background-images-to-the-squareone-theme/

All of the tutorials/code snippets and updates can be found on the SquareOne forum page. They are the yellow highlighted sticky posts at the very top of the forum page – https://appfinite.com/forum/squareone-theme-support/