Codeless Web Series – 09 How to build a Small Business Website with Folie

Welcome to this tutorial! We are building a Small Business website today, step by step, with the help of Folie WordPress Theme.

Let’s get started 🙂

For this tutorial i am hosting the WordPress with Beemple and creating the website under a real domain.

Let’s Start the Theme Setup and install the demo data :

Watch this other tutorials on how to install and import Folie Theme :

 

Creating a business website is easier than you think. If you’re selling online services or products and even if you don’t sell anything directly online, the website can serve as an extension of your business card, with information about you, your business, and services offered. It should also include your background, experience and other credentials that can make you a potential business to give the customers what they are searching for in the best way possible.

There are some tips and points that you should keep in mind :

• What kind of business do you have
• Include the marketing content on your homepage
• Include WooCommerce
• Include a blog
• Point the services you are offering

We are creating a small business website. We are a small company specialized in phone unlocking. You are creating a website for your business to help it grow.

So you should include :

• a Presentation of you
• the Services you are offering,
• a list of all the Phones included
• a Blog to post your ideas and see what your customers have to say,
• the Track Order of the phones
• how the customers can reach you (contact).

 

We are going to use the Small Business Demo of Folie theme for this website :

 

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 a blog integrated.

Watch this other tutorial for more detailed information :

 

 

The Menus

We said on the other tutorial that menus are the most important structure of a website. They can only see what you are offering and browse the sections of your website if all your content is well organized on the Menus. That’s why you should work on your menus since the beginning of your site.

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

 

• First create a new menu and include on it the most important pages. Keep it simple and well organized :

Codeless Builder is flexible and practical. If you can’t find the pages you are looking for, you can create them here and edit them later. 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)

1. For a business site keep the header simple and include some other elements beside the menu. Here i am including a search widget and some social icons.
2. For the Logo i have chosen the Font Logo type.
3. 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

Let’s start to add content to the homepage first. We should include all the important and marketing content here : a slider, a description, some services, testimonials if you wish and showcase of the most used types of phones.

• To change the slider background go to the Containing Row > General Options and add your own here. On Design Options i will do some other adjustments and leave the slider like a simple showcase of what the business is about. After the slider i am including some services:

 

• We will include the WooCommerce on this site because we are offering services and we should showcase them with the help of the Shop. First create the products :

 

• On the homepage at this section i am going to include the Shop element to show our most viewed phones :

 

• This is how the product page will look :

 

• At the end of the homepage you can inlcude also a call to action form to invite customers into your business :

 

• For the Footer you should include some further information about your business and some other widgets that you can organize in the way it suits you best. For now i am If you want add the copyright at Footer > Show Copyright and edit it on Widgets section. To edit the elements of the footer just click on the pen icon and the element settings will be displayed on the left sidebar. To style the footer and copyright go to General Options > Styling > Footer section.

 

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.

These options include :

• General styling options from primary color to highlighted areas.
• Headings – the font style and color for all available headings in the theme.
• Blog –  style all text available at the blog page.
• Portfolio – font styling.
• Buttons – light and dark button styling.
• Widgets – customize widgets titles styles.
• Footer styling.
• Copyright styling.

Read a more detailed information about the styling options here.

 

Adding Content – Phones

On this second menu item i have assigned a page that will display all the categories of the supported phones to unlock. You can add the categories including a Service element and a Button to redirect the customers to the specific link :

Now let’s create the pages that will be assigned to every category. It should include a section that let’s you see the Most Viewed Unlocks for the category and All the Unlocks Available.

For the Most Viewed Unlocks add the Shop element and choose to display the products according to the category Samsung :

On the Dashboard create the categories :

 

On the Codeless Builder choose the category you created on Select Action :

 

For the All Available Samsung Unlocks section you can include all the available samsung unlock services that you offer.

 

After creating all the pages for every category, let’s go back to the Phones page and assign the pages :

 

Adding Content – Blog

Include you own articles using the blog element and make this page the Posts Page of the site.

 

Track Order

On Track Order page you can include a contact form for the customers to enter their IMEI number and email address. Create the from on the backend editor :

 

And select the form you created on Select Form :

 

Support Center 

On the Support Center you can show how you support you customers and how they can contact you in any case. Here is an example :

Now you are ready to add your own personalized content to the site. Hope it helped 🙂 !

 

Let us know in the comment section below.