Open lesson navigation Close lesson navigation
Content design
Back to Courses Intro to Blogging Content design

16 of 25 lessons complete (64%)

Exit course

Content design

While the written word is incredibly important and powerful for bloggers, enhancing your content with visuals, layout variations, and media can vastly improve your ability to attract repeat visitors and new readers while also making the content more shareable and engaging.

In this lesson, we’ll talk about setting a foundation with Themes, jump into some powerful block settings and tools that can be used to level up your content, and share how to save yourself a ton of time when building this content out.

One of the reasons why WordPress is such a beloved blogging and website-building platform is its nearly infinite selection of site layouts called themes. On WordPress.com, you have access to dozens of gorgeous free themes. 

The beauty of the block editor, of course, is that you can also customize your layout to your heart’s desire. To really unlock the power of the block editor, use one of the Recommended Themes in the Theme directory and start adding different design blocks.

Blocks are essential tools for creating content on WordPress.com. Using blocks will help you create more dynamic and engaging content, more efficiently. Let’s look at how to add blocks as well as a variety of the blocks available to work with to build and manage your blog.

Adding blocks to your blog posts

Blocks are components that add content to a page or post. Blocks can include many different kinds of elements such as paragraphs, images, media, and more.

The first step in building your blog is learning how to add blocks in the editor. 

Check out this video tutorial on how to add blocks to a post or page:

Different varieties of blocks

As a blogger, you’ll likely use the default Paragraph Block most often, but you can use dozens of different blocks to add variety and creativity to your content — and we’re constantly adding more to the WordPress.com platform.

Blocks are extremely powerful and have the ability to add depth to your content in ways you may not have considered. 

Learning more about the block editor and navigating blocks will further enhance your experience of working with blocks. Expand this section to check out a couple of videos to help with this.
Expand this section for a brief overview of some common blocks you can add and customize for your blog:

Paragraph block

The Paragraph block allows you to add text to a post or page. This is the default block type for adding text to the editor, and each paragraph can be adjusted by color and font size.

Heading block

The Heading block allows you to add headings and subheadings to your text. This can help you structure your content and make it more readable by visitors and search engines.

Quote block

The Quote block allows you to add quoted passages to a post or page, which can be used to highlight reviews from your audience or share inspiring phrases, like the following:

“All great artists draw from the same resource: the human heart, which tells us all that we are more alike than we are unalike.”

― Maya Angelou

Image block

The Image block allows you to upload image files, or select them from free image libraries, and insert them within a post or page. Visuals are a great way to engage visitors because they can add insight into your text or offer a visual break for readers.

There are a variety of other blocks that use images as well depending on the layout you want — including the Gallery Block, Media & Text Block, Slideshow Block, and the Cover block. You can learn more about other image blocks in our Images support guide.

Cover block

The Cover block allows you to add an image to your post and customize its alignment, opacity, dimensions, and even overlay some text. If you have a plan upgrade, you can even add a video to the cover block to really make your content shine.

Buttons block

If you want to add a button to a post that directs readers to another page on your site or even a different website or blog altogether, use the Buttons block. You can customize the button further using different text (“Learn More” or “Click Now” or “Get it now!”), changing the background and text colors, as well as the alignment.

🗒️ You may need to upgrade to access certain blocks, such as the option to upload audio files using the Audio Block. However, the majority of blocks are available to all users on WordPress.com. You can also use the Embed Block to insert media from other platforms/third-party platforms, such as YouTube, Twitter, Vimeo, Soundcloud, Instagram, and more (make sure the media files you are embedding from the third-party platforms are set to Public/not Hidden or Private).

Layout variations with Block Patterns

Block Patterns are a collection of predefined blocks that you can insert into posts and pages and then customize with your own content. Using a Block Pattern can reduce the time required to create content on your site. Be sure to experiment! Different blocks can be combined to produce interesting effects.

To browse the Block Pattern directory, click on the plus sign at the top left of the editor and select the Patterns tab. Scroll down to see the available patterns.

Swap out the sample content with your own, including all images and text.

New Block Patterns are added all the time, so whenever you’re feeling creative, be sure to check the directory for new ones to experiment with.

Layout variations with columns 

You may find yourself wanting to present several pieces of content side by side so that they can complement each other and act as a single piece of content — even though it’s really multiple blocks. This is where the Columns block really shines.

This block gives you a variety of options that are based on best practices for web design. 50/50 is an easy way to align two elements equally but you can choose other elements based on the emphasis you want to put on each piece of content. 

For example, you may want to use 30/70 when presenting a short text quote and an image like this:

A screenshot of a WordPress site with two columns. On the left is a quote from martial artist Bruce Lee, on the right is a picture of Lee himself. The image shows how columns can be used on a WordPress site.
Pro tip: If you can’t get one of the elements to line up where you want it to, try using the spacer block. The Columns block is what’s called a “nested block” so it will hold blocks within it. The best way to find the block you want or to rearrange them is with the “List View”. 

Making it your own

To help whittle down your options when developing your custom layout or selecting a theme, try our three rules of thumb:

  1. Pick something that speaks to you. You might admire simplicity and bold typography on other sites, but if you’re personally drawn to something soft and romantic, head in that direction.
  2. Consider your content. If you know you’ll be posting lots of images, create a layout or select a theme meant to show off photos. If you love poetry, choose a streamlined layout that makes your words the star. 
  3. Think about your priorities. The Recommended Themes are ideal if you want to focus on your content without having to spend too much time configuring a custom theme. You can add the design blocks you need, as you need them, and invest more of your time on your actual blogging. If you prefer other themes, more specialized themes, take a look at a theme’s features, and think about how much time you want to spend getting things configured.

Embedding content 

Embedding content means that you’re placing a version of the content that exists somewhere else on the web in your content. WordPress allows you to do this in a number of different ways and supports a large list of integrations. Whether it’s a Spotify playlist or an Instagram post, you can use it to enhance your content.

We’re really just scratching the surface with what you can do in the editor to build beautiful and engaging content. For more information about the block editor and available blocks, see the additional resources below.

Learning Action

For this exercise, take a close look at your Homepage. If you just launched your site, you may have selected one of the cool, premade layouts to showcase your content, images, or both.

Experiment with making small changes to your Homepage design. For example, try clicking on one of the blocks on the Homepage, and check out the block options menu in the right sidebar. Some blocks let you change the background and even the text color of that block.

As you gain more confidence, think about making bigger changes. Is there a specific section on your Homepage you’re not happy with? Remove it completely and replace it with a different block or pattern. 

If you make a change and realize you made a mistake, you can always undo it by clicking on the Undo button in the top left of the editor.

If you’re happy with your existing Homepage, apply this exercise to any other page or post in your site.

Click to expland

Resources

  • WordPress Editor (Support Guide)
  • List of all blocks (Support Guide)
  • Block Patterns (Support Guide)
  • Images (Support Guide)
  • List View (Support Guide)
  • WordPress.com Theme directory
  • Writing quality content

    Media

    Copied to clipboard!