How to create a wordpress website for beginners | DIVI Theme

INTRODUCTION

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 divi theme . let me show you which you are going to cover in today’s tutorial  . so this is the website which we are going to develop in this tutorial.  here we are going to cover  all features about Divi theme.  so here I will explain you how we can customize a website using DV and also.  we’ll describe almost all possible feature which we can do with this theme here is a nice top menu area and this is transparent when we scroll down it is fixed in top area and under this here is a banner area . so I’m going to edit this page . so for this I am going to enable visual builder . so here is the top banner area or we can call this section as a hero section.  so here I have used a background image.  I’m showing you here here.  I have used a background image and with this.  we used a gradient transparent color so instead of this image.  we can also use any video as a background.  so here I am just adding a video here is the dummy video.  I just upload it and now you can see the video is showing as our background video also this here can add some overlay color with this video so for this.  I’m going to overlay and adding some color with transparency and now our text is highlighting here you can read it easily save it.

and and that this here is some text about about our website and then here is a section.  I have added what.  we do so here is some services or features we can add here here is a blog module.  we can change text from here.  we can add more text we can increase our text from here here is text size.  we can increase the step size here is an icon color.  we can change our icon color to white dark blue or any other color and we can also change our circle color white.  I’m just showing you which we can do here and we can make it to white and here is text area.  we can also change our text and now here you can see this is different than others.  so now you can just copy module style and paste.  it to others just first model style and it’s getting this style.  so there’s so much easy to do and next here is a section here.  we can put some text about our companies and here can set any images.  we can change this image and add any other one about our company.  I’m just keeping it for now and here we can also change our text just we can type here.

we can also change our font style just clicking here . we can make it italic we can make it bold or unbold make it underline and so many options here.  we can do I will show you as much as possible which you can do and here is our latest work section here.  I will show you how we can add some work area and under this here is our total projects total clients and ongoing projects number just.  we can use it or change it here is some client testimonial area and here is a blog section.  so if we have some blog we can also add here and under this year.  I will add some clients logo and then at the bottom area.  we will add a contact area so here is a contact form anyone can contact through this form and it will be sent to our email address which will set here and when. we will turn with these changes.  we will just click on the Save icon and here is the tablet icon so we can see our website design in tablet view just clicking here here.  I will show how we can customize our website for tablet and also we can customize this for mobile view here.  I will also show you how we can customize these for tablet and mobile view and here is also wireframe options for DV we can see also wireframe view.

from here and here is the amazing part editing history.  so if we did anything wrong we can just go back from here in our previous work is dead just see it and I’m going back and now you can see.  I mean back which was dear before and I’m saving this page now.  I am going to exit visual builder and here is next is about us page here is about us section. why we are different here we can drive.

something about us and here is also what we do section in similar way.  we can do it as I show you in for home page here is the video you can add here and here is our team member area you can also change it and here is client testimonial here is clients logo and bottom area here.  I will add a contact area and it will be global for all pages and next here.  I will create a service page and under these here is two kind of services graphics design and web design and under graphics design here is another one word press website. so I will show you how to design each pages and here is another portfolio page.

in portfolio dia here is three.

categories I have just added graphics design and web design and here.  I have added some dummy images here.  I will show you how to do this portfolio section and next here is a blog page.  I will design a blog page under these here is a.

newsletter section for subscription and here is root area and next here is a Contact Us page.  so here we can add some contact information and also this contact form here.  I will also discuss about different kind of contact based design.  which we can do and here is the amazing part when you go to theme customizer here is also many options.  we can do from here so when we go to general settings and from here . we can set our basic typography  . we can set our bod body text size.  we can increase it from here body line height .

so he these settings will be for default style and he detects size.  we can increase our header text and hit a letter spacing.  we can also add some letter spacing for header text and header line height and also Hitler font style and we can also change our header font family body font family body link color body text color header text color and here header and navigation of shown.

here is several kind of style for our header here I use default one.  we can also used centered so logo will be top and center and under this menu and centered in line.  here logo will be centered and menu item around it and here is slide in it will be slide in and here is fully screen menu options.  so it will be fully screen menu.  from now I am just leaving it as default and here is primary menu bar.  so from here we can change our primary menu style.  we can increase our menu text size.  we can change when a font family font style text color.  we can use any color here just leaving it to white.

you can also change background color you can add some background color here.  I am just making it transparent.

and here is also fixed navigation style.  so when we scroll down.  we can also tell this fixed menu and here is footer style . so we can also change our footer text style or text from here and here is botany style . we can also style our default button and button.  Hawaiian style also here is too many options.  I will explain all one by one which we need here.  now I’m going back from here and here is another options for DV.  so when we go to DV and DV theme options . so from here we can upload our logo here . we can set some preset color plate . so we can get all this color . when I will change any style and here is social link options  . so here we can add our social URL and under this here is custom CSS option.  so if you want to add more custom CSS.  we can add it from here and here is also integrations so from here.  we can add our Google Analytics code . I will also show you.

how we can add Google Analytics with our website.  so if you were beginner or even don’t know how to make a website.  even if you don’t have any basic idea about website.  development then this tutorial is for you here . I will explain all part and all steps how you can make a website from zero to advanced level and here no coding experience required no previous.

experience recoiled.

if you like 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.  now let’s get started so far who is this tutorial for the people who does not want to spend thousands of dollar to web developer just want to do by themselves people who does not have much time because here I will show you how to make a website within a few hours.  people who never made a website before.  I mean for beginners people who wants to make chance their website immediately without waiting point developer.  just want to do this for themselves 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% 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 everything 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 going hosting here is Bluehost hosting link so now click on get started.

so why Bluehost in my opinion Bluehost is the best hosting provider.  I am a web developer I tried 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 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 we have multiple website more than one you can pick your plus or trust class options though both options are almost same choice.  plus options have domain privacy plus protection and site backup options . but we don’t necessarily need that and you can take their programs.  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 cents per month and you will get one website 50 GB SSD storage and mature bandwidth free SSL certificate standard performance one included domain.

five-part domains and 25 subdomains and in this price.  it’s awesome but in future.  if you have multiple website you can upgrade it to their Plus plan.  so basically we can upgrade 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’ll see there are several options dot-com dot online dot sight dot website and so many option. s 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 com 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 he 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 a 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 cent 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 trip month and it will cost $5 95 cents per month.  it’s still pretty cheap so now.  we can see the total price $71 40 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 over outside of this page.  so when I’m going to hover on red button or outside of this page here . we will see a pop-up window which will offering you last price $2 65 cents 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 is amazing now.  I am 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 domain privacy is good.  no one can get to know who is the owner of the website.  but I am 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 lot security and court guard basic.  I don’t need site lot security and quad core basic either.  so I am dis electing 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’m putting my Civic 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 from my link you see you are getting a huge discount and I will also get a commission.

like this for you so now click on submit.  ok so now you can see your purchase was a success.

we sent a confirmation email to deviate a Dementor comma.  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 main 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 I’m typing 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 login . 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 a stupid because I will do it later with you in step by step.  I’m clicking on get started turning off 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 select 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 trust.  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.  you can change also to this or this or any other color for this.  I am just leaving it as default and next from here . we can set my first name last name and my nickname here.  I’m 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 sheet.  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 am 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.  I’m going to save changes and next I am going to reading and from here.  I am 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 karma 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 pay this 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 treating 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 our default style for our WordPress website.  we have created.  our page but 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 add to 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 is 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 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 WordPress 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 first our home item then about us services and here you can see our graphics design web design and what press web side here this is not showing on the web design and submenu here is the default structure of this theme.  which is running and then portfolio block and contact . now I’m going to themes option and here 2019 theme is what press default theme which is already installed here.  now I’m changing this default theme 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.  you can see our sub menu item and another submenu under way 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 team under this here is diva team just click on get started and then go to pricing and here is two options you can take it for we only exist for Elly 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 recommend 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 am 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 okay.  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 home page and post bit.  so I am selecting a static page and from home page . I am selecting my home page so it will be our default home page and for post page we can select our blog page okay 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 am uploading . I’m selecting my file set as logo and next from 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 am leaving it on Google+ and I do not use it you can show Instagram icon.  I will not use RSS so I am leaving it so here.  I am 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.

integration 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 [Applause].

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 miss.

your website here is my website I’m going clicking to next.

now here is my website name for John 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 I’m accepting it I accept.

okay so here is my coat I need to copy it.  I’m just clicking on it in 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 monserrate 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 tree tree tree and hidden text color to dark more one one one and publish it.

next I am going to header so here is header style here are 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 fix 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 maneuver so for now.  I am NOT adding secondary maneuvers so I.

not going with that I’m just saving it and going back and again I’m going to a footer and elements here is social icon showing.  we can also give it 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 sighs.  I’m just decreasing it okay.  now I’m going to save it.  I’m going back next year 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 need not any border border color border radius no border radius and letter spacing . I am adding better 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 get my home page  .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 Divi has several pre-made layout 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’m going to start from scratch start building so fast here and introducing eat this structure . so here is a section and under this section here we 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’m taking here text module and in website I’m 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 bold 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 product 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 right side sorry border in left side and.

a blue color border 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 weight to bold and font style to uppercase and alignment make it center or left or right and you 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 you 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 am just doing these two 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 linked 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 blog post 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 of 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 option.  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 fully spinning 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 side 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 come from right side or 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 ID.

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 alternate 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 we 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’m 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 same at our step position . then we can see here is the straight line generating this section and from here we can change our gradient direction that’s cool.

but I don’t want in this way and from here.  we can set trace gradient 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 an 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 picks a 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 paste medulla style and similar way test 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 style 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 this spacing between our items.  so I’m clicking on custom cutter with and from here we can change our gutter width 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 side 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 change divided doors 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 going 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 vaca state.  if we did any 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 seed section background color by default from here and from here we can see also design tab and Advanced tab . I am 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 any 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 we 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 we 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 in and 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 am going to content background and I am 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 radiance 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 – word – bald.

so changing this custom style with this few word . so I’m going to click 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 – h1 tag and now I am.

selecting these to text and making it too bold.

okay so now I’m going to style my button so before it style from here I prefer to do this from default stanchions so for this I’m going to again my dashboard and from here I’m going to customize option and then going to buttons button is style and from here I’m just changing text size.  so here I’m 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 drill 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 I’m 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 restyle 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 vault 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 30.  if I pick 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 this we 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 button is 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’m just checking 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 in it 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 blood 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 her UI design and keeping this dummy text for now and now I’m going to style 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 and type in 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 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 other students in similar way and typing 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 headed 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 zone 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 menu 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 trim 8 layout from DV.  so for this I’m again going to enable visual builder and from here when I click on this icon here is a option to add a lot pre-made layout from here but if we load our primatte up from here it will replace our whole design so let’s try with one how it work here I’m just selecting one randomly and selecting this homepage 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 ok . 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 .we can select any one here is the agency layout here is the learning management and just check this design for home page ok.

I am 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 he 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 fast.

I am saving it and just typing a random name bottom of one and here and tapping another name bottom two and also saving this as 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 the section from here.  so I’m going to add all step by step.

then bottom two then bottom three bottom four bottom five 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 am 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 am using.

color and alignment to left and for rest of the text we need to make this tool as bald.  okay now I’m going to save it here making it to default this time just save it and also making this button is tend to default and here also I am using the same reset modulus time.  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 save just default style.  I am just making all two 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’m 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 module style and making the alignment to Center.  I’m going to sizing and module on admin 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 am 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’m 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 and 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 were strong 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 making 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 year 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 time ok so now I am just making it to 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 the title such as message.  we can add a success message thanks for contact thing with us.  we will contact with you in next 24 hours . ok 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 and 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 direct really date 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 you can check it from here.  we can add footer credit text . so we can add text for a 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 for this time 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 too bold.

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.

and 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 blog section above this section . so for this I’m just duplicating it and just remove this row section and here I am changing this text latest from our blog and making this to work to bold.

save it and keeping this text and here you 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 am 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 a business website and here I’m adding some dummy text and from here here featured image.  so I am adding an image for this blog post I am 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 a new one just type in some random title random down a 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 length.  so by default is 270 word and making it 220 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 Otto name showed it 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.

oh 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 these background colors to a light dark so here.  we can make it to white this background color and here I am using some light dark f7 f 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 am just duplicating this and drag it to bottom area and paste it here and just change type text from here see more . 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 am 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 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’m 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 this 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 and 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 we can add some our client our review section.  if we want but for this time I’m just saving this section as how 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 as 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 going to about us and going to result builder in and now I’m going to add a new section. so here I’m 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 we 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 to section.  now I’m going to save it and for this title.

just copy module 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 decrease our cutter with from sizing here and diesel 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 tilting it for now you can make it.

duplicate I’m 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 . here I think about speech is done.  we can change our item of 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 go to now service page and going to visual builder choose a premade layout in similar way for this page.  I’m going to also take 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 services 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 battle . 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 am doing this for our first column design tab spacing and tabbing 7% for 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 pixel 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 we can also have some border.  if you like.  so here I’m going to add some border and making it to 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 an typing 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 but the service page and also deleting this team area and service page.  we can leave also we can keep this client testimonial section and our time section and the bottom section.  ok so now I’m going to save this page ok 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 ok . 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 row section and same from bottom making it 2-0 20 spacing top Geo and going to row spacing Tom cheetah 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 hmm.

and now I’m going to save it and going to.

row settings and first column and design tab I’m here adding some top padding and for this section.  I’m going to click on this mobile icon go to tablet and decreasing these 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 wheat 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 in several lines and making these as listed 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 you 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 exit 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 the 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’m going to use a layout from scratch are just going to use my graphics design page here.  I’m just removing it and here I’m changing this text to portfolio and here I’m just removing it and here adding the new module for DV portfolio . so here is two options feel terrible portfolio arms 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 point 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 gives Divi builder before going dear.

I’m just adding here a title for example project 1 and publish this page.  well now I’m going to use every 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 a bottom area . I am just adding my footer and here is taking some space.

I am dictating 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 we 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 full it.  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.

that categories so I’m just 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 replace 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 updated 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 I click this circle.  we are going to our full project going back and now I want to customize this design a bit . now I’m going to enable 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.  you 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 to 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 Divis 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 phase is done I’m going to exit this valve in there . 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’m going to our theme customizer and going to home page settings and from here host page . so here I’m 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 am going to add some background gradient with this color which will work 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 or you can set our maximum post to show here . we have three post 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 main obtain 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 width and here we can add our text color to white color and leaving border 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 to many options . we can add here Aweber active campaign campaign monitor and here is to many options.  I am 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.

going to mainstream comm 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 am selecting it and fetch 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’m 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 deleted it 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 male team.  so dear I have described all these details about male seem kinda EVD 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’m going to exit our builder here is our blog page 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 font size and making the last one to vault 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’m just leaving it and here is also contact form 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 is too many options.  you can use any one from here.  so for this time I’m saving my page and exit visual builder.  so our contact page already done.  so we are almost done now I’m going back to my home page again 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 I am 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 pond 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 go into 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.

– 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 am 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 am 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 pixel save it.  we can also decrease this font size.

going to mobile view and making it to 3545 and decreasing 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 font size to 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 or 18 and the 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 or 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 Martin left right 3% . now I’m 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 it’s 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 just looking great . okay so now I am just customizing others pages for phone and tablet view . I’m going to about I am just leaving it and going to visual wheel there 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.  I’m 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 276 and also decreasing this farm size going to fajn vue making it 220 pixel save it.  you can also decrease these font size for team going to phone video making it to a 10 pixel save it and copy modular style paste it and paste it.  here okay others is okay has this are 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 240 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 it is a global section . so already changed 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 forty pizzelle 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 return . 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 view 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 window and next going to plot page enabling visual builder checking it for tablet just decrease this font size so going to phone view and making it 35 or 30 vixen.

Conclusion

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 phone 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.

 

Leave a Comment