00:00in the past if you were a WordPress user
00:01and didn't have coding knowledge you may
00:03need to spend hours searching the web
00:05for answers to Solutions when needing to
00:07create custom code but now with the
00:08emergence of artificial AI that is
00:10beginning to change AI assisted coding
00:12is the use of machine learning
00:14generative AI models that Aid in
00:16creating code for WordPress most of
00:17these assistants let you describe what
00:19you want to code by just entering a
00:20simple text prompt and then from there
00:22the AI automatically generates the code
00:24for you now there are a lot of different
00:26AI coding assistants out there and today
00:28I'm going to walk you through three
00:29different ways that you can use this for
00:30your WordPress site and first of all I
00:32want to show you just how easy it is to
00:33use DV aai to help you with your coding
00:35needs Dy aai is elegant themes new
00:38flagship AI product that allows you to
00:40generate incredible images SEO quality
00:43text and even code with a simple text
00:45prompt you can use divvy's code fields
00:47to make stunning animations effects or
00:50anything your heart desires and also
00:52unlike a lot of other coding assistants
00:54divvy can generate CSS HTML and
00:57JavaScript so generating code with divvy
00:59AI is extremely easy and very
01:01conversational and I'll show you just
01:02how quick you can do that so let's say
01:04we wanted to add a gradient overlay to
01:05this header section here so what we can
01:06do is click the gear icon to bring up
01:08the module settings and then we're going
01:10to go over to Advanced and we'll go to
01:12custom CSS and from here we'll see this
01:14little AI button and when we click this
01:15it'll bring up the prompt for coding
01:17with AI so for instance I could tell it
01:19to generate a gradient background
01:20overlay on the H1 heading using the two
01:22different blue colors that are in this
01:24layout then we'll click generate code
01:25it'll take a couple moments here and
01:26then it'll generate us that gradient
01:28that we wanted it to do so you you can
01:30see it generated the gradient for us
01:31without us doing any coding on our own
01:33if you like it you can click use this
01:34code and if you wanted to do some
01:36different versions of it you can always
01:37click retry or you can change the prompt
01:39altogether so I'm satisfied with this
01:41and I'll hit use this code and then
01:42we'll save it and now you can see it
01:44created our gradient super easily now as
01:46I mentioned before in addition to doing
01:48CSS you can also generate HTML and
01:51JavaScript right inside a divy aai so
01:53for instance if we wanted to take this
01:54hero section and add a cool Zoom
01:56animation to it we can do that with dvy
01:58AI so what I'll do is go to the section
02:00settings here and click the gear icon
02:02and then I'll go over to Advanced and
02:03where I have CSS IDs and classes I'm
02:05going to give this a CSS Class of Hero
02:08and then I'll save this and then what
02:09I'm going to do is I'm going to add a
02:10code module so I'm going to add a new
02:13code module here so now all we'll go
02:15down to is the divv AI button and then
02:16we'll tell it exactly what we want it to
02:18do so let's for instance add a zoom out
02:20effect on scroll to the CSS Class Hero
02:22and then we'll generate the code it'll
02:24create the code for us really quickly
02:25and again if we like it we can click use
02:27this code if you want it to change you
02:28can click retry and then to test this
02:30out let's use the code we'll save these
02:32settings then I'll save our page and
02:34then we can just exit the visual Builder
02:36to check out our code and see how it
02:37looks so now we have our hero section
02:39here and you see when I scroll down it
02:41added this Zoom effect that I told it to
02:43and if that's not quite what you were
02:44looking for you can always customize
02:46that code tell it to be more specific
02:48and change it to be exactly what you're
02:49looking for on your site so if we did
02:51want to change it we could go to enable
02:52the visual Builder again we'll go back
02:54to our code module and if we want to
02:56change it we can always go back to code
02:57with AI and if we wanted to make changes
02:59we could just tell it to replace the
03:00existing code or you could add extra
03:03code down at the cursor but what I'm
03:04going to do is I'm just going to
03:05generate new code for this so then if we
03:07want to check this one out we can hit
03:08use this code we'll save our page and
03:10then we can exit the visual Builder
03:11again and check out this version of the
03:13code that we just created so now you can
03:15see it takes the hero section and it
03:17zooms the entire area in and out for us
03:22scroll now another huge name in
03:24WordPress is Elementor and Elementor AI
03:27is another powerful tool you can use to
03:29help you with your AI generated code
03:30Elementor is one of the most popular
03:32page builders in the world in recent
03:34months they join the AI Revolution by
03:36offering text image and custom CSS
03:39generation to use it you just need to
03:41activate the edit with AI button in
03:43elementor's front and Page Builder and
03:45any module containing text or images now
03:47for CSS generation you do have to Shell
03:49up for a pro license but you can try
03:51Elementor AI text and image generation
03:53in the free version generating code with
03:55Elementor AI is very similar to
03:57generating with divy AI and it's a
03:59conversational experience where you just
04:00tell it exactly what you want it to do
04:02and it'll help generate the code for you
04:04then after your generated CSS code is
04:06live you can change the colors animation
04:08speed make other tweaks that you need to
04:09suit your preferences it's extremely
04:11powerful and quick and lets you easily
04:13generate CSS for your Web projects with
04:15no coding skills at all needed it's also
04:17very affordable as well and if you want
04:19you can sign up for a yearly Pro license
04:21for only $59 but also if you want to use
04:23element or AI CSS generator you'll need
04:25to sign up for a paid plan and pricing
04:27start at just $2.99 a month now another
04:29one of the biggest names out there when
04:31it comes to AI generated code is code WP
04:33code WP is an AI tool trained
04:35specifically using Wordpress it helps
04:37you create custom code Snippets to
04:39extend its functionality or avoid using
04:41heavy plugins now when you are ready to
04:43implement generated code Snippets you'll
04:45need to install a code snippet plugin
04:46such as WP code or create a child theme
04:49and copy specific files from the
04:50includes folder to place your Snippets
04:52so it's pretty easy to use so here from
04:54the code WP dashboard I'm going to go up
04:56to create new and then all I'm going to
04:58do is create a new chat so we can go
04:59into conversation mode and you can see
05:01by default we have it set up for
05:02WordPress and then all we need to do is
05:04enter the prompt of what we want it to
05:05do so I'll enter in our prompt here and
05:08then once I'm ready I'll go ahead and
05:10have it create that so what I'm going to
05:12do is I'm going to create a custom post
05:13type called cars and then I'm going to
05:15include taxonomy for vehicle type and
05:17add the following meta fields to the
05:19car's custom post type so I'll make a
05:21field for make model price Etc and we'll
05:23have it create the code for us
05:25automatically and it'll just take a few
05:26moments and then it'll tell you at the
05:28bottom here exactly what the code is
05:29supposed to do and then once it's all
05:31done we'll go up here and click create a
05:32snippet and this will generate us our
05:34code snippet really quickly and
05:35automatically now a couple cool things
05:37we can do here is we have the option to
05:39either copy all this code that we want
05:40so you can go up here and copy the file
05:42contents but you can also have it do a
05:44preview of what the code's supposed to
05:45do so let's click preview here it'll
05:48launch us a WordPress instance and you
05:50can see it created our custom post type
05:51for cars and you can go in here and play
05:53around and edit it and if it's what you
05:55wanted we can save this and copy our
05:57code into WordPress and if it's not you
05:59can always adjust it with code WP so
06:02hopefully that helped demystify AI
06:04generated code within WordPress I am
06:06going to leave a link to a Blog article
06:07you can check out it's down in the video
06:09description it's going to go a little
06:10more into depth on how you can use AI to
06:12code within WordPress thank you so much
06:14for watching this video I greatly
06:15appreciate it before you go though make
06:16sure you check out some of our other
06:18content and I'll see you in the next
