Development a web page frequently method repeating the an identical instructions all through various pages. We ask for sections that are compatible present sorts, revisions that stay approved content material subject matter, and construction assessments forward of a client evaluate. With Divi AI Agent Directions, we will save those instructions and reuse them each and every time the an identical procedure comes up.
Underneath, we’ll share ten Directions for common web page tasks, provide an explanation for when each and every one is useful, and show which details to supply for your non-public pages.
What Are Divi AI Agent Directions?
Divi AI agents art work throughout the Divi 5 Visual Builder and make allowance us to build and edit pages using plain-language instructions. We can ask an agent in an effort to upload a work, regulate module settings, or evaluate a construction, along with details about what to change and what to stay.
We can save the ones requests as Directions, then kind a slash (/) throughout the agent chat to select one from our library. Settling on a Command attaches it to the next request. Add an accompanying message and any comparable Context forward of sending it. The agent receives the saved instructions along side the ones page-specific details.
To avoid wasting a whole lot of one, open the Directions tick list throughout the agent chat, click on on Add New Command, enter the identify and instructions, then click on on Save Command. Kind a slash (/) in chat to select it, add the details for the existing internet web page, and send the request.
For setup instructions and examples, see our knowledge on how one can use Divi AI Brokers Instructions.
10 Divi AI Agent Directions To Save And Reuse
For each and every Command beneath, use the accompanying message to identify where the agent will have to art work, describe the end result you want, and specify the remaining it will have to stay. Attach comparable Context, very similar to an present phase or preset, to supply it a clear reference. Specific prerequisites have the same opinion the agent make imaginable possible choices that go well with the internet web page, so include the desired content material subject matter, placement, and responsive conduct. Check out each and every Command and evaluate the end result forward of saving it for longer term use.
Use Assemble Mode for Directions 1, 2, and 4–7, which create or change portions and design property. Use Ask Mode for Directions 3 and 8–10, which file findings without making changes. For Command 6, evaluate the proposed variable conversions forward of confirming them. When reusing a Command on another internet web page, check out that its Context however identifies the meant portions and design property.
1. Assemble With Your Present Types
When together with a work, row, or module to an present internet web page, we will stage the agent to a design we’ve already approved. This Command asks it to stay with that reference and reuse the presets and variables that support it.
Save the following as Assemble With Present Types.
For our example, we used a real belongings internet web page and attached its Revel in You Can Consider phase as Context. We asked for a brand spanking new How It Works phase immediately above Meet Our Professional Body of workers, with 3 numbered steps explaining the process of finding a space.
Our accompanying message supplied the heading and step titles, asked the agent to write down down fast descriptions, and specified 3 columns on desktop that stack vertically on phone.
The agent added the phase using the supplied design reference. Quicker than protective the end result, check out which presets and variables it reused, because the ones connections allow the new portions to stay with longer term updates to our shared sorts.
2. Create A Design Variation Without Converting The Unique
We might in all probability want to check out a distinct design treatment while protective the existing fashion available for comparison. This Command creates a separate variation, so we will evaluate each and every diversifications or show a client another option.
Save the following as Create A Design Variation.
For our example, we attached the Jenny Smith hero phase as Context and asked for a duplicate immediately beneath it with lighter, softer colors suited to the craze portfolio. We let the agent make a choice the background, text, and button colors while protective the content material subject matter, pictures, typography, construction, and spacing unchanged.
The agent situated the variation beneath the original, letting us review the color imaginable possible choices towards the an identical content material subject matter and construction. If the original uses anchor links or element IDs, check out those on the copy forward of defending each and every diversifications on the internet web page. Each element ID will have to keep unique.
3. Read about Your Internet web page With An Approved Design
When reviewing a internet web page towards an approved design, we will ask the agent to identify diversifications and counsel corrections forward of creating any changes. We can moreover focal point the comparison on particular person portions that desire a closer look.
Save the following as Read about With A Design Reference.
We tested this thru comparing the lighter Jenny Smith hero from our previous example with a screenshot of the original. Our accompanying message recognized the lighter variation since the phase to test and the original since the approved reference.
In every single place the test, the agent asked us so as to add and make sure the reference image forward of continuing. It then recognized the color diversifications without applying changes, demonstrating the color comparison in this example.
Evaluate the findings towards the reference forward of soliciting for corrections, particularly when the comparison covers further details than we tested proper right here.
4. Observe Consistent Types Right through Portions
Portions that serve the an identical serve as can make bigger various sorts as we revise a internet web page. We can use an approved element or preset as a reference to ship their styling once more into alignment, specifying which settings will have to are compatible.
Save the following as Have compatibility Types To A Reference.
We tested this on the 3 Contact Agent buttons in the true belongings internet web page’s Divi Exclusives phase. After giving the buttons various sorts, we attached the principle button as Context and asked the agent to make the other two are compatible it.
The agent matched the other two buttons to the reference. For this example, we will have to moreover check out their hover glance and be sure that each and every button however problems to its meant holiday spot.
5. Align Typography And Spacing With Your Design Necessities
When aligning typography and spacing all through a work, we want to are compatible an identical portions while protective their hierarchy intact. Card headings will have to keep on with the an identical treatment, for example, without taking on the styling of the larger phase heading.
Save the following as Align Typography And Spacing.
For example, we will attach the principle service products’s containing column or body of workers in the true belongings internet web page’s Revel in You Can Consider phase as Context. In our accompanying message, we ask the agent to test the other two items’ heading and body typography, along with the spacing between their icons, headings, descriptions, and links. We cross away the larger phase heading outside the requested changes.
Check the end result at the comparable show sizes, protective in ideas that different-length headings would in all probability wrap onto various numbers of strains despite the fact that their styling fits.
6. Replace Hardcoded Design Values With Variables
A internet web page can look consistent while using separately entered values for the same colors and spacing. We can connect suitable settings to Global Variables see you later time period changes raise by means of to each and every atmosphere using them.
Save the following as Convert Design Values To Variables.
For the true belongings internet web page, we will attach the Revel in You Can Consider phase as Context and ask the agent to identify hardcoded colors and repeated spacing values for conversion.
Evaluate the proposed mappings forward of confirming, since settings with the an identical price would in all probability want to change independently later. A card’s inner padding and the gap between sections, for example, would in all probability serve various purposes and wish separate variables. After confirming the plan, evaluate any approval card for saving Global Variables and click on on Approve to continue with the changes you are going to have checked.
Open a remodeled field to make sure that it references the meant variable, then check out the phase at its responsive sizes to make sure its glance has stayed the an identical.
7. Save Repeated Styling As A Preset
After we’ve delicate the styling of an element, we will save the settings together as a preset to use in other places. Our accompanying message can specify a single selection body of workers, very similar to heading typography, or the element’s broader design treatment.
Save the following as Save Styling As A Preset.
For example, we could attach a service heading from the true belongings internet web page as Context and ask the agent to save some its heading typography as an Selection Body of workers Preset named Service Card Heading. We may moreover decide the other service headings that are supposed to download it.
Check that the preset accommodates most straightforward the meant typography forward of using it in other places, since longer term edits to its shared settings can affect each and every element using it. A Heading Text preset can include the heading level, so verify that each and every objective keeps the meant HTML level along with the right kind glance.
8. Evaluate Tablet And Phone Layouts
Together with content material subject matter or rearranging sections can affect how a internet web page appears to be on smaller displays. We can use this Command to test the construction at specific widths and decide where adjustments is also sought after.
Save the following as Evaluate Responsive Layouts.
For example, we will ask the agent to test the true belongings internet web page’s Divi Exclusives listings on tablet and call, specifying an exact width if we’ve noticed a subject at a decided on show size.
Check whether or not or now not the file is in keeping with rendered previews or responsive settings. If the agent most straightforward inspected settings, use the Builder’s responsive preview to ensure those widths forward of soliciting for fixes. A heading wrapping onto another line is also acceptable, while text spilling outside its card needs attention. For confirmed issues, request a targeted correction and check out that the desktop construction however works as meant.
9. Check Fundamental Accessibility Details
We can ask the agent to check heading development, image alt text, and text readability to identify details that may make a internet web page harder to use. This Command reports its findings so we will make a decision which corrections are sought after.
Save the following as Evaluate Fundamental Accessibility.
For the true belongings internet web page, we could ask the agent to test the property listings and agent profiles. Our accompanying message can provide an explanation for what the photographs want to keep in touch, helping it assess their alt text alongside the encompassing descriptions.
When reviewing the findings, check out the headings’ HTML levels to make sure their order throughout the internet web page development. Check each and every image’s rendered alt function on the frontend alongside its field throughout the Builder. This is a basic accessibility check out, and keyboard navigation, show reader conduct, and various prerequisites however need separate testing.
10. Run A Final Content material subject matter Check Quicker than Handoff
Quicker than sending a internet web page to a client or getting in a position it for publishing, we will check out for leftover placeholder copy, spelling errors, and inconsistent industry details. Attach approved information as Context so the agent has a reference for checking names, contact details, products and services and merchandise, and dates.
Save the following as Run A Final Content material subject matter Check.
For example, the Jenny Smith sort internet web page accommodates placeholder paragraphs and references to a 2024 collection. Lets ask the agent to flag content material subject matter that wants attention forward of handoff. The placeholder copy needs converting, then again the collection date might check with an older collection that are supposed to keep on the web site.
After reviewing the findings, we will verify which details need updating and supply any missing copy forward of soliciting for changes.
Assemble A Command Library Spherical Art work You Repeat
Get began with the Directions that experience compatibility tasks you already maintain frequently, and adapt them as you use them on your own pages. The examples proper right here show particular uses, then again the an identical Command can art work with various portions when we give you the comparable prerequisites and references.
Have in mind of the follow-up instructions you keep together with. If the an identical requirement applies each and every time, add it to the saved Command. Keep details that fluctuate between duties throughout the accompanying message or attached Context, so the Command stays reusable without losing the steerage each and every task needs.
The post 10 Instructions You Want To Upload To Your Divi AI Brokers Command Library appeared first on Chic Issues Weblog.
0 Comments