In the not-so-distant past, there were (more or less) two ways to get visual assets such as photos and illustrations for use in one of the many Divi modules that support images, such as the Image module, the Blurb module, or any module that supports an image background: either use a free or paid stock photo service, or have someone (possibly yourself) take the photos or draw the illustrations. The main drawback of stock art is that it may not be unique to your site, since it is usually available for anyone to purchase. Having someone create custom images is costly. Both scenarios typically require a significant amount of work done outside of the Divi builder, distracting from the primary Divi content creation process.
But that’s so 2022. Imagine if you could insert your image-supporting Divi module of choice, and with a few clicks and a descriptive phrase generate custom images that avoid both the lack of uniqueness of stock photos and the cost of professionally created custom images. Well, imagine no more, because all this is now possible thanks to generative artificial intelligence (AI) and our free AI Image Lab plugin!
Before we dive in, if you haven’t installed AI Image Lab on your site and would like to follow along with this tutorial, see the Getting Set Up section in my blog post from last month for instructions that apply for Divi users as well.
Let’s say you’re creating a Divi-based website for an all-season ski resort. You want to include an area on the homepage that describes the different activities that are available in the summer and winter. In Divi’s visual builder, you first create a two-column row and insert a Blurb module into each column with some text copy. Now you need some photos to make the section pop! In the Content tab of the first blurb module’s settings, open the Image & Icon toggle and click the placeholder image. Selecting the Generate Image with AI tab in the image selection dialog opens the AI Image Lab interface:
Since the first Blurb module describes the winter activities at our resort, let’s enter the one-word prompt “snowboarding” and click the Add button. The default image style is Photo so we should get photo-like rendering without changing any further settings. Click Generate Images to start the image generation process.
Sometimes it takes a few tries to get a good image, especially with subject matter that is more difficult for the AI to generate, such as people. Let’s choose this image from the second batch of six images by clicking the Get this Image button:
The image is automatically downloaded into the WordPress media library and is selected in the list of images, so all you need to do now is click the Upload an Image button to select the image for use in the Blurb module. Then you can repeat the process for the summer Blurb module. This time let’s use the prompt “mountain biking” which yields the following image in the first batch; it’s pretty close to what you’re looking for, but the face obviously suffers from AI’s difficulty with rendering human faces:
Here’s where AI Image Lab’s image editor can come to the rescue. Click “Edit Image” to load the generated image into the image editor, which allows you to select regions of the image to regenerate:
With the prompt still set to “mountain biking”, you get six new images based on the previous image, with the selected area re-generated. Let’s choose this image for the second blurb:
Just like that, your blurbs are roughed in and ready for some prettying up in the Blurb module’s Design settings!
The above example demonstrates the power of AI Image Lab even when using default settings and one or two word text prompts. Increasing the descriptiveness of your prompts and using multiple prompt phrases with weighting set can dial in the output images to more closely match what you are looking for. There are also dozens of additional options that you can select to customize the end result, such as the Style options shown below. All of these AI image generation options are available without leaving the Divi visual builder, allowing you to create corresponding images seamlessly while drafting the text copy and layout elements of your site’s pages.
There are also some parameters you can set that affect the output image, including aspect ratio (so we could opt for landscape oriented images for our Blurbs in the above example, if that fits better with our page layout).
The image editor, which I touched on in the example scenario above, is also a powerful tool that can be used both to tweak output images from AI Image Lab as well as to modify or enhance existing images from your WordPress media library (once again, the AI image editing functionality is available without leaving the Divi builder!).
AI Image Lab integrates directly into the image selection dialog in WordPress, so it should work with any core Divi module that supports image selection, as well as most third-party Divi modules. Other page builders are supported as well, and you can also use the AI to generate and edit images on the Media page in the WordPress admin.
Despite its amazingly rapid advancement within the past year, AI image generation is still a fairly young technology and it has some notable weaknesses. For example, people and particularly faces often appear disfigured or disproportionate. Part of obtaining great results from AI Image Lab may involve running multiple batches of images until a suitable image is found; each batch is randomized so you should see different images every time without changing any of your input parameters. The image editor is also a useful way to correct deficiencies in an otherwise satisfactory image.
Are you ready to add the power and convenience of AI generated images to the Divi builder on your site? Download the AI Image Lab plugin (or just search for AI Image Lab in your WordPress admin under Plugins > Add New), connect it to your free WP Zone account, and start generating your own images with our unlimited free beta (no limit on the number of sites you can connect to your account, and only reasonable limits on image generation to help ensure service availability for all users). You can also check out this blog post for help getting set up, and this blog post for more information on the AI image editor. What are you waiting for?
Thanks for the article. Your introduction to this innovative feature in the Divi Builder is truly exciting. The ability to generate photos and artwork using AI within the builder opens up a whole new realm of possibilities for designers and developers. This free AI tool will undoubtedly save time and provide creative options for enhancing web design projects. Thank you for sharing this fantastic resource and empowering us to bring our designs to life with AI-generated visuals in the Divi Builder!