If you create videos out of your WordPress content — maybe even by reading articles and sharing additional thoughts — this design hack will help you save time and have a fantastic design appeal when presenting your articles via YouTube.
This hack works because when I was presenting some of my content, where maybe I would normally create slides, I needed to zoom way in on the browser so the text is legible on smartphone size screens. On my 32" 4K monitor this takes on an almost slideshow-like appearance — so I ran with it.
Large Typography
The first thing you'll need to do is use larger font sizes than you might normally use. Not necessarily for the body text (though I do use a slightly large size), it is critical for the H2 level heading to be very large. I believe my H2 is 50+ pixels when viewed from a desktop.
This will create the "slide title" as you scroll down the content when zoomed way in on the browser. Now you need some space to separate things.
Lots of Space Above Headings
You don't want things to clutter together too much in web design. White space makes it easier for people to read our content. This takes it to a bit of an extreme. I believe I added 3.5em of margin above the H2 level headings.
This creates a large separation between sections of the article. At normal zoom, this means the article is easy to skim. When zoomed way in, it takes on an almost "next slide" type of feel. Useful when presenting as you can maintain one thought on the screen at one time.
Now to add some visual appeal.
Sectioned Gradients
Typically slides have some sort of background to them. But often times our websites are a solid color background. Here in the dojo it's a white background. So I use GenerateBlocks to create "containers," or sections, surrounding certain points I make inside the article.
This helps the section stand out and show an added level of importance for the reader, but also looks very nice when zoomed in. GenerateBlocks Pro combined with the GeneratePress theme give you everything needed to create this look.
Here are a couple of thoughts I didn't cover in the video.
Additional Considerations
Use of Images
Images. I didn't mention images in the video and you'll find I don't use many images here in the dojo either.
Rather than images, I chose to use video — which adds a level of attractiveness when embedded because the cover photo is nicely designed. But also video makes more sense when I'm trying to teach you concepts of efficient content creation.
If you decide to use images, be careful. When zoomed way in they can blur (unless you're using a lot of SVG illustrations — they use math to scale linearly with the zoom).
Use of Color, Bolding, & Italics
Don't forget you can use colors to separate important points. Same with bolding and italics. Though I tend to save italics for quoted content. And the use of highlighting is very powerful here too when you have content you need the reader's eye to spot no matter how fast they are skimming.
Tables, Lists, & Statistics
One last thing. I don't use tables often, but if you have your own custom research to share — add it to tables when it makes sense. Not only will Google like it, but it can look nice in a zoomed in "slide" too. Same goes for lists — especially if there is a lot of space between the list items.
Summary
That's a wrap for this guide. I hope you found it helpful. Personally, I think this method can save a lot of time without sacrificing too much design quality. In fact, in some ways it make add to your branding as you can use your own web page's design in the presentation.
Until next time, take care. ❤️+✌️