In this tutorial I’ll show you how to make a one-page website in WordPress. this is the website which are going to make in this tutorial and I will show you how to make this complete website from scratch.
here I will show you how to make this kind of hero section here is nice title here is some text about your business or you so here you can type your main title or main keyword about your business here. you can put some more text about your business and here is a call-to-action button.
so someone click on this button it will redirect to a certain page or certain section next here is about a section here. you can put some more information about you or about your business and on the right side . you can put your own image or your business image next here is a section. what we do so here is some module. I have added so here you can put also your services or some key features about your service and next here is work section. so here you can put your best work or best portfolio and when someone click here it will go to inserting page and next here is review section . so you can put your clients reviews in this area it’s more important . what you’re trying to talk about you or your services so keep a review section in your website is a key and next here is a recent post section. if you have some blocks. you can put your recent or top blocks in this area and finally in the bottom area here is the contact section. so on the left side you can put some of your contact information and on the right side here is a contact form. so people can fill this form and type some message and when they submit it it will read it to your best email address. so it’s really cool feature and here is a bottom footer area on the left side here is a copyright text and on the right side here is some social links icon. so you can put your social URL with this icon. I will show you how you can do this all in step.
step and for the header area on left side. I will show you how you can get a professional logo for your business and how to upload this logo in this website and for the right side. I will show you how to create this kind of menu . so here when you click on any menu item it will scroll down and go to a certain area for example. when you click on about you scroll down and go to About section and when you click on service just go to our service area and in similar way when you click on work it’s going to work section and we’re gonna click on blog it’s going to plug in here.
finally when I click on contact it’s going to contact area it’s really amazing and for this page design. I will use the most amazing page builder Divi page builder . so to see the power of Divi page builder just click on animal visual builder and Jericho. so from here you can easily change any text just keep your cursor and type change text that’s it and you can also change any text style button style back down to color style just hover over any item and you will find this kind of icons so here just click on this gear icon and then you can click on this brush icon and you will redirect to this design area in short way. so from here you can change your font style font color font size and so on and you can also change this whole section background color. you can put any certain background color . you can add any gradient color and you can also add any image as background and even you can put any video as your background there’s cool.
if you want to change this image just click on this gear icon and here can upload any image for this area. if you can browse your Facebook account or any social platform then you can easily customize using this Divi builder . it’s so much easy and so much user friendly . you can do it in very easy way.
just follow my tutorial in step by step in this tutorial. I will show you how to make this whole page from scratch in step by step and if you don’t like to start from scratch then DV has.
hundred-plus premade layout to start with you can select any pre-made layout from here and customize. it as you need and you can put your own content. I will show you how can import any pre-made layout from here like this and also show you how you can customize this layout with your own content.
now let’s get started 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 way first thing already.
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.
p r+ or tres plus options though both options are almost same choice plus options have domain privacy plus prediction and site backup options but we don’t necessarily need that and you can take their problems . if you are planning to host a big ecommerce website and if you have millions of visitors already as beginner let’s start with the basic plan . it will cost only $3.00 95 cent per month and you will get one inside 50 GB SSD storage and metered bandwidth fee is a sin 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 the ax 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 see there are several options.
com dot online dot sight dot website and so many options but I always saw this to take dot-com website because it’s good for search engine optimization and also dot-com website looks more professional and lazy . so here I am selecting a domain name for this tutorial purpose so I’m typing here for Jana WP. so my domain name will be for Jana WP calm and I’m clicking to next so here is showing the domain name for Jana WP comm is.
available awesome now I need to put my account in.
permission here so here I am 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 cents per month but we can reduce this price here we only take the news settings 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 limit of $1 40 cents for a whole year.
there’s awesome and here I will show you a secret tip how you can reduce this price more. so now I’m going to hover outside of this page. so when I’m going to hover on red button or outside of this page here we will see a pop-up window which will offering you last price $2 $0.65 per month now click on claim savings and now you can see the price $2 65 cents per month when three year selected. so now I’m going to select twelve months.
again and here you can see the total price now showing $59 40 cent for a whole year it’s. 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 be selecting it because I want to be transparent and it’s not that important to me at this moment I am also turning off site load security and code Kurt Bessette.
I don’t need Cyclops security and quad core basic either. so I’m deselecting 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 a great with the attempts 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. so nothing extra there’s a win-win situation thank you for that because it supports this channel and helped me to make more valuable videos like this for you. so now click on submit . okay so now you can see your purchase was a success.
we sent a confirmation email to deviate a demented 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.
WordPress admin username so here we can type.
a separate user name for our WordPress site I’m typing here for Jana blog and here we can set a password. I’m typing a password and now go to next and here is the domain name. so our WordPress is going to install here and here is subdirectory. so if we want to install our WordPress in a subfolder or.
subdirectory location then we can type here some name or our folder name but here I want to install our WordPress in root domain. so for this I am just leaving it and going to next it’s taking some moment to install it our wordpress installed successfully congratulations. so here is our website URL and here is our admin URL here is our username and password . now I’m going to log in WordPress . yes congratulations we have successfully installed our WordPress and this is our WordPress dashboard and when you click on visit website this is our WordPress website here default WordPress theme is installed by default . now we are going to do all this customization work in step by step so now we have.
successfully installed WordPress after installing WordPress. first I am going to cleaning our dashboard. which we don’t need here necessarily. so from here I am just leaving.
all this which we don’t need here I am just crossing these are coming from our plugin settings. so for this I am going to plugins and selecting all plugins. first I am going to deactivate which are activate here and now selecting all and going to delete and apply okay.
so I’m deleting our plugins which I don’t need here actually. I want to build this website from clean instead and going to start from scratch then I am going to post I am just deleting this default post selecting it moved to trust and apply it and next going to trash and empty trash next going to pages and similar way selecting all pages going to move trusts and apply . now I’m going to trash and empty trash and next here I’m going to settings and going to reading . so from here I’m just discourage such engine from indexing this site. so for the first time as I am building this website and I’m not ready to go indexing my website from all search engines so for this time I’m just disabling this website from search engine indexing. so it will not indexed by Google or any other search engine and until I’m going to live my website.
so now I’m going to make Save Changes. so when our website is done and we’re going to ready to life and we are going to do some SEO works then we can make it desolate for this time. I’m just checking and next I’m going to farm a link . so the permalink is the page URL . so if we want to get a new page or new post it will show the page URL in this way or for example here is the best way to show our website URL. so this is our website URL and then if we post any new item like how to make a wordpress website then our post URL should be our main domain URL slash how to make your WordPress website slash. so it will be user friendly.
it will be easier friendly . so I am selecting this one and going to save changes and next I am going to.
appearance and here we can see this is the default theme by WordPress which is installed by default so for this our website is looking like this and now when we change it to another one I’m going to activating it for example and now refresh our website. we can see our website is looking differently.
so in similar way when we activate another one and refresh our website. we can see now also changing our website look so for this tutorial . I’m going to install diva team so to get diva team just go to fat Channel 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 access for Ellie price $89 per year and here is also another amazing part. you can also buy this for lifetime access. so you can take it for lifetime with this price and you can use it for unlimited website and unlimited times. I have already buy it for.
unlimited times so I am just skipping it for this tutorial. you can buy it for one year or if you have multiple website and if you want to use it for several times then I in command you to buy it for lifetime access and if you have only one X I did you can take it for one year and you need to renew it after one in now I’m going to log in my DV account password then click on login now here is our TV team and I’m going to download this diva team and if you need any support after installing this team. you can contact with their support here is support and dogs and here their live chat system. so you can also chat with them and they will try to answer within the next 30 minutes.
there’s awesome so after downloading diva team . we are going to install it going to add new and upload team. 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 . ok so now I’m going to activate my team . so now we have.
successfully installed our diva team after installing diva team . I’m going to divi divi theme options and going to updates and here I need to put my username and API key so I’m putting here my username and save changes.
ok so I will get updated when any new deviating version will come and I can all success all dv3 met layout from my WordPress website now I’m going to create a page for this I’m going to page and add new and I’m making a new page as homepage now publish it and going to use the rebuilder start building. so here we can see three different options built from scratch.
choose a premade layout clone existing page . so we can start our layout from scratch or you can select a premade layout Divi has tons of pre-made layout. we can use any of it.
and we can also clone our any existing page. so here I will go through start building our website from scratch . so first I’m going to introducing you with this builder with some basic steps so here first we need to create a section here is three kind of sections regular section is special section and fully section. so if we select any irregular section and that this here. we can see several kind of froze one column rows two columns rows three columns and here you can see several kind of options for example. if we select two column rows and that this .we can see here is different modules by DV. so we can select any of modules for example. if we select text modules and here so here you can see here is two different options visual mode and text mode. we can start with visual mode . so here you can type our text and we can make this text to a title h1 h2 or any one and here is background. we can set background color for this module . we can add gradient color we can add background image . we can set any image as background. I did not have any image here I am just selecting a random image. so here we can set any image as our background and event. we can also add any background video instead of this image. so here is lots of options and here is design tab . we can design our text style we can style our text font text font weight ultra vault and text font style to uppercase Italy underlined and so on.
we can also change our text color and also change text size we can increase literally spacing. we can also increase or decrease line height . you can also I’m just making all this default and here you can also change text alignment to Center right left and text color to dark to light here I already applied the color so it’s not working here and here we can also change a specific title color here we are using h2 tag . so I’m going to h2 and here we can also change the text style in similar way we can change color.
we can make any color . we can also increase our text size. we can make it uppercase.
so here is so many options and here is sizing we can also increase or decrease our module sizing . we can set Mac suite module alignment and here is spacing. we can add some spacing padding for top and bottom area for top area and similar way for bottom area and left and right and we can also add some margin and here is border . we can also add some border border weed border color here is box shadow. we can add some box shadow for any module. you can also add shadow color event shadow color . we can make any color for our shadow . it’s really cool feature out shadow inside shadow youri’s filter can also filter over all module color here is transform. we can also transform our module here is animation. we can set animation for module how it will comes here is fade effect your slide effect can set any animation for our module.
so we can apply it how it will comes when you scroll down to this module here is more options for animations and here is Advanced tab. we can set CSS ID or CSS class . we can add advanced custom CSS if you were good to CSS . you can also add some CSS here here is visibility options. we can also make disabled this module for phone or tablet or.
Desktop so here we can make any specific module for desktop only our phone only or tablet only if still cold and here is so many options transition position scroll effect Divi has a cool new features scroll effect. so when I scroll down to this module it will work it will move from here to here. I will create a different tutorial about scroll effect . so I am NOT going to more details about this for this time so these are common feature for all module. we can style or customize any module in the similar way here is so many options in design tab and Advanced tab and here in the bottom area .
when I click on here we can see here is also several options so here is import or export module. we can import any design for this page we can export this page and reuse it to another place and here is the cool feature editing history . so if we do any mistake or just want to go back to any previous state . we can just click on here and it’s going to previous state and here page settings . so from here we can add some more settings which will work for this page especially and here is sifter library . we can save this whole page in our library here is add new page layout. so from here we can import any new layout from our DV library or our existing page and here is more options . we can see we can check our layout in tablet view in mobile view and desktop view and here is wireframe view sometimes . we need to check our layout in wireframe mode. so for this we can click on here and going back to previous layout . so here I described some basic features and basic modules about this page builder now I’m going to.
make a basic page layout from scratch. so it will helps to understand more how this page layout works and now I’m going to deleting all this which I did and here I’m taking a new section for the top area. I am taking a fluid and here is several modules for fluid. we can take full it code full it header fluid image bullet map bullet portfolio menu post slider post title bullet slider. so here I’m taking fluid header and I’m removing this top area. so for this section. I’m going to edit this section. I’m going to click this gear icon to go settings area . so for this area I’m setting a.
background image I’m removing this color going to image add background image adding this image and I’m going to design tab layout and I want to make this layout as fullscreen.
yeah cold now I’m going to text. I want to use here text color to dark color. as I use in light background color and here I’m going to overlay I want to add some background overlay here I’m using a white color and adding some transparency and going to content. I’m adding some content here title. I design your website and here is some text I’m just adding some dummy text for this time just keeping it and here is the button text and typing here get started. okay now I’m going to style our text . so for this I’m going to shortcut way just click on this brush icon here is title 1 from here I’m just changing title font style to uppercase making alignment to Center and font family one strut and using medium or semi-bald and for this text I’m making it alignment Center and for this button. I want to add some custom button style so button text size button text color to white color button background color . I’m using a dark color and pattern border width. I’m removing border. I don’t need the border here and here text size. I’m just decreasing text size.
and making text to uppercase . I don’t want to show this icon on hover and add some literary spacing and here is some margin and padding option and just adding some padding top and bottom six pick gel top and bottom and 20 pixel for left and right and increasing top and bottom yeah and now I’m making it Center so for this I’m going to lay out and alignment Center and here I want to increase the text size a bit. so I’m going to increase it and font family come on strut same font or we can use open sense and using a semi bold or light yes light is good that’s it. now I’m going to save it and next I’m taking a new section. I’m taking a regular section to column and here on the left side. I’m adding some text about me sorry text module and here is title . I will add about me and making it 2 h2 tag and some text about me.
I’m just duplicating and going to style our title making it to mom straight upper case making to semi-bald and font size to 35 pixels. so here I want to add our text style globally. so next time when we use this text module . it will work same style for all text . so for this I’m going to here here is global text defaults going dear going to design tab going to head.
in h21 strut and front to semi-bald making it 235 pixel uppercase and next going to default text making it to open sense and text size 40 pixel. okay you can increase it to 50 pixel just save it yes I am making this style globally for all text module now it’s applied here and in the bottom area I’m adding another module here I’m adding a button module typing here read more and going to also global adding some global style going to button button text color to white button background color to a dark color no border no icon text to uppercase.
so now I’m going to save it and check it how it looks like . okay so now we need to check this global style is applied or not I’m going to design tab going to button and when we just enable custom style. we can see our global style is enabled now I’m going to save it and going to again here going to global going to design tab button and I’m making that button text size smaller and later spacing to pixel . we can add one pixel and adding some padding going to spacing padding top 10 pick them bottom 10 pixel and left right 20 pixel and save it and next here I’m going to link and here we can add a link so next time. if we want to add any more.
information about me so that case . we can create a separate page and we can add that page link here with this button . now I’m going to save it and on the right side. I’m going to add a image . so I’m going to image module and upload image. I’m uploading a random one I’m selecting this one upload an image and here is my image and saving it and here . we can also decrease this column width. so for this I’m changing column ooh it making it something different here is large with on left side and smaller width on right side and now I’m changing this image style. so for this I am going to settings design tab alignment is OK going to add some box shadow going to this one or this one.
and I am adding a color and selecting a color from here I am adding a pink color and adding some transparency yes your Specter . now I’m going to save it okay. so our About section is done and next I’m taking a new section. I’m taking another regular section and for the title area here and taking a single column row and adding.
text module and here I’m adding some title. what we do and making it do h2 tag. so here is by default we are getting this style . as we make this our global header style going to here making alignment to Center and for this section. I’m adding a background color. so here I am adding a color . I’m adding a light dark color just to make it different save it and next I am taking another row here and taking three column row and here I want to add some services . what I do so for this I prefer to add a new module . I’m selecting here blurb module and here you can type here title. I’m typing web design and here is some content about my service and here is image. we can add here any image or for this section. we can use any icon . so here I am selecting an icon just selecting this one and going to style it adding a new color here is more options for this icon. we can add circle circle border so here is icon color – white circle color – another one or just pink color and border color. we can use a different one just a light dark or white color and we can also increase our icon font size and making this border color to dark color circle color to dark color okay and now I’m going to here title font style too Monserrat.
upper case center and going to change this text style making it alignment Center and here for the title. I’m making it more dark and font weight to.
semi-bald and this icon finally . we can decrease this icon size saving it and for this I’m adding a background color to white color and adding some padding going to spacing padding top 30 pixel top and bottom and left and right 20 pixel star to pick them and adding some box shadow now making it smaller yes. now I’m going to save it and for the others item. I am just going to duplicate it and replace it here duplicate it and replace it and for the second item .
I am changing this icon. I am just using a different one and changing the title to graphics design save it and for that third one . I’m using a different icon selecting a random one and going to title just type in here is your service save it and here if we want to add more service. we can just duplicate this role and we can change this item one by one and if we want to add four items in a single row for this . we can increase our column to four columns and we can add a more module here. so for this I like to use three columns and here if we want to decrease the size between our items for this I am going to row settings going to design tab going to sizing going to custom gutter weight and we can decrease this spacing. so I’m making it smaller save it and now if we want to apply this style to our second row just click here copy Royce tile and just click here and paste row style.
that’s it and next I’m going to add a new section here taking a regular one and single column row . so for this if we want to add the similar one just I’m going to duplicate it and dragging it to bottom and paste it and just now simply change the text clicking here. so here I’m adding some my letters to work let’s just work and save it and next I’m adding some three columns. so I’m adding a blurb module and for this time. we can add title and images and don’t want to add more text just adding an image for my portfolio. I’m selecting some random image just uploading. so here I’m selecting an image and I’m changing this text my first work here and changing the text style to uppercase font family Monserrat yes okay and making text alignment to Center and here I want to add a link with this module . so for this I’m going to link title link URL or module link URL. so we can add link with this title or whole module. so I am just adding a link we can add any.
custom link for this area. so when you click in this item it will go through this page or link which we will add here I’m going to save it and just.
duplicating it paste it here duplicating again paste it here and decreasing the pacing going to sizing custom cutter weight and making it smaller spacing save it . we can change our title just typing here so again one. you can change this image .we can add another one and here I’m adding another one just this one and title.
save it and here I want to add a button and that this area. so for this I am taking a new row with single column and for this I am just copy this button duplicate it and drag it to bottom. so I need not do those similar work multiple times just drag it here and here I’m going to design tab alignment Center and we can change text from here. I’m just typing see more work save it and save my page and next I’m going to a new section regular section here I want to add some reviews about my work . so for this first I’m going to add a title just.
duplicating it and paste it here and for this section I’m going to add a.
background color I’m adding a lighter color just making it different and save it and next I’m just changing this text to reveals and Here I am adding a two column row and on the left side first . I’m taking a testimonial module testimonial.
here is testimonial section. so here I am adding image . so for this I’m going to content image and going to upload some image . so here I am adding some.
testimonial image for client image . I am selecting this one here is text named Karen AC and from here. we can change text and now here we can also design this icons color just change this and making it to text uppercase Turk color changing font family to construct and adding some letter spacing. we can make it little transparency and for this . we can also use a little dark color changing the font family to open sense and save it now I just going to.
duplicate it paste it here and changing the image adding another one save it and we can also duplicate this role so in similar way . we can change image.
and here just changing images save it and save this section for the bottom area. we can add a contact section . so for this I’m adding a new section regular section to column and for the left side . we can add some text I’m adding text or just duplicating this title just paste it here sorry.
just moving to left changing text hello and here you can add some contact information and just adding for this blurb module and here can use title don’t want to text. I can use here icon I’m selecting these going to design tab making this icon color to a dark color alignment left and making it more smaller and here I’m tapping phone and typing my phone number dot dot dot and here you can change this icon for phone. we can use a different one going to images icons and we can select this one for phone and for title. we can also make it smaller text size.
making it to uppercase and making it to bald and the phone number . we can make it more dark and increase the font size yes no save it and just duplicate it and here we can make it email and here. I’m adding my email contact Jana c.com and copy it making it to link mail to this save it . we can also make this link style to the same color just here going to link and making it too dark color and for this icon . we can change this icon to this one save it and here we can also decrease this spacing . so for this I’m going to spacing and top margin to zero or just adding some – Margene save it and duplicate it and here we can add address and here we can add some dummy text.
and here we can use another icon for location. we can use this one and save it and for the right side . you can add a contact form here is name email message here is capture and here is button . we can also change the button style going to text color to white background color to dark color border no border text size to smaller and uppercase no icon letter spacing adding some letter spacing . yeah we can leave it and save it and here we can also add some text and top up the form.
so I’m adding some text moving it to top area and now changing text fill this form and submit it just type in some random making it to alignment Center and font size increase the font size color . okay now save it and here is the form. so form settings we can set from title from success message so when someone fill this form it will display this success message and we can change this button . we can type anything here I’m just leaving it as it is and email we can set here email address. we can set any mail so when someone fill this form and submit it it will goes to a certain email. so by default it will go the email which we used for the.
WordPress admin account or if we want to add a different email address . we can type here and here . we can set mesons pattern by custom . so by default it’s . okay we can get all information by default . we need not to customize if so much and here is redirect option. we can also redirect after submission. so when someone submitted it will redirect to a certain page from here we can also change title name email address and we can also style each form text style fill this style so by default. it’s okay I need not to do so much customization for this form I am leaving it as it is I’m going to save this page exit visual builder here is our design now I’m going aníbal visual builder and this time. I will do some final finishing tasks so going to eat this part and here I think here . we can increase this text size. so for these I’m making it 50 pixel and going to edit this button . I’m going to add some more spacing as much adding 30 pixel .
yeah looks good now going to save it and now I’m going to edit these sections going to design and dividers here is a cool feature of Divi theme. we can add section dividers for top area and bottom area . I’m going to bottom and here divider style . we can select any divider is tied.
I’m selecting a random one and from here you can select divider color white color is good and here. we can also set divider height and save it so our design looks good.
for the top area in the bottom area. you can also add a block section and just duplicating this section to make it fast and drag it to bottom just top of the contact area and changing the text latest post and save it here I’m just removing this row and taking a new row single column row and taking blog module. so here I did not post any blog so it’s showing the default one from here we can select post type. you can select host page media projects and here is category. you can select any specific category for post . we can say date format . we can select post excerpts post length and from here we can also disable our aníbal few items show featured image and a bolt or disabled so read more buttons show author here is author here instead .we can also disabled from here and here is category . we can also enable or disable it from here for this time . we can disable this author and going to layout and here is now default layout structure bullet. we can make it to greet before styling this blog section. we can import some dummy blog post.
so I’m just saving it and now I’m going to new and first I’m opening it in a new tab.
host title one and for this time just using default editor of WordPress. Here I am putting some dummy text just putting here some dummy text and going to document featured image just uploading a featured image going to upload all here . you can add some image from library publish it and another one post title to adding some text and adding a featured image just selecting images from here publish it and add new post title 3 and adding text going to upload featured image this one set featured image publish it now. I’m going to all post and deleting this default one and now I’m going to visit my website sorry this is not our home page . I’m just going to exit visual builder to visit this page. so here is our post now going to again visual builder and now I’m going to row settings going to design tab going to sizing and cutter with decreasing it to save it and now going to blog post just making it designed making the post title font family don’t monstered uppercase and letter-spacing one-pixel making it too bold looks good.
and for this category you can make these open sense and making this color to a different one . yeah you can make any style it’s not important now I’m going to content making the Pont family to open sense and color making it too dark here you can also decrease our text it’s going to content and making it to 100 . so it looks good or you can make it 80 yeah looks good now. I’m going to design going to border. I don’t want this kind of border but here we can use box shadow like this yeah it looks good and here we can change this text or we can just remove this button as we are not adding any additional block page for this time or if you want to add a single another blog page that case you can link that blog page with this button . you can also change the button text for this time. I’m just leaving it and saved the whole page and finally . I’m going to check this page for tablet and mobile view for this.
I am going to tablet just click in here this is our tablet view the tablet view looks good here we can just decrease this font size a bit for tablet for this I’m going to font size just click on this phone icon and here is our tablet view here is for pond view and here is for desktop view . so for tablet view. I am just making this font size 235 pixel yeah it looks good now going to save it and now going to check the phone view. so for phone view . it can also make it more smaller . I’m going to design font size and here is that if Excel yeah that pixel for phone is good and here is about me going to design and here is from size just enabling this phone icon for phone for phone. we can make it 28 pixel yeah you look good save it and here you can also decrease this font size for phone going to design going to font size going to phone icon and here we can also add same font size 20 pixel save it and I’m just copied this text style just go in here copy module style and doing same for all other titles going here just paste module style save it.
going here and test module style doing same test motive list. I’ll save it and also going to change this going to paste module style now save it. so in this way we can optimize our page for phone and tablet view . now I’m going to save this page exit visual builder. now I’m going to customize this header area. I will add logo and I’ll create a menu and also customize this footer area. so before this. I want to make this page as my home page. so for this I’m going to my dashboard going to settings and reading and for a static page. I’m selecting this home page and save changes.
ok now when I go to visit my website . we can see this page is working as default home page now. I’m going to create menu for these going to here and going to menu here I’m typing a menu name top menu create menu and set it as primary menu save menu and now I’m going to add some menu item this time. we have only one page so we need to create some custom menu item . so for this I’m going to custom link typing about and URL just hash tag and about now add to menu save menu and I’m going to refresh my page now.
you can see here is our you know item about is added when it click here is not working anymore . so for this I’m going to again a novel visual builder going to this section . so when someone click on this about menu it will scroll down and comes to this specific about my sections. so for this I am going to this section going to advanced CSS ID and classes and here I need to add CSS ID name about and make sure this ID name and here is the name after hashtag will be same. now I’m going to save it save this page exit visual builder and now . when I click on about yeah it’s working fine . so it’s crawling to our About section in the same way.
we can create all others menu item for other sections. so first I’m adding the CSS ID for all sections going to enable visual builder and going to these section settings going to advanced CSS ID. we can make this a service section and also going to create a menu item for it just hashtag service and here is the link test add to menu and save it and for this one . we can also add another CSS ID name it to work save it making a menu item add to menu and here is reviews . I’m just leaving this section here is blog post here I’m going to make this as blog save it and making it to block section add to menu and we can make it to contact contact copy it going to add new menu item add to menu.
now save menu and also save this page exit visual builder now I’m going to about here is our About section services here is our services and work blog and finally contact is still cool and finally. I’m going to style this menu item and header area for this I’m going to theme customizer okay . so to customize our menu item. I’m going to header primary menu bar . so from here we have more options to customize our website. we can make our header full weight or height logo.
and minnow height we can increase our menu . we can also increase our logo size . we can also increase our text size and letter spacing. you can make it to uppercase making it to monster font family and text color looks good and active link color black and drop-down menu link color . we can also customize our drop-down menu item. so for this time we don’t have any drop-down or sub menu items . so I am just skipping it and publish it.
we can also hide this search icon for these going to header element show search icon . we cannot make it to hide okay now save it and for footer area but this time . we don’t want this area and I also want to change these copyright text for this I’m going to put er put er bottom bar and from here we can add our copyright text copyright 2012 by iana and also change social icon color to white. you can make it smaller and this font color to white and this bottom bar color . you can also change this color to any one just making it this you can make it to your team color and I don’t want this area. so for this I need to remove this wheel chairs from our widget area. I’m going back going to widgets and here is our footer 1.2.3 here’s hooter 4 . so I’m just removing all this item from footer area.
okay now I’m going to refresh my page yes so our top footer area is removed and looks good .now I’m going to upload my logo to upload logo. I’m going to dashboard going to Divi Divi theme options and from here we can upload our logo . so for this I’m going to upload select file selecting a logo and save as logo now Save Changes. now refresh my page yeah looks good . so if you want to get a good quality logo in a very cheap rate for your website then you can go to fiber fiber calm okay .
so here just type logo design and here you can see tons of services tons of gigs . so you can also filter your budget. if you have low amount for it you can type minimum $5 to $10 and apply and you can see here is so many gigs they are providing logo design at only $10 here is $5 $10 $10 and they are providing . so many services 50 to 100 plus service and they are top-rated by fiber you can select which one you like to use for example. I’m trying this one this is fibers choice here is five rate and top rated seller. so here we can see these guys is providing logo designs. you can get the basics one at $10 and standard one here is several kind of packages they are providing if you want more quality . you can select their premium or standard here is so many options . you can select any one which will match for you.
so this fiber link also given in my description . you can also go fiber using my link in that case I can get some small Commission it’s not too much. ok I’m going back so this is our website here is our full website and it’s fully responsive for tablet and mobile view here is iPad view . we can also change this menu icon color here is our mobile menu so to change this color . we can do this from theme customizer just go to general settings and layout settings and here is theme excellent color. so if we change our theme accent color for example black color it will work for our all default color . so now when i refresh my page. you can see our icon color is changed and also this thin line color .finally I will show you how it can make a page using the V pre-made layout Divi has tons of pre-made layout. you can use any of these .
so I’m going to create another page just just wanted to show you how we can use their pre-med layout for our page . so I’m going to add new page and create a second one name it to home too and publish it and use Divi builder this time I’m going to select choose a pre-med layout and here you can see DV has tons of pre-med layout. we can select any one for our page . so when you click any one here is all others page design for this specific template here is landing page here is portfolio pricing about blog contact and home page. so when you want to make a one page layout. we can select the landing page. so for this time I’m just going back and searching for landing yes. so now you can see your team landing page design here is turns off landing page design. we can select any one from here . okay so I’m just selecting this one for now LMS landing page use this layout yes . so it’s a cool layout you can use this kind of pre-made layout and customize it as our neat.
so in this way we can import any pre-made layout and just customize as our needs. so we can also customize or chance any text chance color change background color change images. so I hope you can do it. as I show you how you can create any page using this Divi builder from scratch. so I hope you understand the basic concept and now you are ready to go.