Art Directed Articles for Startup

Using just a couple of HTML classes you can transform elements in your blog articles to have:

  • Featured image across the top of the article
  • Images that go full width or floated left/right with an optional caption
  • Pull quotes

Featured image

To set a featured image, open your post in the Admin edit screen and click on the ‘Show HTML’ icon on the top right of the editor. Find the image that you’d like to feature and add a class of ‘featured-image’ to it, like this:

Demonstration

Highlighted images

To have an image be a “highlighted” image, open your post in the Admin edit screen and click on the ‘Show HTML’ icon on the top right of the editor. Simply place your image inside of a new <div> element with the class name of “highlight”. Save you changes and you’re ready to go.

It’s important that your new div isn’t nested inside a list or a paragraph.

Demonstration

Image alignment

You can assign images to be aligned to the left or to the right. Make sure you have toggled off the ‘Show HTML’ icon and select the image you’d like to align by clicking on it. Next, click on the image icon in the toolbar. From there, simply select your alignment and check the Wrap text around image option. You can optionally tweak the spacing values to make sure your post looks perfect.

Demonstration

Image captions

While you’re editing the image, you may also add text to the Description field. If used, it will appear as a caption under your image on the article template.

Pull quotes

Just like images, creating a pull quote is as simple as adding the highlight class to a blockquote:

<blockquote class="highlight">Your special quote here</blockquote>