We’re happy to officially announce our latest feature, Image Block 2.0, is now available to all users. In this post, we thought the best way to explain would be to show you the differences. We will be going over the following:
- Old Image Block features (to compare)
- New Features of Image Block 2.0
- How to use Image Block 2.0 creatively
1. Old Image Block
Now before we go and talk about our new image block, we thought it’d be best to show you quickly what the old Image Block can do (for those people that have never played around with it). The old Image Block has five shape/layout options to choose from. These have served us well here at The Church Co, but with the rollout of new Themes and features, we felt the old Image Block needed a bit of an update. Here are the old Image Block layout options:
Circle Images (Old)
Blocks (Old)
Landscape Images (Old)
There is also the Image Only options which displays an image over a full page width. All of these options are still available to use on our old Image Block. However, with Image Block 2.0 we have added much more options to choose from, and we know you’re going to love using it (because we really do).
2. Image Block 2.0
We wanted to add new feature to our Image Block to not only give you more control over your design, but also to give you more options to choose from. Below are some of the new options that you are able to use on a website right now. They are divided into two categories: Type and Layout.
Image Block 2.0 – Type
Type is mainly referring to the shape of the image, but with an exception to our newest feature Overlay Text. Choosing the best shape for your page has never been easier.
- Circles display images as a Circle
- Squares display images as a Square
- Landscape display images as a Landscape image
- No Crop does not crop your image at all (great for ministry logo PNGs with transparent backgrounds)
- Image Only displays the image a full page width (great for banners)
- Overlay Text (New Feature) overlays the title, description text, and button links on top of the image.
Text Overlay (New Feature)
Text Overlay is a great way to display a short description over your image. You also have the ability to add a clickable button link directly on top of the image. So the images don’t begin to look cluttered, we recommend using a short description that’s 1-2 lines long and trying to only use one link.
Image Block 2.0 – Layout
Layout is referring to how the shapes are displayed,
- Columns display text in a vertical column, but will now fill the width of a page if you only have two or one image displayed. For example, if one image is uploaded, it will scale to 100% width of the page. If two are uploaded, it will scale each at 50% width. Three images will scale to 33% width.
- Rows are displayed in horizontal rows.
- Left / Right is alternating Left & Right images. (what “Blocks” currently is on our old Image Block)
Columns (New Feature)
This feature takes your images and displays them in columns. Since Columns scale differently whether there is one photo, two photos, or three photos, play around and see what looks best for your Church’s page. Text descriptions descend vertically, so keep in mind if you have lengthy descriptions, it might be a good idea to trim it down.
Rows (New Feature)
Rows is a great layout option when you want to display information like a list. You’re also now able to add an Action Button to your images.
Text Editor (New Feature)
You can now use a WYSIWYG text editor with Image Block 2.0 to help with formatting. In most of our blocks a text editor is available, but in our old Image Block you previously had to add your own HTML to do things such as BOLD or italicized text. Now, there is the option to make these adjustments easily from right inside Image Block 2.0.
You are also now able to align your text differently to your layout.
So choosing Overlay Text, Rows as your layout and setting the Text Alignment to Center, you’ll get this for a single row.
3. How To Use These Creatively
You now will have control over how you layout your images regardless of shape. Below will be creative examples of our newest type and layout features so check that out if you’d like to see it in action.
Circle – Left/Right
This is a great option if you like Circle images and have wanted to display them like our previous Blocks option on our old Image Block. This choice is great for filling out a page and giving some great design to a potentially empty looking page. It’s perfect for ministries and showing photos of people at your Church on any page. You’re also able to match our Shift theme which has circle image headers and moving parts.
Circle – Rows
This is a great option if you like Circle images and have wanted to display them like a list. Could be great for classes, ministry partners, even displaying different children ministries such as AWANA, displaying age groups or even a step-by-step guide for what to expect on your Plan Your Visit page.
Landscape Images – Left / Right
This is a great option if you have a landscape image and don’t want to crop it. It is more compressed than squares so you can fit more info in a shorter area. A great example could be a landscape ministry graphic that you’d like to alternate like our previous “Blocks” option on our old Image Block. Keep in mind that long descriptions will push the next image down, so if you want consistent spacing, keep those descriptions short.
Text Overlay – Column
This is a great way to display ministries, perfect for locations, creating calls to action, and utilizing a more creative website design. I’ve selected the center-align option to give a nice centered odd-number feel and we use it a lot when building our websites.
Here is Text Overlay set to Column using only two photos. Since Column scales differently whether there is one photo, two photos, or three photos, it is a great option to change up the look of a page where you want to link photos with minimal text.
Lastly, here is Overlay Text set to Column using only one photo. An example of how to use these new features creatively could be to use more than one image block, use one photo on the first image block, two or three photos on the second image block, and alternate the number of images to give a mosaic-type look to your page.
No-Crop – Column
This is an awesome way to implement your PNG’s with transparent backgrounds without fear of them being cropped. Keep in mind as a rule of thumb that they should be the same size and display the best without transparent “padding”. In regular person terms: make sure you crop out any transparent space around your graphic.
Thanks for checking out this blog post, I hope you enjoy our newest The Church Co feature, and hope this helps you design the best church website possible.