Divi AI brokers allow you to construct and edit web sites thru dialog. To be had inside of Divi 5, they paintings along your web page within the Visible Builder and will make adjustments to the structure whilst you watch.
Paste in a screenshot of a web page you favor and ask for the same structure. The agent builds with sections, rows, and modules you’ll open, restyle, and stay enhancing by way of hand. The new characteristic makes use of Divi-specific equipment to paintings with the builder’s construction and settings. It additionally helps decided on WordPress duties outdoor the builder, comparable to managing pages, posts, and menus.
That will provide you with a number of tactics to make use of it: developing a primary draft, updating an present web page, organizing types, or getting assist with a Divi surroundings. On this publish, we’ll attach a web site and discover those workflows, in conjunction with the controls that assist you to information and evaluation the paintings.
The place To In finding Divi AI brokers
Open a web page within the Visible Builder and have a look at the left sidebar. Click on the agent icon to open the chat panel beside your web page. Earlier than sending your first request, you’ll wish to attach your account and feature an to be had agent stability.
Get admission to is integrated with Divi AI and Divi Professional, so an present Professional subscription will provide you with get entry to to Divi AI brokers. Agent requests use a metered stability, which we’ll have a look at underneath.
The primary time you open the agent on a web site, it asks you to check in together with your Sublime Topics club account. This connects the web site in your account so its requests can use your agent stability. Entire this connection on each and every web site the place you wish to have to make use of the characteristic.
The sign-in display shows the asking for web site’s deal with and identify, so you’ll test them ahead of approving the relationship. Make a choice Stay this web site hooked up with out signing in once more if you wish to retain the relationship for long term periods.
Earlier than you ask it to switch the rest, realize the 2 modes. Ask mode can check out your web page, Design Variables, Presets, and Divi’s wisdom base that will help you perceive a surroundings or plan a transformation. Switching to Construct mode permits the agent to hold out the paintings for your web page.
In Construct mode, the agent works in visual steps. Because it processes the request and calls equipment, you’ll persist with the growth within the chat. The paintings document will provide you with a readable report of the movements taken, which comes in handy when a request comes to a number of adjustments.
You’ll stay duties in separate chat periods. Whilst you’re shifting to another activity or need first of all contemporary dialog context, click on New Chat. This provides the following request its personal dialog as a substitute of continuous the former thread.
Use the Fund Your AI Pockets icon within the top-right nook of the agent panel to view your present stability and upload finances.
Right here, you’ll see your to be had stability and any complimentary finances out of your Divi AI or Divi Professional subscription. If you want extra finances, you’ll acquire them additional down the web page. This could also be the place you’ll test what’s to be had ahead of beginning a bigger job.
With the web site hooked up and a stability in position, you’re in a position to present the agent its first instruction. Construct mode stories its growth during the chat, together with the stairs it takes and the equipment it calls. The instance underneath presentations a steered, paintings document, added media, and job checklist.
1) Consumer Instructed, 2) Agent Paintings Record, 3) Media Added, 4) Agent Process Checklist, 5) Additional Development Updates
Construct A Structure From A Description, A Screenshot, Or A URL
There are 4 major tactics to begin a brand new structure, and each and every produces a Divi web page you’ll proceed enhancing without or with the agent. Divi AI brokers paintings with local sections, rows, modules, and design settings, so the outcome stays a part of your standard builder workflow. You’ll check out the construction and refine person settings after the preliminary structure is constructed.
You’ll get started:
- From an outline. Inform it what the web page is for and what it will have to come with. For instance, request a pricing web page with 3 tiers and a comparability desk, or a services and products web page for a landscaping corporate with a hero, 4 carrier playing cards, and a touch phase. A particular transient provides the agent a clearer place to begin.
- From a screenshot or mockup. Paste or connect the picture to the chat and ask the agent to construct from it. Provide an explanation for whether or not you wish to have to persist with the total structure, specific sections, or the visible taste, and point out any content material that are supposed to exchange.
- From a are living URL. Level it at a webpage and give an explanation for what you wish to have to make use of as a reference. The agent can check out the web page and paintings from its content material and design.
- From reference pictures. Connect a number of pictures and ask for a structure that stocks their taste. Use them to keep in touch a route for the colours, typography, imagery, or composition.
You’ll additionally mix those inputs. A screenshot may give you the structure, whilst a written transient provides the content material and emblem necessities. The type you select must reinforce the forms of enter you supply.
Here’s the screenshot course in follow. Within the recorded instance, one massive symbol of a web page structure, operating on Auto Deep Worth, produced 9 sections with a reported price of about $0.10. That determine applies to this situation; prices range with the type and job.
On the other hand you get started, the canvas comprises local Divi construction: sections, rows, modules, content material, and types that you’ll open and alter in the standard settings panels. You’ll stay running thru chat, edit the outcome manually, or use each approaches as you refine the web page.
Edit An Present Web page
You received’t all the time be ranging from an empty canvas. You’ll have a web site that wishes a brand new design route, up to date content material, or a couple of changes ahead of handoff. Divi AI brokers can paintings with that present structure, making them helpful for ongoing paintings on websites you organize.
Ask the agent to revamp a hero, rearrange the modules in a piece, rewrite the replica, or repair inconsistent spacing. Describe what you wish to have to succeed in and determine the world to switch. You don’t wish to identify each and every surroundings concerned, however a transparent request makes the outcome more uncomplicated to study.
One instance is updating a web page initially inbuilt Divi 4 after opening it in Divi 5. If you wish to convert its rows from Block to Flex, the column spacing wishes consideration too. Spacing in the past implemented thru margins would possibly wish to grow to be horizontal or vertical gaps. The next request explains each adjustments:
Convert all Rows with a Block Structure to have a Flex Structure. Know that Block Layouts observe a margin at the columns for spacing, while Flex Layouts want the spacing implemented as a horizontal and on occasion vertical hole. Retain different visible spacing choices, however make certain they paintings inside the new flex structure paradigm.
This updates the structure construction reasonably than acting a whole web site migration. Overview the transformed rows at other display sizes to test that their alignment and spacing nonetheless paintings.
Referencing a component immediately is frequently more uncomplicated than describing its place. Click on it at the web page and upload it as context so the agent has a selected goal. You’ll additionally seek advice from a module by way of its content material, such because the textual content in a heading, to assist it find the precise part.
The agent can check out the web page construction, how components are nested, and their module settings ahead of making a transformation. That context is helping it paintings with the structure already at the web page.
Paintings Inside of Divi’s Design Machine
Presets and Design Variables assist stay a Divi web site constant and maintainable. Divi AI brokers can paintings inside of that machine, the usage of present Presets and variables whilst you ask them to. Come with the ones necessities for your steered so new styling follows the web site’s conventions and stays editable thru Divi’s settings.
You’ll additionally paintings within the different route. Level the agent at a structure constructed from person values and ask it to show repeated values into Design Variables or repeated styling right into a Preset. It will come with colours, fonts, gradients, pictures, and sizes. Ask it to checklist its tips first so you’ll select which of them to use. The instance underneath specializes in changing static values into world Quantity Variables.
You don’t wish to determine each and every inconsistency your self ahead of requesting assist. Get started in Ask mode with a steered comparable to “What’s inconsistent in this web page?” and evaluation the tips. You’ll additionally give it extra targeted duties:
- In finding lacking symbol alt textual content and counsel descriptions.
- Change inconsistent colours with suitable world colours.
- Standardize typography, spacing, and buttons.
- Overview how the web page behaves throughout breakpoints.
- Proper spelling, grammar, and capitalization.
- Overview the calls to motion around the web page.
- In finding outsized pictures.
- Overview customized CSS that can not be wanted.
After reviewing the tips, come to a decision which adjustments to use in Construct mode. For shared types, ask the agent to make use of the best variable or Preset so the replace stays manageable around the components that use it.
How To Ask For What You Need
A couple of conduct assist you to give clearer directions and make the effects more uncomplicated to test:
- Be particular in regards to the end result. “Make this phase higher” leaves so much open to interpretation. “Tighten the spacing right here and make the heading the similar length as the only above it” identifies each the exchange and its reference.
- Stay the scope manageable. A unmarried exchange is simple to test. Higher requests are helpful too, however come with sufficient element and wreck the paintings into phases when you wish to have to study choices alongside the way in which.
- Display it when a visible would assist. Paste a screenshot or mockup when it explains the structure or taste extra obviously than an extended description. Upload a sentence about which portions of the reference topic.
- Give it constraints in addition to a purpose. Inform it which variables to make use of, which conventions to persist with, and what will have to stay unchanged. Stored Regulations mean you can reuse this steering throughout duties.
- Know when to edit manually. Some changes are quicker and less expensive to make your self. Use the agent the place it is helping with the paintings, and use the builder controls immediately when that’s the easier choice.
Overview Questions And Confirmations
The agent can ask for explanation when a request is lacking essential main points. It may possibly additionally pause for approval ahead of damaging or high-impact movements.
When it asks a follow-up query, provide the lacking knowledge ahead of proceeding. For a bigger request, you’ll explicitly ask it to stipulate a plan first. This will provide you with an opportunity to test its interpretation ahead of it starts converting the web page.
Learn affirmation requests sparsely once they contain deleting a template, trashing a web page, doing away with a menu, or converting shared settings. If a menu location already has an task, test what’s going to occur to that task ahead of approving a substitute. Within the screenshot underneath, the agent pauses for approval ahead of saving adjustments to world variables.
If You Do Now not Like The End result
Earlier messages supply a repair choice for returning the web page to an previous checkpoint. Click on the repair icon beside the related message, then evaluation the Repair to This Level conversation ahead of confirming. This permits you to go back to the structure state related to that time within the dialog.
Restoring rewinds the web page reasonably than selectively reversing one edit. Handbook adjustments you made to that structure after the chosen level are got rid of in conjunction with the agent’s next adjustments. Test what you’ve finished since that checkpoint, particularly in case you’ve been enhancing by way of hand along the agent.
Small, checkable steps make this more uncomplicated to regulate. For those who evaluation a unmarried phase exchange ahead of shifting on, you’ve gotten a clearer checkpoint to go back to. A repair after a bigger redesign would possibly undo significantly extra paintings, together with later changes you sought after to stay.
Give The Agent Context, Regulations, Instructions, And Equipment
The chat panel contains greater than a steered box. Context provides references, Regulations save steering, Instructions allow you to repeat duties, and Equipment reveal the movements the agent can use whilst running.
Upload Context From Your Web page
Click on a component and upload it in your request to turn the agent precisely the place to focal point. You’ll additionally reference some other web page for your web site, which comes in handy when you wish to have a brand new phase to persist with a design you’ve already authorized in other places.
Save Regulations For Your Website online
Regulations are stored directions that the agent can use when related to a job for your web site. They may be able to describe your emblem voice, structure conventions, or which variables and Presets to make use of with specific modules. This provides habitual necessities a spot outdoor person chat messages.
When you’re typing the similar steering time and again, believe saving it as a Rule. For instance, specify the present variables to make use of for headings and backgrounds. Stay Regulations up to the moment because the web site’s design machine or content material necessities exchange.
Flip Repeated Activates Into Instructions
Whilst you frequently run the similar request, reserve it as a Command. You’ll then invoke it from the chat by way of typing / and opting for the stored Command, as a substitute of writing out the directions once more.
Excellent applicants come with the critiques you run ahead of a web page is going are living: an accessibility test, a responsive structure evaluation, a design machine audit, or a last content material test. Describe what to check out and whether or not you wish to have tips or adjustments. Reusing the Command is helping you stay the ones requests constant throughout pages.
Instructions describe jobs you wish to have finished, whilst Regulations information how the ones jobs will have to be performed. You’ll come with the related Regulations as context for a Command, so a repeated job follows the web site’s necessities.
Discover The Equipment Button
The Equipment button opens a searchable checklist of movements the agent can use. Some check out knowledge, comparable to web page construction, modules, or world colours. Others make adjustments to supported Divi settings or carry out WordPress duties outdoor the builder.
Settling on a device permits you to reference it for your steered when you wish to have to direct the agent towards a specific motion. You’ll additionally see instrument calls within the growth log as it really works.
We’ll quilt the whole checklist and give an explanation for each and every instrument’s objective in a separate publish. For now, this panel will provide you with an invaluable view of the movements at the back of the dialog.
Ask It How Divi Works
The agent can seek the advice of Divi’s documentation and data articles to assist resolution questions. With related web page or web site context, it could additionally assist you to examine a selected factor, comparable to a Theme Builder template that isn’t making use of, reasonably than simplest explaining the characteristic basically.
Questions to invite come with:
- Will have to this phase use Flexbox or CSS Grid?
- Will have to I assign Design Variables to those settings or use a Preset for the shared styling?
- Why isn’t my Theme Builder template making use of to this web page?
- How do the side ratio choices behave?
As soon as you already know the recommended resolution, you’ll ask the agent to use it in Construct mode. This assists in keeping the rationale and the follow-up paintings in the similar dialog.
Ask mode is the start line when you wish to have to discover settings or plan a transformation with out enhancing the structure. Learn the solution, ask follow-up questions, and turn to Construct whilst you’re in a position to behave on it.
Make a choice The Type For The Task
Other AI fashions have other strengths, speeds, and prices, so Divi AI brokers aren’t tied to a unmarried type. Choose between masses of supported fashions or use an automated variety choice. This permits you to regulate the type to the duty as a substitute of the usage of the similar one for each and every request.
A extra succesful type would possibly go well with design paintings and longer duties with a number of dependent steps. A quicker, more cost effective type could also be sufficient for easy proofreading. For paintings involving screenshots or symbol descriptions, select a type that helps symbol enter. Your selection impacts utilization prices, so the type selector is value getting aware of.
The agent too can create sub-agents to run unbiased paintings in parallel and assign a type to each and every. This permits separate portions of a bigger job to make use of other fashions. It may be helpful for dividing the paintings, despite the fact that the overall price nonetheless relies on the fashions decided on and the requests they procedure.
Divi AI brokers Are Incorporated With Divi AI
Divi AI brokers include Divi AI and also are a part of Divi Professional. Your subscription can be utilized around the websites you construct, and each plans these days come with $5 in complimentary agent utilization each and every month.
Get admission to and utilization are separate: agent requests are metered consistent with the type and the volume of enter and output processed. You’ll upload finances when you want greater than the integrated allowance. Divi AI’s limitless era options are not making agent utilization limitless. Test the Divi AI brokers web page for present pricing main points.
Get started with one web page. Open it in Ask mode, ask what’s inconsistent in a specific phase, and evaluation the reaction. Make a choice a transformation to use in Construct mode, then test the outcome at the canvas. That will provide you with a sensible first job with out turning in a whole redesign.
As you’re employed, save helpful directions as Regulations and repeated requests as Instructions. You’ll increase a suite of workflows for the duties you do maximum frequently, from refining a web page’s design to reviewing its content material ahead of publishing.
#faqsu-faq-list {
background: #F0F4F8;
border-radius: 5px;
padding: 15px;
}
#faqsu-faq-list .faqsu-faq-single {
background: #fff;
padding: 15px 15px 20px;
box-shadow: 0px 0px 10px #d1d8dd, 0px 0px 40px #ffffff;
border-radius: 5px;
margin-bottom: 1rem;
}
#faqsu-faq-list .faqsu-faq-single:last-child {
margin-bottom: 0;
}
#faqsu-faq-list .faqsu-faq-question {
border-bottom: 1px cast #F0F4F8;
padding-bottom: 0.825rem;
margin-bottom: 0.825rem;
place: relative;
padding-right: 40px;
}
#faqsu-faq-list .faqsu-faq-question:after {
content material: “?”;
place: absolute;
correct: 0;
peak: 0;
width: 30px;
line-height: 30px;
text-align: heart;
colour: #c6d0db;
background: #F0F4F8;
border-radius: 40px;
font-size: 20px;
}
What’s the Divi AI Agent?
Does the Divi AI Agent simplest construct new pages, or can it edit present ones?
Does the Divi AI Agent paintings in Divi 4?
Can I undo what the Divi AI Agent does?
Which AI fashions can the Divi AI Agent use?
The publish Exploring Divi 5’s AI Brokers gave the impression first on Sublime Topics Weblog.
WordPress Web Design