How to Create One Page Website with a WordPress Theme

Today we are creating a One Page Website with Folie WordPress Theme. These kinds of websites are simple and easy. We are creating this site for a product presentation. This product may be everything but let’s choose a mobile app.
We already created a Creative agency and a Small Business site with the help of Folie Theme, you may want to check them out :

A Small Business Website

A Creative Agency Website

Folie theme includes a pre created Landing Scroll Demo. Let’s start by installing the demo and it’s data :

This demo is created using only Codeless Slider as a vertical slider. So let’s start to customize each slide into the presentation that we want to make.

But before adding the content, there are some thing you should focus on first. You are creating a website for your business to help it grow.

So you should include :

a Presentation of you,
a Blog to post your ideas and see what your customers have to say,
a FAQ page,
how the customers can reach you (contact).

The Static Front Page

The first thing to do after Installing your Theme and Demo Data, is to assign the Front Page of the site and the Posts Page since we have included the blog also.

Watch this other tutorial for more detailed information :

Set Static Homepage

The Menus

Menus are the most important structure of a website, because the customers can only see what you are offering and browse the sections of your website if all your content is well organized on the Menus.

To learn how to assign menus with Folie, please watch this other detailed tutorial :

Set the Menus

First create a new menu :

A good menu is minimal and a presentation of what your site is offering. These are the most important pages you should focus now. If you add other pages you can assign them later.

The Header

After creating your menu you are ready to customize the header. The Codeless Builder contains 2 sections dedicated to the header.

Header – that includes the general options for customizing the Logo, Custom Styles, Dropdown and Mobile Styles, Sticky, Top Header Row.
Header Builder – in this section will be displayed the options of the elements that you include in the header (Social Menu, Menu, Logo, Tools, Button, Text)

I am going for a simple header design and content, so i have chosen the fullwidth layout, without extra rows or borders.
For the Logo i have chosen the Font Logo type and uploaded the dark and light version of it.
I did some other color and font size adjustment about the header :

Site Identity

Is important to customize the site identity. Go to Theme Options > Site Identity and choose the site title, tagline and a favicon :

Adding Content – Homepage (Slide 1)

Let’s start to add content to the homepage first. As the whole site is created based on a single codeless slider, we should only edit the slides. The first slide is our homepage. So you can add a description of the product, maybe include some social or sharing icons and an interactive background :

To change the slider background go to the Containing Row > General Options and add your own here. To make the slider a Vertical Slider, go to Codeless Slider > Activate the Mousewheel option.

Adding Content – Slide 2

On the second slide you can include some services and description about the product you are marketing :

I also added a video as a background to make the page more interactive.

Adding Content – Slide 3

Adding some other description content and some list element :

Adding Content – Slide 4

Adding Content – Slide 5 (Footer)

Keep the Footer simple and include some social icons for the customers to contact you through social media :

Website General and Layout Options

Before adding other content to the pages i recommend to check out the site general options :

Site Options – check the responsive layout, a nice scroll, select a favicon if you want, activate comments and even add a Back to Top button.
Page Transitions – add or remove page transitions.
Custom Codes – add Custom CSS, JS or HTML codes.

and layout options :

All Pages Layout – i have chosen fullwidth layout.
Site Container Width – Define site container width in pixel.
Layout Modern – Switch if you want to make web layout with sidebar background color. You can change color on Styling.
Inner Content Distance from Top and the Bottom .
Distance between blog entries and portfolio entries.

Website Styling Options

The Styling options include everything about the site design. I recommend to style your site after you have completed the homepage to test with the different styling options. You will have a more fixed idea on yourself how the whole website and other pages will look.