---
title: "Cómo personalizar el diseño de las categorías de una sección | Tutoriales - GoodBarber"
description: "CategoríasSi una sección tiene categorías, tus lectores pasan de una a otra encima de la lista. Tú eliges su aspecto y lo que muestra el encabezado.En «My App», abre Structure… y haz clic en la secci…"
canonical_url: "https://es.goodbarber.com/tutorials/diseno/como-personalizar-el-diseno-de-las-categorias-de-una-seccion/"
lang: es
---

# Cómo personalizar el diseño de las categorías de una sección | Tutoriales - GoodBarber

[Atrás](https://es.goodbarber.com/tutorials/)

# Cómo personalizar el diseño de las categorías de una sección

## Categorías

Si una sección tiene categorías, tus lectores pasan de una a otra encima de la lista. Tú eliges su aspecto y lo que muestra el encabezado.

En «My App», abre Structure… y haz clic en la sección, aquí Sports.

Sus categorías se crean en los ajustes de la sección, desde el engranaje, y se diseñan aquí: haz clic en Categories.

## Plantillas

Hay cuatro plantillas. Tags, la actual, muestra cada categoría en una celda redondeada.

Elige Labels… y las categorías pasan a ser simples títulos, con la seleccionada subrayada.

Elige Filters… y la barra solo incluye las categorías. La lista muestra por defecto los artículos de All, como indica el panel.

Elige Dropdown… y las categorías se agrupan en un menú, con una flecha a cada lado.

## Título del encabezado

Con Dropdown, también eliges el título del encabezado: «Section & category title», «Section title only» o «Categories only».

Elige «Categories only»… y el encabezado muestra la categoría, All, en lugar de Sports.

## Colores y fuentes

Vuelve a Tags. Cada plantilla tiene sus propios ajustes.

Los colores tienen dos estados, «Not selected» y Selected. Aquí, un nuevo color para la celda seleccionada… y la categoría actual destaca en negro.

Junto a cada fuente, este icono define su tamaño para móvil, tablet y escritorio.

Un tamaño mayor en móvil… y las categorías se leen mejor.

## Publicar

Para que tus usuarios vean los cambios, publica la actualización de tu app desde el menú Publish.

## Vídeos similares

[DiseñoCómo configurar tu encabezado](/tutorials/diseno/como-configurar-tu-encabezado/)

![Cómo configurar tu encabezado](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DiseñoCómo configurar el estilo de tu aplicación](/tutorials/diseno/como-configurar-el-estilo-global-de-tu-aplicacion/)

![Cómo configurar el estilo de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DiseñoCómo personalizar la pantalla de lanzamiento de tu aplicación](/tutorials/diseno/como-personalizar-la-pantalla-de-bienvenida-de-tu-aplicacion/)

![Cómo personalizar la pantalla de lanzamiento de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DiseñoCómo configurar el menú de navegación de tu aplicación](/tutorials/diseno/como-configurar-el-modo-de-navegacion-de-tu-aplicacion/)

![Cómo configurar el menú de navegación de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DiseñoCómo personalizar los iconos de tu menú](/tutorials/diseno/como-personalizar-los-iconos-de-tu-menu/)

![Cómo personalizar los iconos de tu menú](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DiseñoCómo diseñar sus secciones](/tutorials/diseno/como-disenar-tus-secciones/)

![Cómo diseñar sus secciones](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DiseñoCómo copiar el diseño de una sección](/tutorials/diseno/como-copiar-el-diseno-de-una-seccion/)

![Cómo copiar el diseño de una sección](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DiseñoCómo configurar tu página de inicio](/tutorials/diseno/como-configurar-tu-pagina-de-inicio/)

![Cómo configurar tu página de inicio](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DiseñoCómo elegir el tamaño de tu encabezado](/tutorials/diseno/como-elegir-el-tamano-de-tu-encabezado/)

![Cómo elegir el tamaño de tu encabezado](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)