It’s no secret that synthetic intelligence (AI) is changing into an important a part of our day by day lives, from Netflix suggestions to chatbots, and facial detection to textual content editors. Nowadays, the affect of AI is not just noticed on monitors however is felt. An area this is now seeing an inflow of AI’s presence is virtual design and artwork. Conversations are sprouting up in regards to the energy and folks – or lack thereof – collaborating on this medium. Is it imaginable to make use of AI to create superb paintings whilst nonetheless supporting artists? Can AI be used as a device to assist facilitate higher virtual creations? We’d love to assume so, so we’ll discover the usage of ChatGPT and MidJourney with Divi.

On this educational, we’ll use two AI equipment — MidJourney and ChatGPT — to assist affect a homepage design in Divi. We can use the MidJourney bot to create the visible side of our design. Then we will be able to use ChatGPT to create the reproduction that we’ll use in our check. After all, we will be able to recreate the design, the usage of the design from MidJourney and the reproduction from ChatGPT in Divi.

Let’s get into it!

The usage of MidJourney to Encourage Wonderful Internet Design

MidJourney, in step with their website online, “is an unbiased analysis lab exploring new mediums of idea and increasing the imaginative powers of the human species.”. The MidJourney Discord bot lets you use your Discord account to create 4, customized AI-generated pictures from easy textual content activates. You’ll then use different instructions to change and have interaction with the photographs created.

Create a MidJourney Account

Sooner than we commence the usage of the AI, it is important to create an account at the MidJourney Discord server.

If you have already got a Discord account, you can log in on your present account and start the usage of MidJourney immediately.

Input the MidJourney Discord

As soon as at the MidJourney Discord, take a handy guide a rough learn in the course of the quick start guide. This may can help you make yourself familiar with the server’s pointers. You’ll additionally achieve insights into how the bot works and the opposite cool issues you’ll be able to do as soon as you might be comfy the usage of the bot.

Keep in mind that the loose model of MidJourney lets you do 25 queries. While you input the MidJourney Discord server, you need to appear to sign up for a freshmen channel. You’ll see the to be had channels at the server by way of having a look within the menu at the left-hand aspect.

Click on on any freshmen channel to begin producing pictures.

Start Developing with MidJourney

Now that you just’re to your freshmen channel on MidJourney, the true a laugh starts… developing some pictures!

Factor Preliminary Command

We wish to generate some inspiration to create a blank homepage design. To factor your first command, click on within the textbox on the backside appropriate of your display screen. You’ll be as descriptive or concise as you’d like. In our case, we entered, “create a blank, trendy and subject matter design homepage template. Integrated the CN tower. Use the colours white, gray, grey, and gold.”

That is what was once generated from that command.

Right here’s what it looks as if out of doors of Discord.

Refine Preliminary Command

Whilst those layouts are a excellent jumping-off level, let’s see what occurs after we attempt to refine our AI-generated internet design layouts. To do that, we’re going to refine the fourth possibility from our record.

Remodel AI-Generated Design

While you’ve created your first design, MidJourney lets you upscale (make higher) or create diversifications from one among your 4 choices. We determined that we needed to peer some diversifications of the fourth possibility and to make it larger.

Those are the result of MidJourney making diversifications of our fourth design.

Let’s take a better glance.

Realize the addition of parts similar to menus, icons, titles, and social media icons. From this format, we’re going to make use of the fourth possibility. That is the design that we’re going to emulate in Divi.

The usage of ChatGPT to Create AI-Generated Internet Design Replica

Now that our design has been created, we’re going to make use of AI to create the reproduction to enter our design. We can use ChatGPT to create a headline, a brief paragraph, and a call-to-action to make use of on our button.

Create a ChatGPT Account

To start, we create an account with ChatGPT. If you have already got an account, you’ll be able to log in.

To save lots of time, you’ll be able to additionally use your Gmail or Outlook account.

Factor Preliminary Command

As soon as you might be logged in, you’ll be introduced with this display screen. That is the darkish mode model, however there may be a mild mode model.

Let’s get started by way of developing our first request. Within the textual content field, we’re going to ask ChatGPT to “create a brief slogan for a Toronto-based internet design company.”

That is the results of that request.

Refine Replica with ChatGPT

The wonderful thing about ChatGPT is that we will ask many questions and get some nice choices to make use of in our reproduction. Let’s ask for five different diversifications, however let’s ask that each and every variation is, at maximum, 5 phrases. Within the textbox, input, “Make the slogan handiest 5 phrases. Create 10 other diversifications.”

Those are the differences that ChatGPT got here up with for our slogan.

Let’s use possibility 5 for our slogan. We’re going to copy the method for our paragraph of textual content. Let’s input into ChatGPT, “Craft a 5-sentence paragraph selling internet design services and products to Toronto trade homeowners.”

That is the outcome that was once created. It’s beautiful excellent!

As a substitute of requesting extra variations of this paragraph, let’s ask ChatGPT to modify the tone of the welcome paragraph. Let’s ask ChatGPT to “Make this paragraph extra informal, leaning towards mild and fluffy.”

Realize that the tone of the paragraph has turn into extra informal and remains to be on target with what one would wish to introduce their internet design corporate.

To finish our reproduction, let’s create 10 other variations of call-to-action textual content that we will use on our button. Our subsequent command for ChatGTP is, “Get a hold of 5 variations of name to motion textual content that I will use on a button.”

Whilst those choices are nice, they’re a bit of lengthy for a button.

As our ultimate request to ChatGPT, let’s ask it to make our textual content shorter by way of announcing, “cause them to shorter.”

We can use the closing possibility Release Now because the CTA for our button.

The usage of ChatGPT and MidJourney with Divi

Now, we have now each our design inspiration and the content material to make use of inside of this design. We will deliver those findings to Divi and get started construction a real-life operating homepage format. Allow us to continue to start out the usage of ChatGPT and MidJourney with Divi.

Create a New Web page in WordPress

Let’s get started by way of developing a brand new web page in WordPress. From the WordPress Dashboard, we hover over Pages from the left-hand menu. Then, we click on Upload New. This may create a brand spanking new web page.

When your new web page has been created, upload a name. Then, submit the web page by way of clicking at the blue Put up button. Finally, turn on the Divi Builder by way of clicking at the red Use Divi Builder button.

With the Divi Builder activated, click on the blue button that claims Get started Development. We’ll construct our web page from scratch however use belongings from the format generated by way of MidJourney.

Developing Sections and Rows

As soon as the visible builder has loaded, we are actually introduced with a number of column buildings that we will upload to our default row and segment. We can delete this segment and use a Particular segment format as an alternative. Initially, we click on the X button to go out the row variety menu.

Then, we click on at the blue button on the backside of the segment. This may permit us so as to add a brand new segment. We wish to click on the Speciality segment icon. This may permit us so as to add a piece this is very similar to the format that MidJourney generated.

From the choices of Area of expertise sections, we click on the second one possibility.

With our segment decided on, we have now the solution to get started including rows to our segment. After we refer again to the format generated by way of MidJoureny, we see a row containing the headline, paragraph, and call-to-action button. Then, we understand that there’s a ornamental set of columns. So, let’s upload a one-column format that may hang our reproduction.

Subsequent, we’re going to upload every other row underneath this by way of clicking at the inexperienced plus icon. We’ll upload a two-column row beneath the preliminary one-column row. This may serve as as our ornamental columns.

With our Area of expertise segment format now whole, we will now delete the default segment from our web page. Click on at the trash can icon from the segment’s menu to delete it.

Including Divi Modules

That is what our base format looks as if in Divi.

We’re now going so as to add Divi’s native modules to the format to create our homepage. This may act as a low-fi wireframe.

Including the Symbol Module

To start, let’s upload an Image Module to the primary column of our segment. Click on at the grey plus icon throughout the column. Then, choose the Symbol Module icon.

Click on the fairway checkmark to avoid wasting the Symbol Module in position.

Placing the Textual content Modules

Subsequent, we’re going to transport over to the second one column of our segment. Within the first row, we’re going to upload two Text Modules. The primary one will hang the headline, and the second one will hang our paragraph reproduction. Either one of that have been generated in ChatGPT. Click on at the grey plus icon throughout the first row. Then, choose the Textual content Module. That is going to be our Textual content Module maintaining our headline.

We’re now going so as to add our heading content material. Then again, we’re going to structure it to appear to be our MidJourney design. To do that, get a divorce the textual content and use the h3 tag to focus on a key phrase inside of our headline. That is crucial step, as we’ll be making use of separate styling to that a part of the textual content. Click on at the inexperienced test mark to avoid wasting our content material.

Now, we’re going to upload a 2d Textual content Module for our paragraph content material. Click on at the grey plus icon once more, and choose the Textual content Module icon.

This time, then again, upload the paragraph reproduction from ChatGPT and click on the fairway test mark to avoid wasting our content material. To finish this row, we will upload our closing module, which is a Button Module.

Upload Button Module

We’re going to upload a Button Module to this row. To do this, we click on at the grey plus icon and choose the Button Module.

Upload the textual content from ChatGPT to the button’s textual content and click on the fairway test mark to avoid wasting our content material.

Placing the Social Media Apply Module

When you glance carefully at our AI-generated design, you’ll see some icons beneath the picture. We’re going to make use of the Social Media Follow Module so as to add a couple of social media icons underneath our symbol module.

With our Social Media Apply Module added, let’s upload a couple of social media networks to this module. I’ve added 5 to emulate our AI-generated symbol.

Click on the fairway test mark to avoid wasting your social networks. Now, with all our modules in position, we will start styling our homepage format!

Imposing Visible Branding and Design Components

For this subsequent segment of our educational, we will be able to want some exterior equipment to assist us make the most of the belongings generated by way of MidJourney. Whilst we’re the usage of ChatGPT and MidJourney with Divi, those aren’t the one device we’ll use. You’ll want a instrument that may permit you to make a choice the hex codes from the AI-generated symbol. You’ll additionally want a picture editor to crop the photograph from the picture to make use of in our design. We can additionally use Google Fonts to duplicate the fonts created by way of MidJjourney.

The equipment that I used to try this had been:

• ColorZilla: An eyedropper Chrome extension that permits you to make a choice and save hex codes from internet pages.
• Photoshop: To crop and make photograph edits. You’ll additionally use Photoshop to make a choice the hex codes out of your MidJourney symbol.

In the end, use no matter equipment are to be had to you.

Importing Your Symbol

Open your symbol editor of selection, and crop the focal symbol from the unique MidJourney symbol.

Save this symbol on your laborious force. Then in Divi, edit the Symbol Module.

Click on at the equipment icon to open the Media Library. That is the place you’ll add your symbol.

Add your symbol out of your laborious force and insert it into the module.

With our symbol uploaded, we will now transfer to the Design tab of the Symbol Module. Within the Design tab, click on at the Sizing tab. From there, choose Sure subsequent to the Power Complete Width toggle.

Subsequent, at the docket, let’s taste our social media icons.

Styling the Social Media Module

To start, we click on at the equipment icon of our Social Media Icon Module.

As soon as we have now all our social media hyperlinks introduced to us, we will be able to cross into each and every one and take away the background. To do this, click on at the equipment icon subsequent to each and every community.

Then, click on at the Background tab and delete the background colour provide. Click on the fairway test mark, then repeat this for all of the social media networks you have got added to this module.

After casting off the backgrounds for each and every social media community, click on at the Design tab. Set the alignment of the icons to the right-hand aspect, precisely as it’s within the MidJourney symbol.

Now, let’s upload some colour to our icons. Click on at the Icon tab, and set the icon colour to #000000.

After all, we click on at the Spacing tab so as to add some padding to the correct of our module. Upload a appropriate padding price of 25px. Then, click on at the inexperienced test mark to avoid wasting our edits.

Styling Our Textual content

At the moment, we have now styled our modules at the left-hand aspect. We can now transfer onto the right-hand aspect, starting with our headliner Textual content Module. Click on at the equipment icon in order that we might input the Textual content Module settings.

We navigate directly to the Design tab. Subsequent, click on at the Textual content tab. We will reasonably make out that the headline textual content is in all caps. So, let’s set the textual content font taste to All Caps.

Then, we set the alignment to heart and the textual content colour to Darkish.

We used the H3 tag to attract consideration to the center phrase in our headline. So, we now click on at the Heading Textual content tab. Then, we click on at the H3 heading to start to taste it. Let’s set the font for the heading to Cantarell.

Subsequent, let’s building up the font measurement to 63px. After all, we’ll set the letter spacing to -5px. Then, we will click on the fairway checkmark to avoid wasting our textual content adjustments.

For the paragraph, the default Divi settings a very similar to that which MidJourney created. As such, we will be able to merely trade the alignment of the textual content. Input the textual content settings by way of clicking at the equipment icon.

Then, choose the Design tab. After all, from the Textual content tab, set the alignment to the middle. Save your adjustments by way of clicking the fairway checkmark.

Customizing the Button

For our Button Module, we’ll use our colour picker instrument to search out the button colour from MidJourney. I used the picker in Photoshop and found out that the background colour’s hex code is #c1aa85.

With this data, we will transfer into Divi and start designing our button. As at all times, click on at the equipment icon to go into the module’s settings.

Then, click on at the Design tab and then click on the Button tab. For the Use Customized Types for Button Choice, choose sure.

Those are the settings that we’ll be the usage of to taste our button.

Button Design Settings:

• Button Textual content Dimension: 14px
• Button Textual content Colour: #ffffff
• Button Background Colour: #c1aa85
• Button Border Width: 0px
• Button Border Radius: 15px
• Button Font Taste: All Caps
• Spacing:
  • Best and Backside Padding: 10px
  • Left and Proper Padding: 35px

That is what our Button Module now looks as if after the usage of MidJourney to encourage our design the usage of Divi’s equipment.

Developing Ornamental Columns

The overall design piece of our format is the ornamental columns beneath our reproduction. To create those, we will be able to want a Divider Module in each and every column. To start, click on at the grey plus icon and choose the Divider Icon.

Whilst within the Content material tab of our Divider Module, de-select the Display Divider possibility underneath Visibility.

Subsequent, transfer to the Design tab. From there, click on at the Spacing tab. Set the left and appropriate padding to 100%. Whilst it looks as if there isn’t a lot taking place with this module, all will probably be published after we upload our colours and padding to our sections, rows, and columns. Click on at the inexperienced test mark to avoid wasting your adjustments.

Reproduction the Divider Module and transfer it into the column subsequent to it.

Including Backgrounds, Spacing, and Padding

Now that every one our modules are styled and designed, we will upload the completing touches to our homepage format. For reference, that is the place we stand.

A a long way cry from the design that MidJourney created for us. Then again, with a little of colour and spacing, we will be able to achieve success at the usage of ChatGPT and MidJourney with Divi.

To start out, let’s click on the equipment icon of our Area of expertise segment.

Subsequent, click on the Background tab. The usage of our colour picker, we deduced that the background colour for our segment will probably be #e7e6e4. So, set the background colour for our segment to #e7e6e4.

Now, let’s transfer to the Design tab. From right here, click on at the Sizing tab. Listed here are the settings that you just’ll want within the Sizing tab.

Sizing Design Settings:

• Equalize Column Heights: Sure
• Use Customized Gutter Width: Sure
• Gutter Width: 1
• Width: 100%
• Interior Width: 100%
• Interior Width Max: 100%

Now, we transfer to the Spacing tab. We would like all of the padding and module throughout the segment to be set to 0. Listed here are the settings that we’ll be the usage of there.

Spacing Design Settings:

• Margin:
  • Best and Backside: 0px
  • Left and Proper: 0px
• Padding:
  • Best and Backside: 0px
  • Left and Proper: 0px
• Column 1 Padding:
  • Best and Backside: 0px
  • Left and Proper: 0px
• Column 2 Padding:
  • Best and Backside: 0px
  • Left and Proper: 0px

As soon as those settings are in position, keep in mind to avoid wasting them by way of clicking the fairway test mark. With those settings, we will already see that our design in Divi is spacing as much as glance similar to that which MidJourney generated.

Spacing, Backgrounds, and Padding for the 2d Column

We now transfer directly to the second one column of our segment. We commence enhancing the primary row inside of this column by way of clicking at the equipment icon for the row.

Whilst on this row, click on at the Design tab. Subsequent, we transfer to the Spacing tab. Set the padding for the highest, backside, left, and appropriate to 50px. We end off this segment by way of saving our paintings.

We transfer onto our ultimate row, once more, clicking at the equipment icon to go into the row settings.

For the 2 columns which are part of this row, we will be able to use the background colours #b0b2b1 and #bfb192 for the primary and 2d columns respectively. Click on at the equipment icon subsequent to each and every column.

Then, set the background colour to each and every column’s respective colour.

With each columns styled, understand that we’re getting nearer to our finish product. To tie all of it in combination, we wish to upload some ultimate spacing edits to the row the place those ornamental columns live. To start out, click at the Design tab of the row. Then, set the Customized Gutter Width to Sure. Set the width of the gutter to at least one. Additionally, turn on the Equalize Column Peak possibility.

Subsequent, transfer to the Spacing tab and set the margin and padding to 0.

And with that, we’ve effectively used ChatGPT and MidJourney to create a homepage format in Divi. Right here’s our completed product!

Ultimate Ideas on The usage of ChatGPT and MidJourney with Divi

The usage of ChatGPT and MidJourney with Divi let you to brainstorm concepts on your internet design quicker. The usage of AI in internet design does now not essentially imply the tip of virtual design as we are aware of it. It’s imaginable to permit AI into your workflow to assist accelerate processes. AI too can assist to deliver issues to the vanguard in phrases or ideas that would possibly not had been highlighted. With Divi, it’s simple to re-create AI-generated layouts and designs. When you aren’t a herbal author, developing reproduction for your online business or your shopper’s internet sites may well be tough. Gear like ChatGPT let you duvet a blind spot you would possibly not have discovered you had. Believe the usage of ChatGPT and MidJourney with Divi on your subsequent venture.

Have you ever began to make use of AI to your internet design trade? Would you imagine the usage of equipment like ChatGPT or MidJourney to your design procedure? Tell us your ideas within the remark segment underneath. Let’s get a dialogue going!

The put up How to Use AI to Create Amazing Web Design with Divi (Using ChatGPT & MidJourney) gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more