This is how you use the blocks optimally

With the reusable blocks in WordPress 5.0, you can create and save elements yourself – for example for the affiliate notice or a call-to-action button.

WordPress offers blocks for formatting, layout elements, widgets and social media. However, individual content can also be inserted at the push of a button if required. In the following you will learn how to use reusable blocks for an affiliate notice, a call-to-action and recurring data types (e.g. for recipes).

Affiliate notice block

Many bloggers participate in affiliate programs and then embed affiliate links in their posts. They receive a commission as soon as a visitor clicks on the link and buys something from the partner. You have to let your readers know about it. You can mark the links with an asterisk and then place a corresponding note below the text:

The ones with asterisks

The links marked are so-called affiliate links. If you click on an affiliate link and shop via this link, I receive a commission from the relevant retailer or provider. It doesn’t cost you a cent.

Instead of inserting the text manually every time, you can simply include the note as a reusable block:

1. Add the block Paragraph using the plus icon.

2. Insert the star text and format the text if necessary (for example italic).

3. Click on the three-dot icon in the block menu and then select the option Add to Reusable Blocks. Now give the new block a name like “Affiliate Note” and save the whole thing.

Your “Affiliate Notice” block now appears in the post and in the block overview under the Reusable category. Like everyone else, you can insert the block into your posts and pages at any time using the editor.

Block for a call-to-action

With a call-to-action, you encourage your readers to click on a link or button. The goals are often to establish contact, an offer from an affiliate partner or a product from your own shop. The easiest way to do this is with the block button: Enter text, insert a link and use the block settings on the right-hand side to adjust the styles and colors. You can then save your button as a reusable block as described above.

There are three button styles to choose from in the block settings: rounded, contour and rectangular.

You are much more flexible with the HTML block. This allows you to add text to your call-to-action and highlight it optically:

1. Select the HTML block.


Rezepte für Katzen

  • 52 glutenfreie Rezepte
  • 100 Seiten mit zahlreichen Fotos
  • Sonderpreis: 14,99 Euro

2. Now insert the button with a heading and a list via HTML. Enclose the entire block with an individual class in order to be able to design the area using CSS. In this example this is the class “cta-area” (use your URL and your link text):

.cta-area {
	background-color: #FFB800;
	padding: 10px;
	text-align: center;
	border-radius: 5px;
	
}

.cta-area ul {
	list-style-type: none;
}

3. Enter the desired CSS instructions in the backend (Design → Customizer → Additional CSS). With the following example code, you can change the background color and center the content, among other things:

In the frontend it looks like this:

4. Click on the three-dot symbol in the block menu and save the block under any name as a reusable block.

Block for recurring data types

Do you blog regularly about literature, music or recipes? Then you know that certain types of data keep coming back. In the case of recipes, for example, these are the ingredients or the preparation time. Instead of inserting this information into the body text every time, you can create custom fields.

With the help of a reusable block this is even easier and has the advantage that you don’t have to change the PHP code. The procedure is similar to the one above:

1. Insert a new block – this time as a table.

2. Choose two columns and as many rows as there are data types. In our recipe example, there is one line each for ingredients, preparation time and level of difficulty.

3. Enter your data types in the left column. The right column remains empty for now.

4. Enter an additional CSS class (for example “metadata”) in the block settings on the right under Advanced. You can use this to design the area individually in the next step.

.metadaten {
	background-color: #FFB800;
	font-variant:small-caps; 
}

5. With the CSS class you can now adapt the table in the customizer. Use the following instructions to change the background color and use small caps for the text:

6. Save the block in the editor as a reusable block. Then you can fill in the right column of the table. Here is the result for the recipe for a delicious strawberry cake:

By the way: In the block category Reusable there is the link “Manage all reusable blocks”. Here you can edit, delete and even import / export your self-built blocks. The latter comes in handy if you run multiple WordPress blogs.

Blog more efficiently with reusable blocks

Reusable blocks are best for content that you need often (but not always!). So you can decide on a case-by-case basis whether and where they should appear. For permanent advertising banners or social media links, on the other hand, widgets and plugins are still the most convenient solution. This gives you maximum flexibility – and you can finally combine your cake recipe with a call-to-action button:

By the way, we also use call-to-action buttons:

Get started with your own WordPress blog now.