Plugin Spotlight: Bucket for Divi

Bucket for Divi is a plugin that adds a new module for the Divi Builder that’s a combination of two Divi modules: Image and Call to Action. It displays everything both modules can, but the combination of the two adds a unique design element that creates the ability to display content on hover and make it clickable. It can display a background image or a background color.

In this article, I’m taking a look at Bucket for Divi version 1.5. Images were taken from Unsplash.com or from pre-made layouts, which were taken from Divi Cloud.

Bucket for Divi Module

Bucket for Divi adds a new module to the Divi Builder called Bucket.

The Content tab includes settings for Text (with title and content), Link (with URL and Open options), Image, Background, and Admin Label. The Design tab includes the standard options but adds a sizing feature where you can enter the height in pixels. The Advanced tab includes all of the standard CSS fields.

For comparison:

  • The Image module includes the image, link, and background features.
  • The Call to Action module includes the text, link, and background features.

The only features the Bucket module doesn’t include between the two modules is the option to open the image in a lightbox and the image filters. Other than that it’s a perfect blending of the two modules.

Bucket for Divi Examples

Just to see what this module can do, I created two modules with the same content (so I can show one on hover next to one without hover), added a title, text, and an image.

These use the default settings. The image on the left shows the title. My mouse is hovering over the image on the right, which shows the text that I wrote in the content area. The module automatically zooms on hover, which you can see in the image on the right.

I can already see a lot of possibilities here for portfolios, links to pages on the landing or homepage, galleries, product links, etc. Let’s build a few of those and see what it can do (although, instead of building the layouts myself I’m going to save some time and use Divi Cloud).

Bucket for Divi Photography Portfolio

This one uses the Photography 2 layout. I’ve replaced the text modules with Bucket modules in order to create links to photo albums.

The result is clean and fits perfectly within the design. These are dark photos and blend well with the dark background which looks great with nighttime photography.

Bucket for Divi Real Estate Layout

In the Real Estate 3 layout one I replaced the home image modules with Bucket modules.

It fits nicely with the layout. I’ve made some color changes to the fonts but that’s the only change I’ve made. I’m hovering over the top image.

This time I replaced the blurb modules with Bucket modules. I removed the CSS and made the text light.

The Bucket modules work great over the video background in this layout. It’s a much different look than what you’d get with blurbs. I’ve kept the row’s background for each column and made the Bucket module’s header text match the color of the buttons.

Bucket for Divi Product Page Link

This one uses the Health Store Woo layout. For comparison, I wanted to show the original, which used image and text separately. The header text uses CSS to bring in a specific font family.

The original image and text modules look excellent. Let’s see what the Bucket module can do.

I replaced the image and two text modules (one for the header and one for the body text) on each side with Bucket modules, replacing 6 total with 2. I also added the CSS to the Advanced tab to bring in the same font family. Since I’m placing text over an image I’m using a shadow effect.

The result is a smaller element with an interactive image. This creates an elegant look but the body text isn’t immediately available.

The body text is still there but now it displays on hover. Since you can make the images clickable you can have it take the reader to the product page.

Bucket for Divi Services

This is the Services section from the Coach 1 layout. The original section uses images with text under it for the title and body, and a button for the CTA. I’ll keep the text in place, but add the CTA to the image with a link.

I’ve replaced the image and button modules with a single bucket module. It looks practically identical to the original, but now instead of a button, the image is clickable. Of course, we could move the header and body text to the image if we wanted to.

Bucket for Divi Portfolio

This example uses the portfolio section from the Agency 1 layout. The layout uses two images: the first one is tall. The second actually has two images side by side over a single image, creating a multi-column layout.

Here’s a look at the original. It has one image in one module and three images in the other. I will replace each image with Bucket modules and remove the button. My layout will be similar, but different.

Here’s my version using the Bucket module. I used five modules with images of different sizes to create a multi-column layout.

Here’s the design using the five Bucket modules. I like this alternating design. You could control the heights with the setting in the Design tab if you wanted to use images of different sizes but wanted them to appear the same.

Rather than using a button I’ve added the link to each image. Now the button can take the reader to each project rather than a portfolio page. Of course, we could leave the button if we want.

Using Color Backgrounds

You can use color rather than images if you prefer. In order to get the blocks of color to be the size you want, you have to define the bucket height in the Design tab.

This is the same layout as the one above but I’ve removed the images and placed color with the backgrounds. Within the text area, I’ve placed my body text and an image. This text and image only shows on hover. In the image above I’m hovering over the white background.

You can also use background effects such as gradients and overlays. These have color backgrounds set to a height of 400. I’m hovering over the one on the far right to reveal the image. The one in the middle is using an overlay with a gradient. With the backgrounds and overlays, you can create some interesting hover effects.

Using Bucket for Divi with Extra

Bucket for Divi works great with Extra. Here’s the previous example with my mouse hovering over the middle image.

Ending Thoughts

I found Bucket for Divi a fun plugin to use. There are some text and image zoom animations planned for future updates, which will expand the design capabilities. It doesn’t include the filters for the image module, but of course, at this price, I wouldn’t expect a lot of extra features. The very fact of combining the two modules is well worth this price.

It’s simple to use and if you know how to use Divi then you already have to skills to use this plugin. If you’re interested in a module that combines the functionality of the Divi image and call to action modules, Bucket for Divi might be the plugin you want.

Your turn. Have you tried Bucket for Divi? Let us know what you think about it in the comments below.

A little about the author, Randy A Brown

Randy is a freelance WordPress and eCommerce writer from east TN. If he's not reading or writing, then he's probably picking out tunes on his Strat.

1 Comment

  1. janthielemann

    A lot has changed in Divi since the last update of Bucket for Divi. I’ll have a look at the image filter options and implement them in Bucket. 🙂

Submit a Comment

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

External links on this website may be affiliate links that could result in us receiving compensation (payment) when you purchase a product or service from that link. For example, we may receive pay per click revenue or commission on sales of products. This helps us to pay the bills and deliver great content for you to enjoy when you are browsing these web pages. You do not pay any extra fees for these items. Please be aware that you will need an amount of experience in WordPress to take advantage of our themes and plugins. Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads. We do not offer refunds under any circumstances. If you feel that there is an issue with a product please get in touch with the developer of the product through their contact details which can be found within the plugins Dashboard, themes and documents we sell on their behalf. Rudeness to our developers or support staff will not be tolerated and support may be refused. By purchasing a product from The Elegant Marketplace you are agreeing to these terms. We do not offer custom support queries, although suggestions will be accepted and acted upon if possible. We do hold data that allows us to connect with you for product updates when you purchase a product. This is not an email marketing list. Should you wish to sign up to our marketing list, please visit our homepage where you will see an optin - we send out around two emails a week to keep you informed of product updates, WordPress News and Developer advice. You may opt out of our marketing communications at anytime by using the unsubscribe facility found at the bottom of each email. (Amended. February 6th 2018)

Get the latest news!

Join our mailing list to receive the latest news and updates from our team.

Thanks, we appreciate your support

Pin It on Pinterest