
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








