It’s no secret that artificial intelligence (AI) is turning into an important part of our daily lives, from Netflix tips to chatbots, and facial detection to text editors. At the present time, the impact of AI isn’t simply seen on presentations then again is felt. An area that is now seeing an influx of AI’s presence is digital design and art work. Conversations are sprouting up regarding the power and other folks – or lack thereof – participating in this medium. Is it conceivable to use AI to create glorious artwork while nevertheless supporting artists? Can AI be used as a tool to be in agreement facilitate upper digital creations? We’d like to think so, so we’ll uncover the use of ChatGPT and MidJourney with Divi.

In this tutorial, we’ll use two AI equipment — MidJourney and ChatGPT — to be in agreement impact a homepage design in Divi. We can use the MidJourney bot to create the visual aspect of our design. Then we will use ChatGPT to create the copy that we’ll use in our check out. Finally, we will recreate the design, the use of the design from MidJourney and the copy from ChatGPT in Divi.

Let’s get into it!

Using MidJourney to Inspire Very good Web Design

MidJourney, in step with their internet web site, “is an unbiased research lab exploring new mediums of idea and extending the imaginative powers of the human species.”. The MidJourney Discord bot signifies that you’ll be able to use your Discord account to create 4, custom designed AI-generated pictures from simple text turns on. You’ll have the ability to then use other directions to change and interact with the pictures created.

Create a MidJourney Account

Faster than we commence the use of the AI, it is very important create an account on the MidJourney Discord server.

If you already have a Discord account, you can log in to your provide account and get started the use of MidJourney immediately.

Enter the MidJourney Discord

Once on the MidJourney Discord, take a to hand information a coarse be informed right through the fast get started information. This will allow you to make yourself familiar with the server’s guidelines. You’re going to moreover gain insights into how the bot works and the other cool problems you’ll do once you could be comfortable the use of the bot.

Understand that the free type of MidJourney signifies that you’ll be able to do 25 queries. When you enter the MidJourney Discord server, you want to look to join a inexperienced persons channel. You’ll have the ability to see the available channels on the server via looking inside the menu on the left-hand side.

Click on on on any inexperienced persons channel to start generating pictures.

Get started Rising with MidJourney

Now that you simply’re to your inexperienced persons channel on MidJourney, the true fun begins… rising some pictures!

Issue Initial Command

We want to generate some inspiration to create a clean homepage design. To issue your first command, click on on inside the textbox at the bottom suitable of your show. You’ll have the ability to be as descriptive or concise as you’d like. In our case, we entered, “create a clean, stylish and material design homepage template. Built-in the CN tower. Use the colors white, grey, gray, and gold.”

That’s what was once as soon as generated from that command.

Proper right here’s what it looks like outside of Discord.

Refine Initial Command

While the ones layouts are a good jumping-off stage, let’s see what happens once we try to refine our AI-generated web design layouts. To check out this, we’re going to refine the fourth risk from our tick list.

Change into AI-Generated Design

When you’ve created your first design, MidJourney signifies that you’ll be able to upscale (make upper) or create diversifications from one among your 4 possible choices. We determined that we had to glance some diversifications of the fourth risk and to make it better.

The ones are the results of MidJourney making diversifications of our fourth design.

Let’s take a greater look.

Perceive the addition of parts very similar to menus, icons, titles, and social media icons. From this construction, we’re going to use the fourth risk. That’s the design that we’re going to emulate in Divi.

Using ChatGPT to Create AI-Generated Web Design Copy

Now that our design has been created, we’re going to use AI to create the copy to go into our design. We can use ChatGPT to create a headline, a temporary paragraph, and a call-to-action to use on our button.

Create a ChatGPT Account

To begin, we create an account with ChatGPT. If you already have an account, you’ll log in.

To avoid wasting a lot of time, you’ll moreover use your Gmail or Outlook account.

Issue Initial Command

Once you could be logged in, you’ll be offered with this show. That’s the dark mode type, then again there is also a gentle mode type.

Let’s get began via rising our first request. Inside the text box, we’re going to ask ChatGPT to “create a temporary slogan for a Toronto-based web design corporate.”

This is the result of that request.

Refine Copy with ChatGPT

The beauty of ChatGPT is that we will ask many questions and get some great possible choices to use in our copy. Let’s ask for 5 other diversifications, then again let’s ask that each and every variation is, at most, 5 words. Inside the textbox, enter, “Make the slogan very best 5 words. Create 10 different diversifications.”

The ones are the diversities that ChatGPT were given right here up with for our slogan.

Let’s use risk 5 for our slogan. We’re going to replicate the process for our paragraph of text. Let’s enter into ChatGPT, “Craft a 5-sentence paragraph promoting web design services and products to Toronto business house owners.”

That’s the finish end result that was once as soon as created. It’s stunning good!

Instead of inquiring for added diversifications of this paragraph, let’s ask ChatGPT to change the tone of the welcome paragraph. Let’s ask ChatGPT to “Make this paragraph further casual, leaning against delicate and fluffy.”

Keep in mind that the tone of the paragraph has develop into further casual and is still on track with what one would need to introduce their web design company.

To complete our copy, let’s create 10 different diversifications of call-to-action text that we will use on our button. Our next command for ChatGTP is, “Come up with 5 diversifications of brand to movement text that I will be able to use on a button.”

While the ones possible choices are great, they’re rather long for a button.

As our final request to ChatGPT, let’s ask it to make our text shorter via saying, “cause them to shorter.”

We can use the final risk Unlock Now since the CTA for our button.

Using ChatGPT and MidJourney with Divi

Now, we have now now each and every our design inspiration and the content material subject matter to use within this design. We can lift the ones findings to Divi and get began development a real-life working homepage construction. Let us proceed to begin out the use of ChatGPT and MidJourney with Divi.

Create a New Internet web page in WordPress

Let’s get began via rising a brand spanking new internet web page in WordPress. From the WordPress Dashboard, we hover over Pages from the left-hand menu. Then, we click on on Add New. This will create a brand new internet web page.

When your new internet web page has been created, add a establish. Then, publish the internet web page via clicking on the blue Publish button. In the end, flip at the Divi Builder via clicking on the crimson Use Divi Builder button.

With the Divi Builder activated, click on at the blue button that says Get began Building. We’ll assemble our internet web page from scratch then again use assets from the construction generated via MidJourney.

Rising Sections and Rows

As quickly because the visual builder has loaded, we nowadays are offered with various column structures that we will add to our default row and section. We can delete this section and use a Explicit section construction instead. At first, we click on at the X button to move out the row selection menu.

Then, we click on on on the blue button at the bottom of the section. This will allow us in an effort to upload a brand spanking new section. We want to click on at the Speciality section icon. This will allow us in an effort to upload a work that is similar to the construction that MidJourney generated.

From the selections of Strong point sections, we click on on the second risk.

With our section determined on, we’ve the method to get began together with rows to our section. When we refer once more to the construction generated via MidJoureny, we see a row containing the headline, paragraph, and call-to-action button. Then, we remember that there’s a decorative set of columns. So, let’s add a one-column construction that may hang our copy.

Next, we’re going to add each and every different row beneath this via clicking on the green plus icon. We’ll add a two-column row underneath the initial one-column row. This will function as our decorative columns.

With our Strong point section construction now complete, we will now delete the default section from our internet web page. Click on on on the trash can icon from the section’s menu to delete it.

Together with Divi Modules

That’s what our base construction looks like in Divi.

We’re now going in an effort to upload Divi’s local modules to the construction to create our homepage. This will act as a low-fi wireframe.

Together with the Image Module

To begin, let’s add an Symbol Module to the principle column of our section. Click on on on the gray plus icon right through the column. Then, make a selection the Image Module icon.

Click on at the golfing inexperienced checkmark to avoid wasting a lot of the Image Module in place.

Hanging the Text Modules

Next, we’re going to move over to the second column of our section. Inside the first row, we’re going to add two Textual content Modules. The principle one will hang the headline, and the second will hang our paragraph copy. Both of which have been generated in ChatGPT. Click on on on the gray plus icon right through the primary row. Then, make a selection the Text Module. This is going to be our Text Module preserving our headline.

We’re now going in an effort to upload our heading content material subject matter. Alternatively, we’re going to construction it to seem to be our MidJourney design. To check out this, break up the text and use the h3 tag to focus on a keyword within our headline. This is crucial step, as we’ll be applying separate styling to that part of the text. Click on on on the green take a look at mark to avoid wasting a lot of our content material subject matter.

Now, we’re going to add a second Text Module for our paragraph content material subject matter. Click on on on the gray plus icon over again, and make a selection the Text Module icon.

This time, on the other hand, add the paragraph copy from ChatGPT and click on at the golfing inexperienced take a look at mark to avoid wasting a lot of our content material subject matter. To complete this row, we will add our final module, which is a Button Module.

Add Button Module

We’re going to add a Button Module to this row. To do that, we click on on on the gray plus icon and make a selection the Button Module.

Add the text from ChatGPT to the button’s text and click on at the golfing inexperienced take a look at mark to avoid wasting a lot of our content material subject matter.

Hanging the Social Media Observe Module

Whilst you look moderately at our AI-generated design, you’ll see some icons underneath the image. We’re going to use the Social Media Apply Module in an effort to upload a few social media icons underneath our image module.

With our Social Media Observe Module added, let’s add a few social media networks to this module. I’ve added 5 to emulate our AI-generated image.

Click on at the golfing inexperienced take a look at mark to avoid wasting a lot of your social networks. Now, with all our modules in place, we will get started styling our homepage construction!

Implementing Visual Branding and Design Portions

For this next section of our educational, we will need some external equipment to be in agreement us profit from the assets generated via MidJourney. While we’re the use of ChatGPT and MidJourney with Divi, the ones aren’t the only device we’ll use. You’re going to desire a device that may allow you to select the hex codes from the AI-generated image. You’re going to moreover desire a image editor to crop the image from the image to use in our design. We can moreover use Google Fonts to replicate the fonts created via MidJjourney.

The equipment that I used to do which have been:

• ColorZilla: An eyedropper Chrome extension that allows you to select and save hex codes from web pages.
• Photoshop: To crop and make image edits. You’ll have the ability to moreover use Photoshop to select the hex codes from your MidJourney image.

In any case, use regardless of equipment are available to you.

Uploading Your Image

Open your image editor of variety, and crop the focal image from the original MidJourney image.

Save this image to your laborious force. Then in Divi, edit the Image Module.

Click on on on the equipment icon to open the Media Library. That’s the position you’ll upload your image.

Upload your image from your laborious force and insert it into the module.

With our image uploaded, we will now switch to the Design tab of the Image Module. Inside the Design tab, click on on on the Sizing tab. From there, make a selection Positive next to the Power Whole Width toggle.

Next, on the docket, let’s style our social media icons.

Styling the Social Media Module

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

Once we have now now all our social media links offered to us, we will cross into each and every one and remove the background. To do that, click on on on the equipment icon next to each and every neighborhood.

Then, click on on on the Background tab and delete the background color supply. Click on at the golfing inexperienced take a look at mark, then repeat this for all the social media networks it’s essential to have added to this module.

After taking away the backgrounds for each and every social media neighborhood, click on on on the Design tab. Set the alignment of the icons to the right-hand side, exactly because it’s inside the MidJourney image.

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

Finally, we click on on on the Spacing tab in an effort to upload some padding to the right kind of our module. Add a suitable padding value of 25px. Then, click on on on the green take a look at mark to avoid wasting a lot of our edits.

Styling Our Text

At the present time, we have now now styled our modules on the left-hand side. We can now switch onto the right-hand side, beginning with our headliner Text Module. Click on on on the equipment icon so as that we might in all probability enter the Text Module settings.

We navigate in an instant to the Design tab. Next, click on on on the Text tab. We can rather make out that the headline text is in all caps. So, let’s set the text font style to All Caps.

Then, we set the alignment to heart and the text color to Dark.

We used the H3 tag to draw attention to the middle word in our headline. So, we now click on on on the Heading Text tab. Then, we click on on on the H3 heading to begin to style it. Let’s set the font for the heading to Cantarell.

Next, let’s increase the font measurement to 63px. Finally, we’ll set the letter spacing to -5px. Then, we will click on at the golfing inexperienced checkmark to avoid wasting a lot of our text changes.

For the paragraph, the default Divi settings a similar to that which MidJourney created. As such, we will simply alternate the alignment of the text. Enter the text settings via clicking on the equipment icon.

Then, make a selection the Design tab. Finally, from the Text tab, set the alignment to the center. Save your changes via clicking the green checkmark.

Customizing the Button

For our Button Module, we’ll use our color picker device to go looking out the button color from MidJourney. I used the picker in Photoshop and discovered that the background color’s hex code is #c1aa85.

With this information, we will switch into Divi and get started designing our button. As all the time, click on on on the equipment icon to enter the module’s settings.

Then, click on on on the Design tab and then click on at the Button tab. For the Use Custom designed Varieties for Button Risk, make a selection certain.

The ones are the settings that we’ll be the use of to style our button.

Button Design Settings:

• Button Text Measurement: 14px
• Button Text Color: #ffffff
• Button Background Color: #c1aa85
• Button Border Width: 0px
• Button Border Radius: 15px
• Button Font Style: All Caps
• Spacing:
  • Best and Bottom Padding: 10px
  • Left and Correct Padding: 35px

That’s what our Button Module now looks like after the use of MidJourney to inspire our design the use of Divi’s equipment.

Rising Decorative Columns

The total design piece of our construction is the decorative columns underneath our copy. To create the ones, we will desire a Divider Module in each and every column. To begin, click on on on the gray plus icon and make a selection the Divider Icon.

While inside the Content material subject matter tab of our Divider Module, de-select the Show Divider risk underneath Visibility.

Next, switch to the Design tab. From there, click on on on the Spacing tab. Set the left and suitable padding to 100%. While it looks like there isn’t so much happening with this module, all can be published once we add our colors and padding to our sections, rows, and columns. Click on on on the green take a look at mark to avoid wasting a lot of your changes.

Copy the Divider Module and switch it into the column next to it.

Together with Backgrounds, Spacing, and Padding

Now that every one our modules are styled and designed, we will add the finishing touches to our homepage construction. For reference, that’s the position we stand.

A a ways cry from the design that MidJourney created for us. Alternatively, with moderately of color and spacing, we will succeed in luck at the use of ChatGPT and MidJourney with Divi.

To begin out, let’s click on at the equipment icon of our Strong point section.

Next, click on at the Background tab. Using our color picker, we deduced that the background color for our section can be #e7e6e4. So, set the background color for our section to #e7e6e4.

Now, let’s switch to the Design tab. From appropriate right here, click on on on the Sizing tab. Listed here are the settings that you simply’ll need inside the Sizing tab.

Sizing Design Settings:

• Equalize Column Heights: Positive
• Use Custom designed Gutter Width: Positive
• Gutter Width: 1
• Width: 100%
• Inside Width: 100%
• Inside Width Max: 100%

Now, we switch to the Spacing tab. We would like all the padding and module right through the section to be set to 0. Listed here are the settings that we’ll be the use of there.

Spacing Design Settings:

• Margin:
  • Best and Bottom: 0px
  • Left and Correct: 0px
• Padding:
  • Best and Bottom: 0px
  • Left and Correct: 0px
• Column 1 Padding:
  • Best and Bottom: 0px
  • Left and Correct: 0px
• Column 2 Padding:
  • Best and Bottom: 0px
  • Left and Correct: 0px

Once the ones settings are in place, be mindful to avoid wasting a lot of them via clicking the green take a look at mark. With the ones settings, we will already see that our design in Divi is spacing up to look very similar to that which MidJourney generated.

Spacing, Backgrounds, and Padding for the second Column

We now switch immediately to the second column of our section. We begin bettering the principle row within this column via clicking on the equipment icon for the row.

While in this row, click on on on the Design tab. Next, we switch to the Spacing tab. Set the padding for the very best, bottom, left, and suitable to 50px. We finish off this section via saving our artwork.

We switch onto our final row, over again, clicking on the equipment icon to enter the row settings.

For the two columns which can also be a part of this row, we will use the background colors #b0b2b1 and #bfb192 for the principle and second columns respectively. Click on on on the equipment icon next to each and every column.

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

With each and every columns styled, remember that we’re getting closer to our end product. To tie it all together, we need to add some final spacing edits to the row where the ones decorative columns live. To begin out, click on the Design tab of the row. Then, set the Custom designed Gutter Width to Positive. Set the width of the gutter to no less than one. Moreover, flip at the Equalize Column Height risk.

Next, switch to the Spacing tab and set the margin and padding to 0.

And with that, we’ve successfully used ChatGPT and MidJourney to create a homepage construction in Divi. Proper right here’s our finished product!

Ultimate Concepts on Using ChatGPT and MidJourney with Divi

Using ChatGPT and MidJourney with Divi will let you to brainstorm ideas to your web design quicker. Using AI in web design does no longer necessarily suggest the top of digital design as we comprehend it. It’s conceivable to allow AI into your workflow to be in agreement boost up processes. AI can also be in agreement to hold problems to the leading edge in words or concepts that won’t had been highlighted. With Divi, it’s easy to re-create AI-generated layouts and designs. Whilst you aren’t a natural writer, rising copy for your enterprise or your shopper’s internet pages might be tough. Tools like ChatGPT will let you duvet a blind spot you won’t have found out you had. Consider the use of ChatGPT and MidJourney with Divi to your next problem.

Have you ever ever started to use AI to your web design business? Would you believe the use of equipment like ChatGPT or MidJourney to your design process? Let us know your concepts inside the commentary section beneath. Let’s get a discussion going!

The put up The best way to Use AI to Create Superb Internet Design with Divi (The use of ChatGPT & MidJourney) appeared first on Sublime Issues Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more