[Complete Tutorial] How to create a wordpress website for beginners | DIVI Theme

do you want to learn how to make a beautiful website yourself without spending too much time then you are in the right place hi my name is Tatiana and in this tutorial I'll show you step by step how you can create an amazing website using te team let me show you which we are going to cover in today's tutorial this is the website which we are going to develop this is a clean modern and elegant design website here I will show you how can design all these sections and all these pages step by step and for this design we are going to use the Divi theme which is the most popular WordPress theme in the world where we get the most flexible Divi builder to see the power of Divi builder just click on animal visual builder and here you can do all these things by simply drag-and-drop with Gino pouring experience it can make a professional level website with this Pinto here we can simply add background image or gradient color or you can add a video background in easy way we can increase or decrease spacing simply dragging it moving any item to placate in it and here I will show you how you can add a simple contact form we can check it and fix it for mobile view and tablet view also we can make changes any specific item for mobile or tablet view and you can enabled or disabled any item for mobile or desktop only finally we will get 800 plus premade layout with this DVD that's why more than 2 million people using DBT now let's get start so fast here I will show you how to buy a domain and hosting and here I will also show you how you can get 60 percent discount through my link then we will install WordPress and then I'll show you how to install Divi theme and finally I will show you how to create our amazing website if you have web hosting already you can skip this part or if you don't have then follow along so to get domain and hosting just go to for jana sitcom and here go to tools and here is good hosting here is Bluehost hosting link so now click on get started so why Bluehost in my opinion Bluehost is the best toy hosting provider I am a web developer I type so many web 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 e if you've seen 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 we have multiple website more than one you can pick your plus or tres plus options though both options are almost same choice plus options have domain privacy plus prediction 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 ecommerce website and if you have millions of visitors already as beginner let's start with the basic plan it will cost only $3.00 95 cent per month and you will get one inside 50 GB SSD storage and metered bandwidth free SSL certificate standard performance one included domain five-part domains and 25 subdomains and in this price is awesome but in future if you have multiple website you can upgrade it to their Plus plan so basically we can update or downgrade or plan any time now let's click on select now if you have domain name already you can type your domain name here and configure it I am 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 v dot website and so many options but I always saw this 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 Jana WP so my domain name will be for Jana WP calm and I am clicking to next so here is showing the domain name for Jana WP comm is available awesome now I need to put my account information here so here I'm tapping my first name last name my business name and selecting my country and here is my street address city postal code and typing my phone number and email address and here the email address is really important to make sure you are putting your best email address because after completing purchase receipt will sent to that email address now here is the package information by default if selected for 33 months that means for 3 years and if you now see the price is showing $3 95 cents per month but we can reduce this price here we only take the necessities for studying we can take it for one year that means for 12 month and it will cost $5 95 cents per it's still pretty cheap so now we can see the total price emitting one dollar forty cent for a whole year there'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 pet button or outside of this page here we will see a pop-up window which will offering you last price $2 $0.65 per month now click on claim savings and now you can see the price $2 65 cents per month when three are selected so now I'm going to select 12 months price again and here you can see the total price now showing $59 40 cent 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 the 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 lock security and court guard basic I don't need Cyclops security and quad core basic either so I'm deselect in those as well so now you can see the total price is now $59 40 cent for a whole year now here I am putting my payment information so here I'm tapping my credit card number and here I am putting my Civic code the expiration date and now also select this check icon so you are agreed with the 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 helped 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 Divya at 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 an invoice for my parties now from here we have to create a account here is my domain name and here I have to type a password and type in my password and retype it checking on their privacy policy and create account ok now save it so your account is ready to go you can log-in so now I'm going to log in here I need to type my password which I already created now and logging I'm saving it for now I am stupid because I will do it later with you in step by step I'm clicking on get started planning of domain privacy and protection and confirm it so we have successfully completed purchasing our domain and hosting to install WordPress from Bluehost it's so much easy stolid so here after going to home page just click on WordPress and your WordPress website installed in our domain here awesome so we can install our WordPress website less than a few seconds so now we have installed our WordPress successfully after installing WordPress I like to clean my WordPress dashboard so I am just removing which is not necessary clean it here so here I am removing it removing it and I also don't need these options but these are coming from default plug-in installed here so I'm going to my plugins and here I'm deactivating this plug-in also this one selecting this one this one this one and deactivating all this and clicking on apply now I am selecting all and selecting from here delete and apply so now I am deleting all plugins next I am going to my post and from here also deleting this default post and going to trust and from here we can delete it permanently or just click on empty trust okay next I'm going to page and here is to page by default I'm also selecting this and move to trust apply in similar way I'm going to trust and empty just okay next I'm going to users okay now I'm going to edit user from here we can change our admin color scheme here is this is default we can change also to this or this or any other color for this and just leaving it as default and next from here we can set my first name last name and my nickname here I am setting my nickname for Jana Russia and next here is display name publicly s so from here we can change name give my user name or for general she'd here I'm selecting for general sheets so when I created any blog post it will show my name as auto name and from here we can change also our email address I'm leaving it for now and also here we can add some bio about author here is demo bio and next here we can change our password from here we can generate or retype our new password so for now I am leaving it and now update my profile next I am going to settings and from general here we can set our site title so here I'm typing website title for example with design and development company and tagline we develop website okay and from here we can change our website URL and from here we can change our admin email address and here others is okay for now now I'm going to save changes and next I am going to reading and from here I'm just disabling such engines from indexing this site because we are still developing this site when the site will be ready and SEO friendly then we can make it on for now I am disabling it and Save Changes and finally I am going to Parmalee and here by default sometimes it goes to any other options but we always said it for post name so when we create any post our Pharma link will show as in this way so first our domain address then slash and then sample post so here will be our post title and now I'm going to save it next I'm going to pages and here I will create some page going to add new and from here I am creating fast my home page and publish it then add new and next about us and publish it next I am creating service page service services and creating another here I am creating my service pages so here are my services web design another one graphics design publish it and next WordPress website publish it next I am creating portfolio page then block page and contact page okay so our page is created now I'm going to visit my website so here is a default style for our WordPress website we have created our page but wait we cannot see anything here for that I'm going to create menu items so I'm going to appearance and menu so from here we have to create a menu name so here we can type any name so for example I'm typing my top menu and create menu and from left side here is all my pages which I just created now so here I'm selecting all my pages and after menu now I'm selecting display location so I am selecting primary and say menu ok so now I'm going to refresh my page again okay so here we can see here is our menu it's showing here but here we want to organize our menu item so first I want to place my home item so it's easy to here just drag and drop so first I am dragging it to top then I want about Us page so then I'm placing it here and then service so I am placing my service page and then here is my other services web design graphics design and what press design then portfolio page it block page and contact page and here this tree service item should go under this service item so here I'm just dragging it little right side and place it here also this one and this one and here what press website a service under web design so I am also placing it under this and move it on right side yes so again we can move it to top okay perfect so now under services we can see to service item and under web design here is another submenu item now I'm going to save my menu okay now refresh my page again okay so here fast our home item then about us services and here you can see our graphics design web design and WordPress website here this is not showing under web design and sub menu here is the default structure of this theme which is running and then portfolio blog and contact now I'm going to themes option and here 2019 theme is what pres default theme which is already installed here now I'm changing this default team to another one going to activate it okay now refresh my page again okay so now we can see our website design is changed than before and our mini style also changed here we can see our sub menu item and another submenu under web design you look better but still it's not the professional design now I'm going to change another one and refresh my page again yes so now we can see our style also changing so for different team style we can see our website design is changing so for this tutorial I'm going to install diva team so to get diva team just go to forge a new sitcom and then go to tools and here what press theme under this here is TV theme just click on get started and then go to pricing and here is two options you can take it for really access for Ellie price $89 per year and here is also another amazing part you can also buy this for lifetime access so you can take it for lifetime with this price and you can use it for unlimited website and unlimited times I have already buy it for unlimited times so I am just skipping it for this tutorial you can buy it for one year or if you have multiple website and you if you want to use it for several times then I'll command you to buy it for lifetime access and if you have only one if side did you can take it for one year and you need to renew it after one year so after downloading Divi team we are going to install it going to add new and upload theme so I'm browsing my zip file for diva team I'm selecting it and open it now I'm going to install it it will take some time to upload it ok so now I'm going to activate my team so now we have successfully installed our diva team so now we can see our default style already changed so here is our default style here is the another thing before going started I'm going to settings and reading so from here we we need to set our homepage and host bit so I am selecting a static page and from home page I'm selecting my home page so it will be our default home page and for post page you can select our blog page ok now I'm going to save changes that's it now I'm going to DV and DV theme options so first we need to activate our Divi theme properly so I'm going to update and here we need to put our username and API key so here I am putting my username and API key and save changes great now I'm going to general tab so from here I'm going to upload my logo here I'm uploading I'm selecting my file set as logo and next from here here is the default color plate so in design time we need to use this color plate several times so here is a short way we can change our color plate so that we can use theme color quickly from here so here I'm taking some color which I will use in my team design so here is a light blue color I will use it and next I'm taking a light green color and dark color is okay and here I'm taking a lighter color for my text color and okay for now it's okay we can change it later and from here we can set our social icon so here I will use Facebook icon Twitter for now I'm leaving it or Google+ and I do not use it can show Instagram icon I will not use RSS so I am leaving it so here I'm putting my Facebook page URL here so here is my Facebook page URL I'm adding it here and others profile I'm not adding now and I'm going to save changes and next I'm going to indication here I will add Google Analytics code okay so to get Google Analytics code I am going to google and type in google analytics analytics and going to Google Analytics I have account here already so I am locked in here now I'm going to admin and create account and here my new account name typing DB website Google products and service and the selecting this clicking on next here I want to measure your website here is my website I'm going clicking to next now here is my website name for Jan WP and here I need to put my website URL and Industry I'm just selecting a random one for now and here is the porting time or selecting time John I'm from Bangladesh so I'm selecting Bangladesh and created and accepting it I accept okay so here is my coat I need to copy it I'm just clicking on it a single time and control C and just paste it here that's it now I'm going to save changes okay so next I'm going to appearance and customize option so from here I'm doing some basic settings so I'm first going to general settings and here typography here I'm setting body text size body line height is OK body header text size I'm selecting it to 35 and hidden letter spacing and header line height 1.2 and the font style I'm selecting it to uppercase and had a font family I'm setting it to monster art and body font similar font I'm using here here is body link color is okay for now body text color I'm setting it to 3 3 3 and inner text color to dark more 1 1 1 and publish it next I am going to header so here is header style here is several options for header style here is default style we can make it centered or centered inline logo or sliding holy screen option so for now I'm keeping it default save it and next I'm going to primary menu bar here is also we can set our logo height menu height text size so here is our menu text style you can change our menu font family I'm using similar font for our menu item and font font style to uppercase and text color to similar and link color okay I'm leaving it for now and drop down menu text color I am using same okay now save it next I'm going to secondary menu bar here I did not add any secondary menu so skipping it next fixed navigation settings so when you scroll down here you can see here is our fixed menu so we can also style it for this time it's okay here is header element we can hide our such icon or show our social menu icon and from here we can set our phone number or email address for this we need to add a secondary menu bar so for now I am NOT adding secondary menu bar so I'm going with that I'm just saving it and going back and again I'm going to footer and elements here is social icon show him we can also pivot so for now it's okay and here is our bottom bar you can change our text color background color here I'm adding my background color to blue color and I'm removing transparency and text color to white color for footer and social icon color also be white and social icon size I am just decreasing it okay now I'm going to save it I'm going back next here is button so I like to add some default button style so here is our button style so here is text color background color we can sit here is text color white I'm adding background color to black and transparency no transparency and border width I mean not any border border color border radius no border radius and letter spacing I'm adding letter spacing some and pattern font style and button font family I'm using similar font here and at button icon button I can color okay just leaving it I'm saving it and I'm going to buttonhole vice time here is also text color button background color I'm using same style for hava no border no border radius litter spacing okay just I'm going to save it going back again okay so for now it's okay I'm going back now I'm going to visit my website okay so now I'm going to edit my homepage so I'm going to enable visual builder from here so first I'm going to introducing you about this builder your first will come three different options one is built from scratch choose a pre-med layout if he has a really primitive design which we can use and clone existing page so if you design a page already then we can make it clone here so as it is a new page design so I am going to start from scratch start building so fast here and introducing it this structure so here is a section and under this section here you can take a new row so here is several options we can take one column row two column Row three column row and here is too many options so fast here and take to column row and under these we can take here different kind of modules so here is several modules we can use it in our design so for example I am taking here text module and in website and taking an image module okay so in each module when I click on this gear icon for example for this text module we can change our text from here and here is several options to style our text so we can make our text ball we can make our text Italy and here is list option here is numbered list option and here if we want to make any word to be linked for example here I am adding a link click here and I want to make this text as hyperlink so I need to select this text and click on this link icon so here I need to paste any link specific link and here is text to display and here we can make it a new window or for this window and then we will click on ok and here is too many options we can set our block cut style so when we will add any photo text for example when we select this text and click on this block code here we can see we are getting a different style border in website sorry border in left side and blue color powder in rack left so here we can also style this border color and text style just click on this icon and we are going to this style option so from here we can also change our block code font to a different font style and also block code font way to bold and font style to uppercase and alignment make it center or left or right and we can also change our text color to any color and font size we can also change our block code letter spacing and block code line height and we can also add text shadow here and here we can also set horizontal length for this shadow but this time I am just disabling this text and here we can also change this border color so we can change also this border color style okay so this is not any good style at all so I'm just doing this to explaining you how it works here and when our editing is done we just click on this Save icon and in similar way we can also edit this link style text style but before this we just need to click on this gear icon and then we can select our text our link style our block of style and any item style just click in on this simple brush icon so here this is the quick and shortcut way we can also find these design options so just when we go to this tab item and here we will also find all these design options a step by step so here is all together now I'm going to right side and going to style this image options so similar way I'm clicking on this gear icon I'm just moving this window in left side we can move it to anywhere in our suitable space you can make it our website and from here we can see our full screen smaller personally I prefer in this way so I can see my full screen in real view and here we can also make it larger or smaller so personally I prefer this way so now I'm going to change this image style so here I'm changing this image this is default image so I'm clicking on it and from media library I'm going to upload new image from my computer select files and I'm selecting this image upload this image and next from here we can also add a link with this image we can also set it open with a lightbox so when we click on this our image will pop up when I click on this image and here we can also see background color option so we can also change background color for this image so for this image cannot see this in proper way so you can see this for our text item letter and for now I'm going to design tab and here we can see we can set our image alignment to Center all right side here my image size is already large so it's not showing the alignment position and we can change our image size from here we can make our image width to be smaller we can set our module alignment from here and we can set also image height here is a spacing so here we can set our image margin top bottom left and right and we can also set heading from here we can also add border from here bought a wheat border color and border style you can set different border style here and here we can set also so here I am just leaving this border color from here we can set also box shadow with this image I like to use this box shadow for any image most of the cases and here we can also change this shadow color their school and even we can also change our shadow position shadow vertical position and shadow blurry strength and shadow spread strength that's cool and here we can also see animation is child so we can add some custom animation style with this item so when I scroll down this item will appear with this animation style awesome and here we can change our animation direction so it will count from right side left side up or down awesome now here is more animation option so we can set animation speed curve animation repeat it will repeat in a loop way or just for once so here is so many options you can see for each module option and here we will see a Advanced tab and from here we can set our thesis I and CSS class so we can add more custom style using CSS class and here also custom CSS adding options so from here we can add some more CSS in quick way and here is attribute options we can also set image also Nick text from here it means title text from here and we can set visibility from here we can also make it disabled for phone and tablet or even for desktop and here we can set our item horizontal position so here you can set JD index and lastly here we can set transition speed curve so here is different options and different flexibility to make our item look more better and here next I'm taking a new row with three columns here I'm taking blog module and I'm just duplicating it click just clicking on this duplicate icon just drag it to another column and duplicate it again and drag it to another column and now I'm just clicking on this gear icon to edit this style from here we can change our title module title we can change our blog title to item 1 and from here we can change also text and here we can add any image we can set image from here or we can use another image for this item I am just using this image for now and here also link options so from here we can set a URL for title or set a URL for this whole module option and from here we can set background color so from here we can add different type background color and here we can see several types of background color options so we can also set background gradient from here and we can also change it and you can set gradient type linear or radial and gradient direction and start position so when we make it to 50 percent and in position say met our step position then we can see here is the straight line generating this section and from here we can change our gradient direction there school but I don't want in this way and from here we can set trace brilliant above background image so if we use any background image with this background color from here we can add our background image so I'm adding a background image with this section so when we want to add any image with this background gradient color then we just need to make it on and making the transparency lower so we can add image and this gradient color same time and this time we can make our text color to white color and our title color to white color also and from here we can see it also spacing so here I am adding some padding so I'm clicking on is facing and adding some padding 20 pixels top and bottom and 20 pick the left and right those this is not looking so professional but I am just showing you to make clear understanding about this item so now I'm going to save it so I want to place this style to other items so I'm just clicking here and copy madula style and selecting this item and hast medulla style and similar way tests Modula style so it's a quick way to make make this style copy to other item and I'm also using images here sorry I'm using image same image here and also here and next I'm going to changing this Roy Stiles so similar way I am just clicking on this gear icon and from here now I'm going to design tab and went to sizing from here we can change the spacing between our items so I'm clicking on custom cutter with and from here we can change our gutter with and we can also make it zero spacing or less just changing this width and we can make also equal column height we can change also our rowid from here we can make it hundred-percent for this we need to make it also hundred percent but for now I am just moving it to default and we can set also row alignment from here and we can set also min height height Mac site and now we can set also spacing for this row we can add some spacing can add some padding and similar style like other module items you can also do for all settings and now I'm going to edit this section style so for this I'm going to change this background color you can change this background color to different style and from design tab we can also change layout can divide there's so four sections here is the amazing part you can add divider with our sections top and bottom so when we add a new section we can see it clearly so when we went to edit this section now I'm going to design tab and dividers and when to bottom so from here we can add several kinds of dividers with our sections so I'm moving it on right side so you can see so from here we can add different divider style for this bottom section and we can even set our divider height and from here we just increase our section padding just dragging it down and similar way we can do it for our row section and now when I just click on this bottom icon from here we can save our full page style and here we can import our export our page design and from here here is the amazing options for DV so if we did any mistake we can just go into our previous state just clicking on here so from here we can move any work state if we did in a mistake we can just move from here and from here we can set our page settings so here is page title page featured image so from here we can set our featured image for this page we can set also full page background color even safe section background color by default from here and from here we can see also design tab and Advanced tab I'm just saving it and from here we can also delete this page and from here we can save this page and from here we can add any pre-made layout of DV and from here we can also export any set layout or an existing page it may replace our current page style so I'm noting this for this time and left side from clicking on this icon here is the top view so when they click on this tablet we can see our tablet view from here and clicking on this mobile icon we can see our mobile view from here and when you click on this icon we can see the wireframe mode for our design so there's 8 for now so now I'm going to start a new design for my home page so I'm going to delete this full section and just going to start a new design for our home page so I am taking a new section and taking a full width section for top area and here I'm taking full width header and I'm just removing this top section I don't need this now I'm going to edit this section clicking this gear icon and changing my title for example we design your website and then I'm just typing on this button text here and start being read more and for now I am just leaving this text and I'm going to design tab and going to layout and I'm making it Center aligned and here I'm making this fully screen so I am making this design to fully screen and now I'm going to content background and I'm changing this background color I'm deleting it and say setting here a background image I am setting this image here and also adding some gradient color and doing some gradient color and setting this gradient above background image and Here I am just decreasing transparency and for this color also yes looks better and I want to increase this text so here I am increasing this text size and from here I just want to make this two word too bold so changing this custom style with this few word so I'm going to clicking on create icon and from here I am just removing this text from here and putting it body text and now I'm making it to h1 tag and now I'm selecting these two text and making it too bold okay so now I'm going to style my button so before i style from here i prefer to do this from default style chains so for this i'm going to end in my dashboard and from here i'm going to customize option and then going to buttons button is style and from here i am just changing text size so here I am making text size for button 14 pixel and from here I'm setting the letter spacing to pixel and from here add icon with button so I am NOT interested to add this icon with button so I am selecting no and from here we can set our button font so I'm changing it again to open sense and now I'm going to publish it okay so now I'm going to refresh my page view again and now it looks so smaller so I want to make this a larger so I need to add some padding spacing with this pattern so I'm going to change this style again going to button style and and from here show button one icon I'm hiding it and from here I can add some spacing with this button so here and trying with 10 pixel for top and bottom and 25 pixel for left and right or we can increase it to 30 pixel I think it's look much better now I'm going to save it or we can increase it more top and bottom can use 15 pixel 12 pixel and far left and right you can increase it okay it's okay now I am going to save it and here for this section bottom area you can add an arrow scroll it down so I'm going to again this gear icon and going to design tab and scroll down icon so here show scroll down button so I am just clicking it on and now you can see here is a nice scroll down button so here is a very style for this icon we can select any one we can use it for now or simply this now I'm going to save it okay so our top part is almost done now I'm going to add a new section under this here I'm taking a regular section and taking a single column row and here I'm taking a title so for this and taking a text module so here I will add some text as title so now I am selecting this text and from here I'm making it a stew tag so this text I will use as my title text so I'm going to style this text I'm making it to uppercase sorry it's taking by default from my customized option and here I'm making it a Leyden to Center and from here I'm just making this last two word to bold just looking it more better now I'm going to save it so I need to increase this text size a bit so I'm going to design section again and increasing the text size to 35 picks them I think it looks more better as a title and I'm going to save this module as title text so for this I am going to save it saving this layout name as title text so we can use this style next time easily I'm going to save it and next I'm adding some text as description okay so I'm just using some dummy text here just duplicating it again and here it's taking fluid so here I want to decrease this weight so for this I'm going to design section going to sizing and from here and can decrease the width so it can make it 75% and alignment to center pay looks better you can decrease some text from here and you can make the text alignment also Center and that's it now going to save it and under these you can add a button so I'm going to add a button here so this is taking default style making its alignment center and here I want to add some botanist tine which will work for all button globally so for this I'm going to click this global icon and from here I'm going to design tab button and from here I'm using button text color to white so for this first I need to on this custom style for button and then I'm changing this color style to white and also adding some padding with this button went to spacing and from here can add similar spacing to a pixel for top and bottom and 30 pigs L for left and right we can increase it and now I'm going to save it and yes I'm sure here is a Papa button so it will work for all button style as global style I'm saving it now I'm taking another section below and I'm taking here regular section and taking a single column row and for the first area I am just taking this title so here I'm taking from ad from library and title text and changing the text from here so here I'm typing what we do and making this too bold and save it and for this section I'm changing the section background color so I'm going to section edit and back down and from here I am adding a gradient color okay for now I am just using it and for this section I am making this title color or text color to white making this title color to white and save it and here another text module and adding some dummy text also here I'm adding same style so I'm just copy module style from here and paste it and changing the text color to white save it and under this I'm taking a new row with three columns and here I'm taking some blog module here I want to use icon instead of this image so I'm going to image and icon and from here I'm clicking on icon so from here I'm selecting a icon and here I'm changing the text title from here I'm using here UI design and keeping this dummy text for now and now I'm going to stir this item so fast here I'm going to change the background color to white and adding some spacing or padding from spacing and adding some padding here top and bottom and same for left and right I'm adding more and increasing for left and right okay looks better and next I'm making the text alignment to Center and also making these title text to alignment Center and now I am editing this icon so now I am making this circle icon and icon color to white and making this circle color to dark color I think it looks better okay now going to save it okay now I will duplicate this and paste it to another column and duplicate again and we can also edit this text and icon from here I'm typing here brand identity and also changing the icon so here I am using another one and save it also changing it typing here web development and also changing this icon save it and now we can also duplicate this full row section but before this I just need to edit this row now I'm going to design section and siding and from here I'm just turning on this custom cutter width and decreasing this cutter with to two so now the spacing between items less than before so now I'm going to save it and now I just duplicate this raw section and now we can also edit this item one by one and trapping here is strategy and also changing the icon color in similar way and save it and I am doing for others to see similar way I'm trapping here web design and here I'm using this icon here photography okay so now I'm going to save this page and clicking here exit visual builder now here is the actual design for this home page which we already did till now and for tapia we can make also our header make transparent so for this I am going to theme customizer option and from here I'm going to header and navigation and primary menu bar then from here background color now I am changing this color transparency to zero and that's it so now you can see our header is transparent but menu color it will look more better if we use white color here and drop down color is also being transparent so here drop down menu color I'm using here white color and I'm making the menu text color to white we can also change our logo color to a white color logo now I'm going to save it and refresh my page again and here is still showing our drop-down item background-color:transparent but we don't want this drop down color transparent it will look better if your spectrum color to white or something like this so I am going to egg in to customize it now just I am making this color again to white and now checking a and drop-down menu text color to a dark color and now it's showing good and here is link color active link color and making it to white okay I think it looks okay now now I'm going to save it and refresh my page again okay so our top part looks better and when we scroll down our sticky menu background color also being transparent but we want our sticky main on background color to white color so I'm going to customize our fixed navigation settings and from here primary menu background color I'm changing it to white again and just making it light transparent so it's working now and now save it and refresh my page yes perfect okay so now we are almost done so here with the three top part area for homepage and for next part I will try to add some pre-made layout from DV so for this I am again going to enable visual builder and from here when you click on this icon here is a option to add a lot pre-made layout from here but if we load our limit layout from here it will replace our whole design so let's try with one how it work here I'm just selecting one randomly I'm selecting this home page and use this layout it's taking some moment it's done here they replace my all design with this free mate layout so I don't want in this way here so I just click on the editing history and going back my pre-made design yes so now we can see our design is back I'm going to save it now okay so now to add some more section from a premade layout we need to create a test page and then we will add some section from dear so let me show you how we can do this I'm going to create a new page and name it to test page and I'm just saving it as draft page and using this Divi builder eat it with this Divi builder and from here I'm clicking here browse layouts so here is terms of pre-made layout built by DV so we can import any pre-made layout from here here is too many layout for different categories you can select any one here is the agency layout here is the learning management and just check this design for home page ok I'm selecting this landing page ok I am just going to use this layout okay so now our layout is imported I'm going to save it as draft so from here we already designed our top area so I'm removing it we don't need this area also here is a nice layout you can also use it if you like it I'm just removing some section from here I don't need this I am just removing it and also removing it I just want to keep this bottom area it's testimonial area is good I don't need this and also you can remove it we can add these letters to work section as our portfolio and just removing also this and you can keep this section and also we can use it okay so now so we have to save this as a section by section so from here first I am saving it and just typing a random name bottom of one and here and tapping another name bottom-2 and also saving this and his bottom three and next saving it as bottom four and bottom five save to library and footer safe to library now save draft and refreshing my page again and now when we try to add a new section and add from library we can see all new section from here so I'm going to add all step-by-step then bottom two then bottom three bottom four bottom-5 and footer and here is a section we are left from here just I'm going to save it as bottom six save to library and adding that section to here here is a current section okay now I'm going to save it and now we need to customize our new font our new section style to match our top area so for this here I am checking the spacing which is using top and bottom so here I'm just going to edit this section going to spacing and just making it to default so it will match with our top area design I'm going to save it and on right side I'm just going to copy our title style copy module style and testing it to we're sorry it's text need to be dark color so here I'm using dark color and alignment to left and for rest of the text we need to make these two as bald okay now I'm going to save it here making it to default this time the save it and also making this button style to default and here also I am using the same reset modulus tine so here my button style is getting by default from here and making the button alignment to Center and save it and from here we can also set this button style so here we can set just default style I am just making all to default state show button icon color no and Here I am just adding some padding for left and right and top and bottom okay now I'm going to save it and save the full page now and now I'm going to top area in and just copy this title style from here and paste it and making this last text to bold and making alignment Center sorry I'm going to this gear icon design text and from here I am making it to center also also I am going to sizing and making this module alignment to center and save it and also for this text we can make it to reset model style and making the alignment to Center I'm going to siding and module alignment center and save it and from here we can use this design for our portfolio section so here we can add our portfolio image I'm going to use my portfolio image here so for this time I'm using a long height image just using it here and saving it and from here we can also set our page link for this portfolio so when you create a single portfolio page we can link with this URL now I'm going to save it and here just button we need to add this button with our portfolio page link and next we can keep this section just decreasing some space for this section I'm just making spacing to zero for top I think it's look better and here we don't want this yellow color so I am changing this background color and adding this gradient which we are using here so I am using this color and changing this text color to white so here I am using text color to white and save it copy this style from here and paste it okay now I'm going to save it and for the next section we can just use our title style from top area just copy this text style from here copy module style and then I'm going to just paste it here first module is tied sorry now I'm going to check it what's wrong here so here you can see the font style is not it's too tag so here is just paragraph they are using here and making some style with it so I am making it to h2 tag and you can see here we are getting that style just making this alignment to Center and save it now this text I am making it too bold okay now I'm going to save it okay now for this text we can also reset model style and make in text alignment to Center save it and for this section I'm keeping this style we can just change this image and text from here we can change this text from here they just used round shaped image here so when we use any other image it's also taking this round corner by default so we need not to make it round in a custom way so it's good now I'm going to save it and last here our contact area so in similar way I am just copied this text style from our title copy module style and use it here test module is Thai okay so now I am just making it too bold and here we don't need to use this yellow color so I am also changing this background color so I am using my gradient color and also changing this text style reset module style and changing this text color two white and text alignment to Center we're going to save it and also we can make this text to white so I'm going here this text color to white okay now I'm going to save it I think it looks better and now I'm going to save this page and now I'm going to this dashboard and going to Divi Divi library and here you can see some pre-made layout section which I said previously but I don't need this all saved area here these are just temporary so I am just deleting all those from here selecting all those except title text so move to trust and apply I am just making all this clear because I need not to use this in next time and also going to trash and empty trash okay so now I'm going to my home page again and from here we can save this bottom area as our global footer area so I am saving this section as footer and make this global item so it will be used for all page bottom with the same text and same is time and save to library now I'm just configuring this form so here is my name email company and message field then here is a title such as message we can add a success message thanks for contacting with us we will contact with you in the next 24 hours okay now we can also change this button text from here we can make it to send now and then email section from here we can set email address to receive this message to our mail so here I am setting my email otherwise if we don't set any email here we will get this mail to our default admin mail which we set in our WordPress settings here so we will receive this email to our admin email address so if we want to receive to another email so here we can add a different email address for example if we want to add this email address so here I am putting my another email address and here is message pattern we can add some best message pattern for our email by default we will get all field which we will add here so we need not to change this message pattern from default so I am just leaving it and from element we can also add here capture so it will protect us from spam email so when we on we can see here is a capture so it will verify who is typing your form is a human or not so we can also style this capture text color to white save it and next here is dear a really decked option so here we can set any custom URL so when someone fill this form then he will redirect to a certain page so I am just leaving it for now and here also background color so we can also add background color under this form so I think it's okay for now and just saving it and the footer text need to be changed so for this I'm going to theme customizer again I'm just closing all this tab and from here I'm going to footer put bottom bar so from here I can check it from here we can add footer credit text so we can add text for footer from here copyright so I am just typing some random text you can put your copyright text here and also you can change the social icon color social icon side so I am just decreasing it a bit and font size for footer and fonta Stein from text color and background color also I am just changing this background color to this light blue color and now I'm going to save it and now I'm going to refresh my page just save it and exit visual builder okay so now you can see the full page I think all is looking good now so here or any other place we can add a client section most of the cases we need that section so I'm going to add it and going to another visual builder and just duplicating this section and dragging it to bottom under this and Here I am just changing this text here I'm typing our clients and making it to vault save it and Here I am just removing this text and adding a new row here I'm taking six column row and here I'm adding some image for my client logo so I'm typing image module and here I'm going to upload some image so here I just upload some dummy logo and use one here and save it and just duplicating it several times and drag it to another column you and now changing other item logo save it and using this one save it and this one to this one now I'm going to save it okay looks better I'm going to save this page now and here we need to add a blob section above this section so for this I'm just duplicating it and just remove this row section and here I'm changing this text latest from our blog and making this to work to Bald save it and keeping this text and here we can take a new row and here and typing blog module here I did not post any blog here so it's not showing any result now I am just configuring it for post going to design tab and making this layout to a grid layout and save it so before design this blog section I think it will be better to add some dummy blog posts so I'm going to save it and going to add some dummy blog post so I'm going to dashboard and post and add new section so here I'm typing title how to make business website and here I'm adding some dummy text and from here here featured image so I'm adding an image for this blog post and I'm going to upload some image here some dumb image I'm uploading just adding here publish it making a new one just typing here how to make a wordpress website adding some dummy text and from here adding featured image publish it and going to add new one just type in some random title random dummy text and uploading a image publish it okay so here we have uploaded three blog post now I'm going to refresh it okay now I'm going to this blog section again and now we can see three blog post by default so now I'm going to customize this blog area and here host count so we can add here more post so I am just adding here three post and we can also set from here post category so only show this category page here and here is date format we can change also this date format and show excerpt so we can also show it or show our full content and we can also make our text plain so by default is 270 word I'm making it to 20 how it looks we can make it to 150 I think we can make it to 120 Paves look better not bad and from here I'm just hiding this auto name show that show categories I'm just keeping this category and changing this category font style so here I'm changing this font style so here I'm adding some different style you can increase this font size we can make it to default we need not to use this just we can change this color and this font is looks better I like to hide this category item and next I'm going to row settings and I need to decrease this spacing between our post so I'm going to design tab sizing and custom cutter with so I am decreasing it to two now save it I think it's look better we can make this background color to a light dark so here we can make it to white this background color and here I'm using some light dark f7 and 7f okay now I'm going to save it okay so now I think here we can add a button bottom of this blog section so I'm just duplicating this and drag it to bottom area and paste it here and just change type text from here Simo okay we can leave it and here we can link this button with our blog page so I'm copy link location and adding a link here we need not to this domain name just add it and save it and save this full page okay so now we think our home page is done we can add more sections or more style if we need in future but this time is looking good so I'm going to save it and view my page so here is our home page you okay so now we're going to style our about Us page so for designing about Us page I'm going to about Us page and then go into our visual builder and for this page I will take a premade layout so here we already take some part from this play out so I'm going to again load this design and from here I'm selecting this about page okay so now I'm going to use this layout okay so now we can see our design is imported here so from this phase design we will keep some part and we'll remove some part which we don't need so here I'm removing this top part and this part and this one I'm just keeping this section for now and also keeping this team section and we don't need this work area for about Us page so I'm also deleting it and also deleting this footer part so for this footer section I'm going to import our global footer which we already did in home page so I'm adding it awesome so in this way we can import any section from our settle out now I'm going to save it and for top area I'm creating a new section so I'm creating a section here in a regular section and a single column row and here I'm adding a text module okay now I'm going to move it top and now I'm going to change the background color I am adding the similar gradient color and here I will add our page title so from here I'm typing about us and making it 2 h2 tag or h1 okay so now I'm going to design it text its font style to uppercase alignment Center and text color to white and here I'm adding some letter spacing and increasing our font size 250 pixel or decrease it we can make it too bold just try it with semi bald bald okay we can use semi ball this looks good here okay now save it and I'm saving this area as page header and save to library and here I want to add some section from our homepage so for this first I'm going to save it and go into our home page okay just exiting this visual video and then going to home page and from here again going to visual builder for home page and here I want to add some part to our about page so here we want to add this section and this section from here you can add some our client our review section if we want but for this time I'm just saving this section about top and save to library and here I am saving it as what we do and we can make it to a global item so when we edit or change any item from here it will automatically update in our about page so I'm going to save to library we can also add this client review section to our about page I'm going to save it as reviews and also making this global item and save to library and for this client section I am also saving it and clients make it to global and save to library now I'm going to save this page exit visual builder went to about us and going to visual builder in and now I'm going to add a new section so here I am adding about top great and next here I'm adding what we do section and here we can also add our review section and last year we can add Our client section and now I'm going to save this page now I'm going to edit this section background color so here I'm going to edit this page and going to background and here you can use the dark color for this background color and also from here okay so from here you can use this dark color for top section and going to save it and here you can change the text color to white changing the text color to white and save it and here we can use any video if we have and for this section and changing this color to light dark I'm going to background changing this background color to ff7 f7 Epsilon okay so it looks different from this two section now I'm going to save it and for this title and just copy medulla style and paste it to fear now making this alignment to Center save it and from here and selecting this word and making it too bold I'm going to save it and here we can use our team member picture if we have more team member we can just duplicate it and it will show more images we can change our layout to three column to four columns and also the please our cutter with from sizing here and Dickie's our cutter with two and here we can duplicate it and add it to here so we can use four images in a single row or three images so I am just using it for now you can make it duplicate and we're going to edit this text from here changing this there's already monserrate I am living back and here we can make it to be dark and going to save it just copy module this time and paste it to here and here and going to save my page so now you can see our about Us page almost done so here I think about speech is done we can change our item or text if we need so now I'm going to save this whole page and exit visual builder okay so this is our about Us page here we can also add our YouTube video or any other video okay so for next we can go to now service page and going to visual builder choose a premade layout in similar way for this page I am going to also check a premade layout so going to this design agency and so here we cannot see any service page template so I think I'm just crossing it going back to add layout so for this page I think we can add our about pace which we did just now so I'm going to your existing pages and from here about us so I'm going to import it here so from here I'm going to change this text to serve this and save it and for this section we can move it to right side just changing this style a bit to make it different and moving to left side one by one here and then button okay I'm going to role settings and column going to design tab and spacing so here I'm going to make it zero and I'm doing this for our first column design tab spacing and tabbing 7% top and bottom now save it here we can use the different image for our service area I'm just saving it save it and here I'm adding some top space going to spacing and margin top here I'm tying with 20 bit cell 30 I think it's look okay now I'm going to save it you can also add some style with this image so I'm going to add in some box shadow with this image and here you can also have some border if you like so here I'm going to add some border and making it too white okay now I'm going to save it and then what we do so so for this section we can just edit our service al so here we can write our here and type in our services making it involved and going to save it and we can also leave this text and here we just change our text or icon as we need I am just leaving it for now and in this section I don't need this section for the service page and also deleting this team area and service page we can leave all so we can keep this client testimonial section and our time section and the bottom section okay so now I'm going to save this page okay it's set and now I'm going to exit visual builder so our service page is done and next here is our service item so here I am going to design a single item for services then we can duplicate this design for others toupees so I'm going to design one single service page going to graphics design and an evolved visual builder and from here I'm going to choose our existing page and selecting our service page and here I'm just deleting this section which we don't need here we don't need our client section and also don't need this service area I'm going to delete it so here is only this footer this section and this top service area so first I'm going to change this top area so here I want to make this top area in a different way so here I'm making it to column and right side I want to take image so here I'm uploading a image so here and just downloaded a free image for graphics design now I'm going to upload it okay so here you can see the background color is white so here I'm just duplicating this section and just removing it from top area and making here one column row and now here I am making this section background color to white color save it and just removing this spacing from top from raw section and same from bottom making it 0.8 spacing top teal and going to roll spacing table cheater save it okay so now here I'm just deleting it and taking a new text area on the left side now here we can add some text about our services so I'm just using dummy text here we can type here something about graphics design so now I'm going to edit our text and making it to a dark color and increasing our text size and making it Center aligned and decreasing line height a bit mm and now I'm going to save it and going to row settings and first column and design tab and here adding some top padding and for this section I'm going to click on this mobile icon go to tablet and decreasing this top spacing and checking the phone view okay now I'm going to desktop and from here looks good I'm going to save it and here you can decrease our size so here I'm going to design that siding and making your way to 75% increasing it yes now I'm going to remove some of the text from here here we can add some focus text for our services or tagline so here will not add so much text for design purpose now I'm going to design and sizing here with the chance our sizing going to mobile view and tablet okay so in tablet is taking weight to auto so no problem I'm going to save it and now for this bottom part you can change our background color to a light dark so I'm using here if 7 f7 f7 and going to save it and here we don't need to use any image or we can use it but we don't need this button here because here we will type more details about our service so here you can change our type Titan and you can add more text here so here you can remove our text you can make this to a single column row and you can increase our text just making this several lines and making these as list it one two three four here we can also add more text to describe our services and also here we can add a new module if we need here we can make our text alignment Center here we can make our text alignment to Center now I'm going to save my page and yes so here we just need to change our service name to graphics design and save it now I'm going to save my page now we can use this layout for other services like web design what press website or any other single services page okay now I'm going to eat sit my builder and next I'm going to design portfolio page so I'm going to portfolio and going to visual builder so for this page we can check fast some pre-made layout point to this page design and here is pre-made portfolio page so here is a design we can use it just checking the live demo of this page so here is the design for portfolio page this is something different so we can use this kind of layout or here is another one you can use it but here I am going to use layout from scratch are just going to use my graphics design page here I am just removing it and here I'm changing this text to portfolio and here and just removing it and here adding the new module 4dv portfolio so here is two options filterable portfolio are just simple portfolio so here I'm using this free terrible portfolio here is no data showing here because I did not upload any portfolio here so I'm just going to save this page and now before adding here I am just going to add some portfolio going to dashboard and going to project here I'm going to add some portfolio and also here we can also design our single portfolio page from here or we can also add our design using Divi builder so here I'm using Divi builder use Divi builder before going dear I am just adding here a title for example project 1 and publish this page well now I'm going to use Divi builder choose the pivot layout going to here and you can check this check this one okay I'm just using it so here I am just changing some design here I'm removing this image and using our gradient color making this text color to white save it and also making this text color to white save it and here we can type our project name and save it here you can change this text also here is category and some details about our project here is some image options so here we can upload several image related to our project or if you don't have we can leave this part and below here is also another item I'm going to change this background color to our gradient color and making this text color to white and save it save this page here is related project we can keep this skip it for this time I'm just going to leave it and at bottom area I am just adding my footer and here is taking some space I'm depleting it and going to save it so here you can add our project image save it and now going to edit project again and from here we can set our featured image so here I am adding an image for our project this one or this one and the featured image now going to update it and now I'm just checking this page our portfolio page here you can see our project 1 but this is taking too much space I'm just changing it going to design tab and layout here is fluid I want here grid style and making this content post content here we can select our project according to categories but we did not add any project categories so I'm saving it and going to edit our project page again so here I'm going to category and adding new category here type in graphics and add new category and update it and now I want to duplicate this project to save more time so for this I'm just going to install a plug-in and type in duplicate post and installing the second one here can also duplicate our custom post activate it and now I'm going to my project and here you can see a duplicate button so clicking here we can duplicate our project I'm making it several times so here now I make it more seven times and I'm going to eat it and publish it here is project two from here we need to change our text from visual builder I am just going to edit view and from here you can also change our featured image so I'm going to replace it with another one I'm just going to using it we can use it and update it and now I'm going to all project and bring similar way for others just click and open in a new tab this one this one so here three publish it this is for publicity and this one is five publish it and also this one this one and this one here is six and publish it seven I'll place it and eight and publish it now when I check my portfolio page here you can see our project is showing here is graphic design category if we change our project category from here just doing it here first I'm going to edit tab and here I am adding a new category web design and add new category update it and going to all project here I'm going to now quick heed it and making it to web design update it and here I'm just selecting this two category and update it okay now I am just closing this and refresh my page now here can see graphics design web design and when you click on it will show all item and when we click this circle we are going to our full project going back and now I I want to customize this design a bit now I'm going to another visual builder I'm just crossing all others Here I am just changing our portfolio and making it bold save it and now going to edit our portfolios post count in here you can set our maximum project item here you can just type here ten here we can include categories so when you select web design you can see only web design here but here we want all categories and here is item from here we can hide show category and show pagination show title we can hide our title from here or not and for this whole section we can add also background color now I'm going to design overlay so from here you can also change our white color overlay from here you can also add blue color overlay and Jim icon color to white or we can also change our icon to this one from here we can also edit our filter area section text our style we can also style our Vita text area in the nation area and so many options here now I'm going to save it and here I'm going to edit these row settings design tab siding and from here gutter width we can also decrease our gutter width so now we can see our spacing between our project item is decreases or you can make it 2-1 but here I'm adding just two going to save it and now I'm going to design tab and images so from here you can also add some style Tower image you can add some border I'm adding here white color and box shadow and decrease it and here we can also stir in our pen Venetian text color to white here is no pagination here because here is we added a title at all so I'm going to save it okay so here is the v's default portfolio module we can also add different style from our custom design are from premade layout I am going to save this page now okay now our portfolio page is done I'm going to exit this wall builder so this is our portfolio page okay so next I'm going to design our blog page so I'm going to blob and then so when I select any page as our blog page from settings so that case we cannot see the visual builder from top of the page so for this first I am going to our theme customizer and going to home page settings and from here host page so here I am just deselect in this page from here and publish it now refresh my page and here you can see visual winter is enabled for this page now I'm going to visual builder choose a premade layout and selecting this layout and from here I'm selecting block layout and use this layout so here is our blog template now I'm going to customize this page we're going to header and background now here I'm going to add here is image already so here I'm going to add some background gradient with this color which we worked with this image background it looks good now I'm going to save it and going to change the font color to white and we can decrease our font size a bit we can make it too regular and making the last one too bold just to making similarities with other pages or we can leave it as it is now I'm going to save it and here is blog module we are already familiar with this layout I'm going to edit this layout so here is post type post we can select our post categories from here and post count so you can set our maximum post to show here here we have three posts in total so here is showing three post if we post here more post from our blog post then it will show here in second line and from here we can change our date format we can chants the post expert so here we can limit our description code for example 200 here is decreasing our font for description we can decrease it to more 100 so now here is showing 100 character and from here you can also style our font we can keep this as it is and we can also style our images so we can add some image border and set to white color and we can increase it we can also leave it for bottom part I like this water style I'm going to save it and next here is our subscription part so here is default module for email opt-in so from here we can set our email opt-in account so we can also style our design our email opt-in style so fast I am just changing this button style as similar with other part so here fast I am just leaving this text color to white or making all this default for first time you can leave our border wheat and here we can add our text color to white color and living board radius living button letters pacing and also making all these to default and Here I am adding some top and bottom padding and save it we can also change the text style we can making the text size to 40 pixel so here you can make this style to bold or semi-bald yes now I'm going to save it and finally here is the form so we can connect this form with our email opt-in account so I I use MailChimp so we can connect our MailChimp account with this form so for this here is mail account and here is our provider options so here is too many options we can add here Aweber active campaign campaign monitor and here is too many options I'm adding here MailChimp as I have account in MailChimp already and from here we can select our MailChimp list so first I need to add from here so here I need to put my account name and API key so for this first I'm going to log in my MailChimp account went to Maine simcom login and going to log in my MailChimp account okay so getting API key fast I'm going to account extras and from here API key here is to API key already generated if you don't have any API key already generated you can create a new API key from here so I am just copy one of my key and paste it and here is account name and submit it now here we can see here is one list created I'm selecting it and fit it yes so it's already connected now first I am going to save it also I'm going to edit this section again and from here I want to show you something so from here we can change our button text subscribe we can type anything here subscribe just leave it it will by default it will show subscribe and here is some text we can change also this text and design here is we can change this form layout here is several design options we can make our text top and from bottom and here is last one we can also put our text bottom I am leaving the faster one here is too many options we can do here we can also style our input field background color text color and from here you can set our success message when someone subscribe our form they can see a success message or we can redirect to a custom URL so when someone subscribe to this form they will reject to a custom URL or page from here use custom field so we can also add more field here I have a different tutorial about MailChimp so dear I have described all these details about mail sim connectivity with this form and these module customization options for now I am just leaving it I am going to save it and 4 foot apart I am just deleting this and adding our default one the global footer so footer is same for all pages now I'm going to save it okay so our blog page is done I am going to exit our builder here is our blog page now when I click any post I can see here is getting a default single post page design by DV so here also my header is existing here but as I used a white color logo and white color test for menu so it's not shown here so here we need to add a top header area for this single blog post page to change this single post page we need to do something different so now I'm going to my dashboard and going to DV then DV team builder options so here is the new edition of DV team so from here we can design any default page layout any custom global header or custom global footer so here we can add any global template for any pages or any post any categories and so on so for now I'm going to design our blog post page so here I'm adding a new template I'm going to design all post so it will work for all post by default create template now I'm going to add custom body here is two options build from custom body or add from library so we can try add from library just going to our existing page and now importing this blog page now going to eat it now our header part is working also bottom part of working but here I don't want this section or we can keep it just leaving this footer area and leaving this section here I will add something for our blog so here we can take two column and left side I am adding post so here is a very module for our blog post so here is post content for slider post navigation and post title so I am adding here post content so from here we can design our default style for our blog content and website you can add sidebar widgets or something else which we need and just adding sidebar for this time by the inside bar and just making it large-size okay and here I need to add our post title so I'm deleting it Here I am adding our post title here's some additional options we can add but I'm just leaving all those just keeping our title here here is our post title I'm going to stain it here is text color to white alignment center and you can add some padding with this roll from top area 40 pixel 15 there's some bottom area you can add some more for top area okay now I'm going to save it and for left area we can also stain our default style here is style for each one we can change our font style from here font weight to light I'm making fun to it to light here is style for any code or quotation so we can change also this left bar color here is border color you can change this border color here is image and here is other text so we can also edit our style any text you can also change our link style now I am saving it and going back and save changes now I'm going to my website blog page and single post now we can see our design is working here so here is our post title here is our text for post here I did not add any image or any title here so it's only showing text content if we want to add here our post thumbnail image we can also do that just going dear and here I'm adding host title just moving it top and from here I'm leaving title meta element and here on the featured image showing so I'm saving it and now refresh my page okay perfect and next I'm going to design our contact page and enable visual builder and browse layouts selecting this one I'm using same layout because to keep consistency to every page so each time I am using same layout you can also use any other one here is no limitation so I'm going to use this contact page layout from here and use this layout here is contact page layout so now I'm going to changing the design so fast I am just changing the background color I'm adding some gradient color here with this image and changing the font color to white and making it too regular and decreasing form size and making the last one - volt and save it and here's several options you can add your office addresses here or write some text so here is google map options we can set our google map here for this time i am just leaving it and here is also contact from options we can add our default one here and save it so for this page we can also use any other layout if you don't want to use this layout here is more options you can select any one here is some more customized design we can use this here is another one we can use i think this one is also good we can type here just contact and here is showing too many contact page design for different style so we can type just phase name here and we can see all style for this page so here is too many design for contact page you can use any one this one is good here too many options you can use anyone from here so for this time I'm saving my page and exit visual builder so our contact page already done so we're almost done now I'm going back to my home page aching and now I will check all my pages for tablet and mobile view so for this I'm enabling visual will there again and clicking here and from here and enabling it for tablet view so here is my tablet view design it looks good in tablet view and checking the phone view so here is our phone view so here we can decrease this title font size so for this I am going to change our title and here is title text and just checking this one here is h1 so I'm going to design tab title text and h1 so here is our title text size I'm going to click this icon and going to phone view here we can decrease our font size to 30 pixel we can decrease it to 25 pixel make it 28 pixel I think here you can use 30 pixel and save it next here I am just dictating this font size going to mobile view and making it 225 pixel trying 28 a 28 is good for this inner title save it just copy module style sorry this one is not same you can use same here paste okay I'm doing all step by step so here also I am changing this font style mainly font size so here is font size for our phone I'm using 28 save it and we can leave this side we can decrease it going to phone view and making it 28 pixel save it next for this making the same for phone view and change it to 28 pick then save it we can also decrease this font size going to mobile view and making it to 35 45 and depleting the line height and copy medulla style and paste it to other and here also changing this font size going to mobile view and making it 228 pixel save it same here decreasing this form sighs - phone view and making it 28 pixel save it I can also decrease this font size for our post title I'm going to phone view and making it 15 pigs in are 18 and line height phone view and making it 1.7 save it and here changing this font size going to phone view here same font size and here okay so for this part our logo is showing in a single column so it's not looking good so if we can add to logo in a single line that look better so I'm trying to add some CSS here so for this I'm going to row settings going to column Advanced tab custom CSS and here I'm making so first I'm going to mobile view and here trying to add some CSS for phone view only so here I'm adding wheat 50% and float:left here and just adding important and here I'm adding some margin and also important and as I am adding some margin so I am decreasing my wheat to 44% and here margin left right 3% now I am copy it and replaced to others column save it save it save my page and refresh my page now yes so now you can see our logo is showing in two column here is so much congested top and bottom so I am also adding some margin for this two column here I'm adding 20 pixel top and bottom margin and this one now save it and refresh again yes so now looks perfect and now I'm just customizing this text size just changing this font size going to phone and making it 228 pixel save it and now my home page for phone view is looking good I'm going to save it okay now I am refresh my page so here is my home page for phone view looks great and when I increase my screen to tab size here is the tablet view it's looking great okay so now I am just customizing others pages for phone and tablet view I'm going to about I'm just leaving it and going to visual builder checking it for tab view I think it's better for tablet view and I'm going to phone view here you can change some font size as like our home page so I'm going to this text going to design tab and making the font size for phone view more smaller making it 240 pixel and for this one going to phone view and making it 228 pixel save it going here going to phone view and making it 28 pixel we can also decrease this font size for our phone view going to phone wheel making it 18 pixel and we can also decrease this spacing here sorry this is not from text so for this I'm going to these section settings design tab spacing and going to phone view and making it 250 pixel save it here we can also decrease this spacing going to phone view and making it 270 pixel and also decreasing this form size going to fajn vue making it 220 pixel save it you can also decrease this font size for team going to phone video making it to a 10 pixel save it and copy module East I'll paste it and paste it here okay others is okay has this our global so when I change it for home page and it working for all pages so now I'm going to save it exit visual builder and next going to service going to visual builder and checking the tablet view now checking the phone view I think tablet view is okay for all pages so I'm just now fixing phone view for all pages in step-by-step so I need to just decrease the font size I'm going to mobile view and making it to 40 pixel save it and going here decreasing the font size selecting phone view making it 28 pixel save it here is okay these are global sections so here I need to change it a bit you can make it to 28 pixel save it and here is a global section so already tensed by default and these are already done okay so now I'm going to save this page going to exit builder next graphics design page enabling our visual builder checking it for tablet view it's better going to fajn vue and decreasing font size going to phone and 40 pixel save it or we can decrease it a bit you can make it 35 pixel save it we can also decreasing this font to 18 pixel save it and also decrease it going to fajn vue making it 228 pixel save it and we are done now I'm going to save this page exit visual builder and next going to portfolio page and going to visual builder checking it for tablet view and going to fajn vue just decreasing the font size a bit save it going to decrease this form size making it 28 pixel save it and here these are looking okay I'm saving this page exist visual winter and next going to plot page enabling visual builder checking it for tablet just decrease this font size so I'm going to phone view and making it 35 or 30 vixen going to save it we can make it okay now going to phone view and decreasing this font size making it 240 pixel save it we can also decrease our section spacing from going to fajn view and just decrease it save it and here we can also change this font size a bit I'm going to phone view and making it 20 pixel and line height can line height is okay save it and also decrease this font size making it 28 pixel save it okay now save this page now exit visual builder and finally going to contact page going to visual Builder checking it for tablet I'm going to phone view and decreasing this font size a bit so making it to point to phone view and making it 240 pixel save it and save this page now exit visual builder so now all our pages is optimized for our tablet and mobile view so this is how we can make and customize a website in WordPress if you liked my video don't forget to give this video a thumbs up and if you have more comments or in confusion about my tutorial feel free to comment below if you are new here and like to see my more upcoming videos don't forget to subscribe my channel and also hit under notification buttons so you will get notified when I will upload my next video have a good day see you in my next tutorial

Channel: Farjana Rashid

Views: 8,615

Keywords: divi theme, divi tutorial 2020, elegant themes 2020, divi 2020, wordpress 2020, wordpress tutorial 2020, farjana rashid, create a wordpress website, wordpress tutorial, make a wordpress website, wordpress tutorials, divi, how to make a wordpress website, start a website, how to make a website in wordpress, how to make your own website, how to make a divi website, how to make business website in wordpress, how to make a website with divi, how to make a website

Id: r1uRXS_Y-uA

Length: 220min 44sec (13244 seconds)

Published: Tue Feb 25 2020