A New (and Easier) Way to Create Content Boxes

Create Pro Video Software

Click banner

A guide to featured content via the Gutenberg editor for WordPress.

A New (and Easier) Way to Create Content Boxes

As the development of Gutenberg continues, our team at StudioPress is following along closely. While there is a roadmap for its release, we are still somewhat watching from the sidelines.

Until it is merged into Core and WordPress 5.0 is released, we are approaching everything around Gutenberg as experimental. There are simply too many ongoing changes and iterations still happening.

However, there is a lot to like about the direction of Gutenberg, and there are plenty of things that I have seen which get me excited.

Content Boxes

One of those things is the ability to create content boxes. Previously, this could be accomplished with HTML and CSS—by adding a class to a paragraph, or wrapping text inside a div.

The problem with this, however, is that many folks use the visual editor and have no idea what HTML or CSS is.

With the Gutenberg editor for WordPress, this process has become much easier, and can literally be accomplished in seconds—without the need for any code.

Developers can now add a custom theme color palette to publishing experience, and with those, create content boxes like these below.

Content Box Examples

This is a sample paragraph text with a colored background. You can use this to feature content, highlight something important, or provide a call-to-action. Click to learn more.

This is a sample paragraph text with a colored background. You can use this to feature content, highlight something important, or provide a call-to-action. Click to learn more.

This is a sample paragraph text with a colored background. You can use this to feature content, highlight something important, or provide a call-to-action. Click to learn more.

This is a sample paragraph text with a colored background. You can use this to feature content, highlight something important, or provide a call-to-action. Click to learn more.

Creating Content Boxes

To create a content box using the Gutenberg editor for WordPress is quite simple. All you need to do is write a paragraph and assign a background and text color to it.

Here’s a screenshot to show what that looks like:

Creating Content Boxes

There are a few caveats in this process. For instance, you might want to use a darker background color, as I have, in my examples above.

It’s easy to do that by using the color picker and choosing something like white. However, that won’t change the link color, which could present a problem.

Thankfully, the new editor enables you to add classes to individual blocks, which will allows you to do this quite easily.

Here’s a screenshot which shows you how I did this in my examples:

Colored Content Boxes

Notice there’s an option on the right side called Additional CSS Class, where I have entered white-text. Here’s the CSS I used to style the links in paragraphs with a dark background:

https://gist.github.com/7efb487d33794089832b77d963dfd341.js?file=style.css

.entry-content p.has-background.white-text a {
	color: #fff;
	text-decoration: underline;
}

In my examples above, you’ll notice that the last one shows a boxshadow around the paragraph, which can also be done with CSS.

Simply write your paragraph, select white for the background color, and then add a class such as boxshadow to it, in the same way I showed above for the white text.

Here’s some sample CSS that I used in my example above:

https://gist.github.com/6dc34a28e8859aa9fd9ddaa3d3c74016.js?file=style.css

.entry-content p.has-background.boxshadow {
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

There are plenty of other ways to style paragraphs with the Gutenberg editor for WordPress. My examples are just a few, but you can see how easy (and powerful) this experience might be for users.

Note: The Gutenberg editor for WordPress is still in development, which means at any given moment things can change. I’ll be keeping posts like this up to date in those events, so check back often.

The post A New (and Easier) Way to Create Content Boxes appeared first on Brian Gardner.

by Brian Gardner

Print Profits is meant to deliver 100% new unique way and solution to do business online using eCommerce Shopify stores

Click banner

Thomas Muller

My name's Thomas Muller. I'm a digital marketer. Glad to meet you!Connect me on FaceBook

Leave a Reply

Your email address will not be published. Required fields are marked *

/* */