How to make a wordpress website with Divi | Divi theme Tutorial

if you want to make a fully professional wordpress website by own then you are in the right place hi i'm farjana in today's video i'll show you how you can make a professional wordpress website in few hours you don't need to have any previous experience even don't need to do a single line of coding we will make our dream website just by simple drag and drop and after watching this complete tutorial i can ensure you you will also be an expert in wordpress for this tutorial i will use wordpress and dv theme wordpress powers 39.6 percent of the websites and dv powers more than 1 million websites in today's video i will show you how you can make this website from scratch but the most amazing part is tv has 100 plus full website pack and 800 plus pre-made designs so if you check any premade pack like this one so here we can see we will get all inner pages for the same design so using these templates we can create any kind of wordpress website before moving forward let me introduce myself i am for generoshit professional web designer and developer and i am working in this area for last eight years so you are learning from a real web developer now let's have a look which you are going to make in today's video so this is the website which you are going to develop i will show you how you can create this type of top banner area here i will show you how you can design this kind of text buttons and how we can create this kind of effect with any images also i will show you how can upload your own logo how you can create this type of menus and then here is a small about section so here you can add some small text about you and here is a button for details page then here is what we do our service section so here you can write your services or specialities and then here is some testimonial area this is very important what your clients are talking about your business or you so we can keep our client testimonial in home page and then here is a custom footer area i will show you how you can design all these sections in step by step from scratch and then here is about page so i will show you how you can create this kind of about page and then here is portfolio page so here you can display some of your best work and when if you click any single project for example here people can see more details about your project and then here is the blog page i'll show you all in step by step and when you click any single blog post it will look like this then finally contact so here i will show you how you can make this kind of contact page and how you can create this kind of form i will show you all details in step by step and finally i will show you how we can make our website fully responsive and you will find a timestamp in the description so you can jump any specific part you need alright now let's have a look the steps for today's tutorial first i'll show you how we can get our own domain and hosting and here i will show you how you can get 60 discount through my link then i will install wordpress then i will install dv theme and finally we will create our amazing website if you have webhosting already you can skip this part or if you don't have then follow along so to get domain and hosting just go to farjana lucid.com and here go to tools and here is web hosting here is bluehost web hosting link so now click on get started so why bluehost in my opinion bluehost is the best way hosting provider i am a web developer i type so many wave hosting companies i don't want to mention their name but i personally ended up using bluehost hundreds of my clients using bluehost and they never complain about using it if you see my bluehost account i have hosted here tons of websites and i never get a downtime your customer support is really amazing in case if you need any help and that's why i always recommend bluehost and their price is really affordable for everyone now click on get started you can see their pricing so you have different options based on what you need if it's your first website and you only want to host one website then you can take their basic plan and if you have multiple website more than one you can pick your plus or choice class options though both options are almost same choice plus options have domain privacy transportation and site backup options but we don't necessarily need that and you can take their pro plans if you are planning to host a big e-commerce website and if you have millions of visitors already as a beginner let's start with the basic plan it will cost only 3.95 per month and you will get one website 50 gb ssd storage and meter bandwidth free ssl certificate standard performance one included domain five parked domains and 25 sub domains and in this price it's awesome but in future if you have multiple website you can upgrade it to your plus plan so basically we can update or downgrade our plan anytime now let's click on select now if you have domain name already you can type your domain name here and configure it i'm assuming you don't have a domain name already so let's select a domain name from here on the right side you see there are several options dot com dot online dot site dot website and so many options but i always suggest to take dot com website because it's good for search engine optimization and also dot com website looks more professional and lazy so here i am selecting a domain name for this tutorial purpose so i'm typing here for janna so my domain name will be farjanawp.com and i'm clicking to next so here is showing the domain name for jannawp.com is available awesome now i need to put my account information here so here i'm typing my first name last name my business name and selecting my country and here is my state address city first encode and typing my phone number and email address and here the email address is really important so make sure you are putting your best email address because after completing purchase a receipt will send to that email address now here is the package information by default if selected for 33 months that means for three years and if you now see the price is showing 3.95 per month but we can reduce this price here we only take the necessary things for studying we can take it for one year that means for 12 month and it will cost 5.95 per month still pretty cheap so now we can see the total price 71.40 for a whole year that's awesome and here i will show you a secret tip how you can reduce this price more so now i'm going to hover outside of this page so when i'm going to hover on that button or outside of this page here we will see a pop-up window which will offering you last price 2.65 per month now click on claim savings and now you can see the price 2.65 per month when three years selected so now i'm going to select 12 months price again and here you can see the total price now showing 59.40 for a whole year it's amazing now i'm going to package extras and here you can see domain privacy press protection which is adding more prices here so you can select or deselect domain privacy having doing privacy is good no one can get to know who is the owner of the website but i'm re-selecting it because i want to be transparent and it's not that important to me at this moment i'm also turning off site lot security and code card basic i don't need site lot security and code card basic either so i'm deselecting those as well so now you can see the total price is now 59.40 for a whole year now here i'm putting my payment information so here i'm typing my credit card number and here i'm putting my cbb code the expiration date and now also select this check icon so you are agreed with their terms and policy and when you complete purchasing through my link you see you are getting a huge discount and i will also get a commission so nothing extra there's a win-win situation thank you for that because it supports this channel and help me to make more valuable videos like this for you so now click on submit okay so now you can see your purchase was a success we sent a confirmation email to defeat gmail.com now i'm going to check my email so here i got a email here so here is the verification email for my purchase i'm going to check it and verify my email so now my email is verified successfully and next i will get another email here is my payment confirmation and and here bluehost sent me invoice for my purchase now from here we have to create a account here is my domain name and here i have to type a password i'm typing my password and retype it checking on their privacy policy and create account okay now save it so your account is ready to go you can log in so now i'm going to login here i need to type my password which i already created now and login i'm saving it for now i'm skip it because i'll do it later with you in step by step i'm clicking on get started turning off domain privacy and protection and confirm it all right we have successfully completed purchasing our domain and hosting so next we are going to install wordpress to install wordpress go to my sites and from here we are going to create size and then site name so here we can type wordpress website and site title we can type complete tutorial by farjana and next here is a advanced option so by default if we don't fill all this field so it will take the default email address from this bluehost account and default username and it will generate a auto password so now i like to set all this by manually so i'm typing my email address then username and password so there should be one uppercase and one number okay so now click on next and here is the domain name so our wordpress is going to install here and here is subdirectory so if we want to install our wordpress in a sub folder or sub directory location then we can type here some name or our folder name but here i want to install our wordpress in root domain so for this i'm just leaving it and going to next it's taking some moment to install it our wordpress installs successfully congratulations so here is our website url and here is our admin url here is our username and password now i'm going to login wordpress yes congratulations we have successfully installed our wordpress and this is our wordpress dashboard and when you click on visit website this is our wordpress website here default wordpress theme is installed by default so we have successfully installed wordpress so from here i'm just leaving all these which i don't need here i'm just crossing these are coming from our plugin settings so for this i'm going to plugins and selecting all plugins first i'm going to deactivate which are activate here and now selecting all and going to delete and apply okay so i'm deleting all plugins which i don't need here actually i want to build this website from clean state and going to start from scratch then i'm going to post i'm just deleting this default post selecting it move to trust and apply and next going to trash and empty trash next going to pages and similar way selecting all pages going to move trust and apply now going to trash and empty touch and next here i'm going to settings and going to reading so from here i'm just discourage search engine from indexing this site so for the first time as i am building this website and i'm not ready to go indexing my website from all search engines so for this time i'm just disabling this website from search engine indexing so it will not index by google or any other search engine until i'm going to live my website so now i'm going to make save changes so when our website is done and we're going to ready to live and we are going to do some seo works then we can make it deselect for this time i am just checking it and next i am going to permalink so the permalink is the page url so if you want to create a new page or new post it will show the page url in this way or for example here is the best way to show our website url so this is our website url and then if we post any new item like how to make a wordpress website then our post url should be our main domain url slash how to make a wordpress website slash so it will be user friendly and it will be seo friendly so i am selecting this one and going to save changes and next i am going to appearance so here you can see this all are default theme of wordpress so now if we just go to the visit site we can see it's looking like this and now if we just uh activate another one like 2020 and now if we go to visit website so this is a completely different look from the previous one okay so for this website we are going to install tv theme to get tv theme first i am going to farjana rushid.com and going to tools and scroll down going here just click on get started with tv i will also leave the direct link in my description so you can also get from there and now going to pricing okay so here you can see they are offering two kind of package so the first one is yearly access and the second one is lifetime access so for both packages you can use this db theme for unlimited website so here the only difference is for the first one we have to pay yearly and for the second one we have to pay a one-time fee i always recommend to take the lifetime access so you don't need to worry about the theme payment in each year i have already purchased their lifetime access so for this time i'm not going to buy this one one more time okay so now i'm going to log in my account [Music] okay so now scroll down and here download dv theme now click here going to download okay so after downloading divi theme now i'm going to install going to add new going to upload browse and here is the theme i just downloaded and install now then going to activate and then going to dv and then i'm going to updates and from here i have to put the username and api key okay so for that i'm going to my account and here you can find the username so i'm going to copy it and paste it here and also going here going to api key and here i have already created several api key we can use any one so i'm going to copy this one and paste it now save changes okay so our dv theme is now activated successfully so after activating the db team first i'm going to add some basic settings so for that i'm again going to general tab from here we have to upload our logo and here i'm just leaving all this as it is for this time but here i like to set the default color plate for the website so here i'm taking some color so this color will use for our website design so for the first one i'm taking this one i'm taking this color and then this one and this one okay we can upload our logo after few time and now save changes and before starting our design i also like to add some global settings so for that i'm going to appearance and customize and now from general settings going to layout settings here all is good theme accent color we can change it to this color we will use this light pink color all over the website so this color will be main color for our website and then going to typography so here we can set the font size for the website so body text size we can make it to 16 pixel header text size we can make it to 50 pixel or 45 okay we can change it later also and header line height i'm making it to 1.2 and header font family so for header font i'm going to use the new font cormorant okay so i'm taking this one for header and for body font family i'm going to use monstrat [Music] then body link color we can make it to light pink and body text color for body text we can take this color and for header text color we can change it to this one okay now i'm saving it [Music] now going back and going to header and navigation so header format okay we can work with these options after a few time so for this time we can go ahead i'm going back and now i'm going to create the past page so now i'm going to add new and here i'm typing home so this will be our home page and going to publish now use tv builder going to start building and here we can find three different options one is for build from scratch and here dv has tons of premade layout so we can also select any primate layout and then we can customize as our need and the third one is we can also clone any of our existing page so for the first time i am going to start from scratch and here for dv builder when you design any new page from scratch here we will find a section this is a section in blue color and under each section we have to create a new row so when we create a new row we can find different kind of row so here is one column row two column row and we can also select any kind of row item so for the very top area i'm selecting this one one column row and here i'm going to open the another website where i have already designed the pages so for that i'm going in there for generosity okay so i have already designed the website in this location so again i'm going to recreate this full website from scratch so for the very top area i already take a full width section so for that i am going to take a background image so here i am taking a image add background image upload file select file okay i'm taking this one and here one more thing so if we check here you can see here is a two color transparent layer over this website so to make this kind of effect i am going to gradient and add background color so here you can select two color for the first color i'm taking the black and also adding some transparency and for the second color i'm taking this light pink color and also adding some transparency and here as we are using this gradient color with our image so i have to enable this button so now it will work with our image and here one more thing here we have to select the start position i am making it to like this and also in position like this and now going to gradient direction so we can also now change the direction i'm making it like this okay now save it okay so now i'm going to add some text so when we like to use any text or any item inside our row so just click on this plus icon and here tv has several pre-made modules so we can start with anyone so first i am taking a text module i'm taking this one and here for the very top text area i'm taking this text going to copy this one and here going to text mode and i have saved it okay so now i'm going to style this text so for that we can click on the design tab or if we want to go there very quickly so when we hover over this text we can see there is a brush icon so i'm going to click here and here we can change the font so it's already getting the font family from our default settings and from here we can change the font color and here is font text size we can also decrease it and later spacing we can add one pixel letter spacing and text transform we can make it to uppercase from here and here we can also increase the font size okay so looks good and after this if we check here we can see there is a small line so now i'm going to create this line so for that again going here click on this plus icon and here i am typing divider so this one and now i'm going to design tab going to line and the color it's already taking the pink color and then going to sizing so divider weight we can make it to 3 pixel or 4 and here wheat we can make it 200 okay looks good and save it and here you can see here is some more spacing between this so if we hover over this text we can see here is a spacing so just drag it to top okay so it's very easy to do or we can make it to more smaller i'm going here going to sizing and here from here we can make it to 50 pixel okay and then the second one this text okay so for this text i'm going to copy this text and now taking another module so i'm searching for text and paste it here so if we check from text you can see it's taking the h2 tag and when you go to visual mode here you can also see it's taking the h2 tag okay so by default it's taking the font family from h2 from our theme customizer okay so now going to more customization so going here and making the text color to white and the font size here is the font size so for this text i like to use a very large size image so here i'm trying with 80 80 pixel or you can make it to 85 big enough okay now save it and the third one i'm taking a button so for this button style one more thing we can do we can set some global style for button so next time if we take any new button it will take this style by default so to create the default style i am going here preset default and i'm going to add new preset preset name we can make it to button style and assign preset to default so it will work as default style save it and now i'm going to design tab going to buttons and now going to enable the custom style for button and button text size we can make it to smaller to 12 and for the text color is okay for button background color so here i'm going to on hover style so just click here on this small icon and going here just click here on hover and now for the hover state i'm adding a background color so here i am taking this pink color for background so on hover this background color will work and going to button text color going to hover and for hover state the text color will be white and here you can see it's showing a icon on hover state so in the bottom show button icon so i'm making it off then show icon on over i'm also making it off and then here is some more options button border radius by default this is three pixel i'm making it to zero so now it's square fully square and then going down and here is spacing so for padding top and bottom i'm going to add 12 pixels and for left and right we can add [Music] 30 pixel just make it link with our right side or we can increase it i'm trying with 50 pixel left and right or 70 okay and now for the font i'm again going to button and now scroll down making font to uppercase and letter spacing we can add one pixel or you can make it to two pixel okay and also the font size we can also increase it like this and background color for the normal state it will look like this and on hover instead looks like this okay so i think this looks good and i'm saving it and here we can add some more spacing between this button and text so for that going here going to design tab and spacing so we can add some bottom padding i'm adding 30 pixel bottom save it and for this one we can also decrease the spacing between these two so going to design tab going to spacing and padding bottom we can make it to zero and margin bottom making it to zero okay and saving it and here for the whole area if we want to add some spacing in top and bottom so for that going to settings of the section and going to design tab going to spacing and for padding we can add 5 p 8 for top and bottom and we can also increase it to 10 okay looks good sometimes i like to use v8 for spacing or padding so it will maintain the screen ratio of your device okay now save it and after making any changes don't forget to save the whole page so our top area is done and now if we go to view page it looks like this and now i'm going to customize the header area but before that i'm going to make this page as our main home page so for that again going to dashboard going to settings and reading and from here select a static page for home page i am selecting this home and save changes and now if we go to visit site you can see this page is working as our default page now again i'm going to theme customizer we can also access it from here and now we want to make our header area fully transparent so for that going to header and navigation going to primary menu bar and scroll down here is the background color for this header area going here and just simply make it to transparent okay so it's looking good and now we can see the menu text color is black so for that [Music] here is text color we can make it to white and transparency we can make it to no transparent looks good and for logo we can upload a white version of logo now saving it and to upload my logo i'm going to again theme options so going into dashboard going to dv and theme options and here going to upload i'm going to upload a logo okay i'm selecting this one set as logo and save changes now if we refresh the website so our logo looks like this okay so now we're going again to edit our home page so going to enable visual builder and now i'm going to create the second area so for that you can see here is a small about section so now i'm going to create this area so again taking a new section taking a regular section and now i'm taking a one column row then here is [Music] text and here i'm typing about us and making it to h2 and for h2 we can add some font size globally so it will work for all others item so again for that i'm going to add new preset going to title title text making it as default and going to design tab going to heading text h2 and going here so text size we can make it to 50 or you can make it to 60 okay so now i'm saving it [Music] and from here for this one i'm making it to center aligned so going to heading text h2 and making the alignment to center and after this text i'm going to add a line like this one so we have already created this here so we can duplicate and use it here so first i'm duplicating this one and moving down here and going to settings going to design tab going to sizing and for this time i'm making it to 100 pixel and here we need to make it to centered aligned so module alignment i'm making it to center and save it and here you can see here is too much spacing i'm making it off okay and here i'm making it more weak so for that i'm going to design tab going to line and sorry going to sizing and making it to 5 pixel now saving it and after that i am going to add some normal text so some small details about us click here searching for text [Music] let's move to top of this line so i'm moving down or this one making it to top okay and here i don't want to make this kind of full width so i want to add some spacing from left and right side so i want to change the greedy style so going here change column structure and instead of this one we can make it to like this and now i'm moving it to center okay and now going here and here i'm going to design tab and making it to centered aligned going to text and from here making it to centered and for default font it's taking the 60 pixel and for default font style you can add some global settings so again i'm going to edit global text so tidal text going to edit [Music] going to design tab and from text i am making the font family so here fun family monster and making the font weight to light okay so it's look like this now it's okay now i'm saving it and then we can add a button so again i'm going to plus and going to add new button so you can see this time we are getting this default button style which he did previously here and now i'm changing the button text to read more and now i'm making the alignment center so going to design tab alignment and center and save it and now going to next section so for the next area i'm going to create something like this okay so first i'm going to take a new section again okay so here one more thing sometimes if we cannot identify any section or anything from this builder so that case click here and here we can go to the wireframe view so we can access any section easily from here here is the new section so i am taking a new section regular section and first i'm taking a row okay so now again i'm going to the desktop mode and for this here first i'm taking a title so i'm going to duplicate this one and moving it to down and here i'm changing this text to what we do okay so now i'm typing so without opening any module we can also type any text directly from here just keep my cursor and start typing so i'm typing what we do and then the line so again i'm going to duplicate this one and moving it down to here okay and then here is a another row so this time i'm taking a three column row as here we will take three service so for the first one i'm taking a blurb module and here by default here is the image then here is the title and here's some text so now instead of title i am typing wave design going to copy from here and paste it and then text here i'm using this dummy text but i'm removing some extra text and then instead of image we can use this type of icon so for that going down and going to image and icon so here is image i'm not going to use any image so use icon click on here so from here you can select any icon i'm taking this one okay and now i'm going to styling this area so for that going to design tab going to image and icon so i'm selecting this one circle icon and circle color is okay but icon color will be white and text alignment so going to text and making the alignment to center and web design for this one i'm making the font size to 30 or you can decrease it and for this text just click here and going down so from here making the body font weight to light okay looks good okay so before moving forward i'm adding this background area for this section so again going to section settings and from background i'm adding a background image first going to upload the image okay so taking this one and now here i'm going to add a ovale gradient color just similar as before so for that going to here going the first color to black and adding some transparency and the second color will be this one and also adding some transparency and here i'm making it enable and then start position you can make it like this and the end position we can make it like this and then the gradient direction so you can make it [Music] like that okay so looks good now saving it [Music] and here we can change this text color to white so going to design tab and click on this brush tool so from here we can change the text color to white [Music] and this one i'm going to module settings going to down and going to background so for this one we can use a color white color for background and also here i'm going to add some transparency so it will be transparent and for this one i'm going to add some padding so going to design tab going to spacing and for top and bottom i'm going to add 30 pixel or we can make it to 50 pixel and make it same for bottom and for left and right we can make it to 30 pixel looks good okay so now saving it and for the second and third one i'm just going to duplicating this one and move it to right [Music] going to duplicate one more time okay so for the second one i'm making it to wave development and we can change the icon and for the third one we can also change it to digital marketing and also changing the icon so i'm making something like this and save it okay so next i'm going to another section so here is a testimonial area so in the similar way we can create this testimonial section so for that i'm just simply duplicating this area and now moving it to down and here we can add this text so instead of this text we can add this and here i'm removing this button and also this text and here i'm taking another row with three column and for the first one i'm taking testimonial so here is icon here is the image here is text okay so now i'm typing a name and then here is the reviews content so we can add some dummy and here is the image so from here you can upload our customer image i'm going to upload some image for testimonial taking this one and this icon you can use it or you can make it off and now going to design tab going to text and from here i'm making the text alignment to center and this text here you can make it to light and for this text we can make it to uppercase and we can make it to regular or semi-bold okay and making the color to it dark looks good and for the background color we can use going to content and background so from here we can make the background color to white so now it's looking same as this one and here one more thing we can remove some extra padding maybe here is some padding is working so going to design tab and going to spacing so from left and right i am making it to zero padding okay so now going to off the color so going to background and making it to white and for this text we can make the font size to smaller and we can add some letter spacing save it and in the similar way i'm just going to duplicating this one and moving it to right side then again going to duplicating and going to move it to right and now i'm changing this image to this one and also going to change this one i'm going to change this image to this one now saving it so our home page is almost done so before moving to footer area design i'm going to customize the home page for tablet and mobile view so to check the responsiveness first i'm going to here going to tablet and going to top so for this text we have to change the font size for tablet going here going to style and here is the font size so here we can see a small phone icon so we have to click on here and now we can see here is the size for tablet so for tablet we can make it to 50 and it's look like this and if we go to for phone view click here and for mobile view we can make it to 40 or we can make it to 30 and save it so in the similar way we can work for all single item so i'm going to edit this text okay so from here we cannot edit this one so for that i'm going to again wireframe mode and here is the first text so i'm going here again going to tablet view and now again going to edit this one and here is the text size click on this mobile icon for tablet we can make it to 16 and for phone view i'm making it to 12 okay so i think this looks good and now for this button going here and going to design tab going to spacing and here we can make it more smaller for tablet so click on this phone icon for tablet we can make it to 10 pixel in height and for left and right we can make it to 50 pixel okay and for the phone view for the left and right i think we can keep it same as tablet and here we can also change this effect for the background image so for this again i'm going to the section settings going to background and for the tablet i'm going to gradient and gradient direction so for tablet you can make it like this and now going to phone and in the similar way here we can make it to like this and we can make the start position to like that okay so looks good now i'm saving it and here you can also decrease the spacing for phone or tablet so going here going to design tab going to spacing so the bottom padding going to tablet i think for tablet this looks good and for our phone we can decrease the spacing to 15 or we can make it to zero yeah looks good and saving it now for this section we can also change the title for tablet and mobile view but here we can also change this from global settings so going here going to global settings title text going to edit and now going to design tab going to heading text h2 and now i'm going here going to responsive view and for tablet we can make it to 50 pixel and for phone we can make it to 35 okay looks good now i'm saving it okay so this section is okay then this section so as this title style is coming from global settings so this font size is also optimized for tablet and mobile and also this section looks good these are looks good so i think all is now good and if we check over all the phone view these are looks good looks good okay okay so it's also ready for that phone view now i'm saving it and going to page builder and now if we scroll down so here now we can design the footer area so for this footer area i like to create something fully custom okay so for that again i am going to dashboard so now going to db and dv theme builder so from here we can design any custom template and here we can also create our global header global footer or here we can also create any new template for any specific page for now i'm not going to all these items i am going to design my global footer so for that going here add global footer and for this footer area i am going to start from scratch so build global footer start building and here if we check the previous site which i designed so you scroll down and here i have already designed this footer area so here you can see here is three column section and here is another full column area okay so for that first i'm taking a row with three column so for the first one we can see here is some address phone number and email address so to create this kind of design i'm taking blurb module so i'm taking here blurb and here first it will be the address so i'm going to copy the address so it will be our title and then here is the content so i'm going to copy the address details i'm pasting it here and then image so here i'm adding a icon so for this one i'm not going to use this image so i'm going to enable the icon and for address we can take this one and now i'm going to styling this area so for that i'm going to design tab going to image or icon we can make it to circle and here is circle color is pink and icon color you can set it to white and then show icon border no and image or icon placement by default this is in top i'm making it to left and now use icon font size we can also increase the font size for this icon i'm leaving it as default then the text style so for this text i'm using the font family to monster and making it to uppercase and here i'm making i'm making the font color to pink and adding some little spacing i am adding one pixel letter spacing and for the font color okay so before styling this one i am just changing the background color for the footer so for that again going to section edits going to background and for the background color i'm going to add a black color or just little light like that okay so now again going here and for this font color we can use now a white color and for this font family font families okay okay i think this looks good and i'm saving it now i'm just simply duplicating this one for the second one i'm adding here is phone number and for the phone number here i'm typing something dummy and here we can add this phone number with a link so when people click on this phone number it will redirect to call this number okay so for that i'm going to copy this number then click on this link icon and on url here i'm adding call to and place this number and save it and here you can see the color of this text is changed so it's taking now the link color so for that again i'm going here and for the link color i'm just selecting this icon and here now i'm changing the color to white save it and for the last one we can make it to email address so for this one again going here changing it to email and this time i'm typing a email and in the similar way i'm just going to link this email number with this email address so i'm going to copy and click on this link and on url i'm typing mail to and colon and this email address then save it and in the similar way we have to change the color so we need not to do the same thing double time so for that just right click on this module settings and going to copy module style then again right click on the settings and paste module style so it's simply working like this so we can simply copy any style from a module and then paste it to another one and here finally i'm changing the icon for phone so going here and for phone i'm adding something like that and for email address i'm also changing the icon to this one and save it okay so for the second column we can add here is quick link so i'm going to copy and then here we can add some menu item or page url so for that again i'm taking here a text module taking this one and paste it the link so here we can make the font color to pink and here i'm increasing the font size and making the font to uppercase and making it to regular and here okay and adding a letter spacing one pixel and then again taking a text module and here i'm adding some page link so here i'm typing for example about me and here i'm making it to a link so here we can add any page link for this time i'm making it to hashtag and save it and now i'm going to be styling this one going here making that lean color to white and text transform to uppercase and adding a letter spacing one pixel okay and here we can make the font style to normal and now simply duplicating this text and for the second one we can make it to privacy and making it to link then for the third one you can make it to like contact and the last one we can make it to site url and making it to a link and here we can also decrease the padding so for the first one going to spacing and for bottom making it to zero and margin bottom making it to zero or here we can make it to 10 okay looks good and now going to copy module style and paste module style paste module style and finally for this one okay and for the third one here you can place anything which we want so i'm showing you how we can do that and for the third one here we can see i have added a subscription box it's not showing because i did not link to it properly so for this time i'll show you how you can do that so here i'm searching for email opt-in and by default it's looking like this so here we can change the text to subscribers subscribers and this text we can remove all these text and name email address so here we can keep the first name or name and email address only we don't need to add the last name if we want to remove this so for that here is the field so from here we can remove the last name or we can make it off so now it's showing two field and here is the button for subscribe so now if we change the subscribe button text for that going to text and here is the button text by default it's showing subscribe so here you can type anything and now here we have to connect this subscription field with our mailchimp account or any other email marketing provider service so to that i'm going here going to email account by default here is mailchimp but if we have convertkit or waiver or anything we can also connect with that so now for this time i'm going to connect with my mailchimp account so here i'm going to login to my mailchimp account now i'm going to login okay after login here i'm going to here first i'm going to my profile so here if we want to connect the mailchimp with our website so for that first we have to add our account information from here so here we need to add the account name and api key so to get the account name i'm going here my profile page and here is the username i'm going to copy and paste it here then api key so to get api key again going here then going to account then going to extra and api key and going down here is api key i'm going to copy and now paste it here then submit okay so now we can select a list i'm selecting this one now click on fetch okay so now it's connected with our mailchimp account so finally we are connected and now we can customize this text style or anything as we want so for that again going here going to change the fill text color we can make it to black and here we can make the font family to a different one here i'm making it to monster and making it to uppercase and here we can make the front family to 12 pixel and here i'm adding one pixel letter spacing and for the subscribe button i'm going here going to add some custom style for this button and for the button text size we can decrease it and making the okay so it's more smaller so here border radius for button we can make it to zero so now it's fully square and on hover style so for hover we can disable this icon okay and for the background on hover i'm going here button background click on this hover icon and going to hovari state and for hover we can add a background color to white and for the hover state for the button text color we can make it do like that okay and going back to default style so when you hover over it's working like that and now for the font style here we can make it to uppercase and we can also add some letter spacing here and also we can increase the font size a bit so i'm making it to 15 pixel okay looks good and also here we can decrease the padding for this field just making it similar as this button so for that field padding top and bottom we can make it to 5 pixel or 15 pixel for top and bottom and decreasing it okay looks good and for this text we can also increase this font size we can make it do like that okay so now i'm saving it and finally if we check the tablet view it seems like okay only for this one here is some extra spacing in left so for that i'm going here going to design tab and going to spacing and now click on the phone icon going to tablet and for the left side we can make it to zero but for this it's not working so i'm adding some minus margin minus 20 or trying with minus 50 okay and now for the phone view if we go there here you can see it's just moving so for the phone view i'm making it to zero and save it okay so now again going for phone going to design tab going to spacing and going to margin tablet view for left margin i'm adding minus 50 and for phone adding 0 save it now going to copy module style and going to paste it somehow it's not working in this way so i'm going to do one by one so going to spacing going to margin and for tablet here i'm adding minus and for phone i'm going to add zero pixel okay so now save it okay so if we check the full view for phone looks good and now i am saving it and finally i forgot to add the copyright text area so here we have to add another section so for that going here going to add a regular section and here i'm taking a one column row then here i'm taking a text module okay and here i'm changing the background color to dark so here i'm taking the pure black like that and now going to the text module so here i'm going to copy this copyright text and paste it here and now going to style and here i'm making it to white and making the font size to smaller okay and now again going to section settings going to design tab going to spacing making the top and bottom padding to zero it looks like this and for the row settings going to design tab going to spacing for top we can add 15 pixel top and also for bottom 15 pixel okay looks good and now saving it now i'm going to cross it save and exit and finally going to save all changes okay so now if we refresh the page and scroll down okay so now we can see our footer is working okay so our footer area is done so our home page is ready so now i'm going to create others inner pages so for that again i'm going to dashboard and going to page now let's create some pages one by one add title so about portfolio blog and contact okay so let's start with about publish then again going back and add new now i'm creating portfolio then publish and going back add new then block publish and finally contact i'm going to add new create contact and publish okay so before starting design i'm going to create menus so for that going to appearance and menu now first i have to create the menu so here i'm typing a menu name for example menu main menu then create menu and now i'm going to add these pages to our menu so select all and add to menu and also we can add our home page so this is our home page add to menu okay so now i'm going to organize our menu item so after home we can set about then portfolio then block and contact and here is the display location so we want to show this menu item to our top menu so select primary menu and then save menu and if we refresh our website now okay so now we can see our menu is created and here we can also customize the font style so for that again i'm going to theme customizer then going to header and navigation primary menu bar and for active menu link color is okay others is okay and we can make the font style to uppercase and here also we can add some letter spacing one pixel okay looks good and i'm saving it and here also we can make the font weight to a light so for that from here i'm selecting the font family to monstrat okay so now i'm saving it and going back okay so now i'm going back and our menu is updated okay so now let's create our about page so for that again going to about then enable visual builder okay so for this page we can start from one of our existing page so let's clone our home page choose page so here we have already designed this home page i'm going to copy this page first then i will customize it okay so for very top area i'm removing this button removing all these then removing this one and also this text and here we can change this font to about me or about us about us and here we can also decrease the spacing in top and bottom so again going to section edits going to design tab and going to spacing so for top and bottom padding we can also decrease it like this okay and also i'm checking the phone view so going here going to style tab and font size checking the tablet tablet looks good and also if we check the phone view it's also look good or we can increase it for phone and okay i think this looks okay we can do one more thing we can save this top area as a template so we can reuse it for another pages so save section to library and template name i'm typing the layout name to page header and save to library and then here is about a section so here we can add some more details about us and here we need not to add this button so i'm removing this and here we can add more text i'm just duplicating this text or increase text okay and then here is client reviews we can remove this section for about and instead of what we do here you can add some team member so let's remove it and here if we check the about page of this site okay so let's create this kind of team member area so for that again i'm going to add team or search for person yeah so taking this and here image so i'm going to upload a image first uploading image and then going to team so i'm just uploading these images now taking this one and then description so i'm removing all these text and name and positions so here i'm typing a name for example currency and position um typing marketing manager okay so now let's change this font style so again going to edit then click on this text and change the font color to white let's check here okay and here we can also increase the font size and for this one we can make it to font family to uppercase sorry font style to uppercase and font family is okay we can make it to light or bold and we can change the color to white and here i'm changing the font size and letter spacing i'm adding one pixel letter spacing or two pixel okay i'm making the font weight to regular i think this looks okay for now we can use it and now going to duplicate this one and move it to right side then going to duplicate and move it to right side and now change the image for this one sorry not here from here i'm taking this one save it and here we can also change the name to john doe and here the position you can make it to ui designer and the third one here i'm selecting another image this one and also changing the name and position now saving it okay so now i'm saving it okay so in the similar way if we want to add more sections like if we want to add services or if we want to add a few section so in the similar way you can create any section as per your need okay so now let's have a look for the tablet and mobile view so for tablet looks good and if we check the phone view also looks good okay so this page is done now going to view page so after about page we can create the portfolio page so now going to portfolio and going to enable visual builder so for this time again going to clone existing page and this time we can copy the about page so now simply change the text to portfolio and here we can type our work and if we check the previous site for portfolio so here you can see here is showing some of latest work so now let's create this kind of image and this kind of portfolio item so for that here first i'm removing the text and also removing this section and here i'm taking another row and this time i'm taking a three column structure so here we can take also portfolio module so dv has filterable portfolio module or portfolio so you can try with that or if you want to make something simple so that case i like to use blur module or simply take a image and text so now i'm taking with a blurb and here we can add a image and here we can add some text so here let's upload a image for portfolio going to upload portfolio okay so i'm uploading several images so taking this one and here instead of these details you can only keep the title so removing all these text and here we can type for example anything okay so here i'm typing project 1 and here we can also increase the font size to by default this is 18 pixel we can make it to 24 or 22 and we can change the color to black and for this item we can make the whole area as a link so when someone click on any item it will link to a specific details page so we can create some details page for each of the portfolio then we can link this portfolio with specific image on title so when someone click on any project or item it will redirect to us the details page okay so for that i'm going to content and link so here we can add any specific link with title only or we can also add the link with the whole item so you can add a link for now i'm taking a hashtag and save it and now simply duplicating this item and one more time and now changing this one to project two and changing the image to this one and then here is the third one and changing the image to this one and now here if we want to decrease the spacing between each item we can also do that for that just simply click on these row settings then going to design tab and sizing so use custom cutter width click here and we can decrease it like this way and now if we want to add similar row just simply click on duplicate row and here i'm adding some more item okay and now if we want to change the spacing between these two column we can also do that so for that just click here and going to design tab going to spacing and for top padding we can make it to zero and i think this looks okay now and now save it and finally if we take the tablet view this looks like this okay so for tablet i think we can make the text alignment to center so just going here going to design tab going to text and here is alignment so for tablet i am selecting the tablet view and making the alignment to center and it's also work for a phone okay and now i'm going to copy the style copy module style and paste it okay now save it and going to view page and here we can also create a details page for each project so now if we check the website here if we click on the project one so here we can see it's a different page so now i'm going to create a details page for project so for that again i'm going to dashboard and here here is the project i am creating a project page going to add new and project name for example i am typing project 1 publish use dv builder and choose page so now i'm going to copy the portfolio page and here i'm just simply changing the title to project one and here i'm just removing this row and for this row i'm deleting all these and we can make it to two column row [Music] and for the left side instead of blur module here we can use a image so now i am going to add a image searching for image going to upload this image and then going to design tab going to sizing and force to follow it and also i'm just removing this one and now for the right side we can add some text like this page okay so i'm going to copy this text and on the right side i'm taking a text module and here this one i'm making it to h3 and then finally here we can add a button so here you can change the button text to visit site or live project as you want and in a similar way we can add more details or more information for this project and now here we can move this text to right side also this line and here i'm making the alignment to lift going here or click here then going to alignment left and also for this line going to design tab going to line or going to sizing from here we can make the alignment to left and save it and here i'm removing this row okay so this page is done and i'm saving it and here we can add some more spacing between this button and text and save changes and finally if we check the tablet [Music] looks good and for the phone view it also looks good and now going to view page okay so here we have created this page from the project list so when we use the portfolio module from db this page will be automatically linked with each project but here i'm using a different module so here i have to link this page manually so i'm going to copy this url then going to edit this page and now click on this then scroll down and link so here for the whole module i'm setting this url and save it now save this page okay so in the similar way we can create different project page and then we have to link this page with the specific project now going to view page okay so our portfolio page is done then going to block and here before customizing the blog page i'm going to upload some dummy blog so for that again i'm going to dashboard and going to post then going to add new and here i'm creating a new blog so here we have to type the post title so for example here i'm typing how to make a wordpress website and then here is post content so for post text we are using the default editor because here we will design the block page globally so from this page i'm not going to use dv builder so let's use default editor and here i'm adding some dummy text going to lorem if some page leave some and simply copy some text from here and paste it and then going to post going to featured image so from here we have to upload our post featured image so for post i am going to upload some images and then here is category so for each post we can add some specific categories so for that going to add new category and here the name i'm typing wordpress and add new okay and page layout we can skip the page layout design from here because for designing the block page i will do that from the theme builder option so for now here is all and publish and here if we want to add any image inside our blog post for example inside our text if you want to add any more images just click here then plus and here is image so upload image and here we can add any more image to our block and also we can increase the image size like this way and for the text field we can also customize any text like we can make any text to bold italic also change the alignment so here is some more options to customize our text and images and finally after making any changes don't forget to update okay so now again i'm going back and in the similar way we can create more blog post so to create more blog in a short time most of the time i use a plugin so i'm going to add a new plugin here i'm typing duplicate post or simply duplicate and here this is the plugin i'm going to install this one duplicate page and activate and now if we go to our post here we will find a new button duplicate this so just simply click on here and this page is duplicated to a draft format so now if we want to publish this one first we have to go to edit and here if we want to change the titles just click on here and type and we can also change the text and then going to post and from here we can also upload another image and then url so from here you can also add new url so here when we remove the slack and just click here so it will get by default this updated url and then finally publish okay and now going again and in the similar way i'm just going to create several more blog posts very quickly okay so i have created here six blog posts with dummy data now again i'm going to design the blog page so going here enable visual builder and clone existing page going to duplicate about and here i'm typing blog and this section we can remove this one for block page and here we can also remove all these and here we can also change this text to latest block and then i am taking a another row taking a full column row then searching for block taking this one and here it's taking the default layout if we go to the design tab then layout here is taking a full width layout so for this one i am going to take the grid layout and it looks like this then if i go to content going to element and here is show featured image show author show date show categories all is there and here is the details so we can make it off for this time and now if we check the website here you can see the blog post looking like this so now i'm going to create something like this so here i want to add the read more button so here is show read more button okay so here is the text and now i'm going to styling the text and image so now going to design tab and first going to style the image and here i want to add some border so for that image border width i'm making it to 20 pixel and we can set the color to white so now it's in the same alignment with the text and here we can remove the border for bottom area so for that i'm going here and for the bottom area we can set the border width to zero okay and now we want to remove this box border so for that again going to here going to border and from here i'm making the border width to zero and now for this font i am going again here and for this font style if we check here here is font style is ok so for this font style we can make it as it is and here we can also decrease the font size and we can change the color to black and for this text i'm making it to [Music] up and text transform to upper case color to this color and font size we can decrease the font size 12 pixel or anything and then finally the read more button so here it's getting the pink color and for text text transform to uppercase and then text size to 14 pixel okay looks good and for this box area we can add some box shadow so going here and in this way and save it and finally if we want to decrease the spacing between each post so we can also do that so for that i'm going to row settings going to design tab going to sizing and use custom cutter with make it on and from here we can decrease the spacing and save it okay i think this looks good and finally if we take the tablet view it looks like this and also for the phone view it looks like this okay so finally i am going to save this page and now going to view page and now if we click on any single blog post we can see the blog post page is looking like this so now i'm going to designing the single blog post also so for that again i'm going to dv dv theme builder then going to add new template and all blog post okay so we can select all post and create template then save changes and for the body part i'm going to add custom body and now going to build custom body and clone existing page i'm going to duplicate the blog here we can place the blog post title so for that i'm making it to dynamic so just click on here use dynamic content and here post or archive title so by default it will get our post title and now i am going to styling this text so going to design going to text and here i am taking the font family same as others cormorant and making the font color to white and font size we can make it to 35 or we can also increase it and making the font weight to regular and here i'm making the text alignment to center so for that going here making the text alignment to center okay and now if we check the font size for others view so for that going here going to phone view for tablet it's looking like this i'm making it to 35 and i think this looks good and for phone we can also decrease it to 30 pixel and text line height we can make it to 1 or 1.2 and also for tablet we can make the line height 1.2 okay looks good now i'm saving it and now here we can move this line to top and here we can also remove the spacing between these two so i'm making it smaller and going here going to design tab going to spacing and for top padding making it to zero and for top margin making it to zero and here i think we can add some minus margin for top so adding minus 20 okay now looks good and then here i'm removing all these blocks and here i'm adding blog post so searching for post and here is post content okay so here we will get dynamic content from blog post and here we can also customize the font size and font family globally so for that for example here i am going to change all this font style going to here going to text font weight so i'm making it to light so by default it will get this font style for all block post and we can also change the heading text i think this looks okay and here we can remove this text and we can also add a image so here we can add a image and now i'm making it to dynamic so i'm removing it and here i'm going to add a dynamic featured image okay so by default here we'll get the featured image from our blog post and now saving it and here we can design this blog page or this image area as we like to do so here we can make this image to full width so for that going to column settings and making it to full column width so it's taking the full width now and here we can also decrease the spacing from bottom and for image this looks good okay so now i'm saving it and now i'm just crossing it and save changes and now if we refresh the blog post page so now it looks like this okay so it's taking the small weight by default we can also increase the image size so for that again i'm going here going to custom body and now again going here going to design tab going to sizing and making it to full width and here we can also make it smaller so if we go back to previous state like this and we can move the image to center and here if we now change the structure to this one and now i'm removing the spacing for row i'm going here going to spacing for top padding making it to zero and going to this section settings going to design tab going to spacing for top padding making it to zero okay and now again i'm going to this image settings going to design tab going to spacing and for top margin i'm going to add some minus margin so for that going to minus 30 pixel or you can increase it okay so i made it now 50 pixel and save it and save the page and now if we refresh the page again you can see it looks like this and here we can also increase the header height and we can also add more style as we like so for that again going to the header settings going to design tab going to spacing so here we can increase the padding like this way and finally if i take the tablet view [Music] so it looks like this going here going to design tab going to spacing and going to tablet view so we can make it to minus 40 or minus 60 and also for phone view if we make it to minus 100 and save it now so now let's check it again going to refresh so now it's look like this and if we check the responsive so for tablet it looks like this and if we check the phone view it looks like this okay so now if i go to the phone view from here so i think for the phone view we can increase the spacing so for that again going to row settings going to design tab going to spacing and for phone view we can make it to 6v8 [Music] and for tablet we can also make it to 7v8 [Music] okay so for phone view looks good and also for tablet i think this looks okay or we can increase this font size for tablet so for this font going to design tab going to text and here is the font size for tablet so here we can make it to 45 and now finally checking it for tablet yeah so looks good now and finally going back to desktop mode i think for desktop we can also increase the font size going to design tab going to text and for desktop we can make it to 50 pixel and save it and check now okay okay so i think this okay for now we can go with this and next i'm going to design our contact page so going to contact now going to enable visual builder and this time i'm going to choose a premade layout [Music] and dv has tons of premade layout so here you can search for contact so here i'm typing contact and now here we can see all these contact page so from here you can choose any one let's choose one from here okay for example this time i'm taking this one and use this layout [Music] and now i will customize this page to match with our others pages so first i'm going to add a page title so going to add a new section here going to add from library we already saved the page header before so now i'm going to import this one and simply moving it to top and here i'm changing it to contact and also i'm going to remove this one and from here we can also remove the map if we don't like to use this one and you can keep this section but here i like to use some minimal so i'm also removing this one so here i will keep only this information this form and then we can keep this effective section okay and now finally going to edit this one to match with our color and font style so for this icon we can make this color to this color and this font style here we can also increase this font size a bit and for this one font family is okay we can make it to light and color we can make it too dark here we can make also this color to black and now i am going to copy this style going to copy module style and then paste it here paste it here and also going to paste it here also save changes and now for this form i'm going to edit this form and here we can also customize the form field so here is name email subject phone number so here if we want to add more field we can also do that for this time i'm just leaving it as it is and now for this button we can make the button style same as our others button so for that button background color we can remove this background color and text color will be this one and for the border color we can use this color and here is border width will be one pixel okay and for hovering style going to text color going to hover and on hover you can make the color to white and for the background color going to hover and for hover you can make the color to like this and this icon we can remove this icon so making it off okay looks good and on the default style it looks like this and here for the form settings here when people fill all this form and click on the submit button all this information will redirect to a email address so from here by default it will redirect to your wordpress admin email address but here you can also set a different email address if you want to use and by default you will get all these field information but here you can also customize specific field as per your need and now if we want to change any form field for example if we score here and here is name so if we want to change this name to first name or anything just change it from title like name test so we can see the name is changing from here and also if we want to add a new field with this form so for that from here we can add a new field so here is our new field we can change the title to skype or anything and here is field id we can copy the same name for field id and field options so from here we can select the input fields type here we can select input field type email field text area check box radio buttons and drop downs so for text format we can use input field and from here we can also add condition for minimum length maximum length for the number of text and then here is alert symbol so from here we can also set a condition how will be the field input type and then we can make it required or not and here we can also add some conditional logic so i'm not going through all this advanced option i have also created another tutorial about this db form so i will leave that tutorial link in my description you can check that and here one more thing if we want to make this field width to 50 percent or 100 percent we can also do that from here going to design tab going to layout and here by default this is full width we can make it to off and now it's working like 50 percent okay and when it's done just save it and also if we want to move this field to top or above the message field just simply drag it from here and move it to top okay i hope you understand the concept how we can create or edit any field now i'm removing it and then here is from title i'm not using it then success message so here we can set any specific message so when someone fill this form and click on submit so after submitting this form they can get a specific message and here is submit button text by default this is submit we can also type here anything and next here is email option i have already described this part then redirect so from here we can enable any url for redirect so after submitting this form people will redirect to a certain url then spam protection so from here we can anabolic basic captcha so it will work like this it will work for spam protection and use a sperm protection service so here we can also use any third party provider service for example google captcha or anything and then here is link these are not necessary here okay so now i'm saving it and then here is the faq section so here we can change the font style so going here we can also change the font family to our font making it to bold changing the color to black or this one and for faq here font family you can check the font family's default and here you can also increase the font size or you can change the color to this one font size we can make it to 20 okay i think this okay and also for this font if we go there here is monster.light okay we can keep it as it is so i'm going to copy the style copy module style and here i'm going to paste module style okay so this is done and here we can also remove this icon as we are not using this any other places and instead of this icon we can also use a line which we used before but here we can also leave it as it is i'm going to save this page okay and finally if we check the tablet view we can see it looks like this looks good and if we check the phone view the phone viewer also looks like this okay going to desktop and here one more thing for the text style for this form we can also change the font family or font style so going here making it to light and changing the color to fill text color from here you can make it to like this or like this okay i'm saving it and save this page again okay so our contact page is also ready now i'm going to view page and now again going to home page and finally here i forgot to mention one last step so that's the sticky menu effect so when we scroll down you can see here is showing the sticky header but here this is fully transparent so we cannot see the white text menu item and logo so here i want to create a light transparent background so you can see all this white text so to customize the sticky header again i am going to theme customizer then going to header and navigation then fix navigation settings and now if we scroll down you can see the header sticky so from here primary menu background color so from here we can change the color to black and the transparency we can increase the transparency so now it looks like this okay so i think this is okay now okay so now i'm saving it and finally one more thing is phone menu so only go to tablet or mobile view and go to top and checking the menu item we can see our menu background color is fully transparent as here we are using the transparent header so for phone and tablet here is also showing the transparent background so here we need to add a transparent background same as our sticky header so here we have to add some small css for that i'm going here going to additional css and here simply copy these css and paste it here i will leave the css line code in my description so you can copy from there now publish and going back now if we check the tabulate view so it's looking like this and also for phone view it's looking like this all right so now if we refresh our website and scroll down so our sticky header is showing and when we check our phone view we can see the mobile menu background color is showing also okay so here is all for today i hope this tutorial will help you if you like this video give this video a big thumbs up otherwise you may not find this kind of valuable tutorial next time and if you are new here like to see my more upcoming videos don't forget to subscribe my channel thank you and welcome to my next tutorial

Channel: Farjana Rashid

Views: 9,948

Keywords: divi theme, divi tutorial 2021, elegant themes 2021, divi 2021, wordpress tutorial 2021, farjana rashid, create a wordpress website, make a wordpress website, divi, how to make a wordpress website, how to make a website in wordpress, how to make a website with divi, divi tutorial, divi theme tutorial, divi theme wordpress, wordpress website, how to make a wordpress website with divi, how to make a wordpress website for beginners, how to make a wordpress website 2021

Id: ax3vG2P_kFk

Length: 127min 9sec (7629 seconds)

Published: Fri Apr 02 2021