Image Columns Block for Gutenberg Demo
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.
“mediaID1″:8846,”mediaID2″:8844,”mediaID3”:8840,
A Basic Three Column Example
Border Collie
Smart and quirky
Another Border Collie
Good Dog! Always comes.
Aussie Mix
Fun for the Family
Border Collie
Smart and quirky.
Border Collie / Heeler
Good dog! Always comes.
Aussie Mix
Fun for the family.
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
THE ORIGINAL OPTIONS-BASED THEME
FULLY RESPONSIVE MOBILE LAYOUTS
INFINITELY CUSTOMIZABLE
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
Border Collie
Smart and quirky.
Border Collie / Heeler
Good dog! Always comes.
Aussie Mix
Fun for the family.
Four Columns, Color BGs for everything, Circle Images
Wiley
Tango El Gato
Pumpkin
P-Cat
Make it Full Alignment
Wiley
Tango El Gato
Pumpkin
P-Cat
Long Descriptions are Okay
Sheltie Puppy
Easy to train!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor.
Phasellus porttitor, metus non tincidunt dapibus, orci pede pretium neque, sit amet adipiscing ipsum lectus et libero. Aenean bibendum. Curabitur mattis quam id urna. Vivamus dui. Donec nonummy lacinia lorem. Cras risus arcu, sodales ac, ultrices ac, mollis quis, justo. Sed a libero. Quisque risus erat, posuere at, tristique non, lacinia quis, eros.
Border Collie
Smart and quirky.
Praesent sit amet ligula id orci venenatis auctor. Phasellus porttitor, metus non tincidunt dapibus, orci pede pretium neque, sit amet adipiscing ipsum lectus et libero. Aenean bibendum. Curabitur mattis quam id urna. Vivamus dui. Donec nonummy lacinia lorem. Cras risus arcu, sodales ac, ultrices ac, mollis quis, justo. Sed a libero. Quisque risus erat, posuere at, tristique non, lacinia quis, eros.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio.
Coming Soon! A Pro version of Designer Blocks for Gutenberg by Weaver
Border Collie
Smart and quirky.
Border Collie / Heeler
Good dog! Always comes.
Aussie Mix
Fun for the family.
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 Details
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.