All-in-One Image/Text Block for Gutenberg Demo
This article provides a completed demo for the All-in-One Image Text Block from the Design Patterns for Gutenberg by Weaver plugin.
This Block lets you combine an image in one column with up to three text elements in the second column. You can control the size and shape of the image. You can independently control the position, text color, and font-size of the three text elements. You can switch the order of the columns.
Not only can you control the background color, you can also specify a cover background image that can be switch to a parallax image. You control the display height of the background image. This Block allows you to easily create amazingly beautiful elements on your page.
Basic Example
This is about as basic as you an get. We added an image of the Hubble Space Telescope on the Left side, and provided a description on the right. So far, everything in using default values.
Add a few elements
Deep Field
Ursa Major, constructed from a series of observations
by the Hubble Space Telescope.
So, let’s build an element that shows the HST and the Deep Field. First, we changed the first title, and added a short description. Since space is dark, we added a dark background to the Block, and fixed up the colors a bit.
Add the Deep Field
Deep Field
Ursa Major, constructed from a series of observations
by the Hubble Space Telescope.
Ok, we’re getting there. We added the real Deep Field as a Cover BG Image. Adding a BG image is optional, but it does look pretty good behind the HST. And note that HST is a PNG image with transparency, so all those stars shine through. You can change the main image simply by clicking on it. The BG image selected is decently high resolution with a 16:9 aspect ratio. You can change the BG image from the Background Image Attributes options. Note the the Gutenberg editor allows you duplicate any block, which is how we’re building these different layouts.
Expand the Background Image Height
Deep Field
Ursa Major, constructed from a series of observations
by the Hubble Space Telescope.
You can make the BG image taller by increasing the minimum height of the Block. And move each of the three supported descriptions around to arbitrary locations. We moved the HST down a bit, too.
Make it Parallax
Deep Field
Ursa Major, constructed from a series of observations
by the Hubble Space Telescope.
Check the Parallax switch in the Image Background Options to watch the HST move in front of the stars.
Switch the order
Deep Field
Ursa Major, constructed from a series of observations
by the Hubble Space Telescope.
Easily switch the order of the image and text using the Block option Image/Text Layout order. You may want to tweak the description positioning.
Spectacular Full Width
Deep Field
Ursa Major, constructed from a series of observations
by the Hubble Space Telescope.
If your theme supports it (and Weaver Xtreme is currently the only production quality theme we know about that does), you can get the ultimate view.
Stack The Columns if you like.
Deep Field
Ursa Major, constructed from a series of observations
by the Hubble Space Telescope.
A simple click, and the columns stack vertically. We tweaked the description positions, and added a little padding to the bottom of the Block, and made this Wide instead of Full width.
With Left or Right Alignment
Deep Field
There’s one more trick. You can also specify a width in the Block Attributes section for the All-in-One block, in which case the block alignment options will change to Left and Right. This lets you mix the All-in-One block with other blocks, such as this paragraph. So many choices!
The rest is up to you
This tutorial demo was created in less than 30 minutes – really. Never before has it been so simple to create such a great looking combination of an image, descriptive text, and a parallax background. All done with immediate visual feedback in the Gutenberg editor.