The Image Columns Block allows you to build a row of up to 4 columns with an image on top with a Title and Description below. This pattern is commonly used to show a company’s staff (photo followed by company title and a description of the person’s place), or a set of goals or features, each with an image or icon at the top.
A Basic Three Column Example
This is a basic layout using a transparent background. The images are a fixed size square. Three different size square layouts are supported.
An Example with Original Image Aspect Ratio
This example is based on a long used description of Weaver Xtreme features. It uses 16:9 ratio images, background colors for each column, and titles with custom font size and color. The Description field is unused.
The first example 75% wide, centered, with border
Four Columns, Color BGs for everything, Circle Images
Make it Full Alignment
Tango El Gato
Long Descriptions are Okay
Coming Soon! A Pro version of Designer Blocks for Gutenberg by Weaver
The future Pro version will include both enhancements to the free blocks (like the link buttons displayed here), as well as even more designer blocks.
The Designer Blocks for Gutenberg by Weaver Image Columns Block includes the following features:
- Each Image Columns block may have up to 4 Columns. The columns are responsive, and stack appropriately on mobile devices. The columns are flex display based, and have equal heights. Text content of each column may be left, center, or right aligned.
- An image using its natural aspect, as a square, or as a circle is at the top.
- A Title is just under the image. The title text can be modified to include Bold, Italic, or link elements, and may include multiple lines. The tititle will use your theme’s default font family. You can also set the font-size of the title.
- A Description field is below the Title and can be formatted with the same properties as the Title
- The entire block can have a background color and a simple border, and each column can have its own background color. The default background is transparent.
- You may also specify the width of a block so that it doesn’t fill the entire content. You can use left or right alignment to have a paragraph flow around the block with it has a reduced width.
- Blocks may use Full or Wide alignment with proper support by a theme. (currently Weaver Xtreme is about the only available theme with full Gutenberg Wide and Full alignment support!)
- Each element, image, title, and description is optional, and may be left out as is appropriate.
- As you build each column, its layout is WYSIWYG in the editor, making the whole job easy and simple.
- A future Pro version will support a Link Button at the bottom of each column, useful for opening a bio or other page with more information.