Cómo diseñar sus secciones

Diseño de secciones

Cada sección de tu app tiene su propio diseño. En cada página, eliges una plantilla, y luego los colores, las fuentes, la información y las imágenes que muestra. Veamos cómo.

En «My App», abre Structure.

Haz clic en la sección que vas a diseñar, aquí Local, una sección de artículos.

Tiene dos páginas, la lista de artículos y el artículo en sí, y cada una tiene su propio diseño.

Lista de artículos

Para la lista, haz clic en «Edit the design».

Empieza por la plantilla. La actual tiene una marca de verificación; usa las flechas para ver las demás.

Elige «Visual Card»… y cada artículo se convierte en una tarjeta grande con su foto.

Cada texto tiene su fuente, tamaño y color. Aquí, un nuevo color para los títulos… y todos los títulos lo adoptan.

En Thumbnail, elige el formato de las fotos. «Golden ratio»… las hace más anchas y menos altas.

Como las tarjetas tienen color de fondo, las fotos pueden ir de borde a borde. Haz clic en «Disable Edge-to-edge»… y ahora cada foto queda dentro de su tarjeta, con un margen.

Tokens

En Display, elige qué información muestra cada tarjeta. Marca «Info below title»… y aparece un resumen bajo cada título.

Mira estos campos: las palabras entre corchetes son tokens. La app las reemplaza por los datos propios de cada artículo, aquí su fecha y su resumen.

El signo de interrogación los lista todos: título, autor, número de comentarios, una fecha relativa y más, para cada tipo de contenido.

Combínalos con tus propias palabras. Aquí «Published» seguido del token de fecha relativa… y ahora cada tarjeta muestra una fecha relativa en lugar de la completa.

Página del artículo

Ahora, la página del artículo. Vuelve a la sección… y haz clic en «Edit the design» debajo de Article.

La página del artículo tiene sus propias plantillas, con la barra de herramientas abajo, arriba o a un lado. Elige «ToolBar Up»… y la barra de herramientas pasa arriba.

En Content, elige cómo se alinean el título y su información. «Left alignment»… los coloca a la izquierda.

En Toolbar, elige las acciones disponibles para tus lectores. Desmarca «Font size»… y sus dos botones desaparecen de la barra.

Para un control total, el código HTML de la página usa los mismos tokens: organiza el título, la fecha, el autor y el contenido a tu gusto.

Publicar

Algo que debes saber: aplicar colores o fuentes en «App style» reemplaza el diseño de cada sección.

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