Started all right so here I have logged into my WordPress dashboard and for running this WordPress website locally I'm using using this software called local by Flywheel so you can just go.
Ahead and download this for free from Google and then just click on this plus icon to create a new WordPress website and uh fill in the details and once you create the website you can just click on.
WP admin and you can go ahead and log into to your WordPress website so here I have logged in and uh let's go ahead and add this design to our WordPress website now I am using this theme called 2021.
But you can use this same method to add this design to any theme you want so let's go over here to post and let's click on add new post and let's add our design over here.
Over here and once you want to add this Custom Design you can just go over here to this plus icon and search for for custom HTML and select that or you can also go ahead and type forward slash and.
Start typing custom HTML so now we can see it says write HTML now here we can add HTML CSS and JavaScript code so let's create a style tag and we will add the CSS inside this.
Style tag so let's go to the source code and I will leave the link of the source code in the description of this video so let's go to St CSS file and let's copy everything from this line of code.
Till here and let's paste it over here inside the style tag and after that let's go ahead and paste the HTML so let's go back to our source code let's go to the HTML file and let's copy from.
This line of code till here and let's paste it over here and now let's add the JavaScript so let's create a script tag for that and uh let's go back to source code.
Posts Related:
- Website Showcase Mockup Bundle Download In PSD Files Sheri Sk Photoshop Tutorial
- Create and insert Forms, Quiz and survey using Microsoft Forms in Powerpoint Presentation
- How To Design Stories Using HTML, CSS & JavaScript - Part 4 BlogSpot
Let's go to MJS file and let's copy all
This JavaScript from here and let's paste it over here inside the script tag now if you go back to our source code here we can see that we have this uh.Interval over here so right now it is set to 3 seconds which is 3,000 milliseconds so here we can see that after 3 seconds the design changes so the active step changes so you can.
Change that over here and here in the HTML you can go ahead and change all this content so you can change the heading and the paragraph that you see over over here and you can also change.
The icons so here we can see we have this SVG so you can replace this with your own svgs and then we have the main heading over here and then we have the image so.
Right now the image is set to images for/ main.jpg but in our WordPress website we don't have this main.jpg file right now so we need to upload the image to our WordPress website and then we.
Need to add the link over here let's go to media and let's click on ADD New Media file let's click on select files and here's our image let's click on open and the image was uploaded let's.
Open the image and here we can find the url of the image so let's click on copy URL to clipboard and let's go back and paste it over here in the.
Source and now the image will work right now let's go ahead and click on publish and publish now we can see our post was published so let's click on view post and here we can see that we have our.
Design but uh we have some problems in the CSS so the main problem is that it doesn't have the correct width so that's because the theme has some Styles added by default so for the posts the theme.
Has some default Max width so if you
Right click over here and uh let's go to inspect and if you go to the split section division here we can see that.The theme has set this Max width to this value right here so let's go ahead and change it to something different so we can just go ahead and change this to Max width of.
100% and now we can see it looks all right now here we can see that for this background we don't have white color as we have in our design over here that's because the theme has some.
Default background color so we need to update that as well and what we will do is we'll just update the background color when we have the active state for these steps so let's go back and here.
For the split section let's go ahead and add Max width of 100% and uh for the active state which is right here let's add a background color and let's set it to.
White let's click on update let's go back to our post and reload and here we can see that we still don't have the max width added because uh the the has added the max width for.
The design so we need to add exclamation important over here so that it will override the theme code so let's click on update let's go back to our post and reload and now we can see we have the.
Correct design displayed over here so everything is working all right let's take a look at the mobile version and the mobile version is also looking all right so that's basically how you can.
Add this Custom Design to your WordPress website all right so that's basically it for the this video I will leave the link of the design video and also the source code in the description of this video so.
If you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for.
