How to set up your home page

Hello and welcome to new GoodBarber tutorial

Today we will learn how to set up the Home of your app. 

The Home is the first page users will see when they open your app.

On this page, you can create a secondary navigation, in addition to your main navigation 

Let's start right away by going to the menu My app, Design, Home 

The modules that make up your Home are called Widgets.

There are several types of Widgets:

- Content widgets.
They display an overview of the content of the sections of your app

- Link widgets
You can create links to the internal pages of your app or external links on your homepage or actions such as calling, texting or emailing.

- The ad widget
This widget displays the ads defined in your monetization menu.

- The Search widget
It can be activated if you have added a Search section to your app. It allows users to search from the home page.

- The social links widget
To display shortcuts to your social networks.

- The Newsletter widget
Which allows you to collect your users' e-mails.

- The Separator widget
Which displays a separator between the other widgets.

- The HTML Widget
With which you can display your own HTML code.

Please note that most widgets are actually shortcuts to existing sections. They will only appear if you have added the section to your app. For example, as I told you, if you don't have a Search section in your app, the Search widget will not be offered to you.

Let’s start by adding a Link widget.

I want to offer my users a navigation to the different services of my Spa. 

I’m choosing the Visual template.

First I create the links to the different sections I want to make accessible.

Massages first.

I choose the title of my link, the image.
You can add a description and an action button but I won't do it.

I do the same for the other sections I want to display:
- Facials.
- Packages.
- Now the Settings.
- The background color of the widget.
- The fonts.
- The action button, but I didn't put one on.
- The margins.
- And the effects on the images.

There you go! 

I'm now going to create a content widget to display the events of my Spa.

It's always the same principle. We add, then edit the widget.

I then add another content widget to display my Users section in which I have created a group to present the Spa employees.

Then another Link widget.

This time I will display: 

- my About page, 
- my treatment reservation form, 

and two actions: 

- sending a text message  
- and acall.

I create my design. 

And finally, I create a Newsletter widget to build a small email database ;)

Here it’s been added, but I'd prefer it to be on top of my link widget. 

Just drag it to the right place.
Just like that!

That's it! 

The home offers millions of possibilities, especially with the Links widgets, which allow you to display links to your different sections, but also actions (call, email, text message) or external links. And the HTML widget that you can fully customize.

Let me show you the final version of my Home.

Here, two more examples so you can see that you can really create Homes that are different visually and functionally.

This is the Home of my corporate app.

And the Home of my Local News app.

Now you can create your own Home, I can't wait to see the results! 

See you soon for a new tutorial!

Related videos