It was a bright cold day in April, and the clocks were striking thirteen’. The first line of George Orwells’s book titled 1984. Kind of pulls you in right? That’s the idea of digital story telling anyway. Creating content that people won’t want to put down until they’ve read the very last letter. Nowadays, storytelling isn’t just done by authors like George Orwell. It’s also a big part of marketing and getting your message across online. Are you interested in creating a digital story on your WordPress site? It’s easier than you think if you follow the steps in this post!
Table of contents
- What is a digital story?
- Let’s take a look at a few examples
- Snow Fall by the New York Times
- Digital stories by Yoast
- The block editor in WordPress
- How to create a digital story in WordPress
- Step 1: Writing the content
- Step 2: Creating a design
- Step 3: Implementing the design
- Step 4: One final check
- Good luck with your digital story!
What is a digital story?
Before we dive into how to create one, let’s talk about what a digital story is. A digital story can have many forms, but Wikipedia nicely puts into words what digital storytelling entails:
Digital storytelling is a relatively new term which describes the new practice of everyday people who use digital tools to tell their story. Digital stories often present in compelling and emotionally engaging formats and can be interactive.
Essentially, digital storytelling is the practice of using online tools to tell stories. The digital story is the result that you end up with, a story that is created and told through the use of an online tool. What makes them different from more conventional online pages or blog posts is the fact that they’re often presented in the form of a story to immerse the reader into a topic. And to immerse the reader, digital stories are often presented in visual and engaging formats that also have interactive elements.
Let’s take a look at a few examples
Snow Fall by the New York Times
An earlier and quite elaborate example of a digital story that won a Pulitzer prize in 2013 is Snow Fall. This New York Times multimedia story by reporter John Branch tells the story of the 2012 Tunnel Creek avalanche. By using video, interactive graphics, character stories, and even chapters, this piece became one of the most talked-about online articles of the year. Some even called it the future of online journalism.
To be fair, this New York Times feature had a graphics and design team working on it for more than six months to get it to look as great as it does. We don’t all have this kind of time (and amount of people) on our hands to create a digital story. And you probably don’t even want to spend that time and money on your digital story. But that’s the fun part, these stories can be as much work as you want them to be.
Digital stories by Yoast
At Yoast, we’re passionate about a lot of things. One of those things is creating content that helps our readers get a better understanding of SEO and WordPress. Digital storytelling is a great way to make a difficult or more nuanced topic understandable for everyone. That’s why we love creating digital stories.
The first digital story that we created using the block editor is a sociological exploration into gender, stereotypes and prejudice. Social issues that you may not associate with our products, but that we are very mindful of in our work environment. We also have digital stories on open source and structured data, other topics that our team strongly believes in. These digital stories took a lot less time and people than the first example. The only things you’ll need are someone who can write about the topic, someone who loves designing pages (yes, this can be the same person) and the free-to-use block editor in WordPress!
The block editor in WordPress
If you own a WordPress site, you can create a digital story with the use of the block editor. The block editor, formerly known as Gutenberg, uses different blocks to add content to your pages. You can also use this editor to create normal pages and posts. If you want to know more about the block editor in general, read our article on the WordPress block editor: why you should be using it.
Good to know
The quizzes in our digital stories are custom-made, so unfortunately there isn’t a block for that in the block editor.
When it comes to digital storytelling, the block editor just makes it very easy to create engaging content and take control of what your page will look like. Different background colors, adding videos or audio, full-width images and content, quotes and more. All these blocks help you tell your story in an interactive and fun way!
How to create a digital story in WordPress
Alright, now that we’ve seen some examples, it’s time to get to work. I’m itching to get started, how about you? If you’re still not sure whether you can do this, these four steps will convince you that digital stories are not that hard to create in WordPress.
Step 1: Writing the content
You probably want to start designing right away, but your content comes first. Thinking of what you want to write about and how long your text will be, is a strong basis for your design. So start with your writing and try to keep design out of your mind until you have a pretty good idea of the story you want to tell.
Writing for a digital story is similar to SEO copywriting in a number of ways. It’s good to start off with research into the keywords that your audience uses. Don’t let this limit you in what you want to write about, but let it help you tweak your focus to include words that your audience recognizes. When you have your focus keyphrase (and related keyphrases) it’s time to think about the goal of your text. What do you want to achieve and what subtopics do you want to discuss? This helps you set up a structure for your story. After that, it’s a matter of writing and editing until you end up with your story.
Step 2: Creating a design
Check your contrast
When choosing colors, make sure to check the contrast of your background and text. By meeting the recommended contrast ratio your content is more accessible to a lot of people. Run the colors through this contrast checker to see if you’re using enough contrast.
When you have the content for your page, we can start creating a design that will turn it into an engaging digital story.
Pick your colors
If you have a designer in your team, ask them if they can think of a color scheme that suits the topic. Or if you don’t, try to choose these colors yourself. Having a few color codes on hand that go well together, really helps you decide on your design. If you’re not that familiar with choosing complementary colors, take a look at Coolors’ color palette generator that gives you a different palette every time you hit the spacebar.
Collect images, photos and illustrations
You can look for images as you go, but it can help to have a collection of images beforehand. If you take beautiful photos: great! Use those. If you have an illustrator on your team, ask them to draw you up some great illustrations. And if these are both not viable options for you, you can always find suitable images online. On Unsplash or other stock photo websites. But do make sure to check whether the artist wants you to credit them! Read more about where to find great images and what to look out for.
Step 3: Implementing the design
This next step depends on the structure of your content, the images you’ve picked and the overall look you’re going for. But to help you design a digital story using the block editor in WordPress, we’ll discuss the different blocks you can use to give you an idea of the possibilities.
You can find these blocks by going to your editor and clicking on the plus icon in the top left corner of your editor. Or you can click on the plus icon in the editor itself and type in the name of the block you want to use.
This is your one of the most standard blocks in the block editor and I’m using it to write this sentence right now. The name tells you everything you need to know. With this block, you can write a paragraph that you can add to your digital story where ever you want to. Using these minimalized paragraphs can provide some fresh air from all your other, more designed, parts of the digital story.
The next block we’ll look into is the Cover block. With this block, you can create a full-width section that shows either an image or color of your choice as the background. After choosing your background, change the alignment to Full width in the top bar of your editing screen. If you choose an image, you can also add an overlay in the settings bar on the right when you want it to be darker or lighter. Or when you need to increase the contrast between your background and text. When you set an image as a background, you can also select ‘Fixed background’ in the settings. It’s a matter of taste, but this gives a cool effect of the image not scrolling with the rest of your text. Check it out!
Use this block to add full-width images to your page, or to break up your text by giving some of your paragraphs a color block or image as background. Note that when you add several elements to a Cover (or any other) block, like a title and paragraph, it can help to group them in order to get them to align. You can do this by selecting the blocks you want to group, clicking on the ‘Change type of 2 blocks’ option in the bar above your editor and clicking ‘Transform to Group’. This helps the editor see these blocks as one element and tell them to behave the same.