Hey folks, Robey here with the Divi Engine team
and today I'm bringing you probably one of the most exciting tutorials I've done in months. Now
the main component of this tutorial is one of the most talked about AI tools since my journey and
Dali too. Now I'm not going to waste your time so why don't we just go and get right to it
and for those of you that don't want to just sit there and listen to me blab on about the
tool and just get to the actual tutorial part, use the chapters to get to exactly what
you're looking for today. So let's go. [Music] Welcome to our tutorial and using ChatGTP
to write code for your divi site. In this video, we're going to be showing you how to harness the
power of the world's most advanced language model to help streamline your web development workflow.
We're going to be splitting it into five mini tutorials where we're going to show you various
methods of using ChatGDP to enhance your Divi sites. But before we get into the nitty-gritty of
all of this, why don't we talk about what ChatGTP is and what it can do? Let's take a look. ChatGPT
is a large language model developed by OpenAI. It's been trained on a massive data set of text
from the Internet, which means it can understand and generate text on just about any topic you can
think of. From writing code to composing poetry, CHAPGPT can do it all. DIVY THEME FLOWS, ELEGON
DESIGN, SHINESBRIGHT, and WAPESIDE Beauty Blooms. That's a high-cool brought to you by CHATGTP.
Beautiful CHATGTP. Beautiful. Thank you. Now, some of you might be wondering, what's the
difference between CHATGTP and GPD? Well, CHATGTPT is a specific implementation of the
GPD language model. GPT stands for generative, pre-trained transformer, or something like
that, who knows what that means. But the important thing is that both GPT and chat GPT
are developed by OpenAI, but chat GPT is fine tuned for conversational language and is better
suited for tasks, such as generating responses in a conversation or chatbot application. GPT on
the other hand is more general purpose and can be fine tuned for a wide range of language tasks,
such as language translation and summarization and some of you might have even played around with
Dali too to generate some gorgeous images. Now in this tutorial we'll be utilizing ChatGTP to write
us some code for our Divi website. We're going to be doing this in both CSS and jQuery. But before
we get going why don't we take a look at another few examples of how I can utilize ChatGTP and
maybe even further help you out aside from writing code or within the Divi theme. One of the most
popular users for chat GTP as content creation. You can use it to generate blog posts, articles,
and even entire books. All you have to do is give it a topic and a few sentences to get started
and it will take care of the rest. Another great use for chat GTP is language translation. It can
translate text from any language to another with super high accuracy. This can be especially useful
for businesses that operate in multiple countries. Chat GBT can be used for for summarization, you
can give it a long article or document, and it will generate a shorter, more concise version.
This can save you a lot of time when you're trying to read through a lot of information. All
right, so now that we've gone through a bunch of different other uses for ChatGDP, which you
might even be able to use to write copy for your sites or whatever it might be, why don't
we move on to the main topic of this tutorial, which is to utilize ChatGDP to write code
for your divi sites. So let's go. Okay, right. So before we can start utilizing ChatGTP
to write our code for a Divi website, you need to go to the OpenAI website at chat.openai.com.
And right from there, you can sign up for a new account. You will need to provide your email
address and create a password, but you can also log in with your Google account if you have one.
Now, once you have your account, you'll be able to access the OpenAI API and use ChatGPT. And again,
just go to chat.openai.com you'll be all set to get going with the tutorial. Okay, so to start
writing your CSS and jQuery code, you need to give chatGTPS some information about the site
we're building. This will include the layout, colors, and other design elements that we might
want to use. Once chatGTPS has this information, it will generate the CSS or jQuery code for us.
We can then just go ahead and copy and paste this code into our divv site and look like an absolute
code ninja. So without further ado, why don't we go and ninja it up and start with our first mini
tutorial. Alright, so now to get started here, I have a clean divv install and I have just
imported one of these free divv layouts that you can just import straight from the divv theme. And
now what we're going to want to do though is head over to chatGTP, you've got your account set up
and you can start a bunch of chats. So what's cool about chat GTP is that you've got this new chat
option here, where you can have multiple chats and I'll actually go ahead and save your history.
So first up, we're going to be showing you how to create some button module animations for Divi with
chat GTP. You can easily add any type of effects you want or animations to your buttons to make
them kind of stand out and grab the attention of your site visitors. So let's go ahead and do that
right now. Now I'm going to struggle through this and show you exactly what's involved. So if
I need chatGDP to do extra things for me, I'm going to make it do it. Utilizing this with
Divi, the first thing you're going to want to do maybe is come to our page here and I have the
edit window open and I'm going to go and target that button on the homepage and I'm going to go to
the advanced tab because I want to be able to tell chatGDP well, I'm going to have a certain class
here that I wanted to utilize for writing the code So it's easier to add it to my page. So I'm
just going to say chat GPT underscore button. Why not? And I'm going to copy that. I'm going to save
that in there. And then I'm going to head over to chat GPT. And I will tell it, please write me some
CSS that will generate Paul Sating button that has a class of-- and then the class name that we
added. So chat GPT on the score button. I'll just put the period there to define it as that.
That wall, animate my divi button, that CSS that will animate a divi button to make it look like
it is slowly pulsating. Let's see what it does. So you can see that it's like immediately writing
all the code for you. It interprets my app hazard text there, but I've been playing with
this quite a bit. And I quite honestly have not had bad feedback. So here you can go
ahead and you can copy the code now and we'll go back to my divi install here. Now you can
go ahead and add code to your theme options, your divi CSS custom CSS options. like over here,
you'll go divvy, theme, options, and you can just paste that in here. And it's probably the best
place to go ahead and put this. So if I go ahead and save that, let's go to the front and then
see what the button does. And it does nothing. Ha, and of course, I think rookie mistake, I
did not update the page so that that classes registered how smart of me. Like I said, I'm gonna
keep my mistakes in here. So let me refresh the page now. And there you go. We have a pulsating
button And that was so easy. And this is a setting not found in Divi, just like that. Two minutes,
awesomeness. So let's go ahead and take a look at another example. Wouldn't it be cool if when
we hover these menu items here, if they maybe, I don't know, did like a little hovering
up and down animation for the hovered item? Yeah, I think that'd be quite cool. So let's come
back over here. Now we can start a new chat, which is one of my favorite things. You can go back and
reuse this code. And the best part is chatty tp is free, man. That's insane. So why don't we go ahead
and say, right? Let me see as that. We'll make the menu item. I hover in my dilly theme menu, have an
animation that makes it look like it is hovering up and down slightly. I don't know, that's a lot
of stuff. So I'll be surprised if this works. I tested this with the underlying animation. So
this is all new, straight with all the faults and anything that might happen. So let's see.
And sometimes it times out because everybody's utilizing chatGTP at the moment and it's just the
hottest thing right now. So let's wait and see. And there we go. It's finally writing some code. And now my experience with this has been,
Sometimes you need to instruct chat to GTP a little bit more on exactly what you're
trying to do. You want to make sure that you're as descriptive as possible. The more
descriptive you are, the easier it's going to be to make this work. So it's still kind of typing
there, but it looks like we're done now. Awesome. So we are just going to test this right out of
the box and see what it does. But like I said, sometimes we might need to tweak it a little bit.
So we can come back here to our theme options. I'm going to go ahead and paste this code. And it's
nice that it even comments the code for you. I think that is one of the most awesome features. So
let's save that and go back to the front end and that's not doing what we wanted to do, right?
Okay, so clearly this did not work. And what I'm thinking is we're using the theme folder for this.
So why don't we go add a class to the specific menu and then feed that to chat gtb similar to
what we did with the button here and see whether that makes a difference. So I'm gonna go ahead and
enable the visual folder. so I get that full front site editing. So I don't need to go into the theme
builder itself. Yeah, we've got our menu module. Right, and then we'll get the settings for it.
And now what I'm gonna do is I'm gonna add a class and I'm just gonna say chat GPT on the score menu.
And we'll just kinda use this naming convention as we go through, maybe that'll work. Of course, I
tried the easy one before I tried the hard one, but you know, this is how we go. because
you probably run into issues too as you try to do this. So let's get back here to
this setting. And then I'm going to say, please adapt the code to make a menu module line
item. Other line item have the hover animation when the user hovers it with the mouse cursor. And
then a menu module, a menu module with the class and the class name we just set. And let's see what
that does. Okay, so now it's going through and it's kind of refactoring that code again and it
looks like it's the first line that it's changing. And now what this is going to do of course
also is it's going to simplify the utilization of this a bit because now it's not going
to look for the header specifically. It's going to look for a menu module with a chat
GPT menu. So we can go see if this works by going to our theme options and then we'll just
overwrite this code. I'm going to save that. Okay, and then let's go to the front end and let's
keep our fingers crossed here. There we go. Bam. Now you can see that it's only doing like
a hop, but that's kind of cool, right? Now you can tell it can you make it so that it
looks like it hovers up and down in the air. And I'm really going into this one because I
want to show you how to really drill down to what you're looking for because of course this is
still just a computer trying to interpret what a human is elegant to do. So this gives you just
a great idea of how one can go ahead and make this happen but I I can kind of see already,
it's not looping the animation. So let's see, it's giving you also like a description of how
you can go ahead and modify the code to suit your own specific needs. And I'm just gonna tell
it and it doesn't let you type until it's done, which is fine. That's respectful, I guess.
But let's say it, please make it loop. And then it'll go. And now it should probably
say infinite. Yeah, there we go. That's what I was looking for. And we're going to go ahead
and add that back in, copy the code, theme options. And let's replace our code here, save
the changes. And now we go back to the front end. That's not the prettiest animation on Earth,
but you kind of get the idea. Now you can go further and say, hey, can you make it more gentle
and more soft? And stuff like that actually does interpret that language. So we've achieved two
goals so far. It's not the best animation yet, but it's more of a demonstration for you. So
let's get to the next example here, and I think you guys are like this one. Now what if we added
a nice gradient background that animates and moves around in this top section? Yeah, that would look
pretty awesome, I think. So what we're gonna be doing is showing you how to add this animated
background to a divvy section. Now this can make your sections look really cool and give you
a website a super unique look and feel. And I've seen this type of animation on sites like Stripe,
for example. So let's get into it. Let's go back to chat GTP and we'll start a new chat and we'll
say, can you write me some CSS that wall, add an animated gradient background with
five colors to a divvy theme section. Let's see what that does. See how
quick it goes, man? It's insane to me. I mean, this is going to redefine the way
people do write code and stuff like that. It's defining our background gradient there,
and then it's going to do the animation. And now it's going to exactly tell you how to add
it. So if you add it to the sections class field, it's going to have that background. So let's go
ahead and copy this. Let's go here to our layout, of course. And we're probably gonna have to go
and let's see how big this section is. Okay, cool. What I would wanna do is I'm gonna just delete the
background that's there. I don't want any type of weird stuff overriding each other. Oh, actually,
and we just first need to put this code into this area in our custom CSS. And then what
we do is we just copy this class name. And what's cool about this is now you can use it on
any section, you just add that class name. So let's save this. We'll come back here. We're
going to go to the Advanced tab, Custom CSS, and ID classes, of course, and then add that
gradient class. And fingers crossed, this works on the first try. We had some trouble with that last
one, didn't we? There we go. How awesome is that? I'm just-- every time it still takes my breath
away, it's insane. But how cool is that? So very, very helpful and beautiful, honestly.
And now you can go back and you can say, can you make the gradient, radial and exclude,
that's not how you spell that, exclude, green. Oh, let's just scroll down. I mean, you can literally
just go and tell it what you want out of it. So it will go and it will tweak and it will tweak again.
and just generate all these awesome effects. I really, I think coders would be a little worried
about this. So I'm gonna copy this. I'm gonna go back in here to my theme options and I'm going to
replace this CSS. Bop, bop, bop, bop, here we go. Paste that in there, save the changes. And I'd see
what that did. Yeah, you could see kinda like now, it's like a circle going through. I actually
quite like this one a lot more to be honest with you. That's awesome. Very cool. So that's
another example. That's three minute tutorials down so far. We're going on to the fourth one and
things are going to get interesting now. So, lot of animations are pretty popular on the internet
because they're lightweight, they're easily customizable, and they look great on any site. So,
what if we wanted to add a lot of animations to our Divi site? Yeah, we can do that. So, let's go
back to ChatGTP. I almost forgot what I'm talking about. And we are going to say, please write
me some code that will add a lottie animation to column in the divi folder. And I just need
to learn to spell again, typing too fast. And there you go. And there it goes, just thinking
and cranking it out. And it says, use a code module. It even tells you what you need to add to
the page to do this. So it really blows my mind. And now this is the first time it's actually going
to include some JavaScript view. And it's going to obviously be the Latte JavaScript. And it's
pulling it from CloudFarid. It already knows the only step we need to do is go ahead and select or
download or copy the path of a Latte animation. So I'm going to let this finish up. Actually,
why don't we just go and copy the code? Because all we need to do is go and add it to
a code module. So let's go over here back to the layout for our page. We've got a
column here. And if we look on the front end, it's got this big image there. So why don't we
go ahead and delete the image, and we're going to replace it with the animation. So we're going
to say code modules. Why don't we want it as to use? And the cool thing here is you just literally
dump the code right in there. But we need to find the path to our Latte animation. And that's
not that hard to do. There's a website called LatteFiles.com where you can find tons of free
lottie files. How cool is that? You can sign up or log in, and then we can just maybe put
your free. I don't know. I don't feel like paying for anything. They have a lot of free
ones. They have a lot of paid ones, of course, also. So let's take a look here. Results for free.
And then, okay, of course, it's gonna do that. Let's just take this guy. So you can click on
that. Now, up here on the right hand corner, you can go ahead and customize it with a palette.
Now, I think you do need to subscribe to do that. So yeah, you need to sign up because like if we
go here and I click on Latte JSON, it just kind of prompts you to kind of sign up. But anyway, it
did it before, but I actually clicked out of it. So I'm going to sign up. You can sign up with one
of your accounts. No, I'm going to use my Gmail account here. And it doesn't take long. It just
pops up getting started. Yeah, let's go. I'm all kind of a designer. really if you've ever watched
my videos you know that I'm complaining no skill and design but let's go let's let's type what's
the topic of the software yeah let's type software okay so we've got code of dude here CSS
PHP whatever just click this guy you can obviously pick anything as long as it does not
cost that money you pick loty json believe you can just copy it yeah yeah you go yes the embed
URL so you can just go ahead and copy that URL Lately, all you need to do, now ideally, of
course, you want to upload it to your site, but we're just going to come over here to where
it says, put the path to your Latte animation, and you're going to paste that in there.
Normally, it should be the JSON, but you know, we'll troubleshoot this and figure it out.
Let's refresh that, and we can see that did not work. So there is an issue there with that
code. Let's just come back here because I've done this before and I'm pretty sure you just
copy the path. Oh, yeah, we go. Oops, I missed it completely. I knew something was wrong. So
let's go back in here, go back down to that path. There we go. Save that, update that and
then fingers crossed. This works perfectly. There we go. How awesome is that? Now I took
a little bit longer to load because of course this is hosted on a different site but come on
guys that's so cool I am so stoked on that so that was a first jQuery one that adds a little
bit of JavaScript now the next one is gonna be awesome so let's take a look at that right now
now I don't know if you've guys seen this before but a lot of blogs like reading heavy sites will
implement the scroll bar you see it up here as I scroll it indicates where you're at in this
article, right? You can see how I'm doing that. So why don't we challenge ChatGDP to
write that code for us? Let's do that. So let's try again. We are going to go and
start a new chat. And just again, guys, here you go. You've got your chat history with all
your code and stuff. You can go back and reuse it. That's so cool. Let us think about how we would
tell ChatGDP to go ahead and do this fast. So maybe we'll say write me some code that will
display pro grass bar at the top of the browser window that tracks. So I'm going to have to fix my
spelling again. How far down the page the user has scrolled. And let's just fix my dodgy spelling
here. There we go. Let's see what it does. I don't know, let's hope this works. Okay,
so it's got like this function. That's great. Now I can already kind of suspect. We might need
to refactor this code a little bit or ask it, ask ChatchyTP to do it for me. So it says you need
to have a div with all that fun stuff. Okay, well, I think we know how we can add a div, right?
We can just use our theme bolder header to go ahead and do that. Actually, let's tell
it, can you give me the script tag tags? There we go. And now it's doing its thing. Again,
know, it's just adding the script tags to what it's got over there. But it's about showing the
versatility of all this. So that's copy the code again. Let's go to divi. Now this time, this
is not going to be where you want to put that. We're going to add it over to integration. And
then we can go ahead and add this to the head of our blog and just put the Java script. And
hopefully that works. I have not tested this. So this is all live and fuel enjoyment. So we're
going to save that. And then we need to copy some CSS as well. This we can copy and go put in our
theme options here on the general custom CSS. And then put that in there. Now what we are going
to need to do is because we're using the theme folder, we're going to have to give it a place
for this, right? Let's go into the theme folder. We'll go over here. We'll go to divv. We'll say
theme folder. Now of course, you're not going to want to have this to be a global thing on your
site. You're going to want this to be on your blog. So you're going to have to put this on your
blog template, for example. But for this example, we're just going to use the whole thing. So we've
got all this fun stuff. So what I'm going to do is I'll add another section, put a single column
row in there, or put a code module in there, with nothing in it. We're just going to
actually let's scratch the code module. Okay, just needed to move my face there. And I'm
gonna delete that out. And what we're gonna do is we're gonna give this guy a class of, let's
move me back down, not a class, but rather an ID of progress bar. So let's copy that. Let's come
back here. Oops, right over here. And we'll put that ID in there. We just remove that hash pound,
depending on how you look at things. And I'm gonna quickly also just go with the design. I'm gonna do
spacing, padding, top and bottom, zero and zero. And I'm gonna do the same for this section, design
spacing, because you don't want there to be some weird white space. You just want to kind of like
sit on a neat your head or there, right? So do that. But then also for this one, we wanna make
it full width, because that just looks better. So we're gonna go sizing, we're gonna put the
width to 100% and max width as far as it'll let us go. So let's go ahead and save that. Cross-out
fingers, grow the front end, and refresh our page. So that didn't do much, did it? Okay guys, so I
kinda know what the issue was here. I went ahead and put the code now directly on my header. Okay,
so I'm gonna go ahead and save that. And then what I need to do, And what I didn't do was add a
couple of IDs here, which helps it target my bar. So I'm going to go ahead and go and add those. And
then when I look at the code here, and again, this is why I need to pay attention to what ChatGDP
tells you. I can see here that my bar is the class and what is actually going to be painting the bar.
So I'm going to go select that. I'm going to go to advanced. I'm going to add it as my ID there.
And then what I also need to do is get another ID here, which is going to be my progress, which
of course is going to be the container for that. And chatGTP, all that, and I just ignored it.
So let's go ahead and put that right in there. We'll go advanced, give it the ID, and then of
course we'll just make sure that the sizing is right and that is still correct. So let's save
it and see what happens now. Okay, all saved up. There we go. So there's one thing that's
not happening right it's staying at the top well it's staying at the top and not coming with
us Easy fix right we just go to the theme folder and we tell it that we want this module in the
advanced settings for the sticky scroll effects Stick to the top. I don't yeah and then save it
up Save it one more time and then let's refresh that really quick and And now you can see we
have a fancy progress bar at the top. Now guys, that was super easy-ish, but awesome. You just
need to read what ChatGTP tells you. And if your code doesn't work like I've showed you a few
times now, you just go in and you say, "Hey, that didn't work. This is what the result was."
And it actually goes through and fix it for you. And guys, really, that's gonna be it. ChatGTP is a
super powerful language model Developed by OpenAi that can be used for so many different tests,
including web development. In this tutorial, we went and we've shown you how to use ChatGTP
to add a button animation, some menu animations. We add lottie files as well as an awesome
background gradient animation. And then finally, the ku de ta, this scroll bar that we've got right
there, which is amazing. And this is going to help you enhance and streamline your web development
flow for any the website that you build. So yeah, that's it, man. We really hope that this has
been helpful for you and helps you look forward to some creative ways to utilize ChatGTP to
enhance your Divi sites. I just build better websites. ChatGTP has completely transformed the
way that I work and my workflow when I'm working with tutorials or building websites or even
customer support. And I have no doubt that you guys out there will find some really interesting
ways to utilize ChatGTP in your workflow. Maybe even write you a video script like this one.
Guys, this has been Robey with the Divi Engine team. Thank you for watching and I'll catch you
guys in the next video. [Music] [BLANK_AUDIO]
