Welcome to the future of writing! It’s no secret that writing quality content on your blog can help boost your SEO, increase your visibility in search results, and demonstrate your expertise. However, writing blog posts can be time-consuming and labor-intensive! By utilizing Divi AI, you can produce better content faster than ever.
Yes, you read that right – Divi AI can write captivating blog posts too! If you’ve ever wondered how this revolutionary technology works and how it can assist you in crafting unique and engaging articles, then prepare to have your mind blown. Join us as we demystify writing compelling blog posts with Divi AI and explore the endless possibilities it holds for creating extraordinary blog posts that will captivate your readers like never before.
In celebration of the launch of Divi AI, we are offering a 40% off discount for unlimited Divi AI! for one week. Now’s the time to lock in those savings forever!
What Divi AI Can Do: A Brief Recap
We’ve been sharing all week about the fantastic power of Divi AI, but in case you haven’t heard about it, here’s a quick recap.
Divi AI is a powerful new web design assistant available within the Divi Builder. Divi AI can write copy, revise copy, and generate unique images. Whereas writing blog posts from scratch can take days to create and edit, writing a blog post with Divi AI can help banish writer’s block and help you create high-converting blog posts from start to finish faster than ever before.
How to Access Divi AI
To access Divi AI, you’ll need the following environment setup:
The first step is to navigate to your WordPress dashboard and add a new post. Hover over “Posts” in the lefthand sidebar and click “Add New” to add a new post.
Give your blog post a title and click “Use Divi Builder.” This will reload your blog post on the front end so you can use the Divi Builder and Divi AI as you’re writing your blog post.
As your page reloads, you’ll see three options popup: Build from Scratch, Choose a Premade Layout, or Clone Existing Page. Select “Build From Scratch.”
Next, we need to add a row. Click on the green “+” button to load the row options.
Let’s add one full-width row by clicking on it.
Next, click the grey “+” icon to load the module library. Scroll to “Text” and click it to load the text module.
By default, Divi modules load with demo content. There are two ways to generate text content with Divi AI in the Text module: by clicking the blue button at the top or by clicking the Divi AI icon in the text editor area.
Let’s select the AI icon on the text editor to configure some settings before auto-generating text. Once clicked, select “Write With AI.”
Once clicked, the AI window appears with all the settings and configurations available for Divi AI generation.
First, we’ll set the Content Type to Blog Post.
In the What are you writing about? section is where you type in a prompt for the blog post you want to write.
You can also use Divi AI to generate a prompt for you based on the content on the page! To do so, click the Divi AI icon in the text area.
Here, let’s select the context in which Divi AI should write the blog post. Since we have the blog post title added to the page, let’s select “This Page Content” so that Divi AI writes a blog post on the topic of the blog post title.
To customize your AI-generated results further, click “Guide Me” to load more Divi AI options.
The first option is the tone of voice. Let’s select “informative.”
We can even tell Divi AI what keywords we want in the blog post. Let’s type in “social media strategies.”
Next, we can adjust the length of the content by selecting from several options.
We’ll set it to about five list items using the dropdowns in this section.
Lastly, Divi AI can write the blog post in any language you choose. By default, Divi AI writes in the language of the prompt.
Now that we’ve set our prompt click “Generate Text” to see the results!
On the next screen, you’ll see the results.
However, we’re not done yet! Divi AI can also help you refine, lengthen, and simplify the results until you have the blog post of your dreams.
Tips For Writing Divi AI-Generated Blog Posts
When writing blog posts with Divi AI, keep these tips in mind.
Edit and Revise the Results
Even though Divi’s AI generation is pretty powerful, it’s essential to edit and revise AI-generated content to avoid copyright issues or sound like you’re writing as a robot. Always do a final review and edit before hitting “publish” on your AI-generated blog posts!
Stay True to Your Tone of Voice
While writing with AI helps save you time by doing some of the heavy lifting when it comes to research and writing, it’s important to remember to stay true to your voice when writing content for your website visitors. AI can help generate ideas and provide outlines; however, you want to create content that resonates with your readers and doesn’t sound unnatural or artificial.
Use Divi AI to Generate Blog Images
Divi AI can also generate on-brand and unique images for your blog post—no more spending hours searching for the perfect image on stock photography websites. Now, you can create exactly what you want right with Divi AI! Learn how to generate Divi AI images here.
Write Compelling Blog Posts With Divi AI!
In addition to speeding up the blog writing process, Divi AI can also generate ideas you hadn’t thought of to include in your blog post and help you write compelling content that drives traffic to your website. Join today to access unlimited Divi AI generations!
Divi AI is the web design assistant you need! Not only does it help you work faster, it also helps provide multiple variations of the same design, making it easier to find your ideal outcome. If you’re signed up for Divi AI yet, take the opportunity to sign up today and enjoy the unlimited prompts you can enter! We hope you’ve enjoyed this tutorial, let us know if you have any questions in the comments and we’ll see you tomorrow for another Divi AI tutorial!
Get 40% Off Divi AI This Week!
For the next week, we are giving 40% off of Divi AI unlimited. Anyone who purchases Divi AI before the sale sends will save $115 per year and lock in those savings for LIFE! Plus, all of your team members can use Divi AI at no additional cost. Get the discount here 👇
An AI experience built into Divi is here to make life a bit easier for agencies and freelancers. Divi AI is a web design assistant speeding up website builds by directly bringing you a full generative AI experience in the editor. Its flexible feature set means you can use Divi AI in ways that may not have been considered. This article will show you creative Divi AI use cases that you’ll love adding to your workflow.
By the way, to celebrate the launch of Divi AI we are offering a 40% off introductory discount for one week. Now’s the time to lock in those savings forever!
What is Divi AI?
Divi AI is a powerful AI website builder and assistant designed explicitly for the Divi Theme. It is an AI assistant that uses multiple AI models to help write contextual website content and generate picture-perfect images.
Using the power of AI, Divi has developed a new way for web designers to generate ideas at a rate never experienced before. With Divi AI, you can harness the power of generative AI to create, adjust, and improve websites like never before.
No more tab-switching between disparate AI services to get what you need. Divi AI gives contextually rich AI outputs directly inside your preferred website development tool—Divi.
✨ Learn more about Divi AI’s current capabilities and future feature launches.
AI is expansive enough in what it can do. Plug that directly into your website creation and editing flow, and you have an unparalleled opportunity.
Here are a few lesser-known use cases for generative AI inside Divi. We’ll start with Divi AI’s translation capabilities.
1. Translate Pages Using AI
With Divi AI, you can harness the power of artificial intelligence to translate your website pages effortlessly. No more struggling with manual translation or relying on third-party services. Divi AI’s language capabilities make it a perfect tool for creating multilingual websites.
To test how translation might serve your business, duplicate your most important page. Give the duplicate page a URL structure specific to that language—in our case, we are doing “/es/services/rebranding” to translate a rebranding service page from English into Spanish. Combining a translation plugin and Divi AI will make it easier to translate a whole website and keep a clean site/URL structure.
Now that we have a page to translate, we will start with the page title and excerpt. Click on page settings. In the Title field, find the Divi AI button. From there, select “Translate” and then choose your language.
Divi AI will take a couple of seconds to translate your content. Click “Use This Text” to swap out the English text for the newly translated text.
The steps will be the same for translating the rest of the page. Select each module, click the Divi AI icon, “Translate,” then continue selecting the same language.
This feature opens up endless possibilities for businesses looking to expand their reach and cater to a global audience.
While translating with any AI tool is fantastic, we still recommend using humans to edit translated content. The internet and its users deserve access to quality content. Check your pages and make sure they were translated well. Divi AI makes this process much quicker to deliver a multilingual experience at scale.
2. Change the Style of Existing Images with AI
With Divi AI, you can upgrade your site’s visuals in a new and easier way. Utilizing the power of artificial intelligence, you can now update and enhance images that are already on your site while bypassing graphic design software. Generate alternate versions of any image by adjusting it directly in the Divi builder.
Start by selecting an existing image inside a module. Select “Improve with AI” or choose the quick actions to “Reimagine” or “Change Style” to reinvent the image with simplified parameters.
Using “Improve with AI,” you can control all the variables that go into editing your image. Choose an image style, image alteration description, reference image (it is preloaded), and the reference image influence percentage. Once you’ve got something you think will work, click “Generate.”
Divi AI will work on the image for a few seconds, generating four image options based on your prompt and seed/reference image. See something that you like? Select any generated image and click “Use This Image” to load it into your Divi module. If you like the direction Divi AI is taking but want more options, select an image and use the “Generate More Like This One” button to generate four more options.
In our example, we created used the existing image plus a simple prompt to get something that was closer to what we wanted. In this case, it’s a similar image with different colors to match the other image in the section a little better.
Whether you need to optimize existing product images or retouch eye-catching visuals for your pages and posts, Divi AI’s image editing capabilities make it easier than ever to get what you want.
3. Use Divi AI for Writer’s Block
Divi AI is contextually aware of every connected site’s general information and the current page’s content. This awareness allows it to create content without using typed-out prompts.
If you have a page that’s short on content and are unsure what to do next, use Divi AI for suggestions.
All you have to do is add a module to your page (even if you don’t have a complete idea for it yet). In this case, we added a “CTA Module” that has room for a title, body, and button text. Clicking “Auto Generate Text With AI” will get the gears turning where Divi AI will consider the available context to create content in the module.
Divi AI will show you the title, button, and body text it came up with. If you like what it came up with, click “Use This Text,” or use the retry/refine options to get closer to your new direction. Without any extra input, Divi AI can come up with something for you to consider.
Once you have something close enough, using the text lets you edit the text yourself in the module’s text settings.
Divi AI’s auto text generation will help you brainstorm even when you think you’ve hit a wall.
4. Create Unique AI Content with Advanced Editing Quick Actions
Sometimes we make mistakes in our writing. Maybe we’re writing in our second language, hurriedly publishing an important update, or have old, bad habits (like me not being able to spell “ambulance” without using spell check).
For just these reasons, the next creative Divi AI use case is for AI text correction and editing. Open any Divi module that has existing text, click the AI icon, and select “Fix Spelling & Grammar.” This will run that content through the mind of a meticulous AI copy editor and fix all the major issues.
With a fine-toothed comb, Divi AI will correct any mishaps and mistypes in your content. Common and uncommon spelling and grammar mistakes alike are a thing of the past.
What’s more, Divi AI has dozens of quick editing presets that can keep the main idea of your content but transform it into something more than it is now.
Shorten, lengthen, rephrase, simplify, and paraphrase are all quick actions you can perform to your content with AI, along with changing tone. Having these quick actions just a click away, you can make multiple adjustments to your content to make it unique to your brand.
5. Generate Fast FAQ Content
AI is especially useful and quick at generating FAQs for web pages. Divi AI handles this with ease.
The simplest way to get this done is to add an accordion module. Use Divi AI to generate a good question in the first accordion element. Even better if you are pulling questions from an SEO tool like Semrush. Add your parameters and click “Generate Text.”
If you used Divi AI to come up with or rephrase a question, you can click “Use This Text” to insert the AI-generated question into the module.
Once the Accordion element has a title, you can move on to the body text to answer the question. Click the “AI” button and then select “Write & Replace” (or your preferred Divi AI writing shortcut). This will bring up the Divi AI modal.
You can see what it came up with in the Divi AI modal. If you like it as-is, then select “Use This Text.” No worries if it still needs work—you have unlimited AI word generation. You can use the “Refine Result” by adding a specific prompt or command. You can also use a quick action with the “Retry” option and select what you want Divi AI to do to the text by using the drop-down.
This is a fast way to create FAQs which are so important for modern SEO. Divi AI can rapidly answer tons of questions for your customers and help them find what they need to know.
6. Create Perfectly Sized Images
Divi AI is full of surprises. Instead of restricting you to 512×512 images, you get full control of the aspect ratios of your generated images. This helps you generate images that aren’t too small to use or the wrong size (like a portrait-oriented image for a background).
To generate a custom-sized image, hover over the image box and click the Divi AI icon. Then, select Generate Image.
Describe the image you want to create (also setting any image styles to use) and choose the aspect ratio of your image. Here’s our example.
As you can see, we created an image that fits perfectly into our premade layout. It is 800px by 1200px and will work perfectly in its intended spot.
Divi AI completely gets rid of creative mental blocks and puts all the generative power of AI at your fingertips. Traditional AI image generation sizes need not be a worry for you.
7. Enrich Any Content with Relevant Keywords
Adding keywords to your copy sometimes comes naturally, but sometimes it does not. When inspiration strikes, you just have to write it all down, no matter if what you are writing is perfectly optimized for SEO. That’s where Divi AI can come in and help you enrich previously written content with your ideal keywords.
To do this, open up a Divi module with some text. Click the “AI” icon and then select “Improve With AI.”
Choose your content type, a quick instruction for the keywords (not always necessary for simple rewriting), narrow the context to this single module and enter your keyword(s). After that, click “Generate Text” to see how Divi AI adds the keyword to your selected text.
In our case, the content was nearly identical to what it was before—with the pleasant difference of our keyword being tactfully added.
Adding keywords to content sections with Divi AI is one of the quickest ways to enrich your previously written content with the needed keywords. If you are using Divi AI to generate new content, adding the keywords up front makes sure all your written text is up to the task and ready to help you rank.
8. Upscale Small or Pixelated Images
Even though we’re in the Twenty-first century, it’s not uncommon to have images in our possession that are either tiny or ultra-low quality. It’s just a fact of life and makes what would be the “perfect photo” unusable. But AI is changing that.
There are plenty of AI image enhancers on the market, but none are directly connected to your WordPress media library, like Divi AI. Plus, as we’ve seen, Divi AI has plenty of other AI tricks up its sleeve, making it a one-stop shop for creative web design.
To upscale any image with Divi AI, open up any Divi module that supports an image or background image. Load your image into the image field, select the “AI” icon, and select “Upscale.”
And just like that, our example 150 by 150px image was upscaled into a 576 by 576px image that is much better suited to be used on our page.
Upscaling with Divi AI can make images 2 times or 4 times bigger than the original. This makes all those client photos a lot easier to work with. Best of all, you don’t even need a separate AI service for this. Divi AI, with one low cost, does this for you (and more) from directly in the page editor so you can stay on task, building websites.
Bonus Tip: Give Advanced AI to All Team Members & Websites in Your Account
Divi AI is one of the most generous AI services on the market. Not only is its AI output on par with the top services (for text and images), but your whole team can make use of its outstanding benefits.
Most leading all-in-one AI platforms charge per user, making it hard to use across a team. Either a company needs to invest heavily in the software or leave it up to individuals. But people using their own AI tools could bring about inconsistent results and create an unequal work product from one team member to the next. Divi AI allows agencies and freelancers to give all their contractors and employees access to the best technology.
Divi AI Beats Jasper and Writesonic on Cost Effectiveness
Why would you spend $250/mo to give a team of five the ability to work with generative AI when you could add Divi AI to your whole Divi Teams account for an additional $24/mo? The best part? If your team gets bigger, your price doesn’t!
For the next week, we are offering 40% off Divi AI. Anyone who purchases Divi AI before the sale sends will save $115 per year and lock in those savings for life! Plus, all of your team members can use Divi AI at no additional cost. Get the discount here 👇
Divi AI is a powerful new feature right within the Divi Builder that helps create fresh content for your website in seconds. From generating professional copywriting to one-of-a-kind images, this new tool will speed up your design process and give you the extra boost of productivity you’ve been looking for.
In this post, we’re going to explore the ways you can transform any premade Divi Layout using Divi AI. Let’s get started!
What is Divi AI?
Divi AI is a powerful and intuitive web design assistant that understands Divi. It can write content, revise content, and generate unique images for your website. You can create custom content from prompts or even ask Divi AI to generate content based on the context of the page, section, or module you’re working in.
What’s Possible with Divi AI
The options are endless with Divi AI! For a complete look at all that Divi AI can do, check out this list of features.
Auto-Generate Contextual Content
Not sure what to design next? Use Divi AI to generate context-specific website copy and images. Divi AI analyzes existing content and website details to recommend the content you should add next.
Create Unique Images
Divi AI also has the power to create unique images for your page design. You can generate images with prompts or by having Divi AI learn from your page and the context around your image to generate something highly relevant with just the click of a button.
Create Fresh Copywriting
Bid farewell to writer’s block! Whenever you face uncertainty about your next writing topic, turn to Divi AI. It evaluates your page’s content and provides fresh ideas to keep your creativity flowing.
Edit and Revise Existing Copywriting
Divi AI is like having your own Copy Editor on call, 24/7. Improve your existing content by using Divi AI to adjust the tone, modify the length, improve clarity, or add creativity to your copy. Navigate through variations, experiment with styles, and tailor your content to engage your audience.
Now it’s time to get into the fun stuff! Today we’re going to transform a premade Divi layout using Divi AI. First, we’ll need to select our layout.
Add a Divi Layout to Your Page
A great way to use the power of Divi AI is by transforming premade layout packs. Every week the designers here at Elegant Themes release custom-designed pre-made layout packs that are completely free to use. Layout packs are a great way to get started designing your website, and Divi AI can help you quickly customize the content so that it’s unique to you or your business. For more, here is a step-by-step tutorial on how to add a premade layout to your page.
For our purposes, we’ll be using the Coaching Layout Pack. To add a premade layout to your page, expand the Divi toolbar and click the purple + icon to load the Divi Library.
Type “coaching” into the search bar and select the Services page layout.
Select “Use This Layout” to load it to your page.
Now that we have a premade layout added to our page let’s explore the ways you can transform it using Divi AI!
How to Add Copy to Your Divi Layouts with Divi AI
Divi premade layout packs come with placeholder content. Using Divi AI, you can add text modules and ask Divi AI to generate fresh copywriting based on the context of the content on the rest of your page. Since layout packs are each based on a specific theme, Divi AI will then generate unique copy based on that theme’s page content.
How to Generate New Copy Automatically
Let’s generate some short descriptions for the services section of this page. We’ll start with the One on One service.
Access the module settings by hovering over the module and clicking the gear icon.
To auto-generate text, click the “Auto Generate Text With AI” blue button. Because this is a Blurb module, Divi AI will also automatically generate an image to go with it in case you decide to use an image instead of an icon.
Next, the AI-generated results will pop up. Since we’re editing a blurb module, Divi AI will generate a piece of content for each section in the blurb module. If you like the generated text, then click the blue “Use This Text” button. Or, you can choose to modify the text further by clicking the dropdown and selecting the action you want AI to take. You can also refine your result by writing further instructions in the Refine Result input field.
And here is the final result! Divi AI was able to automatically generate contextual content based on the rest of the page content. Pretty neat, right?!
How to Create New Copy Using the Divi AI Text Generator
There’s also another way to generate copy with Divi AI: by providing prompts. Let’s try this method with the Couple Therapy blurb module.
Open up the module settings and hover over the body text area. You’ll see an AI icon popup in the textarea box.
Next, click “Write With AI”.
Up will pop the prompt window where you can select the Content Type, write your prompt, tell Divi AI what context to consider, and further customization options like the tone of voice, keywords, content length, and language.
Content Type
Tell Divi AI what type of content you want it to write: Paragraph, Title, Button, Blog Post, or Social Media Post. For our example, we’ll select Paragraph.
What are you writing about?
Here you can type in the topic you are writing about and what you want Divi AI to create content for.
Added Context
Tell Divi AI what context (or no context) it should write in: This Page Content, This Section Content, This Module Content, No Context. By specifying what content you want Divi to reference, you’ll have more control over your contextual content. Let’s select “This Page Content.”
Tone of Voice
Choose the tone of voice you want Divi AI to use. Options include, Creative, Informative or Funny.
Must Use Keywords
For SEO purposes, here you can tell Divi AI what keywords you want to be included in the text.
Content Length
Here you can tell Divi AI how long or short you want the content to be.
Language
By default, Divi AI will write content in the same language as the prompt it’s given. However, if you’d like Divi AI to write in another language, you can select one from the dropdown here.
Click “Generate Text”
Once your settings are configured how you like, click the “Generate Text” button at the bottom to put Divi AI to work!
If you are happy with the generated text, you can click the “Use This Text” button to insert the text into the module. However, you can further customize the AI-generated text in the “Modify With AI” section. You shorten or length the text, check the spelling and grammar, rewrite it for experts or beginners, and so much more. You can also give more direction to the AI generator by typing in the “Refine Result” section and then clicking the “Regenerate” button.
In addition to all these options for customizing and refining the AI-generated text, you can go back to your initial prompt by clicking the white back arrow at the top left of the window that says “Content Results”. There, you can refine your settings and generate new text.
Once you generate another result, you’ll see an option to toggle between those results right underneath the AI-generated text. That way, you can compare and contrast your results and select the text you like the best and assemble it together for your own unique paragraph.
Rewrite and Revise Copy
Rewriting and revising copy with Divi AI is very similar. To do so, we’ll navigate to a text module that has existing content. Open up the module’s settings to edit the content.
There are two ways you can access the AI options. First, by clicking the blue “Auto Generate Text With AI” blue button at the top, or second, by clicking the AI icon within the text editor.
If you’d like Divi AI to auto-generate revised text, then click the blue button. You can further customize the results in the Content Results window using the options and settings explained above.
To use the Improve With AI feature, copy the existing text, click the Divi AI icon, and then select “Improve With AI.”
Paste the text into the editor, configure the style and settings you want to use, and then click “Generate Text.”
Generate Custom Images
No more spending hours on stock image sites to find the perfect image for your design. With Divi AI, you can generate custom images unique to your website! Here’s how you can generate a custom image using Divi AI and the Image Module.
First, open up the image module settings and hover over the image to see the AI icon. Click it to load the AI options: Generate With AI, Improve With AI, or choose from Quick Options like Generate & Replace, Reimagine, or Change Style. Let’s select “Generate With AI.”
The first option is to select the style of image you want to generate.
There are a variety of styles to choose from. You can create an image that is photographic, like a digital painting, concept art, a vector graphic, 3D renders, drawings, abstract art, comic book, watercolor, painting, anime, or cartoon.
Next, write a descriptive prompt of the image you want to generate. You can even use AI to help generate a prompt by clicking the AI Icon in the text area.
You can even upload a reference image to provide more context; however, this is optional. If you do use a reference photo, you can set the influence of the image by percentage. The less influence you assign the photo, the more influence your written prompt will have.
If you don’t upload a reference photo, you’ll have the option to choose the aspect ratio of the generated image: Square, Landscape, Portrait, or Custom Size.
You can even set the size (width and height) of the image.
Once the fields are filled out, click the “Generate Image” button and let the AI magic do its work!
On the next screen, you’ll see four generated images. If there is an image you like and want to use in your page design, click on the image and select “Use This Image.” You can also save the image to your media library by hovering over the image and clicking the downward arrow icon in the top right corner of the image. That way, you can save alternate image versions for future use!
If you’d like to continue refining your images, you can do so in several ways. First, you can select a generated image and ask AI to generate more images like that one.
In the Modify Selected Image area, you can even change the image type to another format, like a painting or vector image.
If you want to refine your prompt, you can do so in the New Description area. Type in your new prompt and hit regenerate to generate new images.
Once you have the image you want, click the “Use This Image” button to insert the image into your content!
Pro Tip: How to Create New Images that Match the Style of Your Premade Layout
If you like the current style and feel of your current layout, adding new images might throw off the entire design. With Divi AI, you can replace the existing images on your premade layout and keep the original style and feel of the original image.
For example, here is a screenshot of our Bake Shop premade layout.
Let’s say we wanted to use this layout to create a website for a coffee shop. We could replace these pretzel images with coffee-related images that have a similar style and color.
To do this, simply select and use one of the existing images as a reference image. Then add a short description, like “cup of coffee,” and bring the reference image influence dial down to 20%. Then generate a new image.
Repeat the process for the rest of the images on the page. Adjust the copy using AI as needed. And you have a new website with a similar style as the premade layout.
Final Thoughts
Divi AI is a powerful new tool for enhancing your efficiency and creativity while designing Divi websites. The best part is the more you use it, the better it gets to know your website and produces even more amazing results. Stay tuned for more Divi AI how-to’s this week, as we’re just getting started showing you how to harness the power of Divi AI!
Get 40% Off Divi AI During Our Introductory Sale!
For the next week, we are offering 40% off Divi AI. Anyone who purchases Divi AI before the sale sends will save $115 per year and lock in those savings for life! Plus, all of your team members can use Divi AI at no additional cost. Get the discount here 👇
With artificial intelligence taking the world by storm, we thought it was time to bring that technology to Divi users. Whether you want to generate images or text, Divi AI is the perfect companion to build your new website. In this post, we’ll explain what Divi AI is and what it can be used for and provide an in-depth tutorial on how to improve copy with Divi AI.
By the way, to celebrate the launch of Divi AI we are offering a 40% off introductory discount for one week. Now’s the time to lock in those savings forever!
What is Divi AI?
Divi AI is a web-based design assistant built specifically for Divi. It can write, improve existing content, and generate images inside Divi’s Visual Builder. Since it’s packaged within Divi, it understands each Divi module, making generating text and images for your Divi website a breeze. With Divi AI, you’ll be empowered to write beautiful content and create gorgeous images like a professional.
The exciting thing about Divi AI is all of the features it encompasses. Unlike other AI software that typically provide one type of generative AI, Divi can do quite a few things.
Auto-Generate Content
Divi’s powerful AI algorithm can generate text, images, or entire modules with just one click. It works by analyzing the existing content on your website, then making recommendations based on what’s already there. Divi AI learns from your website, allowing it to provide high-quality and relevant, on-brand results.
Generate Images
Another incredible aspect of Divi AI is its ability to generate beautiful AI images with one click. Based on Stable Diffusion, Divi’s text-to-image technology scans the content and images on your site and generates images based on it. That said, you can also create any image you like with a simple text prompt and a button click.
Refine Existing Images
Divi AI also can enhance existing images on your sites. Simply supply a reference image and watch the magic unfold. You can vary the level of enhancement by specifying the weight of the original image, much like other text-to-image software, but it takes that incredible technology a step further. For example, you can completely change the image’s subject while retaining its composition, style, and coloring.
AI-Suggested Content
As writers, we know that writer’s block is a very real issue. Thanks to Divi AI, you’ll never have to worry about that. As previously mentioned, Divi AI analyzes your content, then makes suggestions to improve it. This ensures your content will be fresh, creative, and on-brand. With Divi AI, you can refine your content, expand it, shorten it, change the tone, and more.
How To Use Divi AI to Improve Your Copy
To demonstrate how powerful Divi AI is, we will show you all that Divi can do to improve your website’s copy. The process is simple, so building a new website or modifying an existing one is a snap.
Step 1: Enable Visual Builder
The best way to utilize Divi’s powerful AI features is through Divi’s no-code Visual Builder. This way, you can work on your page’s design in real time. To make things easier, we’re going to use the Horse Riding Layout Pack for Divi to improve copy with Divi AI. That said, you can follow along with your own content.
Start by clicking the Enable Visual Builder button at the top middle of your screen.
If you’re new to Divi, we offer an extensive yet easy-to-follow tutorial that will get you up to speed with Divi’s Visual Builder.
Step 2: Edit Existing Text Module
With the Visual Builder active, scroll down to the text module in the hero section that contains lorem ipsum text. Hover over the module with your mouse until the settings appear.
Alternatively, you can right-click anywhere on the page to bring up the layers view by clicking go to layer. It easily allows you to select sections, rows, or modules to edit them.
To edit a text module, click the grey settings icon while hovering over it.
Step 3: Auto Generating Text with Divi AI
With your text module active, you’ll notice a new button: Auto Generate Text with AI. Go ahead and click that to generate some new copy for your text module.
Divi AI will generate new copy for the text module based on your layout. In our case, Divi recognized that our page is related to horses and correctly generated copy to support the layout:
Once the copy is generated, you can choose to use the text by clicking the corresponding button in the Visual Builder.
Divi AI will replace the placeholder text with the newly generated copy.
Step 4: Improving Copy with Divi AI
With new text generated, you can take steps to improve it. With your text module still active, hover inside the text area and click the Divi AI Options icon to reveal the text options available.
Next, click Improve with AI.
A new dialog box will appear with a few settings to be aware of:
Content type: Choose between a paragraph, title, button, blog post, or social media post.
What are you writing about: Give Divi AI information about the type of content you want to generate.
Added Context: Choose from this page content, this section content, this module content, or no context.
Guide me: This dropdown allows you to add more specifics, such as tone of voice, keywords, and content length, and lets you choose from over 130 languages.
Generate text: Press to improve the content in your text module.
We’ll add the following settings:
Content Settings: paragraph
What are you writing about: Explain the Divi Equestrian Center
Added context: This page content
Tone of Voice: Informative
Must use Keywords: equestrian center
Content length: about 150 words
Language: language of website
With these settings in place, click the Generate Text button.
Divi AI will work its magic and create a new paragraph based on those settings. Once text generation is complete, you can view both the original and newly generated text. If you are happy with the results, click the use this text button (1). However, if you want to run the prompt again, click the retry button (2). If you like the new copy but want to make improvements to it, click the improve with AI dropdown menu (3). This setting allows you to:
make it better
rephrase
lengthen
shorten
simplify
paraphrase
fix spelling and grammar
rewrite for experts or beginners
Translate to one of more than 130 languages
change the tone
Make it more detailed, descriptive, engaging, actionable, or generic
Furthermore, you can add a text prompt to refine your results (4). Once all of your chosen settings are in place, click the regenerate button (5) to refine your text.
Divi AI Before and After Results
Now that you’re comfortable with the settings used to improve copy with Divi AI, we will show you a few real-world examples of Divi AI in action using various prompts.
Divi AI Example 1: Paragraphs
Before:
Welcome to the Equestrian Center! Whether you’re a beginner or an experienced rider, our full-service center offers everything you need for an unforgettable horse riding experience. From horse stalls to horse training, we have it all. Our team of expert coaches is dedicated to providing pure elegance and perfect training, making riding accessible to all. Join our club and learn more about our private lessons, beginner to advanced programs, and coach training. Book your spot today and embark on an amazing equestrian journey with us!
Prompt:
Content type: paragraph
Writing about: Explain the equestrian center
Added content: this page content
Tone of voice: creative
Must use keywords: equestrian center
Content length: exactly 150 words
Language: language of prompt
Improved copy using Divi AI:
Welcome to the Equestrian Center. Our equestrian center is dedicated to providing a truly exceptional horse riding experience for riders of all levels. Whether you’re a beginner or an experienced rider, we have everything you need to embark on an unforgettable equestrian journey. From our state-of-the-art horse stalls to our expert horse training programs, we offer a full range of services to cater to your every need. Our talented and experienced coaches are committed to delivering pure elegance and perfect training, ensuring that riding is accessible and enjoyable for all. Join our club today to discover our private lessons, beginner to advanced programs, and coach training opportunities. Book your spot now and get ready to experience the thrill of horse riding with us.
Refined results:
Welcome to our equestrian center, where your passion for horse riding meets the highest standards of excellence. Immerse yourself in the enchanting world of equestrian sports, guided by our skilled coaches amidst top-notch facilities. Our utmost commitment lies in nurturing your love for horse riding and creating unforgettable experiences. From our state-of-the-art horse stalls to comprehensive training programs, every element is tailored to ensure your riding journey surpasses all expectations. Explore the joy of private lessons, beginner to advanced programs, and coach training opportunities. Join our esteemed club today and embark on an extraordinary adventure at the equestrian center. Secure your spot now and unlock the thrilling experience of horse riding.
Divi AI Example 2: Headlines
Before:
Pure Elegance & Perfect Training
Prompt:
Content type: title
What are you writing about horse training
Added context: this section content
Tone of voice: creative
Must use keywords: horse training
Content length: exactly 10 words
Language: language of prompt
Improved copy using Divi AI:
Unleash Your Potential: Master the Art of Horse Training!
Divi AI is the Perfect Writing Assistant
If you’re a Divi user, you already know how simple it is to create a gorgeous website in just a few clicks. Now, thanks to the power of Divi AI, you can generate text and images to easily complete your site. Whether you’re a beginner or a seasoned professional, improving copy with Divi AI is a breeze. You can generate, revise, and improve your copy based on a simple text prompt in just a few clicks.
If you’re new to Divi, there’s never been a better time to join. For a mere $89 per year for an Elegant Themes license, you’ll have access to the most robust WordPress website-building experience on the market. For an additional $24 per month, you can generate unlimited text and images on every Divi website you own, thanks to Divi AI.
How do you plan to incorporate Divi AI into your workflow? Let us know by sounding off in the comments below.
Get 40% Off Divi AI During Our Introductory Sale!
For the next week, we are offering 40% off Divi AI. Anyone who purchases Divi AI before the sale sends will save $115 per year and lock in those savings for life! Plus, all of your team members can use Divi AI at no additional cost. Get the discount here 👇
Unless you’ve been living under a rock, you’ve heard that artificial intelligence is taking the creative world by storm. Here at Elegant Themes, we’ve been working hard to bring you the latest advancements with everything Divi, which includes our exciting new generative AI product, Divi AI. In this post, we’ll explain what it is and provide some tips to help you learn the basics of Divi AI image prompting.
By the way, to celebrate the launch of Divi AI we are offering a 40% off introductory discount for one week. Now’s the time to lock in those savings forever!
What is Divi AI?
Think of Divi AI as your personal creative assistant. With it, you can generate text and images from a text prompt right inside Divi’s no-code Visual Builder. Unlike other generative AI software, Divi AI is built specifically for Divi. It’s been trained to understand each of Divi’s design elements and can understand the context of your website. It identifies the images and text content on your page and makes relevant suggestions for text and images. Divi AI is based on Stable Diffusion and OpenAI’s ChatGPT, with enhancements by our professional developers. So, you can build a beautiful design with Divi, and now you can create content for it, too.
Divi AI Image Generation
One of the most impressive features of Divi AI is how easily you can generate images. There are several ways to create images, including refining and modifying existing images and automatic image generation. Let’s briefly walk through the steps to create an image with Divi AI. To make things easier, we’ll start with the Bake Shop Layout Pack for Divi, but you can follow along with the layout of your choice.
As previously mentioned, Divi AI works within the Visual Builder. Click the Enable Visual Builder button to get started.
To generate a new image, click on an existing image module, or add another one. To edit an image, hover over an image module and click the grey settings icon to edit it.
With the image module open, hover over the image until the AI icon appears.
Click on it, then select Generate with AI.
Divi AI Image Settings
You’ll need to familiarize yourself with a few settings to get the most out of Divi AI image generation. They are as follows:
Image style: Allows you to set a style for your image. Settings include photo, digital painting, concept art, vector graphic, 3D render, drawing, abstract art, comic book, watercolor, painting, anime, cartoon, or none.
Image description: Here, you can input a text prompt to create your image or allow Divi AI to create a prompt for you.
Reference image: If you’d like your image to be based on a particular look or style, you can upload a reference image here.
Aspect ratio: Choose from square (1:1), landscape (8:5), portrait (3:4), or add a custom size.
Size: Set a custom size for your image.
Generate: Creates a generated image with artificial intelligence.
Using a Reference Image
In addition to generating an image from scratch, you can use a reference image to steer Divi AI in the right direction. To do this, click the upload a reference image button.
This will open the WordPress media gallery so you can upload an image for Divi AI to analyze. Once uploaded, the image generation settings change slightly. You can still choose an image style and enter a prompt. Along with that, a new setting for reference image influence will appear. You can adjust the sliding scale from 0-100%, with higher values resulting in images closely related to the referenced image.
Using the image example from the photo above, we’ll add the following prompt: soft baked pretzel, set in a busy bakery shop display case. Set the image style to photo and the reference image influence to 50%. Here’s the result:
If you are satisfied with the results, click the image you prefer, then click the use this image button (1) to insert it into the image module. If you’d like to generate more results, click the generate more like this one button (2).
Improving an Existing Image with Divi AI
Another excellent feature of Divi AI image generation is the ability to improve on existing images. Most freelancers and web agency owners know the challenge of obtaining suitable client images. Thanks to Divi AI, there is no longer a need to worry about that. To improve an existing image, click inside the image module and hover over the AI icon like before. However, you’ll select the improve with AI option this time.
When the dialog box appears, you’ll notice that the current image is set as a reference image. You can choose your image style, add a description, and set the reference image influence.
Top Tips for Divi AI Image Prompting
Now that you understand the basics of image generation with Divi AI, let’s review some tips and best practices to improve your images through good prompts.
Form the Perfect Prompt
One thing to keep in mind is that the order matters. Words placed at the beginning of a prompt are weighed more heavily than ones used towards the end, so be sure to put your most important descriptors first. The best way to craft the perfect prompt is to follow this rule: Image style > description > details > composition.
Image Style: What type of artwork do you want to achieve? Is it a photograph, drawing, drawing, 3D render, etc.?
Description: State the subject, its attributes, environment, and scene. The more descriptive you are, the better the output.
Details: Think lighting, photography style, artist, etc.
Composition: Camera angle, resolution, etc.
For example, using the prompt a dog will produce good results but will likely be devoid of other elements in the photo. Alternatively, using the prompt golden retriever, sitting on a boat dock looking out at the water, mountain backdrop, blue sky, cinematic lighting, award-winning photography, full depth of field, 4k resolution gives Divi AI plenty of information to create a complete scene.
Choose an Art Style
One of the most basic steps for successfully creating images is to choose a style for your image. As previously mentioned, multiple styles allow you to create any image you want. We used the same prompt to demonstrate the different styles and only changed the image style. Here are the results:
Use a Reference Image
If you have an image in mind that needs to be corrected, try using a reference image to guide Divi AI. When using this feature, be sure to upload a high-quality image. Uploading small pixelated photos won’t work as well, often resulting in lower quality results. That said, remember that the larger the picture, the longer it takes to generate one with Divi AI. Try to keep your reference images under 200kb for the best results. Using large images on your web pages can slow them down, potentially hurting your site in the search engine ranking pages (SERPs).
Using this example, we took a reference image of dogs running on a beach. We left the image influence at its default setting of 30%, which resulted in the following image:
Specify an Aspect Ratio
By default, Divi AI will create images 512 x 512 pixels. However, additional aspect ratio settings exist for landscape, portrait, or custom dimensions. By providing an option for aspect ratios, Divi AI makes filling your web pages with images of any size easy. It allows you to create images with custom dimensions, which is perfect for hero image backgrounds, adding images into awkward spaces, and lets you avoid using photo editing software to crop them.
For the best results, it’s recommended to use 768×768 images instead of 512, which is the default. It helps avoid distorted faces. This is due to how Stable Diffusion works. Basically, if SD tries to render something complex at a small size, it gets distorted. If you make your images bigger, it helps.
Use Descriptive Words
Another tip is to use descriptive words, such as subject, characteristics, camera angles, lighting, and the surrounding environment. The trick with prompting is to give Divi AI enough information on the type of image you want without overwhelming it with too many words. Unlike blog posts or other content, generative AI doesn’t need you to write a book to create a gorgeous image. Be concise yet descriptive for the best results.
For example, we provided Divi AI with two different prompts for a pirate ship so you can see the difference a few descriptive words make:
To help you navigate using descriptive words with Divi AI, we’ve created a handy table that contains different words to consider using to boost Divi’s AI image generation output.
PHOTOS/CAMERA ANGLES
CONCEPT ART
DIGITAL PAINTING
LIGHTING DESCRIPTORS
headshot
warrior
hyper-realistic
sun light
low angle
cyborg
still-life
soft light
candid
cyber punk
textured
golden hour
photorealistic
villain
pastel colors
twilight
soft focus
movie concept art
bokeh
moon light
closeup
cinematic composition
brushstrokes
midday
sideview
Illustration style
visible brushstrokes
dusk
4k, 8k resolution
2D
note a famous artist (Picasso, Ansel Adams, etc)
glowing
full depth of field
expansive
Digital art style
sunset
shallow depth of field
cinema style
tranquil atmosphere
cinematic lighting
sharp focus
bioluminescence
detailed face
studio lighting
award winning photography
epic
intricate details
accent lighting
studio photography
moody, gloomy
unreal engine 5
volumetric fog
highly detailed
video game art
backlit
dramatic lighting
Be Specific
Some AI art generators, such as Midjourney, don’t require as many specifics as others. This isn’t the case with Divi AI. You can be as specific as you want. In fact, the more specifics you add, the better your image will be. Just remember to avoid being repetitive and follow the perfect prompt rule: Image style > description > details > composition.
Context (and Content) Matter
When using Divi AI to generate images, it’s important to remember one key aspect. It can be hard to get a subject that is out of place to assume a given style. For example, it’s hard to get a cat to be drawn in the style of a comic book because there aren’t really any cat comic books out there. On the other hand, two might fighting in space in the comic book style works quite well.
Similarly, the prompt a wooden hut in mystical fairy mushroom land works great when using Divi AI’s digital painting style.
Divi AI Image Prompt Examples
To demonstrate the power of Divi AI’s image generation, we’ve added some examples and their prompts.
Image 1 Prompt: Modern interior design, chalet, living room, wide windows with a view, mountains, wood floor, modern furniture. Image 2 Prompt: Rustic backyard, fire pit, wicker patio furniture, wood ceiling, large oak trees, 8k resolution.
Prompt: Female astronaut, wearing helmet and visor, Earth in the background, reflection, stars, sharp focus, full depth of field.
Image 1 Prompt: Bioluminescence, set at midnight on a beach, moonlight, blue glowing light. Image 2 Prompt: Realistic beach landscape, high tide, teal water, colorful pebbles on the sand, Canon EOS R6.
Prompt: watercolor painting of an owl sitting on a branch, mid-day lighting, wide angle.
Image 1 Prompt: Red fox in nature, National Geographic, highly detailed fur, hyper-realistic photography, cinematic lighting, full depth of field. Image 2 Prompt: 3D dog, sunglasses, thick black collar, in the style of Pixar, black background, 3D animated character.
Final Thoughts on Divi AI Image Generation
Experience the next level of image generation with Divi AI. Our powerful AI technology allows you to create stunning images in seconds. Divi AI has got you covered whether you want to enhance your existing photos or generate new ones. Already an Elegant Themes member? Unlock its full potential with Divi AI and enjoy unlimited text and image generation for $24 monthly. Not a member? No worries. Sign up to experience the most powerful WordPress theme on the market.
Which feature of Divi AI are you most excited about? Let us know by dropping a comment below.
Get 40% Off Divi AI During Our Introductory Sale!
For the next week, we are offering 40% off Divi AI. Anyone who purchases Divi AI before the sale sends will save $115 per year and lock in those savings for life! Plus, all of your team members can use Divi AI at no additional cost. Get the discount here 👇
Are you as excited about Divi AI as we are, but don’t exactly know how to get the best out of it? This tutorial will help you in the right direction. We’ll put Divi AI to the test and show you how you can build your homepage using Divi AI! We’re starting with a premade layout, to speed up the process, and then we’ll use Divi Text AI and Divi Image AI to tweak the layout to match our needs.
By the way, to celebrate the launch of Divi AI we are offering a 40% off introductory discount for one week. Now’s the time to lock in those savings forever!
Introducing Divi AI – Your Personal Web Design Assistant
Divi AI is your new personal web design assistant! It can write content and generate images for you right inside the builder, making it incredibly accessible and helpful. Divi AI understands the context of your website and the page you’re working on, which allows it to generate contextually-relevant content. Divi AI allows you to:
Auto-Generate Content with One Click — Divi analyzes your existing website content and makes suggestions on what content to add next!
Let Divi Learn From Your Website — You can provide Divi AI with your website’s content to improve the relevancy of the content output it gives!
Generate Image Automatically — With just one click, you can generate entire new images from scratch!
Refine & Modify Existing Images — You can also give Divi AI an image reference to refine it or completely change the style!
Now that you’ve gained an understanding of what you can expect from Divi AI, let’s start building our homepage! If you’re not yet signed up for Divi AI, you can use your Divi AI trial to experiment throughout this tutorial.
What You Need to Get Started
In this tutorial, we’ll specifically focus on building a homepage, but if you’re new to Divi, you’ll have to make sure the following things are in place:
Depending on your needs, you might go for either one of these options, but with more than 300 free layout packs available, chances are very high you’ll find something to your liking. Using a premade layout doesn’t mean you have to stick with that design entirely. Rather, it’s a great opportunity to save time while tweaking existing elements until you get to your desired outcome.
You can use Divi AI to create your page from scratch, or modify existing content. In this tutorial, we’ll pick the latter. We want to go from nothing to the end result as quickly as possible!
Start by going to the backend of your WordPress website. Once there, navigate to your pages, and create a new page.
Give your page a title and switch over to Divi’s Visual Builder.
Step 2: Upload a Layout to Your Page
As mentioned before, we’re going to create a new page using a premade layout, so click on Browse Layouts.
For this tutorial, I’ve picked out the homepage from the Coaching Layout Pack. Once you’ve selected the layout, click on the Upload This Layout button.
There is a lot of lorum ipsum text on the page, that we’ll replace. We’ll also create some new variations of the images used throughout this layout. All of this is made possible with Divi AI! Previously, you had to hire a copywriter and purchase stock images, but you can now use Divi AI to fulfill those needs.
Step 3: Generating Copy Using Divi AI
Now that we’ve uploaded the layout to our page, we can start focusing on the copy! We’ll use Divi Text AI to generate our copy, which makes it really easy to get your website up and running as quickly as possible. Let’s explore some of the features that come with Divi Text AI and how you can use them.
Rework Existing Copy or Create New Copy Altogether
There are two key ways to generate copy in Divi AI:
Reworking existing copy
Creating new copy
Depending on how much influence you want to have on the copy, you can pick either one of these options.
Understanding the Divi Text AI Interface
Divi Text AI is very straightforward. Let’s take a look at some things you can do with it.
Write with AI
If you want to write with Divi, you can choose to automatically generate copy. This option takes into account your website’s and page’s information.
You can also get more precise with Divi AI. If you hover over the content box, you’ll see a Divi AI icon appear. Click on this icon.
Continue by clicking on Write With AI.
Writing With AI allows you to choose the content type and gives you the option to select the context. If you click on the Guide Me option, you’ll see many more options appear.
You can tweak these options however you see fit.
If you don’t like the outcome, you can always click the Retry button to give it another shot!
Improve with AI
If you already have some copy on your page, and you’re simply looking to improve it, that’s an option as well! Divi Text AI provides you with quite some options to improve your copy:
Write & replace
Make it better
Rephrase
Lengthen
Shorten
Simplify
& More
H1 Title Prompt Example
Now that we’ve gone through some of the main settings in Divi Text AI, let’s generate a new H1 title for our homepage. Using the auto-generate option, we get the following result:
Repeat Steps for All Copy Throughout the Page
You can generate copy for every text field on your page, so go ahead and either write the remaining titles and paragraphs on your page. Here’s how we approached changing the paragraph content right below the title, for instance:
This gave us the following result, great! But now we want it shorter.
And just like that, we have new copy throughout our hero section! You can repeat the same steps throughout your page to replace all the copy.
Step 4: Generating Images Using Divi AI
Divi AI doesn’t only focus on copy, it allows you to generate images as well! This allows you to create a unique-looking page without having to hire a photographer or spend money on stock images.
Rework Existing Image or Create New Image Altogether
Similar to Divi Text AI, you get two options to create images with AI in Divi:
Improving an existing image
Generating a new image
You can also use an existing image as inspiration for a new prompt. This will inform the AI algorithm about the image look and feel you want to achieve.
Understanding the Divi Image AI Interface
Divi Image AI is very intuitive, but to help make things easier, we’ll quickly go over some of the most noticeable settings this feature has.
Image Styles
Divi Image AI comes with a handful of different image styles. Photo is the most obvious one, but there are other interesting image styles such as Digital Painting, Drawing, Vector, and more. You can turn an existing image or a new prompt into these styles.
Generate Image with AI
To generate an image, hover the image box and click the Divi AI icon. Then, select Generate Image.
Here, you can add an image description and choose the aspect ratio of your image. Let’s try something out.
Improve Image with AI
To improve an image, click on the Divi AI icon again. Then, click on Improve Image.
We’ll use our previous image as a reference image, but we’ll ask Divi AI to make a variation of it during winter.
Just what we wanted!
Hero Image Prompt Example
Let’s go through some other prompts and the outcomes.
A woman running in a field of white flowers with her hair in the wind, photo from the back
A flower blooming during a sunny day
Let’s generate more variations of the image in the bottom-right corner!
A hot air balloon on a sunny day
Repeat Steps for Images Throughout the Page
You don’t have to change everything on the page to make it unique, but you’re free to use Divi AI as many times as you want. You can get really creative, and mastering the prompts you give is really key!
Step 5: Publish Page!
Once you’ve polished your homepage, the only thing left to do is publish your homepage! Once you get the hang of Divi AI, you’ll find that it’s really easy to build out the rest of your website’s pages too.
Divi AI Makes Your Workflow Way Faster!
Divi AI is the web design assistant you need! Not only does it help you work faster, it also helps provide multiple variations of the same design, making it easier to find your ideal outcome. If you’re signed up for Divi AI yet, take the opportunity to sign up today and enjoy the unlimited prompts you can enter! We hope you’ve enjoyed this tutorial, let us know if you have any questions in the comments and we’ll see you tomorrow for another Divi AI tutorial!
Get 40% Off Divi AI During Our Introductory Sale!
For the next week, we are offering 40% off Divi AI. Anyone who purchases Divi AI before the sale sends will save $115 per year and lock in those savings for life! Plus, all of your team members can use Divi AI at no additional cost. Get the discount here 👇
With the exciting new release of Divi AI, many users are already testing out the powerful features and exploring the possibilities. More accurately, they are probably having a blast generating stunning works of art and giving their website a fresh makeover with new images and professional copy. But as you get started with Divi AI, you will no doubt have tons of questions about what it is and how to use it. In this post, we’ll cover what you need to know about Divi AI and how to start using Divi AI on your own website.
By the way, to celebrate the launch of Divi AI we are offering a 40% off introductory discount for one week. Now’s the time to lock in those savings forever!
What Divi AI Can Do: A Brief Overview
If you haven’t already heard about Divi AI, here is a quick sneak peek at just a few of the things you can do with Divi AI:
Generate Content On-Brand and In-Context with Your Current Website. Divi learns about your website content so that it can continually improve. This allows it to produce content relevant to your brand and voice.
Generate Images Automatically in Seconds based on what it already knows about your website and page content.
Refine Your Images with Prompts and Quick Actions. Tweak and modify images with Divi AI as needed using additional prompts and quick action buttons.
Generate Text Content Automatically and Edit it Like a Pro. Divi AI can help you write website copy and entire blog posts like a professional
Using external third-party AI tools like Jasper, Chat-GPT, or Midjourney to generate content for your site can be difficult. It requires complex prompts and guesswork to ensure your content is specific to your website brand. Divi AI bridges the gap by giving you access to a powerful AI assistant that understands your existing content already. With Divi AI as your assistant, you can get the results you need quickly and easily. Some of its most unique features allow users to do the following:
Generate content for your website in the appropriate context. Divi AI analyzes and understands your existing website data so you can auto-generate content specific to your website brand. If your website is an interior design company, Divi will be able to generate images and text specific to your interior design company.
Make Suggestions for New Content. If you’re not sure what to write next or what image to add to a section of your page, Divi AI can help. Because Divi understands the content of your page, it can prompt itself and give you suggestions!
Accessible within the Visual Builder and Divi Modules. With Divi AI, you can generate AI content right inside Divi’s Visual Builder in real time. This allows you to generate AI text and images on the fly when designing your page, making it a more convenient solution than having to jump back and forth using other third-party AI tools.
Easy-to-use prompts and Quick Actions. Divi takes the grunt work out of prompting AI to generate content that actually fits your website. You can write detailed prompts or have Divi AI generate suggested prompts for you.
One-Click AI Content Generation for Divi websites. You don’t even need to prompt Divi AI to generate content for your website. You can choose to generate text or images automatically. You can even generate entire modules filled with content in one click.
If you are new to Divi, you will first need to purchase a Divi membership before you can get access to Divi AI. Once a member, you can sign up for unlimited access to Divi AI. To sign up, go to the Divi AI landing page and click the green sign up button inside the Get Divi AI box.
If you are already a Divi user, simply visit the Divi AI landing page to sign up for unlimited access to Divi AI.
Every Divi user has access to Divi AI with a limited free trial. All you need to do is make sure you are using the most recent version of Divi. The free trial allows you to use Divi AI 100~ times. After that, you will need to upgrade to a paid version to have unlimited usage of Divi AI. You can upgrade at anytime using the button at the top the Divi AI Generator modal.
Divi AI is already built-in to the Divi Builder. Once you are signed up for Divi AI, there is nothing for you to install or activate in order to enjoy the benefits of Divi AI. Currently, Divi AI can be accessed everywhere you can add text or images in the Divi Builder. That means Divi AI can be used on any Divi element (section, row, column, etc.) or Divi Module (text, image, blurb, etc.) that supports text input or image uploads. You can deploy the Divi AI generator by hovering over an input box and clicking on the Divi AI button that pops up in the top right of the input box.
Some modules will include an “Auto Generate Text with AI” button at the top of the module’s content options. This allows you to auto-generate all the text input areas available for a certain module (text, body, button, etc.).
For example, if you are using a blurb module, you can click “Auto Generate Text with AI” to generate content for the Title and Body area of the module with a single click.
Or you can choose to deploy the Divi AI text generator for each one by clicking the Divi AI button within each of the input areas individually.
Since this is a blurb module, you also have the ability to generate an image with Divi AI. Under the Image & Icon option group, hover over the image input box, and click the Divi AI options button. You will have the option to generate the image automatically or by using the Divi Image Generator Options modal.
Because Divi Builder structural elements (sections, rows, and columns) allow you to add background images, you can access the Divi AI image generator under the background image option tab.
What Divi AI Learns About Your Website to Generate Contextual Content
As mentioned already, Divi AI understands your website automatically. This allows it to generate on-brand results in context based on the existing data and content of your website. So, it is important to understand what information is needed to allow Divi AI to work its magic. In general, you can expect Divi AI to account for your website or company information (Website Title, Tagline) as well as page content and the content within modules.
Divi AI Evaluates Your Website Information from the Start
So let’s say you have a website with the title “Divi Interior Design,” and the tagline reads “Elegant Interior Design for Your Home or Business.” This information can be found by going to the WordPress Dashboard under Settings > General.
Then you can create a new page and deploy the Divi Builder.
To get an idea of what Divi AI already knows, all I have to do is create a text module and click the “Auto Generate Text with AI” button. This will create content specific to the context of your website information on the page. The content will likely include the title of your website and additional content based on the tagline (what your company does). This is perfect for kickstarting the copy of a home page.
And, if we use an image module to generate an image with Divi AI automatically, we get results of interior design photos that are consistent with my website info.
Of course, that is just the tip of the iceberg. As you build your website, Divi AI will have more information available to generate more contextual content in more specific instances.
Divi Evaluates Page Content to Generate Content for Entire Modules
Not only will Divi AI evaluate your basic website information, it will also analyze the content (and context) of your page, allowing you to generate even more on-brand results as you as you build. The more content you have and the more you use Divi AI on your pages, the better Divi AI will be able to generate accurate results.
For example, by the time you reach the end of your building your page, you will be able to generate the content for an entire Email Opt-in Module in a single click!
Now that we have a good idea of what Divi AI knows and what it can do, let’s go into a more detail on how you can use it on your website.
How to Use Divi AI for Images
Divi Image AI is based off of the Stable Diffusion model for generating AI images based on prompts. But what makes Divi AI special is that it is specifically built for Divi, giving you access to a powerful Divi AI assistant for generating image specifically for your website. The options for generating AI images are seamlessly integrated into the Divi builder, making it easier than ever to get the results you need.
How to Generate a New Image with Divi AI
You can generate new images with Divi AI using any Divi element or module that supports image content. For this example, we are going to use an image module. Once you add the image module to the page, hover over the image upload input box and click the Divi AI Options button. Once clicked, you can choose “Generate with AI” or “Generate Automatically.”
If you choose “Generate Automatically,” Divi AI will generate an image based on the context of your website information. For example, if your website is titled “Divi Family Dentistry,” Divi AI will generate images related to dentistry, like a picture of a dentist’s office.
For more targeted results, you’ll want to choose “Generate with AI.” This brings up the Divi AI image generator modal, where you can tell Divi AI exactly the kind of image you want. For starters, you can provide a simple text prompt in the Image Description like “a portrait of a female hygienist, blue scrubs, portrait lens.”
This should give you some great options to choose from. You can then select and use and image that you like. Plus, you can generate more images to find the one you want. Or, you can modify the image with built-in options to generate new results.
Understanding The Divi AI Image Generator Options
The Divi AI Image Generator Options include the following:
Image Style
Image Description
Reference Image (optional)
Aspect Ratio
Size
Using these options, you can create pretty much any image you can imagine with the power of Divi AI.
Here is a brief overview of each of the options at your disposal.
Image Style
You can choose from 12 different image styles when generating your AI image. These include:
Photo (default)
Digital Painting
Concept Art
Vector Graphic
3D Render
Drawing
Abstract Art
Comic Book
Water Color
Painting
Anime
Cartoon
This gives you a wide range of creative style options to create images for any type of design or website.
Image Description
The image description is where you can add a text prompt that describes the image you want to create. The trick here is to be both concise and descriptive. Finding the right prompts may take a few tries to get the results you are looking for, but it can be fun to experiment with different prompts to achieve magical results.
Reference Image
The reference image option allows you to upload an image that Divi AI can use as a style reference. So, if you like the overall feel and style of a certain image, you can upload the image as a reference and then use the image description to make a completely new image based on that reference image.
Furthermore, you can adjust how much you want the reference image to impact your description (and vice versa) by adjusting the Reference Image Influence dial.
The new results can be quite magical.
Aspect Ratio
You can adjust the aspect ratio of your image by selecting one of the following options:
Square (1:1)
Landscape (8:5)
Portrait (3:4)
Custom Size
This is a convenient way to make sure your image will align with common dimensions used for web design and other custom layouts on your page. For example, if you are looking for a fullwidth image to use for a background, you may want to use “Landscape”, but if you are looking for an image for blurb module, you may want to use “square.” Choosing to use a custom size will allow you to designate the exact dimensions you want for an image. This is a powerful tool for web designers who want to find unique images with the exact dimensions and resolution they need.
Size
Once you select an aspect ratio for your Divi AI image, you can use the size option to adjust or scale the image size while keeping the aspect ratio in place. Of course, if you choose Custom Size, you can adjust both the width and height options independently.
NOTE: If you are using a reference image, the dimensions of that image will be used when generating a new image with Divi AI.
Improving AI Images and Using Quick Actions
You can improve any existing image in Divi using Divi AI. In fact, some of the best results can come from improving images that you already generated by Divi AI. To improve an existing image with Divi AI, click the Divi AI options button when hovering over an image already loaded inside the Image Upload input box. This will bring up a drop down menu with additional options and quick actions including:
Generate with AI
Improve with AI
Generate and Replace (quick action)
Reimagine (quick action)
Change Style (quick action)
Choosing the Generate with AI option will allow you to start the AI image generation from scratch. But choosing the “Improve with AI” option will load the AI image generator module with the current image used as the reference image. This will allow you to make adjustments using the current image as a reference (as discussed previously). The “Generate and Replace” quick action option is basically another way to generate a new image automatically without using the current image as a reference.
Example Use Case: Using the Reimagine Quick Action to Improve an Image
One of the most useful quick action options for an existing image is the “Reimagine” option. This can transform regular images into magical works of art in a single click.
Here is an example use case of of combining the “Reimagine” quick option on an existing image and then improving it with a simple prompt with Divi AI.
First, choose the “Reimagine” option for the existing image Divi AI Options.
Then choose the best image from the suggestions given by Divi AI.
After that, choose “Improve With AI” for the new image.
And add a short description to add a minor change to the image. In this case, I’m using the description “with dark orange pillows”. Then click the generate button and choose your favorite result from the suggested images.
Now look at the new image that matches the color theme of current layout.
The result is quite magical!
How to Use Divi AI for Text
With Divi Text AI, you can generate any type of text content you need for your website. It truly is a powerful AI writer for your Divi website. Because Divi AI understands your existing content, you can generate content in the context of your website or page. This allows you to keep your copy on brand and write like a professional so you don’t have to hire one.
Let’s jump into the basics of how to get started with Divi Text AI.
How to Generate Text for Your Website Automatically
To generate text for you site with Divi AI, you can use any module that supports text input. For this example, we are going to use a blurb module. This module allows you to add text for a Title and a Body paragraph. You’ll notice a large button at the top of the content options that allows you to “Auto-Generate Text With AI.”
Clicking this will allow Divi AI to automatically fill the Title and Body text input boxes. Since my current website is an interior design company, Divi AI will suggest content related to my website information. And since the blurb module also includes an image, it will generate an image automatically as well!
You can always hover over any individual text input field and click on the Divi AI Option button. Once clicked, you can choose “Write with AI ” or “Write Automatically.”
If you choose “Write Automatically,” Divi AI will generate an text based on the context of your website information the current field type. For example, if it is a Title input field, Divi AI will automatically generate a suggest title.
The results will be similar to using the one-click Auto-generate button for the entire module, only this option auto-generates content for text fields individually.
Using The Divi AI Text Generator to Write Content
If you want more control over the content that is generated, you’ll want to choose “Write with AI.” This brings up the Divi AI Text generator modal, where you can tell Divi AI exactly the kind of content you want.
Divi AI Text Generator Options
Inside the Divi AI Text generator modal, you’ll find helpful options that allow you to prompt Divi AI for more specific results. The main top 3 options include the following:
Content Type:Â You can select the type of content you are writing to give Divi AI a better idea of what to generate. The content types supported include Paragraph, Title, Button, Blog Post, Social Media Post, and more.
What are you Writing About?:Â This is the main text prompt area where you can describe the content you want Divi AI to generate. Also, if you are not sure what prompt to use. Let Divi AI make a suggestion! Simply click the Divi AI button inside the field to see a suggested prompt to use.
Added Context:Â Because Divi AI can evaluate your existing page content when generating new text, you can choose the level of additional context you want Divi AI use to create relevant content. If you want to supply Divi AI with the entire page content as context when generating text, you can select “This Page Content” for the Added Context option. You can also choose to supply Divi AI with context limited to the section content, the module content, or you can choose to supply Divi AI with no context.
Additional “Guide Me” Options
Under the Guide Me toggle options, you’ll find even more granular options for generating text with AI. This options allow you to select the following prompts:
Tone of Voice – This is great for branding. Tell Divi AI what tone of voice to use when writing the content.
Must Use Keywords – This allows you to add all the keywords you want to be included in the content that is generated. This is great for SEO, giving you a jumpstart on optimizing content with keywords that help you rank higher in search results.
Content Length – This specifies how long or short you want the content to be.
Language – Here you can the language you want Divi AI to write in. Divi can write in over 26 languages.
Example Use Case: Writing a Blog Post
For a example, let’s say we want to write content for a blog post. Using the Divi AI text generator, I could add the following options:
Content Type: Blog Post
What are you Writing About?: “Write a blog post on the most popular interior design styles”
Added Context: no context
Tone of Voice: Informative
Must Use Keywords: “interior design, minimalist design, interior design styles, contemporary”
Content Length: about 1000 words
Then simply click “Generate Text” to have a huge jumpstart on a brand new blog post in seconds.
Once the content is generated, you can generate another version by clicking “Retry” or you can select the “Improve With AI” toggle to make adjustments with ease.
Revising and Editing Your Text with AI Quick Actions
Divi AI has a ton of handy built-in options for improving your content. To do this, hover over the text input field with the text you want to revise, and click the Divi AI button.
This will bring up a list of options and quick actions to choose from.
With a click of a button, you can fix grammatical mistakes and make content shorter, more engaging, targeted to experts, and more. This will allow you to edit and improve your copy like a pro!
Wrapping Up
Divi AI is a beast of an AI assistant for design Divi websites. And the more you use Divi AI for your website, the better it gets. We hope this guide has helped you understand the true potential of Divi AI. And we hope it will help you creating amazing content for your own website.
We know you probably still have tons of questions about Divi AI that wasn’t able to make it in this post. But don’t worry. We have plenty more tutorials on Divi AI coming your way. So stay tuned for more!
Get 40% Off Divi AI During Our Introductory Sale!
For the next week, we are offering 40% off Divi AI. Anyone who purchases Divi AI before the sale sends will save $115 per year and lock in those savings for life! Plus, all of your team members can use Divi AI at no additional cost. Get the discount here 👇
A call to action is an important part of digital marketing. Whether you are creating a landing page, blog post or mobile app, you can find calls to action everywhere online. As a native Divi module, the Call to Action Module makes it easy to add this important element to your work. Featuring a title, body text, and button, the module gives you ample styling options to make design choices that match your brand. We’ll provide you with Divi call to action style examples that are based on three of our free layout packs. Each layout pack comes with your Divi membership and we release new ones weekly! Let’s take a look at what we’ll recreate in this post:
Divi Call to Action Style Example: Inspired by Divi Whiskey
Call to Action Style Example #2: Inspired by Divi Bagel Shop
For our background, we will upload an image found within the layout pack as the base of our background design. Click on the Background Image icon. Then, click on the Add Background Image icon.
Upload the image to your site. We’ll use the default background image settings for the photo we updated.
Add Background Gradient
Next, we’ll add a background gradient on top of our background image. We’ll use the following settings:
Background Gradient Settings:
Gradient Stop 1: rgba(0,0,0,0) (at 12%)
Gradient Stop 2: #000000 (at 100%)
Gradient Type: Linear
Gradient Direction: 180deg
Place Gradient Above Background Image: Yes
Add Padding
Following setting up the background, click on the Design tab. Firstly, we will scroll down to the Spacing tab. Secondly, we’ll use 150px to add some generous padding to the section.
Spacing Settings:
Top Padding: 150px
Bottom Padding: 150px
Click on the green check icon at the bottom of the Section Settings to save your settings for the section.
Styling the Call to Action Module
For the Call to Action Module, click on the gear icon to enter the module settings.
Add Content
To begin, enter the content that you’d like to show in the module. Click on the Content Tab, and add your title, button text, and body text for your Call to Action Module.
Input Link
For you to see your button in your module, you need to add a link to the Call to Action Module. Add your link URL.
Style Call to Action Background
After we’ve added our content, we are now going to style the background of the module itself.
Add Background Color
To start, we scroll down to the Background tab. Next, we add our background color. Secondly, we will keep the Use Background Color option selected at Yes.
Background Settings:
Background Color: #e7e2bc
Use Background Color: Yes
After, we are going to add a background pattern on top of the background color selected
Add Background Pattern
For our background pattern, we click on the Background Pattern icon. Then, we click on the Add Background Pattern icon.
Next, we select the Scallops pattern from the background pattern options. We will keep the pattern color as the default.
Afterward, we need to set our settings for our background pattern. We’ll use the following settings to make the background pattern aesthetically pleasing:
Background Pattern Settings:
Pattern Size: Custom
Pattern Width: 25px
Pattern Repeat Origin: Top Left
Pattern Repeat: Repeat
Title and Body Text Styling
With the background set, we now move on to the styling of the title text, body text, and button. To begin, we click on the Design tab. Then we will start with styling the Title Text with the following settings:
Title Text Settings:
Title Font: Italiana
Title Text Color: #a45137
Title Text Font Size:
Desktop: 72px
Tablet: 54px
Mobile: 48px
Styling Body Text
For the body text, we’ll use the following settings to style the body text:
Body Text Settings:
Body Font: Marcellus
Body Text Color: #000000
Body Text Size:
Desktop: 21px
Tablet: 18px
Mobile: 18px
Body Line Height: 1.8em
Styling the Button
We’ll use Custom Styles for the button. For the button’s background, we’ll use the following settings:
Button Settings:
Button Text Size: 18px
Button Text Color: #ffffff
Button Background Color: #a45137
For the button font, we use the following settings:
Button Text Settings:
Button Letting Spacing: 1px
Button Font: Playfair Display
Button Font Weight: Bold
Button Font Style: Italic
Button Padding:
Top and Bottom Padding: 15px
Left and Right Padding: 25px
Changing Module Width
For this Divi call to action style example, we don’t want the module to be fullwidth. As such, we will change the max width of the module. To do this, scroll down to the Sizing tab in the Design tab of the module. Next, set the Max Width to 75%.
Notice that the module has skewed to the left. To fix this, we change the Module Alignment to center by clicking on the center icon.
Adding Custom CSS
To wrap up this design, we’re going to add a few lines of custom CSS. Click on the Advanced tab. We’ll add CSS to the Promo Description and the Promo Title:
Promo Description Custom CSS:
padding-left: 55px;
padding-right: 55px;
We will change the padding for tablet and mobile.
Promo Description Custom CSS (Tablet and Mobile):Â Â
padding-left: 0px;
padding-right: 0px;
To save your changes, click on the green checkmark. Here’s our final work!
Divi Call to Action Style Example ft. Divi Bagel Shop
In this call to action, we’ll add a two-column row, as opposed to one column. As before, we click on the green plus icon button to add a new row to our newly created section. Next, we will select the following two column (1/3 + 2/3) layout for our design.
Add Background Gradient to Section
After adding our row, we will add a gradient to the newly created section. First, we will click on the blue gear icon to enter the settings for the section.
Next, scroll down to the Background tab and click on the Gradient icon to begin to start entering in the settings for our gradient:
Background Gradient Settings:
Gradient Stop 1: rgba(218,170,32,0.2) (at 0%)
Gradient Stop 2: (rgba(0,0,0,0) (at 40%)
Gradient Type: Circular
Gradient Position: Top Left
Once you’ve entered your gradient settings, save your work by clicking on the green checkmark.
Add Image
Before we move on to styling the call-to-action module, we’re going to add some decoration to the row. To do this, we’re going to click on the gray plus icon to add the Image Module.
Next, we click on the Image Module to add it to the first column of the row.
As this design is inspired by the Divi Bagel Shop Layout Pack, we’ll use an edited image from the pack in the first column. We will upload the image into our Image Module.
Add Call to Action Module
Now, let’s add our Call to Action Module. Click on the gray plus icon and select the Call to Action icon to add the module to the second column within the row.
Add Content
To begin, let’s add some content to the title, button, and body text.
Add Link to Button Link URL
To show the button within the module, we need to add a URL to the Button Link URL. Scroll down to the Link tab and add your link.
Disable Background Color
For this design, we’ll disable the background for the module. We want to see the gradient that’s within the section. To do this, we scroll down to the Background tab. Then, we uncheck the Use Background Color tab.
Style the Call to Action Module
To begin styling our module, we move to the Design tab. Next, we scroll down to the Title Text tab and use the following settings to begin to style our title text:
Title Text Settings:
Title Font: Montaga
Title Text Alignment: Left
Title Text Color: #000000
Title Text Size:
Desktop: 72px
Tablet: 63px
Mobile: 48px
For the Body Text, scroll down a little further till you reach the Body Text tab. We’ll use most of the default font settings for the Body Text, however, we’ll darken the text by making it black using and left aligning it to match the Title Text:
Body Text Settings:
Body Font: Open Sans
Body Text Alignment: Left
Body Text Color: #000000
Styling the Call to Action Button
Following the design styling of our Divi Bagel Shop layout, we’re going to create a flat shadow effect with our button. To achieve this, we will have quite a few settings to set up for different aspects of the button.
Firstly, after scrolling to the Button tab, we check Custom Button Styles. We start styling our button by setting a background color and text color for our button.
Button Text & Background Settings:
Button Text Size: 14px
Button Text Color: #000000
Button Background Color: #c59246
After this, we start styling the border of our button and some of the text styling options.
Button Border and Text Settings:
Button Border Width: 2px
Button Border Color: #000000
Button Border Radius: 0px
Button Letter Spacing: 0.2em
Button Font: Open Sans
Button Font Weight: Bold
Button Font Style: All Caps
Button Alignment: Left
For the button’s shadow, we will use the following settings.
Button Shadow Settings:
Button Padding:
Top and Bottom Padding: 15px
Left and Right Padding: 45px
Button Box Shadow: See screenshot
Box Shadow Horizontal Position: 3px
Box Shadow Vertical Position: 3px
Box Shadow Blur Strength: 0px
Shadow Color: rgba(0,0,0,0.3)
Box Shadow Position: Outer Shadow
Adding Spacing to the Module
To finish off our second Divi call-to-action style example, we’re going to add some padding to the right of the module. For this, we first scroll down to the Spacing tab and activate the responsive mode for the padding. We want our padding to change based on the device a user will use to view our webpage.
For the padding, we’ll start with a large right padding on desktop, and shift to no padding on the right for mobile.
Padding Settings:
Padding (Right):
Desktop: 145px
Tablet: 75px
Mobile: 0px
With our padding in place, don’t forget to save your changes, by clicking on the green checkmark. Here’s our final Divi Bagel Shop-inspired call to action!
Divi Leather Goods Inspired Call to Action Module Style Example
Before we add our module, let’s style our section. We’ll use a background image and gradient for this section. First, we click on the background image icon and upload our Divi Leather Goods background image from our assets folder.
With our image uploaded, we are now going to apply a gradient over it to give a slightly faded effect to the section. For this, we click on the background gradient icon, and use the following settings:
Background Gradient Settings:
Gradient Stop 1: rgba(28,13,1,0.48) (at 0%)
Gradient Stop 2: rgba(28,13,1,0.48)
Gradient Type: Linear
Gradient Direction: 110deg
Gradient Unit: Percent
Place Gradient Above Background Image: Yes
With our background now setup, we’ll add some padding to our section. To do this, we move to the Design tab of the section. Next, we scroll down to the Spacing tab. Then, we will enter a top and bottom padding of 10vw.
Once we have added our padding, we click the green checkmark to save our changes to our section.
Add Call to Action Module
After saving our section and its styling, we now move on to adding our Call to Action Module to our row. To do this, we click on the gray plus icon, and then we click the Call to Action Module icon. This will add the module to our one-column row.
Add Link to Button
For our button to show up, we need to add a link to the Button Link URL option of our module within the Link tab.
Style the Call to Action Module
Before we begin styling our module, we need to add our content.
Add Content
We add content to the Title, Button, and Body section of the Text tab.
Change Background
For this design, we want to use the background of the section that the module is within. So, we uncheck the Use Background Color option to make the background of the module itself transparent.
Set Text Color and Alignment
For this design, we will want our text to be Light and the text to be center aligned. After clicking on the Design tab, we now click on the Text tab to set our Text Color to Light and our Text Alignment to Center.
Style Title Text
After setting our text color and alignment, we scroll to the Title Text tab for us to begin styling the heading text of our call to action.
Title Text Settings:
Title Font: Alike
Title Text Size:
Desktop: 72px
Tablet: 63px
Mobile: 54px
Title Line Height: 1.2em
Styling the Body Text
For the Body Text, we will keep the default settings the same. We’ll use Open Sans, the default font of Divi.
Setting Up Button Styling
For the button, we’ll use the following styles:
Button Styling:
Use Custom Styles for Button: Yes
Button Text Size: 14px
Button Text Color: #000000
Button Background: #d9b882
We continue to style our button with the following settings:
Button Border and Font Settings:
Button Border Width: 0px
Button Border Radius: 0px
Button Font: Inter
Button Font Weight: Bold
Button Font Style: All Caps
Adding Sizing
To make our module more visually appealing, we’re going to add a bit of padding to the left and right of our module. For this, we scroll down to the Spacing tab and set a Max Width of 60% (for desktop), with a Module Alignment of Center.
Sizing Settings:
Max Width:
Desktop: 60%
Tablet: 75%
Mobile: 100%
Module Alignment: Center
With our changes complete, we now click on the green check mark to save our beautiful work!
In Conclusion
By using our layout packs as a design reference, we can see that there are endless ways to style the Call to Action Module available natively in Divi. Use these examples as brain food to inspire you in your next marketing design project that needs a strong call to action!
Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi.
This time around, the design team has created a beautiful Bake Shop Layout Pack that’ll help you get your next Bake Shop website up and running in no time!
This layout pack includes:
– 6 Premade page layouts strategically designed for any Bake Shop website (including a footer design)
– Original, royalty-free photos and graphics + customizable source file (see below)
– Plus, a large collection of pre-designed website elements that are customizable and reusable anywhere.
This layout pack is available right inside Divi for all Divi customers for FREE as the latest addition to our growing Divi library of hundreds of premade layout packs, thousands of page designs, and countless web design elements and resources.
If you’re looking for the most alluring design for your brand-new bakery website, then we have the perfect layout for you. The Bakery Layout Pack for Divi is tailor-made to elevate your bakery’s online presence. Showcase your delicious treats with bright colors, bold text, and gorgeous imagery that will make your customers’ mouths water.
Live Demos
Click the links below to see a live demo for each of the layouts included in the pack.
Since Version 3.0.99 of Divi, you can find and import any of the layouts included in this pack (along with ALL of Divi’s Premade Layout packs) directly from the Divi Builder. They are already waiting for you.
To access your new layout, simply activate the Visual Builder when editing a page and look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup. Under the Premade Layouts tab, you can easily find the new layout by scrolling through the list of layout packs. Once you find the Bake Shop Layout Pack, click on it. You will see all the individual layouts included in the pack. Select the layout you want to use and then click the “Use This Layout” button.
For more, check out this video to learn how you can get this layout pack up and running today.
Before you can download Premade Layouts from the Divi Library you must authenticate your Elegant Themes Subscription. You can do this by navigating to Divi > Theme Options > Updates. There you can enter your username and API key and save changes.
You can find your API Key under your members area on the Elegant Themes site. After you enter the Username and API Key, you will gain immediate access to our library of hundreds of free layouts (including this one). If you haven’t done this, when you click to import a layout to your page, you will be prompted to enter your Elegant Themes Membership Username and API Key.
Use Layout Images for FREE with No Licensing Restrictions
The image assets included with these layouts (icons, illustrations, photos, etc.) have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.
We hope you enjoy this layout pack. We look forward to hearing your opinions in the comment section below. Make sure you check out next week’s layout pack as well!
TablePress Styler is a third-party plugin for Divi that adds lots of styling options to TablePress, a popular table-making plugin for WordPress. TablePress Styler not only gives you styling options but also makes TablePress easier to use with Divi. In this post, we’ll look at TablePress Styler to see how it works with TablePress to help you decide if it’s the right product for your needs.
Create TablePress Table for TablePress Styler
First, you’ll need to create the tables that you’ll use with TablePress Styler. TablePress Styler doesn’t create tables. Instead, it styles tables that were created in TablePress. It requires the TablePress plugin and works as a Divi addon to TablePress. Once you’ve made your tables in TablePress, use TablePress Styler to customize the styles of those tables with the Divi Builder.
I’ll use the styles from the landing page of that layout pack to create my examples.
TablePress Styler Divi Module
TablePress Styler adds a new module to the Divi Builder. Normally, tables in TablePress are added with shortcodes. With TablePress Styler, you won’t need to add the table separately. This module adds it for you. This makes the tables easier to use with the Divi Builder.
The first option in the TablePress Styler settings includes a dropdown box where you can select your table. Opening the dropdown box shows all the tables you’ve created in TablePress. Select the table you want to display.
The table displays exactly the way you created it in the TablePress editor.
Table ID
You have full control over the design of the table. You can make design adjustments without having to go back to the TablePress editor. Adjust the setup, elements, columns, rows, parameters, buttons, and more. Some of the settings require TablePress Pro (or Max) or a TablePress extension. We’ll look at the features that work with the free version of TablePress.
Setup
Setup adjusts the headers, footer, and row header. You can enable or disable them in any combination. You can also enable sorting and scrolling. I’ve enabled all of them in this example. I’ll leave them enabled throughout these examples to show the module’s options.
Elements
Elements let you move or disable the table name and description. You can also enable search, information, pagination, and a selector. If you enable pagination, you can specify the number of entries to show on each page. The header and footer are not counted in the number of entries. I’ve enabled them all in this example, changed pagination to 2, and moved the name below the table and the description above the table.
Columns
Columns let you set the width of each column. Specify the width in pixels, percentages, etc. You can also specify columns to hide or show. I’ve hidden rows 2 and 5 in this example. I’ve moved the title back to the top and left the description in its new location under the title.
Rows
Rows let you specify which rows you’d like to show or hide. I’ve hidden row 3 in this example.
TablePress Pro Options
In the TablePress Styler plugin, Parameters is an advanced feature that requires knowledge of table parameters. The features that require TablePress Pro (or Max) include buttons, responsive tables, counter columns, fixed rows, fixed columns, row order, row filtering, column filtering, and column filter dropdowns. Auto URL conversion requires the TablePress Automatic URL Conversion extension.
TablePress Styler Design Settings
Every element includes independent design settings, allowing you to customize the TablePress tables with the Divi Builder. I’ll customize the table using design queues from the layout pack.
TablePress Styler Name
Aside from header levels, the table name settings include all of the standard text settings. In this example, I’ve changed the font, font weight, color, and size. It now matches the H2 settings used in this layout pack.
TablePress Styler Description
The description includes the same options as the name text. In the example below, I’ve styled the description to match the blurbs in the row above the table. I’ve changed the font, weight, and color.
TablePress Styler Elements
Elements also include the standard font options. I’ve adjusted the font, weight, and color for this example. The search, pagination, and similar text now match the secondary headings from the layout pack.
Spacing
Spacing allows you to adjust the gaps of all the elements including the name, description, search, information, pagination, and pagination selector. I’ve adjusted all of the settings in this example to spread the text apart a little further.
Cells
Cells let you change the horizontal and vertical alignment, padding, and background color of the cells. I’ve added padding and changed the background color to black. This background color will be easier to read once I change the font colors.
Text
The text settings control the text within the cells. I’ve made the text style match the description text.
Header
The header settings include the background and font settings. I’ve adjusted the background color, font color, and text alignment in this example.
Footer
The footer settings follow the header settings and include the background and font colors. I’ve adjusted the background color, font color, and alignment in this example.
Row Header
The row header also includes the settings for the background and font colors, alignment, etc. I’ve adjusted the background color and font color in this example.
Icons
You can also add icons to your table. Add them to the cells in the TablePress editor. The TablePress Styler sales page includes a link to the icons you can use and includes the shortcodes for each icon.
Select the icons and adjust their sizes and colors within the TablePress Styler Module. I’ve increased the size of the icons and changed their color to black.
Buttons
Add buttons to the TablePress cells with the button shortcode. You can also add a custom link to the shortcode. I’ve added them to the footer in my example.
Once you have buttons in your table, you can customize them with the module’s button settings. Adjust the background, text, border colors, border radius, padding, margin, shadow, and lots more. I’ve adjusted most of these settings in the example.
Colors
Colors let you adjust the color or tint of the alternating rows. You can also disable the alternating color if you want all the rows to show the same color. Adjust the options of the row, hover, and sorting separately. This example shows the tint options. I’ve adjusted the tint for the alternating rows.
For colors, you can have them multiply or not. If you choose to use multiply, as seen in the example below, to create grey backgrounds, the colors blend.
Borders
Borders let you specify horizontal and vertical borders, choose inner or outer borders, and adjust the width, color, and style. This example shows all borders disabled for both horizontal and vertical.
The example below includes an inner vertical border. I’ve disabled the horizontal border. I’ve also increased the width, changed the color to white, and selected Groove for the style. This creates a set of cards that could be used for pricing tables, stats, etc.
TablePress Styler Design Results
Here’s how the table looks within the Divi layout. This is only a small portion of the layout to keep the image smaller. I was able to get the styles I wanted with no trouble. Everything was intuitive. It works well with both TablePress and Divi.
As an added bonus, here are a couple more styling examples based on Divi Layout Packs. The first one is styled to match the Attorney Layout Pack for Divi:
TablePress Styler is available in the Divi Marketplace for $39. It includes unlimited usage, one year of support and updates, and a 30-day money-back guarantee.
Ending Thoughts on TablePress Styler
That’s our look at TablePress Styler for TablePress and Divi. TablePress Styler works well to bring all three together. The design settings give you lots of control over the table designs and customizations. All of the settings are as intuitive as any Divi Module. If you use TablePress and Divi, TablePress Styler is a must-own plugin for your Divi toolbox.
We want to hear from you. Have you tried TablePress Styler? Let us know what you think about it in the comments.
Once the Accordion element has a title, you can move on to the body text to answer the question. Click the “AI” button and then select “Write & Replace” (or your preferred Divi AI writing shortcut). This will bring up the Divi AI modal.
Tone of Voice
Repeat the process for the rest of the images on the page. Adjust the copy using AI as needed. And you have a new website with a similar style as the premade layout.
