---
title: "Design individual sections"
description: "While a default style is applied globally across your app, you can customize the design of individual sections to modify specific elements like colors, fonts, a"
canonical_url: "https://www.goodbarber.com/help/design-your-app-sections-r89/design-individual-sections-a106/"
lang: en
---

# Design individual sections

Source: https://www.goodbarber.com/help/design-your-app-sections-r89/design-individual-sections-a106/

While a [default style](https://www.goodbarber.com/help/app-style-and-branding-r87/app-style-essential-design-settings-a317/) is applied globally across your app, you can customize the design of individual sections to modify specific elements like colors, fonts, and backgrounds.

**To edit a single section's style:**
1. Go to the menu **My App > Structure**. The list of all your sections will be displayed in the right-hand column.
2. In that column, click the section you want to edit.
See the example below if you wish to edit the design of the section "CMS Article"

![](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875905.jpg?v=1757533690.8553152)

## 1. Content section's design

**Warning: the design settings available will vary depending on the section type you are editing.**
This guide uses a CMS Article section as an example. You can separately customize the design for the two main components of this section:
- The **List of articles**, which displays all the items in the section.
- The **Article page**, which is the detailed view of a single item.

![](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875906.jpg?v=1757533690.867315)

1. Click the "**Edit the design**" link for the part of the section you wish to customize, whether it's the "List of articles" or the "Article" page.
2. Configure the different options available, detailed below:

**TEMPLATE**
- Your template is clearly identified with a green icon
- Browse the different templates by using the arrows to select a new one

![](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875907.jpg?v=1757533690.8793151)

**CONTENT**
- Set the background color, font and text colors, content alignment etc. of your section
- Edit thetextand **[tokens](https://www.goodbarber.com/help/customize-your-app-with-developer-tools-r14/modify-the-html-structure-of-article-and-video-detail-pages-advanced-a137/)** that will be displayed in the Info settings on the list page, for instance
- Display the Author, summary when the option is available

![](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875908.jpg?v=1757533690.8873153)

**TOOLBAR**
- Select the actions to display in the toolbar of your detailed article page, the colors of the icons etc.

**NAVIGATION**
- Edit the Pager design settings*

**THUMBNAIL**
- Add a default thumbnail to display on your list page when there isn't one in your article

**option not available on all templates*

![](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875909.jpg?v=1757533690.8953154)

**HTML CODE***
- Edit the [tokens](https://www.goodbarber.com/help/customize-your-app-with-developer-tools-r14/modify-the-html-structure-of-article-and-video-detail-pages-advanced-a137/) and the text: delete, for instance, the date and author information:
Delete the small part of code corresponding to this information.
**Not available when using the template 4 for your detailed page.*

![](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875910.jpg?v=1757533690.9073153)

## 2. Menu section's design

If you use a multi-level navigation system in your app, to configure the design of your Menu section:
1. Go to the menu **My App > Structure**
2. Click the Menu section you want to edit.
3. Click "**Edit the design**"

![](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875911.jpg?v=1757533690.9153154)

4. Select the menu section's template
5. Use the settings available to configure the design (background images, effect, fonts, colors, icons, etc.)

## 3. Specific Header

Edit the design of the header for a specific section*.
1. Go to the menu **My App > Structure**
2. Click the section you want to edit.
3. Click "**Header**"
4. Click "**Modify the header of this section**"
**The configuration of the settings works the same as for the [general header](https://www.goodbarber.com/help/design-navigation-home-and-header-r88/configure-and-customize-the-app-header-a378/) .*

![](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875914.jpg?v=1757533690.9233155)

To go back to the default settings and apply the design of the general header:
1. Go to the menu **My App > Structure**
2. Click the section you want to edit.
3. Click "**Header**"
4. Click the gear icon in this specific header's settings
5. Click "**Go back to default header**"

![](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-28204662.jpg?v=1757533690.9353156)

## 4. Video tutorial

***Note:** Menus have changed in the back office, but the behavior explained in the video is still accurate.*

[Video](https://www.youtube.com/watch?v=qVSe6BzjgSw)