How to Use the New Style Editor

Take your article design to the next level with our new and improved style editor.

Custom Styles

Instant Articles Team

February 4th 2016, 9:00 AM February 4th 2016, 9:00 AM

We’ve created a powerful new style editor to give you greater control over the design of your Instant Articles. You can now transform the look and feel of your publication on Facebook in a few simple steps.

What’s New?

To get started, let’s use this article to demonstrate specially customized design features and describe how you can create the same effects. From headlines to footers, 20+ layout elements can be adjusted easily, each with dozens of settings, to hone your publication’s visual identity.

A few of the awesome new capabilities include:

• You can now color the backgrounds of things like headers, captions or even the entire article itself (though we haven’t done that here).
• Pixel-level control over horizontal and vertical borders enables you to create boxes and ornamental rules.
• Adjustable padding between elements and their contours gives better control over spacing.
• You can change text alignment and adjust margin sizes for each element. (One exception: Alignment for captions is still set in the article markup.)

Let’s take a quick highlight tour.

This Is a Primary Heading

We’ve selected Helvetica Neue Bold, left aligned, for the primary heading typeface and added a red 5px top border. The text size is 1.3, meaning it scales to 1.3x the default size. We changed the top padding to extra small, adding a bit of space between the text ascenders and the rule above.

The typeface of the body text is Helvetica Neue, left aligned, with the left and right margins set to default and the line height and text size both at 1.0. We’ve underlined our inline links and defined the color as light blue.

Now, scroll back up to the top of the article to look at the article header area. Everything’s center aligned, to begin with. We styled the kicker with red text and all caps, then added extra small padding on the top and bottom and a red 2px bottom border. This border aligns with the width of the text because its margins are set to default. To indent the subtitle, we made its margins large.

Note that when uploading and sizing your publication’s logo, you have the option to add a colored background to or a rule along the bottom of the identity bar. And you can set the Facebook Like button to match a prefered brand color.

This Is a Secondary Heading, BTW

We filled the background of the secondary heading with black, reversing the text color to white. To make the left-aligned text snug in the box, we set the padding on all four sides to extra small and the margins to default. The left side of the box aligns with the left margin of the body text because that’s also set to default. The typeface is Helvetica Neue Bold, sized to 0.9.

Block Quotes and Pull Quotes

This block quote is Helvetica Neue Bold, sized at 0.9, for a squat effect. We changed the default black border from 2px to 16px. Small padding on the left brings the text close—but not too close—to it. And large padding on the right offsets the quote from the body text. The red color is defined separately for the text and border.

You’ll find it’s well worth investing a little extra time to fine tune elements like the block quote—small touches can add visual punch to your Instant Articles. Consider options for the typeface and background color for your pull quotes, kicker and inline links, too.

This pull quote is right aligned, all caps. We used Helvetica Neue Bold Italic with a size of 1.2 and line height of 0.8 to make the text large and dense. Pull quote attribution is gray and all caps

Captions

This Is a Small Caption Title

The small caption title is set to all caps. The color of the title and small caption description default to gray, though you can change them to whatever color you want in the style editor—the same goes for all caption sizes. Caption credits default to a slightly lighter gray, like the one below. Caption credit is all caps

Four sizes each for caption titles and caption descriptions (S, M, L and XL) can be styled independently of each other, giving you a big typographic range to play with in each article. Specify caption sizes for each media asset separately in your article markup. Captions default to small if no size is indicated.

This Is a Medium Caption Title

The medium caption title has a red background with extra-small padding on four sides. We adjusted the top and bottom padding to 0.7 to create a slender profile. In contrast to the default setting used in the caption body, the title’s left margin is small so that the container extends into the gutter slightly, overhanging the body text. This medium caption description has 0.8 text with a slightly darker gray than the default.

Unlike other text elements, caption alignment is set directly in the article markup rather than in the style editor. By adding positioning and alignment tags, you can place individual captions below or above or superimpose them on top of images. The title and description for the same caption can be positioned separately, giving you a lot of flexibility. For demonstrations of caption placement, check out “Using Captions in Instant Articles” in the example article section of your Instant Articles library.

This Is a Large Caption Title with a Background Color, Text Color Set to White and Text Size of 1.2

If this happens to be your first time exploring an Instant Article, don’t overlook the way the above fullscreen image you just scrolled past snaps ever so gently into place without locking. You can designate any image or video as fullscreen in the article markup.

The caption titles on the two fullscreen photos here have been superimposed on the images by using the "op-vertical-center" class in the article markup.

This Is an Extra Large Caption Title

This extra-large caption description features medium margins. The text has been centered using the "op-center" horizontal alignment class in the article markup. Caption credit

We hope you’ll use the style editor to modify your existing styles and create new ones. Unique styles can help differentiate branded content or distinct verticals in your publication, like sports or food. You might even want to highlight special feature articles or series with custom one-off styles. The sky’s the limit!

One Last Thing ...

Don’t forget to check out the new live preview tool that displays design changes in real time as you make them. Under the Publishing Tools tab of your Facebook Page, select Configuration in the left nav bar. Then click on Styles to explore options for your publication’s brand identity in Instant Articles.

For detailed information on styles and design elements in Instant Articles, refer to our design guide.

We left aligned the footer, credits and copyright and adjusted the typeface to Helvetica Neue Light and the color to grey.