--- title: "Personalizar el diseño de secciones individuales" description: "Aunque se aplica un estilo predeterminado a toda la aplicación, puedes personalizar el diseño de secciones individuales para modificar elementos específicos com" canonical_url: "https://es.goodbarber.com/help/personalizar-el-diseno-de-las-secciones-de-la-app-r89/personalizar-el-diseno-de-secciones-individuales-a106/" lang: es --- # Personalizar el diseño de secciones individuales Source: https://es.goodbarber.com/help/personalizar-el-diseno-de-las-secciones-de-la-app-r89/personalizar-el-diseno-de-secciones-individuales-a106/ Aunque se aplica un estilo predeterminado a toda la aplicación, puedes personalizar el diseño de secciones individuales para modificar elementos específicos como colores, fuentes y fondos. **Para editar el estilo de una sección:** 1. Ve al menú **Mi app > Estructura**. La lista de todas tus secciones se mostrará en la columna derecha. 2. En esa columna, haz clic en la sección que quieras editar. Consulta el ejemplo a continuación si deseas editar el diseño de la sección "Artículo CMS". ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034928-27892129.jpg?v=1783006325.7852888) ## 1. Diseño de la sección de contenido **Advertencia: La configuración de diseño disponible variará según el tipo de sección que estés editando.** Esta guía utiliza como ejemplo una sección de artículos de un CMS. Puedes personalizar el diseño de los dos componentes principales de esta sección por separado: - La **lista de artículos**, que muestra todos los elementos de la sección. - La **página de artículos**, que ofrece una vista detallada de cada elemento. ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034928-27892130.jpg?v=1783006325.7972887) 1. Haz clic en el enlace "**Editar el diseño**" para la parte de la sección que deseas personalizar, ya sea la "Lista de artículos" o la página "Artículo". 2. Configura las opciones diferentes disponibles detalladas abajo: **PLANTILLA** - Tu plantilla está claramente identificada con un icono verde - Puedes navegar entre las plantillas diferentes usando las flechas para escoger una nueva ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034928-27892131.jpg?v=1783006325.8092887) **CONTENIDO** - Configura los colores del fondo de la página, colores y fuentes del texto, alineamiento del contenido, etc. de tu sección - Puedes editar el texto y **[los símbolos](https://es.goodbarber.com/help/personalizar-tu-app-con-las-herramientas-de-desarrollador-r14/modificar-la-estructura-html-de-las-paginas-de-detalle-de-articulo-y-video-usuarios-avanzados-a137/)** que se mostrarán en los ajustes de Información en la página de lista, por ejemplo. - Mostrar el Autor, resumen cuando la opción esta disponible ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034928-27892132.jpg?v=1783006325.8132887) **BARRA DE HERRAMIENTAS** - Configura las acciones que quieres mostrar en la barra de herramientas de la página del artículo, los colores de los iconos, etc. **NAVEGACIÓN** - Configura los ajustes del Paginador* **MINIATURA** - Puedes elegir una miniatura predeterminada para mostrarla cuando no haya ninguna imagen en tu artículo **Opción no está disponible en todas las plantillas* ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034928-27892133.jpg?v=1783006325.8212888) **Código HTML*:** - Puedes editar los [tokens](https://es.goodbarber.com/help/personalizar-tu-app-con-las-herramientas-de-desarrollador-r14/modificar-la-estructura-html-de-las-paginas-de-detalle-de-articulo-y-video-usuarios-avanzados-a137/) y el texto: eliminar, por ejemplo la fecha y el autor. Elimina el pequeño fragmento de código correspondiente a esta información. **No está disponible cuando utilizas la plantilla 4 para tu página detallada.* ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034928-27892134.jpg?v=1783006325.829289) ## 2. Diseño de secciones Menú Si utilizas un sistema de navegación de varios niveles en tu app, para configurar el diseño de tus secciones Menú: 1 - Ve al menú, **Mi app > Estructura** 2 - Haz clic en la **sección Menú** que deseas editar. 3 - Haz clic en " **Editar el diseño** " ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034928-27892135.jpg?v=1783006325.8372889) 4 - Escoge la plantilla de la sección Menú 5 - Usa los ajustes disponibles para configurar el diseño (imágenes del fondo, efectos, fuentes, colores, iconos, etc.) ## 3. Cabecera específica Tienes la opción de modificar el diseño de la cabecera una sección específica*. 1. Ve al menú **Mi app > Estructura** 2. Haz clic en la sección que deseas editar. 3. Haz clic en "**Cabecera**" 4. Haz clic en "**Modificar la cabecera de esta sección**" **La configuración de los ajustes son los mismos que los de [la cabecera general.](https://es.goodbarber.com/help/personalizar-la-navegacion-el-inicio-y-el-encabezado-r88/configurar-y-personalizar-el-encabezado-de-tu-app-a378/)* ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034928-27892138.jpg?v=1783006325.8412888) Para regresar a los ajustes predeterminados y aplicar el diseño de la cabecera general: 1. Ve al menú **Mi app > Estructura** 2. Haz clic en la sección que deseas editar. 3. Haz clic en "**Cabecera**" 4. Haz clic en el icono engranaje en los ajustes de esta cabecera específicamente 5. Haz clic en "**Volver a la cabecera predeterminada**" ![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034928-28343752.jpg?v=1783006325.849289) ## 4. Video tutorial ***Nota:**Los menús han cambiado en el backoffice, pero el comportamiento que se explica en el video sigue siendo el mismo.* [Video](https://www.youtube.com/watch?v=qVSe6BzjgSw)