00_listicle_example

Example of a listicle.

If you’ve ever visited Buzzfeed, you are already familiar with the listicle format.

A listicle is a list of images, tied together with titles and captions to create a full story. The list format implies a temporal sequence of events (first, second, third), but any kind of story with a beginning, middle and end can work in this format.

Typically, a listicle starts with a title and an introduction text. After that, there is a sequence of images. Each image is preceded by a short line of text, and usually a number to indicate sequence. Text, in a lighter typeface, sometimes follows each image, and can include links to other content if appropriate. The story continues through all  the images, then comes to a conclusion with some closing text.

Buzzfeed’s “Facebook Cancelled A Harvard Student’s Internship After He Exposed A Massive Glitch In Their System” is an example of a listicle.

You don’t need to use any special tools to create a listicle in your Trinity Portfolio. It’s generally a matter of applying formatting appropriately within a post.

Create a listicle in a portfolio post

The “secret” to creating a listicle in a portfolio post using the formatting options available to you in the WordPress Post editor.

First, in your new post, start with a sentence or two that introduces your listicle.

Next, make sure the posts editor is showing all the options you need. You want to make sure you have the Toolbar Toggle “open” (1 in the image below).

07_post_editor_options

With the Toolbar open, you’ll see a drop-down menu that say “Paragraph” by default (2 in the image above).  Opening this drop-down shows all the heading style options available to you.  You want to use Heading 3 for the title text before each image.

Note that Headings will apply to entire paragraphs of text. So when you type your first headline, select Heading 3 when you’re done:

08_headings_listicle

Then, you’re ready to add your first image. You’ll follow the same steps you do for uploading a regular image, but you want to make sure you select a wide enough image size (usually full size or the size labeled “large”). If you want viewers of your post to see a larger version of the image when they click on it, specify “Media File” in the Link To drop-down menu.

09_include the image

That’s all you need to do! Repeat with the next heading and images until you are done.

10_follow_up_with_text

Print Friendly, PDF & Email