---
title: "Cómo diseñar sus secciones | Tutoriales - GoodBarber"
description: "Hoy aprenderemos cómo configurar el diseño de las secciones de tu aplicación.\r \r Cada tipo de sección tiene sus propias propiedades de diseño, pero el proceso para …"
canonical_url: "https://es.goodbarber.com/tutorials/diseno/como-disenar-tus-secciones/"
lang: es
---

# Cómo diseñar sus secciones | Tutoriales - GoodBarber

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

# Cómo diseñar sus secciones

Hoy aprenderemos cómo configurar el diseño de las secciones de tu aplicación.

Cada tipo de sección tiene sus propias propiedades de diseño, pero el proceso para configurarlas es siempre el mismo.

Para diseñar una sección, vayamos a Mi app> Diseño> Diseño de secciones.

Para este ejemplo, elegiremos diseñar una sección de artículo de mis noticias locales. aplicación

Verás aquí, la sección de artículos ofrece dos páginas para configurar. La página de la lista de artículos y la página del artículo.

Comencemos con la lista de artículos.

Lo primero que debe hacer aquí es elegir entre las plantillas de visualización propuestas. Puedes ver los cambios en vivo en la vista previa del back office.

Elegiremos la plantilla 2.

Luego estableceremos el diseño de la zona de contenido.

El color del fondo y los bordes.

La información que mostramos en la lista.

Las fuentes y colores de fuente de los diferentes elementos.

Finalmente el formato de la miniatura.

Eso es todo, ¡ya está hecho!

¡Aquí está la lista de artículos completamente diseñados!

Rápidamente haré lo mismo con la página del artículo.

¡Y voilá!

¡Ahora depende de ti!

¡Hasta pronto para un nuevo tutorial!

## 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 global de tu aplicación](/tutorials/diseno/como-configurar-el-estilo-global-de-tu-aplicacion/)

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

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

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

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

![Cómo configurar el modo 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 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)

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

![Cómo modificar el fondo de tu aplicación](https://portal.ww-cdn.com/portal_static/images/thumbnail_background.01a5a9e37ad2.jpg)