How to design your sections

Section design

Each section of your app has its own design. For each of its pages, you choose a template, then the colors, fonts, information and images it shows. Here is how.

In My App, open Structure.

Click the section you want to design, here Local, a section of articles.

It has two pages, the list of articles and the article itself, and each page has its own design.

List of articles

For the list, click Edit the design.

Start with the template. The current one has a check mark; use the arrows to see the others.

Choose Visual Card… and each article becomes a large card with its photo.

Every text has its font, its size and its color. Here, a new color for the titles… and every title takes it.

Under Thumbnail, choose the format of the photos. Golden ratio… gives them a wider, flatter shape.

Because the cards have a background color, photos can run edge to edge. Click Disable Edge-to-edge… and each photo now sits inside its card, with a margin.

Tokens

Under Display, choose the information each card shows. Check Info below title… and a summary appears under each title.

Look at these fields: the words in brackets are tokens. The app replaces them with each article's own data, here its date and its summary.

The question mark lists them all: title, author, number of comments, a relative date, and more, for every type of content.

Mix them with your own words. Here, Published, followed by the token for a relative date… and each card now shows a relative date instead of the full one.

Article page

Now the article page. Go back to the section… and click Edit the design under Article.

The article page has its own templates, with the toolbar at the bottom, at the top or on the side. Choose ToolBar Up… and the toolbar moves to the top.

Under Content, choose how the title and its information line up. Left alignment… puts them on the left.

Under Toolbar, choose the actions your readers get. Uncheck Font size… and its two buttons leave the toolbar.

For full control, the HTML code of the page uses the same tokens: arrange the title, the date, the author and the content your way.

Publish

One thing to know: applying colors or fonts in App style replaces the design of every section.

To make your changes visible to your users, publish your app's update from the Publish menu.