---
title: "How to design your sections | Tutorials - GoodBarber"
description: "Hello and welcome to your new GoodBarber tutorial! \r Today, we will learn how to set up the design of the sections of your app.\r \r Each type of section has its own design properties, but the pro…"
canonical_url: "https://www.goodbarber.com/tutorials/design/how-to-design-your-sections/"
lang: en
---

# How to design your sections | Tutorials - GoodBarber

[Back](https://www.goodbarber.com/tutorials/)

# How to design your sections

Hello and welcome to your new GoodBarber tutorial!
Today, we will learn how to set up the design of the sections of your app.

Each type of section has its own design properties, but the process for setting them is always the same.

To design a section, let's go to My app > Design > Sections Design.

For this example, we will choose to design an Article section of my local news. app
You see here, the article section offers two pages to set up. The article list page, and the article details page.

Let's start with the article list.

The first thing to do here is to choose between the proposed display templates. You can see the changes live on the back office preview.

We will choose template 2.

Then we will set the design of the content zone

The color of the background, and borders.

The info we display in the list.

The fonts and font colors of the different elements.

Finally the format of the thumbnail.

That's it, it's already done!

Here is the list of articles fully designed!

I will quickly do the same for the article details page.

And voila!

Now it's up to you!

See you soon for a new tutorial!

## Related videos

[DesignHow to set up your header](/tutorials/design/how-to-set-up-your-header/)

![How to set up your header](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DesignHow to set up the global style of your app](/tutorials/design/how-to-set-up-the-global-style-of-your-app/)

![How to set up the global style of your app](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DesignHow to customize the splashscreen of your app](/tutorials/design/how-to-customize-the-splashscreen-of-your-app/)

![How to customize the splashscreen of your app](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DesignHow to set up the navigation mode of your app](/tutorials/design/how-to-set-up-the-navigation-mode-of-your-app/)

![How to set up the navigation mode of your app](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DesignHow to customize the icons of your menu](/tutorials/design/how-to-customize-the-icons-of-your-menu/)

![How to customize the icons of your menu](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DesignHow to copy the design of a section](/tutorials/design/how-to-copy-the-design-of-a-section/)

![How to copy the design of a section](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DesignHow to set up your home page](/tutorials/design/how-to-set-up-your-home-page/)

![How to set up your home page](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DesignHow to choose your header size ?](/tutorials/design/how-to-choose-your-header-size/)

![How to choose your header size ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)

[DesignHow to customize the background of your app](/tutorials/design/how-to-customize-the-background-of-your-app/)

![How to customize the background of your app](https://portal.ww-cdn.com/portal_static/images/thumbnail_background.01a5a9e37ad2.jpg)