Style Editor Update
When we first launched Instant Articles, we gave publishers a handful of ways to control the look and feel of their brands on the platform. Now with thousands of partners publishing Instant Articles, we're excited to see more approaches to design and layout emerging.
Today we're updating our article styling tools to give publishers more power over brand expression in Instant Articles. With new creative options publishers have the flexibility to customize their article design to more closely match the mobile web.
We're rolling out the update over the next few weeks, and here are some of the improvements you can look out for:
Preview style edits in live time
We're introducing a real-time preview tool that shows publishers what alterations look like as they make them. An example article appears alongside the styling options so that as publishers adjust fonts, text sizes, colors and alignment, for example, they can preview what these elements will look like in a published article.
Customize text, color, and spacing
Publishers can now more granularly control how they display text in their articles. The following are now available for publishers to experiment with in the style editor:
- Fonts: New set of typographic fonts
- Typographic elements: Text size, alignment and line height slider scales
To highlight text or media content with spatial cues, publishers can now refashion the white space within their articles. The following are spatial elements publishers can fine-tune:
- Article background color: Entire article or sections, like block quotes.
- Margin size: Space between text or media elements and left and right screen edges.
- Padding size: Space that frames a text or media element.
- Border thickness and color: Line that frames a text or media element.
Duplicate and iterate existing styles
We also heard that publishers wanted a way to reuse some of the basic settings of old styles in their new styles without having to recreate the old styles from scratch. Now there's a way to duplicate styles so that nuanced adjustments are simple to make.
To duplicate a style:
- Open the style you would like to duplicate.
- Click on the chevron at the top of the style pop-up window.
- Select 'Duplicate' from the dropdown menu.
All articles in which you have implemented a style will take on any changes you make to that style. To design a new style and implement it in new future articles, we recommend duplicating and iterating an old style or creating a new style altogether.
To apply a new style to an article, specify the style name in the article markup. In the code snippet below, the style named “yourstyle” will be applied to the articles with this markup:
<meta property="fb:article_style" content="yourstyle">
Read our developer documentation on implementing styles for more details. Article styles will still need to follow the design policy guidelines.
We're excited to give publishers more creative control over how Instant Articles represents their brand.
