Divi AI Brokers help you construct and edit internet sites via dialog. Within Divi 5, the interface sits beside the web page within the Visible Builder and will create sections, rows, and modules when you watch. Connect a screenshot and describe the structure you wish to have. Divi AI Brokers can construct a local Divi construction that you’ll proceed modifying within the Visible Builder.
On this submit, we’ll use Divi AI Brokers with 3 Divi 5 options to recreate a filtered weblog index: Flexbox for the web page skeleton and playing cards, Loop Builder for a repeating submit card, and Loop Filter out Modules for seek, class and creator filtering, and Practice and Reset controls.
The function is a operating weblog submit loop that fits the reference structure: a hero, a sidebar of filters, and a grid of are living posts. We’ll get started from the screenshot, then connect dynamic content material to actual WordPress content material one degree at a time.
What Are Divi AI Brokers?
Divi AI Brokers paintings with local Divi parts, together with Sections, Rows, Columns, and Modules. Open the interface from the Builder Bar to invite questions on your structure or request adjustments. Ask Mode supplies steerage, whilst Construct Mode makes edits.
The chat panel opens beside the canvas, so you’ll keep on with the dialog and overview the structure in the similar workspace.
The primary time you apply it to a web page, you’ll want to check in along with your Sublime Topics account in order that the web page can get right of entry to and use your Divi AI credit score stability.
Divi AI Brokers are integrated with a Divi AI club, which could also be a part of Divi Professional. The club contains $5 in complimentary agent spend each and every month. Utilization prices rely at the fashion and the request.
Ask Mode And Construct Mode
The interface has two modes. Ask Mode can check out the web page, Design Variables, Presets, and Divi’s wisdom base. Use it to know a environment, evaluate Flexbox and CSS Grid, or plan a metamorphosis with out modifying the structure. As an example, ask:
Divi AI Brokers can use the to be had web page context and Divi wisdom to give an explanation for which way suits your structure.
Construct Mode carries out the paintings. Because the Agent processes a request, you’ll keep on with the instrument calls and the paintings file within the chat, then take a look at the canvas. As an example, use this steered:
Watch as Divi AI calls at the gear had to create the row and assign the background shade.
Stay similar revisions in the similar dialog. While you transfer to an unrelated process, click on New Chat to start out a contemporary thread.
The Historical past tab allows you to reopen previous conversations and proceed with their context. Assessment the canvas after each and every construct request. If one thing wishes correcting, ask for a focused trade or use the Visible Builder’s Undo controls.
Inputs, Context, And Controls
You’ll get started from a clean web page and describe what you wish to have, or give the Agent one thing to paintings from. It could construct from a written transient, a screenshot or mockup, a website online URL, or a temper board of reference pictures. What you get again isn’t a static image or a pile of generated code. It builds actual Divi sections, rows, modules, content material, and kinds that you’ll stay modifying within the Visible Builder.
The chat window contains controls for including context and reusing directions.
Context
Context tells the Agent precisely what you imply. Make a choice a Module, Staff, Column, Row, or Phase at the present web page and upload it to the request. You’ll additionally connect screenshots and different reference pictures, as appearing the structure is quicker than describing it. The extra related the context, the fewer the Agent has to bet.
Laws
Laws give the Agent chronic steerage for the web page. Use them for logo voice, structure conventions, and which Design Variables or Presets to make use of. Click on the Laws icon, upload a brand new Rule, give it a name, write the instruction, and describe when it must observe. Save the ones as soon as as a substitute of pasting them into each and every chat.
Instructions
Instructions flip a steered you reuse right into a one-step workflow. Just right applicants are accessibility assessments, responsive cleanup, content material opinions, and design method audits. Cause the stored Command from chat as a substitute of rewriting the similar multi-step request.
Gear
The Gear keep watch over supplies get right of entry to to Divi-specific movements that Divi AI Brokers can use for parts, settings, and web page content material. All the way through a construct request, the chat presentations the movements getting used, serving to you keep on with the paintings in the back of the outcome.
After the primary draft exists, stay the use of the similar dialog to edit it. Ask it to revamp a piece, rearrange modules, trade colours, alter typography, rewrite replica, or replace spacing. You’ll additionally ask it to make use of your international colours, flip repeated kinds into Presets, or change one-off values with Design Variables.
Be particular in regards to the end result you wish to have, stay each and every request sufficiently small to test at the Canvas, and provides constraints in addition to a function. If a Construct result’s off, don’t stack every other massive request on peak of it. Level the Agent on the part that wishes paintings, or use the Visible Builder’s Historical past and Undo controls to step again during the web page edits.
Construct The Weblog Loop With Divi AI Brokers
We’ll use a reference symbol and a sequence of centered activates to construct the structure, attach it to posts, and upload filters. Use a web page with printed posts, featured pictures, classes, and authors so you’ll take a look at the dynamic effects. The activates additionally think your Colour Variables exist already.
Open a clean or current web page within the Visible Builder and get started a New Chat. Use the fashion dropdown menu to select a fashion to construct the structure. For this submit, we’ll use Auto Deep Worth, an automated fashion variety choice that balances deeper reasoning with value.
Subsequent, use the Connect a Record icon to add a reference symbol.
Recreate The Screenshot
Get started via development the hero and the weblog segment underneath it. Depart the sidebar empty and create one card to function the repeating template. Use placeholder content material for now; you’ll attach its fields to WordPress posts within the subsequent degree.
Use this because the beginning steered:
The reference provides the visible path, whilst your Colour Variables stay the colours hooked up for your design method. The outer 1/4 + 3/4 row separates the filters from the effects. Within the effects column, the cardboard column will turn into the repeating merchandise, with its 1/3 Column Magnificence making a three-card desktop structure as soon as Loop is enabled.
After the construct finishes, take a look at that the hero sits above the weblog segment and that the outer row incorporates a slender sidebar and wider effects column. Verify that the sidebar is empty and the Nested Row incorporates just one card column. Change any copied reference textual content with placeholders, and take away further playing cards earlier than enabling Loop.
If the generated construction is lacking the Nested Row, upload the outer 3/4 effects column as context and ask:
Flip One Card Into A Loop
Make a choice the person card column throughout the Nested Row, moderately than the outer effects column. That is the part that are meant to repeat. In its Meta choice team, label it Weblog Effects so you’ll establish it when deciding on the Submit Filter out module’s goal.
Upload that card column as context. Ask Divi AI Brokers to question posts, display six effects consistent with web page, and organize them from latest to oldest:
As soon as the duty finishes, open the cardboard column and ensure that Loop is enabled. Test the question and each and every dynamic box, together with the submit hyperlink. The repeated playing cards must show other posts moderately than copies of the similar static content material.
Make any important changes, reminiscent of lowering the volume of textual content within the Excerpt.
Upload The Loop Filter out Modules
Now choose the empty 1/4 sidebar column as context. Ask Divi AI Brokers so as to add a Submit Filter out module there and fix it to the looped card column classified Weblog Effects:
Open Content material > Goal within the Submit Filter out module and ensure that Goal Loop issues to the looped card column. Test the quest, class, and creator pieces, then use follow-up activates for styling. As an example:
If refinements don’t paintings as meant during the Agent, adjust the steered as wanted or make small changes the use of the Submit Filter out module’s Design tab.
Make Focused Refinements
As soon as the loop and filters are hooked up, preview the web page as a reader. Check out a key term, choose a class and an creator, observe the filters, and reset. Verify that the displayed posts reply to the controls.
Upload the weblog row as context, transfer to Ask Mode, and request a overview:
Assessment the findings, then transfer to Construct Mode and ask for the adjustments you wish to have to use:
Divi AI Brokers can check out the related parts and their youngsters, then use the to be had gear to regulate the structure.
As soon as entire, the Agent outlines the stairs it took to make adjustments to the structure.
Make Responsive Adjustments
As soon as the Desktop model is about, use Divi 5’s Customizable Responsive Breakpoints to fine-tune the structure on Pill and Cell. For this structure, use two playing cards consistent with row on Pill. On Telephone, the sidebar must stack above the weblog submit grid, and each and every card must span the whole width. In the event you uncover any inconsistencies, upload the part as context and instruct the Agent to make any important adjustments for smaller monitors.
As an example, at the Telephone breakpoint, the Nested Row that homes our weblog posts isn’t spanning the whole width of the Column, so we use the next steered:
As soon as the Agent completes the duty, cycle via each and every breakpoint to make sure the entirety seems to be as meant, then save the structure.
Prompting Conduct
The Agent works perfect when each and every request has one transparent activity. Those behavior stay the dialog simple to check and the structure simple to proper.
Give The Agent One Activity At A Time
Get started with the structure you’ll see, then upload the portions that rely on that structure. A screenshot or transient can produce the construction. Dynamic options, reminiscent of a loop or a filter out, must wait till the part they belong to exists.
Say What Must Alternate And What Must Keep
Be particular in regards to the end result. “Make this segment higher” leaves an excessive amount of open. “Tighten the spacing on this row and fit the heading measurement to the only above it” provides the Agent each the trade and a reference. Point out current Colour Variables, Quantity Variables, or Presets when you wish to have the outcome to stick within your design method.
Upload Context As a substitute Of Describing A Location
Click on the Phase, Row, Staff, or Module and upload it to the request. Connect a screenshot when appearing the result’s clearer than describing it. The extra exactly the Agent can see the objective, the fewer it has to bet.
Stay Each and every Construct Request Small Sufficient To Test
If a result’s off, don’t stack every other massive steered on peak of it. Ask the Agent to modify that one space, or use the Visible Builder’s Historical past and Undo controls to step again via web page edits. The Agent Historical past tab shops previous chats so you’ll reopen one and stay its context. Reopening a talk is cut loose undoing web page edits.
Save Laws And Instructions You Repeat
Laws dangle chronic directions for the web page: logo voice, Flex as a substitute of Block, and which Variables or Presets to make use of. Instructions flip a steered you run steadily right into a shortcut from chat. Accessibility assessments, responsive opinions, and design-system cleanups are excellent applicants. Write the Rule or Command as soon as, then reuse it as a substitute of retyping the similar constraints in each and every dialog.
Plan In Ask Mode, Then Assessment The Canvas
Use Ask Mode when you wish to have a plan or a proof. Transfer to Construct Mode when you’re in a position for the Agent to edit the web page. After each and every cross, take a look at the canvas earlier than sending the following request.
Obtain The Recordsdata
Obtain the instance structure under to make use of it as a place to begin for your Divi 5 website online. As soon as imported, you’ll alter its design and settings with Divi AI Brokers or edit it immediately within the Visible Builder.
Obtain and extract the ZIP record, then head to the Divi Library and click on Import & Export.
Make a choice the Import tab, select the weblog submit loop.JSON record out of your laptop, and faucet Import Divi Builder Layouts.
Subsequent, open an current web page or create a brand new one within the Visible Builder. Click on to upload a brand new segment to the web page.
When the modal seems, select the Upload From Library tab, select the structure, and faucet Use This Phase. Divi will upload the structure to the web page. Assessment its Loop question, dynamic fields, and Submit Filter out goal the use of your individual posts, then alter the styling as wanted.
Get started Development Smarter With Divi AI Brokers
Divi AI Brokers provide you with a conversational technique to construct with Divi 5. On this educational, Flexbox supplies the construction, Loop Builder provides the posts, and Loop Filter out Modules let readers slender the effects.
The workflow is more uncomplicated to keep on with while you construct it in phases: create the structure, attach one card to dynamic content material, upload the filters, and refine the responsive design. Each and every degree leaves you with local Divi parts you’ll check out and edit.
Use the downloadable instance or get started with your individual reference symbol. Obtain Divi 5 and discover Divi AI to take a look at the workflow for your subsequent mission.
Tell us what you suppose within the remark segment under or on our social media channels.
The submit Development And Designing A Loop With Divi AI Brokers gave the impression first on Sublime Topics Weblog.
WordPress Web Design