Learn how to make a beautiful WordPress website with the Divi Theme 3.0. This theme stands out from others themes because of the new Visual Page Builder! You see immideatly what you edit in your website. No more backend editting.
Get webhosting at Siteground
Get the Divi Theme: http://ferdykorpershoek.com/divi-theme/
Download the images I use in this tutorial: Click Here
A few people asked my to take a look at the Divi theme and make a tutorial about it. So I decided to do so. I am amazed by the Divi Theme! The 3.0 Page Builder is amazing! Making websites this way is more fun and faster than ever before! With this ground breaking page builder you can design your website the way you want it! No more going back between the front end and the back end. Now you SEE what you are editing or making!
In this tutorial I show you step by step how to Divi Theme 3.0 works and how to create a beautiful website! The demo website can be found here: divi4.com
Overview of the video:
07:31 Get a Domain and Webhosting
10:45 Install WordPress
12:39 Clean up/organize the backend of your website
14:47 General Settings
16.51 Get the Divi Theme
19:22 Install the Divi Theme
20:35 Create pages (Home, About Us Etc.)
21:48 Create and configure the menu
Divi Theme 3.0
25:48 Configure the Divi General Settings
29:31 Introduction to the Divi Visual Builder. Sections, Rows and Modules.
31:21 Create the Homepage with the Divi Visual Builder
59:09 Lead a template from Divi and adjust it to your desire
01:02:53 Create a video background
01:15:24 Customize your website using the Theme Customizer
01:20:21 Customize the Header and navigation
01:25:27 Customze the footer area
01:26:59 Configure the Latest Work Page
01:29:55 Create your first ‘Project Page’
01:33:51 Create a Gallery in the Visual Page Builder
01:36:18 Create Project Categories
01:36:55 Create a Video Project
01:38:52 Schedule a Project page or post
01:43:19 Filter Project Display based on category
01:44:09 How does the Module Customizer Work
01:46:25 Add widget area’s in the footer
01:47:49 Add a Facebook plugin for the widgetarea
01:49:48 Add a blogpost
01:50:27 The basics of the Text Editor (Header, paragraphs, adding photo’s)
02:00:53 Configure Individuel Post Settings
02:02:30 Configure the blogpost categories
02:03:37 The basics of the Sidebar
02:08:10 Configure the blogpage
02:10:11 Change the exerpt of a blogpost
02:11:20 Change the style of your blogpage
02:17:02 The Most Recent Blogpost Widget
02:18:47 Create the About Page
02:27:01 Create the Contact Us Page. A lesson about the Divi Sections, Divi Rows and Divi Modules.
02:34:25 Thank you and congrats!
Follow up tutorials:
Thanks guys and goodluck!
Transcription of the tutorial
Hi there, my name is Ferdy Kopershoek for ferdykorpershoek.com and in this video I will show you from scratch, how to create a beautiful and professional website, using the amazing Divi theme 3.0.
The website we are going to make you can find it at divi4.com and this is what we are going to make, we’re going to make use of free images, beautiful image over here from New York, Manhattan and this is what we’re saying, ‘we are creative’. it is a website about a web design company and this is what we are going to make, I’m going to show you exactly how to do this and what I like about the Divi theme is that you can edit the website with the front end editors, I enable the visual builder and now I can change the text here.
So that’s really nice and if I think, I need some more space over here, I can give it more space so here it’s dragging, dropping and you can see what you’re doing, change the title over here if I want to, I can change this color so If I want the screen color to be different color, I click over here and then I get a panel, the panel can be at the left but it can also be floating, wherever I want it to be, I like it at the left and then I can change the title here, we are also gonna change the color so I go to the second step, design, and here’s assume, I can color, I can it change too, something like that, but I can change the icon to see it’s not what I can go to play button and in that way you can change things really easy.
If I want to change this color of this border, I can change it over here like that, it’s very intuitive and really easy to work with, right here is a video playing, I can increase the size like this, I can click on this icon and change the background color of the message, everything you want to do you can do it right here in the front end editor so actually the visual builder, I don’t save the changes and I go to service page, here you see video it’s playing in the background smoothly, nice animations, a video, I’m going to show you how to change everything so for instance, if I want to change this, I click on enable visual builder and maybe I want this color to be different color and I want this to be at the left and this to be at right, what I can do, I direct this over here and I drag this area to the right like that, then I click on the module settings and I’m going to make it a little bit rounder over here.
So the border radius, increase it, see changing over here, I can go to the percentage, the line height, it’s get bigger, I can change the color, for instance to purple and in the same, it’s OK, that’s how easy it works. I go to latest work and this is one of the ways you can display your portfolio or your projects, you can select them by films, photography, web design so you can select them by category and it’s really nice to see.
If I go to photography, for instance to this corporate shoot, you can see all the pictures really clear, very nice, here below we have the widget area about us, like us on Facebook, most recent posts, I go to the about page and maybe I want to change this in to a video background. I enable the visual builder, I click over here on this icon, go to divi4and I go for a background video, I upload it, upload the files, select a file Sky Lapse and Divi is handling this amazingly well and here, it is looking really nice.
There are some icons you can change, the color, also here you can change everything then we go to the blog page and here you can select a certain few of the block I like this one the grid-view and if I click on a blog post, you can play around with images with Header’s, with paragraphs, I’m going to explain to you, how to make this and how to be found better in Google, here at the right you see a sidebar with the most recent post and a like us on Facebook widget and then the contact us page, we’re going to create us from scratch and by now you will have all the knowledge that will help you to make a page like this, if you go to elegantthemes.com/preview/Divi you see what the theme is capable off so if you are searching for a page, for inspiration you can go to home and maybe homepage corporate and you see something like this, maybe you like this and you want to implement this in your website, what you can do, you go to home, check homepage corporate, to contact us and you can go to enable the visual builder.
I click on the icon over here and then on the plus and I’m searching for corporate, I click where you see, you’ll get the exact same layout as here, only without pictures, so you can add your own pictures and videos and you can work very efficiently and again if you want to change some things, it’s really easy, you can increase stuff, decrease it at the general settings of Divi, you can change a lot of things. For instance, you can say I want a vertical menu like this or you can have different header like this, the logo up and below the menu or logo in the middle, slide in so you have to click over here and then you see the menu, of course you can change these colors and a full screen like that with a different background of course, there are a lot of possibilities and if I go to general settings, layout settings, I can change the size of the website, I can make it a box layout so if I press command minus a few times, you see there’s a box around it like this, the website width, the color width.
So if I go over here, the gutter shows how much space there will be between elements and modules like this and if you don’t like it you can reset it over here or the height and the width of a row, you can change everything really quickly and last but not least the website is really responsive so if I decrease it, everything will be displayed really nice so I love this theme and I’m going to show you how to create a beautiful WordPress website with the Divi theme.
if you like what you’re seeing so far please give this video, a like. It would help me out a lot and if you want to you can subscribe for more upcoming videos, so let’s get started, so the first thing we need is web hosting, web hosting is nothing more, nothing less than a really fast computer somewhere in the world that stores your website and though my name is like an address so there’s two things we need our domain name and web hosting, so let’s go to Hostgatordc.com. I really like hostgator, it is a great service 24/7 and you can call them but you can also chat with them and you can get your money back if you’re not happy with the web hosting service, I never had any big problems with them and if I had a question they were always very fast to reply, so in order to get a domain in web hosting, click on web hosting over here and you can choose for three plans, I never use this one you don’t need this one, we’re going to choose between the hatchling plan and the baby plan, if you want to host only one website then the hatchling plan is the way to go, if you’re planning to have more websites then this is the way to go, you see this one is for a single domain and this one is for unlimited domains, you can always upgrade so I choose for the hatchling plan and I sign up now.
I want to register a new domain name so I would like to go over divi3 if I press enter it says it’s not available, well divi4 is coming out sooner or later so I’m going for divi4 that come and it says it’s available for twelve dollar ninety-five, I scroll down and I remove the protection you don’t need at the domain in such a way that nobody can see who the owner is of the domain. I don’t need it so I leave it as this, packets type, it’s hatchling, the billing cycle can be one month and hostgator can give you this month for free or at a certain coupon code but I like to go for three months, then I can get some more discount and the longer the billing cycle, the more discount you get, so I like to start with three or six months, my username will be ferdivi security pin 1 2 3 4 5 and there I fill in my details, you need to have access to this email address because they’re you get all your information in order to get access to your website. You can use PayPal or credit card, I use credit cards so here my credit card details, I scroll down and there are some additional service, I actually don’t need those, I can protect myself with plugins, so it’s okay like this.
Right now we pay $45.80 for 3 months but if you change this to wordpressking25 and validate it, and you scroll up, remove protection again and scroll down. Now it’s 37.59 and this is for the long run better discount, so right now the amount due is 37.59 dollars and I agree with all these terms and I check out now. So right now it says payment completed get ready we’re setting up your account, now we need to go to the email address, you filled in. So I go to mine and here it says thank you for Hostgator and hostgator your account information, this is an important email, I open it and I can go to my control panel, I click over here and I need my username ferdivi and my password over here copy and paste it, I login and now I want to install WordPress so over here it says WordPress installer so I’ll click over here and if you can’t find it, you can search it in the search bar and now I need to select my domain, its divi4.com, you can select the directory like Divi.com/newwebsites, you can fill that in over here but I want to install it on divi4.com.
So I click on next, the blog title will be divi4 web design, my username, my first name and my last name and my email address. I scroll down, I agree to the Terms of Service and I say install now, WordPress is installing. Installation is complete, if I click here on divi4.com, it can be that it’s not online yet because it takes some time for Hostgator to register the domain and set up the hosting so I click on it, it’s not working yet so I have to wait for a minute so I’ll be right back.
I’m going to try it again so I refresh the page, yes its working, the website is online so I go back to the c-panel, get my username, copy it and paste it over here and grab the password and paste it over here, remember me and I want to login and now we go to the back end of our WordPress website in my case on divi4.com, actually I don’t like what I see and I want to clean things up because a lot of stuff hostgator gives us, we don’t need so I go to plugins over here and I’m going to deactivate some plugins so I’m going to deactivate them all, except for one, this one and I say broke action, deactivate, apply so I the deactivate all these plugins, we don’t need I’m going to select everything again except for Akismet, bulk actions delete and apply OK, there it go, if I refresh there’s only one plugin.
I go to the dashboards and this looks a little bit cleaner already, I’m going to dismiss this over here I’m going to post, there’s a sample post, I want to delete it, I say trash and again I go to trash and I click here on delete permanently or empty the trash and the same goes for sample page, 1 page, sample page trash, go to the trash and delete it permanently, I go back to the dashboard, I collapse everything and this is looking clean in my opinion.
I’m going to change a few things, I’m going to user, your profile you can change the look a few of your back-end, I like it the way it is, I’m going to add my name over here, right here it says howdy Ferdy Korp and I want to display my name as Freddie Kopershoek, I scroll down I’m going to generate new passwords over here, I confirm the use of the weak password and I update my profile so if I log out and I can log in with my username and my new home made passwords, like that, I go to change a few things, I go to the settings, to general the side titles Divi web design, ‘our passion is to make great websites’, something like that, it’s a tagline, you don’t see it in the website, that’s Google can see this, so I save it and the next thing I do, I go to permalinks and what you’ll see here, you can select the URL settings over here, the permalink settings and google wants everything to be clean, if I say this and I create a page called home or about me, it’s what we called divi4.com/something like this, google doesn’t get this, google likes this divi4.com/blog or/ about me or/shop so I select post name, I save the changes and if I take a look at my dashboard right now, it’s really clean, now it’s time to get the Divi theme so in order to do that, go to wordpressking.com, go to themes and here it is it that Divi theme, I click on it and I go for more details.
This is my affiliate link and it gives you some discount sometimes twenty percent sometimes ten percent, I hope it’s 20 for you and it gives me also a small commission so we get twenty percent off normally its $89, now it’s seventy dollars for one year and what I like about this theme it’s not only one theme, there are 87 beautiful themes and it also comes with a few really good plugins, if you take a look, this is a really nice plugin for updating emails, I will give you tour also you can find it over here and you can find here at the tutorial about mill chimp, so you can start sending emails to the people who opt-in on your website and the nice thing is you can use the themes unlimited times.
I like the [unclear: 17:59] theme and the [unclear: 18:00] theme but you have to pay per license and in this case you can use it unlimited. So I go for the developer plan, so I have all the plugins also and I sign up today, I have to create an account, I subscribe to updates and I understand, follow the terms. Next step, my payment method is credit card, yes seventy dollar for 365 days and I proceed to the payment, I fill in the details, this is optional, I save it, your payment has been received and let’s take a look at our email, elegant themes, I can login to my account, remember login so I’m here at themes, I scroll down, I see Divi builder, I don’t need it yet so I scroll down more and I go to Divi over here, downloads theme package and save the file, so I downloaded it over here, I’m going to close a few steps like this and then I go to appearance themes and I’m going to add a new theme, I’m going to upload a theme, I click on browse, I go to my downloads and here it is Divi, I open it and I click on install now, right now this is how our website’s looking, I don’t like it.
I can close this also, here it is I activate the theme and here it is. If I click here holding command or control, I go to the website in the new tab and this is how it looks like and we are going to work from here, I like to keep things organized so I go to theme details and I delete it because I’m not going to use it anymore, I’m deleting second one and I’m deleting the third one.
so this is the front end and this is the backend so let’s create some pages, you can do it over here at new page or you go to pages at new and of course the first page I want is the homepage and I publish it, I want to add a new one about I want to show my latest work so a new page, latest work, I publish it, I would like to have a blog so I click on add new blog, I want to offer my services so I say services and on people to have the option to contact me so contact us, publish.
if we take a look at our website you see them over here but they are not organized so I go to the back end to appearance, menus and here I can create a menu I call this one main underscore menu, you can give it your own name and I say create menu then I select all the pages over here I just created and I say, add to menu and then they will be added so I can select that thing and then say add to the menu and it will be added to the menu over here, what I can do, I can save this menu and nothing happens, it’s still about blog, contact us.
What I have to do, I go over here, I scroll down, I go to menu settings and say theme locations, primary menu. I save the menu and now if I refresh the page, you see contact us services blog, latest work, about and home. I can bring change in the structure by dragging and dropping so I could say home, I want to be the first one, latest work our services maybe that’s one over here blog maybe about over here and contact us latest.
I save the menu, I refresh the page and this is how it looks like, if I go to latest work you see the permalink is really nice, latest work and if I click on the logo which will change then I will go to the divi4.com so actually I don’t need the home because if you click over here you go to the homepage, so I remove home like this, I can also change more things in the menu, I click on this arrow down and I could change the navigation label like this and if I save it, it says over here like this, if I click on like this, I go to the page services, so I change it back, you also can use capitals services, I would like to do that latest work about blog and contact us, save the menu and this is how it looks like then I go back to the backend and I go back to settings and for this time I go to reading because we have made a few pages right now, our front page, our home page displays, shows our latest post, I don’t want it, I want to make it a static page, a page we just created, in my case the homepage and the post page, the blog page is blog like this, I save the changes and this is our website so far.
I’m going to do one more thing at the settings, I go back to settings and I go to media we are going to upload quite a few files and what you can do, you can organize your uploads into month and year based folders, I don’t want that I want to keep them all in one folder. Sometimes I want to look back at pictures I’ve uploaded and then I have to find out in what [Unclear: 25:43] upload it and in which month, so I save these changes, let’s go to Divi over here and click on theme options, if you want, you can download all the pictures I’m going to use in this course, go to wordpressking.com, go to tutorials, Divi theme tutorial, scroll down, I download the images I use in this tutorial OK, I bring them to my desktop unpack it and here’s a video, I can share this because I bought it so I’ve only one license for this but you can use another video in the tutorial and here is a nice overview with all the pictures I am going to use in my course so you can follow along if you want to or you use your own images, so I go back to the general options and I go to the logo, I upload new one, select files, go to my desktop, Divi, home, miscellaneous and here it is divi4, I want to optimize it for Google, so I copy this title and I paste it in all text and I said it as logo as I can over here, right now you see hostgator, I want to see our 2own logo so I upload the file again, right here, open copy/paste, scroll down.
If you have a Facebook page then copy the link, I’ll use mine and I paste it here, I also have Twitter, I copy this and I paste it here and I’ll leave this like it is, save the changes and refresh the page what we see here is my logo services latest work about blog and contacts, if you want to have a drop-down menu or a sub-menu, there can do that following, I go to appearance menus, I’m going to create a custom link with no URL and I say ‘photography’, add it to the menu, another one film and another one web design, I can drag them over here, then if I go to the right a little bit you see a tab like this, I release it of course I change this to photography, film and web design.
I save it over here, refresh the page and now we have a drop-down menu, it’s really nice OK, let’s build our homepage from scratch so I say enable visual builder and we have three layers, the first layer is a section we can choose and a section is like container, you can contain rows in it, they call it rows, so here it says row settings and in those rows we have modules, so Accordion, audio block, a lot of different things and with that we can create the content on our website I’ll show you how it works so three layers, the container the rows and the modules and they all three work together, what I’m going to do I click on the blue + and I can choose a few different sections, regular specialty and full width, if I choose regular, I can set the rows like with one column, two column, three columns or four or different combination or I go for a specialty like this or I go for a full white and in this case, I go for full width because I want to have a full white slider, so actually this is a slider container and it needs a slider and slider I can create by clicking here, at a new item.
This is a title, we are creative, the button text is latest work and if I click on command or control on this link I get the Link latest work and I paste it at that button URL, we are going to create a heading text, a button text and in between a normal text, I want to have a dark background of the bridge so I upload a picture upload files, select files, I go to home and I’m searching for this bridge, from pixels.com, it is for free, a really nice picture. I optimize it for Google, copy it, paste it in the all text and upload the image, you’ll see it is changing immediately, right now I press over here and again and then I remove this over here and now this is our only section, I click again over here to edit the settings and what I can do, I can drag this to the right, to left, up low, I can also make it bigger or I can bring it to the side and if I have a big screen, this is not a big screen, but this works okay for me, I can drag it over here to the right to the left and what I love about this theme, if I changed something, you will see it immediately.
Right now I’m in the section settings, I want to go to this settings, full width slider so the full width slider is a module and I click on the slider and continue, we are creative, latest work, the link of the URL, the background, we can edit the background image position so if I click on center, when you watch them on iPhone or an iPad, you’ll still see the middle of the picture, I scroll down, I want to have a background overlay like this and now I can select a color, not only that, I could select green but I can make it transparent and that’s a really nice option over here, like this, so I want to make it a little bit more purple like this and then let’s play with it, I like this.
So I click here again so I close it and then I scroll down, text color is light, if I make it dark, it will become dark, nice that is putting one option to make everything light or dark, I scroll down more and here’s the text we can type that will be between the header and the button and I will say, ‘watch this blow your mind, with our web design capabilities, it’s already centered, that’s good. So what I can do in the general tab is create a text at the background and some other stuff but if it comes to colors and bedding then we need to go to the design tab over here now we can edit the design and you will see a real life update so the header font size is 46, I can change it to 100 and you see it’s updating real time, so I changed it to 100 and I want to have the font Boogaloo, like this maybe a little bit smaller.
Probably the text is in two lines now because the screen is very small. But if I would save it, save it again then it’s like this. So I go back to the settings of this elements, the full width slider. Click on the slider itself. Go to design and when you do this more often, it becomes so normal. Right now you’re maybe like what is going on but if you keep on doing what you’re doing then everything will be alright and I will help you make a beautiful website and show you how everything works. So I want to change the color. This yellow one. We can change the header spacing or the line height. We don’t need it because it’s one line. I scroll down the body fonts, it’s this text. The text color is already white and we can change the size. I want to make it a little bit bigger. Make sure it is one line ye.
Normal fonts and for me it’s okay right now. So I can click on this three dots and I can save it or if I say exit visual builder it will ask me if I want to save it, it’s when safe and exit and now I will see the website as everybody else will see it right now. We are creative, watches blow your mind with our web design capabilities. Latest work. If I click on latest work, I go to latest work. So we have nice backgrounds, really nice menu with a sub menu and beautiful picture or fake company is located in New York. It’s a web design company and we are creative web design company watch us blow your mind. We’re representing capabilities and I want to remove these dots. Instead of going and clicking to everything. Again I just say enable visual builder and instead of clicking here and then scrolling and stuff, I just click over here and I remove it. I click somewhere else and everything is fine. I’m going to create a new section. A regular section with three parts like that and now I can insert a module. You can scroll like this or you can search for something. In this case, I’m going to search for a blur. I scroll down. It’s taking place over here right now and I call the title ‘Photography ‘ and you see it appearing over here. The URL will be should be photography but I will link it to the services because there I will show what we offer with photography. URL is this one in the same window. I can use an icon and I will not do this for now but later in the video I will.
I want to use an image so I upload file and homepage we are ‘Divi photography’. I open it, I optimize it and there it is. I scroll down. It can be an animation I want to animate it from the left to the right. The text color is dark because the background is light. The text is centered and here I can add some other text about photography. I will type something like this. I go to design, I can make the font size bigger maybe 30 letter spacing is not necessary and the font size is 14 which is fine with me. That’s okay photography like this. What I can do now. I want to do almost the same thing here and here. So I can duplicate the whole section by clicking this icon in the blue area and then I have a whole new section remove this. If I replicate the green section, I will get three rows again with only one module in one of the three rows I don’t want that. In this case I want to duplicate this module. This blurb and I click here. Now I have to drag it over here. You saw it becoming great so I duplicate it again and I track it to this place like this. Now I only need to click on this icon of here through the settings. I call this films or film. It also needs to be linked to services and everything is almost the same except for the text okay.
And the third one is web design. So I change the title ‘Web design’. I go to the text. Ok so it’s looking quite nice. I only have to change the picture. So I click here again I forgot it and then I click on uploads and I upload two other files, web design and film. Alt, shift, go up, select them both and open them. Remove the dash, copy and paste. Click on the other one. Do the same. They’re still both selected as you see. I only need to have one selected which is the film one so upload an image and then ok. And here again the third image which is already uploaded and optimize for google like this. Ok if you want to, you can change the backgrounds. You can change the background often individual item or module by the gray area. For instance let me see a design. I can change the background’s color to red and you see this area becomes red. I don’t want that. If I say I want the rows, columns have to have a background. I go to design here, background’s image or color. If I would say red, it will have this area I clear this and if I go to the blue area which is the section area and I might take a background which is red then everything is red. So those are three layers you have to deal with. The modules, the rows or columns and the section and those work all three with each other.
So let’s try an image in the backgrounds. Upload an image. We go to this one ‘Backgrounds’ and I open it. I don’t need to optimize this. I upload it. You see it looks quite nice but the text is very dark. I also want to give the parallax effect over here and that’s ok. Now I could say over here I want this background to be white. I go to design, backgrounds and I make it white. We can do to all three. It would look quite nice so yeah let’s do that. Over here to the second one. Design, background color, white and third one design, white like this. Let me save it. Save. It’s not outlined perfectly so I could add a text over here so let’s do that and with the page builder, the physical page builder you can see that immediately so that is great. Another great text writer so I’m going to make something up. ‘Few absolutely, totally and very free to contact us’ Okay very bad but now it’s aligned really nice.
What we could do, we could go back to backgrounds of the section and not an image but a video so I can upload it. Again you need to find your own file. Maybe can download something from YouTube temporarily to test it or use your own video. Upload a file, time-lapse video and I upload the video which we’ll see now. You see it not completely to the site but probably if you save it and you will exit visual builder, it will be full white. So that’s how it looks. I think I forgot to save something here and this is how it looks like. Looks quite nice. Well it was just a test and just to show you what is possible. For now I will not use a video in the background over here. I don’t think it fits with this and in this case is not necessary. So I enable the visual builder and what I can do is just make it white again. I can clear it over here. We still have the background. So this is an option or I can just make it white like it was already like that.
I’m going to create a new area. It’s a regular area with three Columns, three rows and it’s a counter ‘a circle counter’ and what you can do over here you can see. You can show somebody, how much percent you are with a project or how many websites you have made and in my case I’m going to show how many photography projects I have had and there are 173. So I removed the percentage sign. I go for the dark and here I can change the color and the two colors I want to use on my website are yellow and purple. In this case I want to use yellow and again I can go to design. You can change the circle color. Change the opacity. You can change the title fonts. I think it can be a little bit bigger ’30’, text colors ok. Rest is also ok. The number here, it can be bigger and can be the Bigelow like that. Photography projects I’m satisfied. I’m going to duplicate it and duplicate it again and change some things over here. I use film, projects 121 and here I have web design projects and that’s 64. You see if it’s not reaching the hundred, you’ll see it’s kind of a percentage bar. I like it. Design, it’s all fine with me.
Okay now I want to add a new element to it but if I click on the ‘+’ over here I’ll show you. I can say I want to go to text and click on it and now I can select some text and say a few statistics. I go to design, to the text. The text went a little bit bigger and I want to bring it to the center. I can do that in general, over here I select it like this. But what you will see the module is inside of this column. The three columns over here. It’s inside one of these columns. I want to have it above so if I drag it above like this, it is above. But then this will be pushed down. So I want to have a new row over here. How to do that. I click on the ‘Green button’ and I want to say one row full white. I want that row to be above this row but inside of the same section. Now I can direct this module to this new row like this. I added this title to make it a little bit bigger text font size.
If I want to have a title and text, I can do that over here. Then this will be the title and this would be the text and that should be two different Linnaeus but right now they’re both very big. So I go to design, full-size is normal 14. I go back to general and I select a few statistics and I say this is to be the title heading 1 or heading 2 or heading 3 which one of this, it is a heading. So it becomes a title if you select it. It’s a little bit bigger now and if I go back to design now I can change the header font size. So I can make this bigger and I can separately adjust this. So it’s great if you work with the text settings to work with the heading 1 and the normal paragraph. That way you can design those two independent of each other and actually in this case I don’t need a subtext so I can remove this. What I want to have is a divider. So I click on ‘+’ over here, the divider module and if I type in ‘Div’ it’s over here. You can see it so it’s a little bit tricky. Where is it now and if I really could not find it, I can save it and I say edit the page and now I go to the back end.
You see different structure but it’s the same thing. So you see the full white slider we have made. The three blurbs with photography, film and web design and right now over here it sees two dividers. Remove one. I click on this icon which means module settings and I can select it. What I want to do I want to change the visibility to show divider so I can see where it is. And well I’m here I can change the color to gray. Change the height or I go to advanced design settings and I can change divider. Still, solid or dotted. Divider position, the height and the pencil so how thick is it. The difference between the front end editor and the back end editor is that in the back end editor, you can see what is happening in real time. So I update it and I continue to edit this when I see it.
This is what we have done so I go to enable the visual builder and I want to edit this. I click here on the ‘Divider design’. Now I can see what is happening and that is how it is done. I want to add a new section over here. So I click here on the ‘blue’ ‘+’ I go to full white and then I want to have a full white portfolio. The title is our latest work. It’s a carouse which mean you can slide from left to the right. The only thing is I don’t have any latest work yet. We have to add some new projects to the website in order to be shown here. So that comes later but for now I go to design, I scroll down and I go to the background’s color and this has to be dark purple and also here we can change the transparency. That only used when there’s a picture below. Go to ‘General’, scroll down and the text color is light. So when we have added some projects.
In my case photos, films and websites then this will be filled. I like to work with dark backgrounds, the light background and dark background. Light backgrounds, whatever suit yourself. Ok I click on the ‘+’ and I’m going to add a contact form so I go for regular full white or 1 column, 1 row and search for ‘Contact form’. There it is, it looks ok. ‘Design’, ‘Backgrounds’. That’s the background of this place over here. I’m down for this, it’s a little tricky maybe but I like it. I scroll down, no text color but the form filled font and the form filled color I want to change to white. So that’s this over here. It becomes white and here also you can do the same thing and see directly the results. At general you can display captcha or don’t display it. I like it so that robots can’t send an email. You have to fill in this answer.
Okay I want to create a parallax image over here so I click over here. It’s a regular full white and we let me go to the blue one and maybe we can use video over here. Let’s just try something. Upload it and I want to add some padding so I say ten percent lower or 20 so we can see more of the city and I want twenty percent padding in the bottom. So we have quite a big place over here, that’s ok. We have no modules yet. I click on it and we could say a text, click on it. ‘We love our job’, either one colors are very early right now. Color can be light and in the center. Go to design, it’s our header so the header found is to be Bigelow. This can be 100 and that’s you see the size is also determining how much padding there will be. So I can decrease the padding. Text color is going to be yellow and I scroll down for that padding again. Here this too but I go to ‘general’ but I don’t want to change it here. I want to change it here in the blue area or even better maybe we can change it here. Oh now it’s gone I think maybe because it can’t handle percentage. So let’s write again and now no percent but pixels. Ok and now we can say let’s make it a bit less or more. Actually I want to see more of the city. I save it, exit visual builder and if we take a look at our homepage. What we’ve done already, we’ve nice logo, nice menu with a sub menu, nice animation. Our latest work is not yet visible, few statistics, ‘we love our job’ and a contact form with a captcha. That’s quite nice.
We’re getting started. I want to change a few things here. Only the animation actually. This one will come from the button and search for ‘animation’. In the beginning I was searching like crazy and right now I’m finding everything quite fast. So give yourself some time and this is from the right to the left. Again save it and here it is. Great that looks nice. We made it yourself. You can be proud of yourself. Let’s go to the page services. We just build our own first page, the homepage. Now we are here at services but what we also can do is save a lot of time.
If you go to wordpressking.com, we’re going to demo side of the Davey. So I go tutorials again defeating tutorial, I scroll down go to elegant thing Divi example pages and this is a Divi website. You see everything that is possible. It looks amazing and the great thing is all those pages over here are templates. So if I go to portfolio and go to portfolio grid that means that I can load this page to my website.
So what we can do we can go through this website and think about what we want on our page and what is being shown over here. If we see a page that is looking like the page we have in mind for our website then we can load it in and it saves us a lot of time in building the website. So for instance, I want to have a services page so I want to show my viewers what I’m capable of. Making videos, making photos and making websites and I want to have a nice header also nice slider maybe a bar counter. So in order to do that I go to portfolio or page layout and something like about us let’s see what happens. Nice. Slide over here that looks great. Crew that’s where something else maybe for a different page. Ok it was nice. Homepage basic, not what I have in mind. In my case I would like to go for the page layout and case study. Nice header is what I like. I like this one, I want to use it. So what I can do then, I go to the services page, enable visual builder that will remove the sidebar over here and there it is and now I go to those three dots and I click on the ‘+’ and I search for case. So right here you find all example pages we are seeing here. Probably not with the images but we can add our own images.
So I searched for case and be careful it says it’s replacing existing content. So if you made a whole page and you load this one then everything will be deleted so be careful for that. There’s an empty page so I can do it. I click on case study and this is where the magic happens. Really nice, just with a few clicks. Okay I’m going to remove what I don’t like. I don’t want this image, I don’t want this area, I scroll down. I don’t want this section, I don’t want this section, I don’t want this section, I do want this section and is also what I like. Related case studies yeah why not. So I’m going to work with this. First I’m going to change the title, the title is ‘we offer a three-in-one solution’ really nice to save it. I want to add a video in the background so I click here on the ‘Section settings’, ‘Background image’ or ‘background video’. Here it is and I can’t upload it now because this is in the way. So I can save it, I can close it and then I can upload it and this is looking good. Maybe I want to have some padding, 200 pixels and 200 pixels so we see the city really nice and what we’ve seen on the homepage I want to edit this and make it a different font. So I go to ‘design’ header font is Bigelow and the color again is yellow and then the size of course is to be as big as possible header font size. Why is nothing happening. Ok right now it’s heading. Heading one and that’s okay. Yeah let’s take a look further. I want you to see, you see an area over here and here you see something and that is a divider. So if I remove this, this goes up like that. I liked it and I’m going to change this text. ‘We offer photography, film and web design in one package’ I click here, this is a blurb again. I edit it and I say ‘Photography’. It comes back a lot of photography, film or web design but you can do whatever you want to maybe you have something else on your mind is just to illustrate to you how it works.
You can have your LI don’t use it. Use an icon, I use it and photography. I’m searching for the camera. Here it is. Ok you can make it circle icon. You don’t see that’s good but it’s screened in. There it is, those are icon for me. Animation from left-to-right, text color is light that’s great and here’s the text and you can change it if you want to. I leave it as it is. I go to ‘design’, use ‘icon font size’ if I click this I can make it bigger or smaller maybe something like this. That’s just the second row, the bottom of the second row. But actually I want photography to be bigger also so they had a font size needs to be bigger and bolder maybe on the line. I think this is okay and yeah it’s fine. I can do the same thing over here and over here but it does more time when I just duplicate this one. So I removed those two and I duplicate this one and again I added the second one. I go for film over here. ‘Film’, I leave the text and the third one is web design. Searching for an icon, that’s fitting this one. Okay that’s how it works and I want to change this image so I upload a one. I upload one with a transparent background. So I go to the ‘Divi three services web design .PNG’. Open it and by the way I always give my images a name which is relevant because if I search for photography and Dutch a slice and I go to images. This is mine, this is mine, this is mine, this is mine, this is mine, this is mine. I can go on and on because you know fairy corpse would come, it is good for the search results. So always give your photos a relevant name.
So what design, maybe I should be more specific because there are millions of people that use web designing and they are claiming to have better websites. So maybe I could say web design New York, web design Manhattan something like that. Use like this and if I save it, it looks nice but I want this to be more in the middle so I click over here. I go to ‘design’ because the margin top and maybe ten percent or twenty percent and now it’s lower. Maybe I should do 15 or maybe in pixels. 150 pixels like that or I can remove this at a different module and see what we have. A contact form divider, gallery or a video and this time another video we have uploaded ourselves but this time we’re going to search for ‘YouTube video’. Let me take a video of myself. ‘Hi there my name is Frank Archer from WordPress king’. I entered the URL and there it is but also can do maybe I don’t want the video on my smartphone then I can say disable on phone. You can do this with almost everything. What do we have here? Again empty space and empty space. We can do the same by clicking on the ‘section settings’ and increase this little bit or you know what with 200 pixels same here and then we can record it manually but I don’t need it so. I leave it zero. Maybe a little bit. You know what I changed it over here 75 is nice text. It’s a call-to-action probably. The longer you work with this thing the more you recognize things. It’s a call-to-action. A call to action as always the title, text and a button. Really nice I use it a lot and then this one is the row. It’s two parts and this is the module. The bar counter settings.
I will show you what you can change. The text color is dark right now and it’s not necessary so I make it light. So it is will be white, you can see better. The background color is the color you see over here. Here you see on how much percent you are and you see this is 100. But I like to remove this so I’m going to make this fully transparent. So you don’t see it. Not really love that you see results immediately. That is one of the best things I’ve seen in a thing so far. I change the color to yellow like this and if I go to design, I can design even more. Padding underneath I can say radius. So it’s now round. The title over here I can change it like that. Make it a little bit bigger, make it align with this part. This is too big, make it a little bit smaller. But if I make this smaller, I can make this bigger. It’s a little bit too bigger I think like this and I go back to the radius I can decrease it like this. And maybe just for fun let’s go over here. Go to design, scroll down over here and scroll down. Use custom styles for button. You almost don’t see that if you click here, you get a lot of options, button size. You can make it bigger or smaller.
The text color. Right now it says nothing because it has the general settings applied with but if I want to change it, I can make this yellow also like that. Background color, OK that’s really bad. I clear it, leave it as it is. The better border color, I can change that. I can make it thicker border-radius. I can add an icon or only with hover and the color right or left in the button so a lot of options. So I can do a button who for border-radius. So when you hover over it then, it becomes a round button.
A lot of options I really like it. There are few things I really like but then I need to change the colors in a certain place in the website only that place because of a dark background or something like that. And then I need to do something with the CSS style and stuff and here you can just individually style every button. I really like it. Related case studies is the same as on the homepage where projects. I want you see here. If I click on this you see how it will look like. A smart phone or in this case a tablet. So and if I change things right now, they won’t be applied to the full screen which is a big pro because then I can change everything individually. So if you change something here, you’re happy and then this is also still like you want it. So there are a lot of great things about this thing. Let’s save it.
And now I want to show you some other settings. We’ve been to the general settings of the Divi but there are a lot more. I’m going to exit the visual builder and I go over here to thing ‘Customizer’. I can also go to the dashboard, the back end of the website and I could Divi thing customizer. You can choose a page you want to use in the thing customizer. I use the home page and there are a lot of things we can change. You see that the menu right now is not the same as it was before. It has everything to do with the white of this page because I have this over here. This screen is smaller than a tablet which makes Divi thinks that this isn’t happening. In the same goes for this one and this one, you can take a look at everything over here. Smartphone, tablet or computer screen. If I press command minus, you see that menu comes back. When I work in the customizer on the screen like this, I make it a little bit smaller. If I wanted to be more organized, I press command of ‘control 0’ but for now the command is ‘-’ one time.
General settings, site identity Divi 4 web design I will call the title ‘A three-in-one solution for your business. Our passion is to make great websites’. Yes that is true. Side icon, no image selected, select image, it’s still this one. Select ‘skip cropping’, save and publish over here and it will be saved and published. I can go back over here and go to the second one ‘layout settings’. I can have a box layout as you see over here and that is in the box now. ‘Colon -‘, then we have box around. If I uncheck this, is over to full white I say ‘colon 0’, ‘colon -’ I don’t label it. Label box layout, we tried, I don’t want that so we can change the content white. If I scroll down you see here a sudden space between the elements. It has to do with the website color white if I make the smaller, everything comes closer and if I make it wider there’s more space.
I like things to be quite close to each other not to close, something like this and the same I can do to the height. So if I say zero, it comes too close to each other. If I say ten, everything is really far away from each other and I think this is ok. So in the section blue area and the row which is the green area and I leave it as it is and the thing ‘accent color’, I wanted to be yellow so I change it to yellow and save it and publish it, go back to type ‘photography’ but its text size is 15. If I make this bigger, you will see immediate results, it will be line height. I love this thing, you know, it’s amazing. You see immediately what’s going on so right now I can make it exactly how I wanted to be. Other size can be bigger but that’s okay with me, actually everything is Okay. The body link color, if there’s a link on your website which color doesn’t need to be. I go for the dark purple so I select this color over here, body text color, it can be a little bit darker I think. ‘44444’ and the same goes for Header text color. Save it and publish it. Scroll up, go back to the background. I don’t use it, you can use it if you enable a box layout and then you go to the background and if I would save and the background is black thing with seeds, black hair. So I press ‘-‘ again. You can upload an image so if you want to do it, you can do it, and I don’t use it so I leave it as it is. Colon ‘0’, colon ‘-‘ and we’re back again. So those were the general settings.
Header and navigation, header format are there, a lot of formats. We can have a vertical navigation like this. It looks quite nice I think and I can put it to the right, I don’t want to use it, I can say hide navigation until scroll so this is what the visitor sees and we scroll down, it comes there. It’s nice, we can have the logo centered like this and also here it’s amazing that you can see immediately what’s going on, it’s a big Pro about this theme. Centered in line logo with some logos it’s nice, in my case I don’t like it and if I scroll down it look like this. Slides in, so I click here and then it slides in or full screen so if I click here, you will see the menu. A lot of options, I leave it as default and we go to the primary menu bar. I can make it full white so if I click here, the logo goes totally to the left and the menu to the right depending on the resolution of your computer. So if I press ‘Colon -‘ it still will be at the left here and at the right. I don’t use it, you can hide the logo image. I want to show it, if you hide it and you scroll down, it’s there when you scroll down. Menu height, you can make it a very high. Logo you can make it bigger maybe a little bit like that. Text size, the menu not too big, letter spacing. The font size can be bold like this and aligned. Text color I don’t see the reason why it should be transparent. So let’s make it ‘444444’, active link color. Let’s save and published and if I go to services right now, it’s yellow probably, you see the yellow. I almost can’t read it so the active link color I wanted to be purple like that, so you see a difference between the other links not good but you see it and it’s the same color. That color back in the website more often. So I scroll down, background color, you can say nothing but then it doesn’t look nice. There must be an option to have it like this and then everything is white until you scroll and backwards, I have not figured it out yet I’m searching for it.
So for now I like the white active link color. This one background’s color, line color, this line maybe purple, this. And the animation of menu you can be expand, fade, slide or flip. Flip is funny like this, I like to keep things clean, I like expand like this. I save it and publish it and go back to the homepage and I go back to fix navigation settings. So if I scroll down, it’s now fixed I can say logo should be hidden, a new height is perfect for me, I don’t touch it, primary menu background color. Again you can make it disappear. It’s perfect for me like this, I want to keep it that way, it’s all fine by me. Header elements show social icons, you see a search icon over here and you can say ‘show social icons’, ‘phone numbers’. If I start typing here and my email address and I save it and publish it and probably you will see something up here, I don’t see anything yet so let me take a look again and there it is. ‘Phone number’, ’email address’ and social media icons. You can use it, I don’t use it so I’m going to remove it again, No I mean yes, that’s the footer is below over here and I go to the layout, is for later so don’t use it right now. We just later do footer elements. I’m going for that button bar, that’s this bar over here.
Background’s color is all great for me, maybe text color little bit brighter and this is the text. I do ‘Alt + G’, it copyright sign 2016 and Divi 4. All rights reserved. Social icon size at the right, I decreased it a bit, I saved it and I publish it and it’s looking quite nice. Going back, going back and this is ok for now. So we’ve seen what’s possible with Header. We changed the distance between all kinds of things and the footer. So we have logo really nice, homepage, services page. Now let’s go to our latest work, I close this and again I go to latest work and we are going to enable the visual builder. If I go to the website with all the examples and I go to portfolio, you can see a project basic, it looks like this. Let me take a look somewhere else, ‘portfolio grid’ OK this is for now what I like. So portfolio grid, I go to latest work, let’s press ‘Colon 0’ to get everything in a normal resolution and I go again to the dots over here. ‘+’ and I search for ‘portfolio grid’ over here. My work and there’s no work yet because we have no project. I change the backgrounds, uploads to just one upload, not to make it the parallax and yes and click here. My work, our work, no subtitle, line is OK, can be centered and you know what let’s purple it. Let’s make it yellow and give it the Bigelow title.
Bring it up our work and as you see it’s not aligned properly, horizontally so let’s see what I can do. Okay now it is. Contact me, I can change these colors, scroll down, custom styles and color will be purple. Like what you see that color can be also purple. I go back to general, click on command, contact us, get the link copy it and bring it here. So everybody who clicks here goes to contact us page.
Now I want to change the text to contact us. Okay it’s time to add some projects so I exit the visual builder, I save it and I exit it and I go to new projects or I go to the back end of the website to projects and say ‘add new’. Well let me start with a few business pictures so I say ‘corporate shoot’ and I can use the Divi builder so I will do so. I have to select the column first, one column and now the module. I could say slider or a gallery or just text. I need to text right now to illustrate something. Text is dark, orientation is center and here I can add media. I will add media, I will upload files, select files, go to Divi three, latest work and this one is it. Corporate and photography, insert into post, that’s okay, I save and exit and I scroll down or you know what let me save it, I will publish it and if I go over here to our latest work, you’ll see there’s a corporate suits but there’s no picture. If I click on it, you’ll see the picture quite small but I want to see the picture in the portfolio or better at the latest work. So I go to featured image at the right below and there I select the same picture and I set it as featured image.
Now if I update it and I go to latest work, you’ll see this over here. If you want to edit the text, let me take a look over here, it’s a little bit small. I want to be the full-size, update and then I put at some other pictures over here. Enter shift, shift enter the same linear like this and then at media. For instance I grabbed all these pictures, I insert them into the post what you’ll see, they’re all small so what did I do wrong. I do that again, at media select them all, scroll down and here it says alignment. I want it to be in the center, link to nothing and size it was medium but I wanted to be the full size. Insert into post. You have to select per photo so right now full-size, update, save and exit, update, let’s see what happens. The picture and the other pictures, you see I did save full white, this is smaller than for white but what you see is that it’s aligning perfectly with side of the website and that is what I like. That’s why I use the text editor to create an overview of the pictures I made for a certain project.
There are different ways to show things so I go edit this project again. I remove the text, I insert module and by the way you can now, you can also update this. I view post and then enable the visual builder and you can edit from the front. ‘+’ and then I can say gallery, update gallery. Again I grab some images, add to the gallery, I can change the order, I can add new photos to the gallery, I can say random order, update gallery. This is how it looks like. I don’t liked it, I like the grids. I could say grid, three per page, no title, no caption, show no pagination.
But what I like more is the slider, so it’s OK with me like this. I save it. I exit the visual builder. And I think something went wrong so I go to other projects in the background. I click on the gallery settings. Update it, you see they’re all there, so what’s going wrong? I like automatic animation. Quite fast, every second. Let’s see what happens. Update. Refresh. You see every second it’s changing. You can also change by yourself. So let’s take a look at the settings, and change this to 4000 and save and exit
I want to add a category. There are three categories again. Photography, and this one is the photography category. So I add a new category, I update it, and right now if you take a look at latest work you’ll see it here at the photography, corporate shoot photography. I click on it, I see the slider, and I can slide myself. So that’s how it works. I’m going to add a few more, for instance a new project, but this time it’s a video. So let me go to the pictures first. featured image, upload file, select files, latest work, let me see, this one of photography workshop, I optimize the picture, copy, paste, set featured image, Apple photography workshop film, use the Divi builder, yes. Insert, for instance I can say two times a half, and I can insert the video over here. Scroll down, the video. So I can paste a URL or upload a video and again I can disable it for a phone tablet or desktop. Advanced, no, it’s fine by me like this. And here I could say something about it. So text, ‘it was a big privilege to meet Ralph from Apple photography’, and I can make a beautiful text here and that’s going to do it, save and exit. I wonder if I can do it, I’m not a text writer.
The category is no photography but videography or films, so I add a new category called films. Publish, it’s no parent, and here’s the picture. What I can do, I can say, I want to publish it immediately or tomorrow. So I say, schedule and if I take a look now, add latest work, you only see this one. But if I change this and say publish it immediately, 13, publish and I refresh the page, you will see a video. And if I select photography, you see all the photography projects, and if I select film you’ll see all the film projects. If I go to Ferdy Kopershoek, but come, the company in the Netherlands. If I go to portfolio, my latest projects, you see quite some stuff, and if I say, I only want to see films, you see all the films I make, our photography or web design. So that’s how it’s going to look like if you have more stuff. I’m going to add a website, and then I’m going to fast forward a little bit. So I say new project, again I go to the featured image, upload a file, select the file, Bible year, no problem. Bible year, copy it, paste it, set featured image, and this one is new category, web design. No publishing yet, Bible, here it will come. Use the Divi theme builder, or I just say add media and insert it into the post, and I have to add the new category. Publish immediately, publish, and now I go back to latest post, or latest work, our work, and here you see three of them films, photography, web design. I’m going to add 7 more projects, but I will fast-forward, I added some projects and here we see add the latest work, or work, then projects and if I select film, you will only see the films and if I click on that, you have the video over here. I can select photography, I see the photos for instance over here, you see all the pictures.
Same goes for web design, if I click on fits perfect, you’ll see the picture fitting, you can have a text over here, and now I made it with a backend editor but I still can enable the visual builder and change this text or bring it to the center. Let’s try something new, I could even go to load and let’s load. Case study, even though it’s a project, I still can make a very big project like this. So if I save this, I exit the visual builder and I go to latest work and I go to, fitsperfect.com, you see this whole page. So you can be as creative as you want to be, but I like to keep it simple so if I click on the picture of the project, you see the picture and that’s it. So if I go to the homepage and I scroll to our latest work, this is what you will see.
If you hover over it, you see the date, you can go to the left see some more, and also, and our services you’ll see related case studies, and I want to change this text and change it to ‘our latest work’. Save it. But you could do, you could make this, ‘our latest photography project’, and then somewhere else, you now click on save, click over here, and then select only to show photography. So that’s okay, save it. Yeah, like this. Our latest photography project, so you only see the photography projects. If I hover over here, you see you see it’s a yellow V, but if I go to the homepage and scroll down, it’s a plus. What I can do, I can go over here to the module customizer, and there I can change some general settings for each module. So I search for portfolio, and here it says the zoom icon color, which is this one, is yellow, I could change it for to green. Now it’s green, and I save and publish it, and remove this. I go to services again, it’s the green V, but I can still change it everywhere.
If I go to latest work, it’s probably also a green V and green plus, but the color is changed. If I want to change the color in one individual module, and I can go to enable the visual builder, I click over here, and the design, if I changed back to for instance red, now it’s red and I will save it. So right here is red but if I go to the home page it should still be a green V or plus like that, and also at services, yes. So the color we changed for every module of portfolio in the whole website is green, the color, unless we change it our-self. So the individual settings overrule the main settings, the general settings. so if I go to module customizer, I go to portfolio, the color is green everywhere unless we say something else, all these settings apply to all the portfolio items unless we change them individually, so that’s how it works.
Let’s add some widgets to our website right now, here below you see no widgets. I want to add a few widgets, I will show you how to do that. If you want to do that then go over here to thin customizer, and here we go to footer, layouts, and I can choose how many columns I want to have. so I want to have three background color, I leave black for now, save it, I go back over here and again and I click on widgets, and here it says footer area one, it’s here at the left you don’t see it yet, but if I click here, I can add a widget. The widget is a certain area in the website which can show some information on our website in a really nice way. For instance a normal text or a list of your pages or an advertisement or a menu or a calendar. For now I want to use text and I say about us, we love to make something like that. If I scroll down I see it over here. I think it’s ok.
I collapse this one, and I say save and publish. I press command minus, this is how it looks like on the website, three columns, 1, 2, 3 and I go to add a second one and therefore I need a plugin. So I press this X over here, press 1, 0 and I go to the back end of the website, to plugins and I say add new. And I search for Facebook like box by Webinar, are and here it is, one of 50,000 installs, that’s quite nice. I install it now, and it needs to be easy and it has to look great. So I install this plug-in, that’s everything you need to do. Now I go back to the Divi theme customizer. I go press command minus for one time, like this I go to widgets, footer area 2, I scroll down and I click on add a widget and if I scroll down I see Facebook buy Webinar. I go to my Facebook, to my page, remove this, copy this, and paste it over here. now you see a real time update, and I see this, I don’t want this, so I show, I want to show some faces, but I don’t want to show the live stream, so I say no, and it’s getting updated immediately, like this.
I save it and publish it, I go back and I go to footer area 3, and I leave this because I want to add some blog posts and I don’t have them yet. So for now, this is ok. We can go to the blog page and we see no results yet, so I’m going to create a first post, here it is, new post. The title is ‘the amazing Divi theme’. I will use the Divi builder, and let’s create a text. I click here, full white and I go for a text, and I start typing over here. So there’s a small text, what you can do with this editor, click on this icon in the toolbar toggle, and you click on it you get more options. it looks like Word and it’s almost the same and I’m going to show you how it works. I’m creating a blog post, and the blog posts has a lot of times a alinea’s or paragraphs and titles. So if I want to place a title above this paragraph, I press enter over here, I go over here, and I say, ‘this is an amazing theme’. I go over here, and if I want to be in the same paragraph and start a new line, I press “shift + enter” and now this line is added. so line one, “shift + enter” line two, “shift + enter”, line three, it’s all the same paragraph but if I press enter without shift I start a new paragraph, and I can make this a title or a paragraph, and if I start typing again I could make this text above a header / title, and this a paragraph.
So we have enter for a new alinear, we have ”shift + enter” for a new line, a new rule, and that’s it. If I say this and I exit it and I can publish it and then I can take a look, I can feel the post, I do that in a new tab, the amazing Divi thing by Ferdy Kopershoek on November 13, 2016. It’s uncategorized, there’s no category yet and 0 comments. Here you see in this amazing thing, is alinear, new alinear / paragraph and another paragraph and I want to style this. so I go back to the back end, and I click here, now if I select this over here, I can go over here, so I toggled this, and now you see paragraph I can call it heading 1. you have to know a heading 1 is seen by Google better than normal paragraph, so if you use header 1, please make it a nice term where you will want to be found on, so instead of this amazing theme, I should say, ‘I love the Divi theme’. Then Google sees, this is very important because it’s a heading 1 and it will be found better on that term, the Divi theme. So, I select this one also and I make it a header 1, like this, but if I think, oh this is a new line, new paragraph, I want to make this a title, what you will see if I do that, everything becomes big. That’s because it’s one paragraph, because I press “Shift + Enter”, it’s still the same paragraph.
So if I go over here to the text, you see a little bit of code, you see header 1, I love this thing closing header 1, and here again header 1, everything between it, is a paragraph. So I save it and I exit it, update, refresh, you see the title, the text, a new title and a new text / paragraph. as you see the permalink is nice, Divi forward come / the amazing Divi theme, that looks really clean, and here I have a sidebar, before I get into that let’s continue with post. So I go back to the post, and yeah we can add a lot of things. I’m going to clean this up a little bit. I remove this, front end editor. What I could do, if I give you a little bit information about SEO, I could say Divi or I could go to Google and say Divi theme, and then you see what people are searching for WordPress. So what I can see is people are searching for a Divi theme WordPress, so if I want to optimize my website I could say the front end editor of the Divi theme, and then I place here WordPress. So you see those three words WordPress, Divi theme, in a Google search results and maybe I can find better if I use those three words also in my title. I start typing and I’ll fast forward.
OK, a new alinear, what I can do if I go to this paragraph I can add media. So I click over here, and I can add a logo, for instance this one, and I can say place it at the right, full-size and no link. So insert into the post. What you’ll see now, it’s over here. I can click on it and then I can go to edit it and I could place it at the left or at the center and update it. If I select this, align left then you’ll see this text is shifted to the right and if I press enter I can still type around it. So in that way you can place images in the text, it’s really nice way to show things in the blog posts. I can save it and exit it.
Maybe I think I want to show and video about this thing, so here’s the text module, I’m going to insert another module, and I call this and it is a video. I go to YouTube, WordPress king, here it is. I grab the link, [Hi there my name is], I paste it over here and everything is ok. I save it and I exit it, and if I update this and I take a look at how it looks, then you see this. I love the Divi theme, the image and the video. So that’s how it works. I go back to the back end. I also could make a new section, so standard section, and I want to have three columns, and I can update this and I close this window and now I refresh the page and I go to the visual builder and then I can edit website in front.
So here I have a new section, I can drag it like this, hold it and place it over here, it has three columns and in every column I could place a picture there or a button or a blurb. I’ll do a picture just to show you what’s possible and again let me grab a simple image. Three websites made with the Divi theme. So I duplicate it or is ok for now. I duplicate it, I drag it over here, and I duplicate it again and drag it over here again. I change the image to a different size, to a different website, same goes for, the same goes for this one. Then I think this one is dark, no, I like it. I save it, by clicking here, and I exit the visual builder. It looks quite nice, but what I see is a lot of space over here and over here. I’m not sure what it is but I’m going to try to remove that. so I go to enable the visual builder and over here I’m going to say, bedding top 0 pixels, and you see it’s coming closer to the header over here, I think that’s a good thing. Also about the button, 0, the same goes for this over here, top and bottom, and that’s better.
What I can do, I can go over here and change backgrounds to red, or to the color or to purple, like this. In this way you can you can style your blog post. Let’s save it and I go back to edit the post because there can edit more stuff that has to do with the blog post as you see. Let’s take a look at the new tab we have a sidebar over here, if you don’t want that and can say, sidebar full wide, and so no sidebar. You can say, hide the navigation, hide the post idol and I update it, and I refresh it and you’ll see that you can style everything differently in every blog post. So you see no menu, but if I scroll down it comes there. So if you want to make a landing page then this is really nice. You can get visitors to get attention of all the things you want to show and if they scroll then you’ll see that you can navigate through the website. So there are a lot of options over here and I’m going to place them back, to right sidebar, default and show.
What else can we do? we can say, I want this to be published 20th of November, and the day I married for one year so maybe I could make a blog post about my fair share of marriage and then I want to say on November the 20th of 2016 ire has to be published at twelve o’ clock. If I say okay, I can schedule it. So Word Press will place it online at this exact time. I don’t want that what you can do that, I want to say it’s already published three days ago, publish. What you see over here it’s uncategorized, so if I go over here to categories, I can rename that. I click on it and I call this blog, and also this one, blog. Update it and if I go back to the posts, the one post we have, I click on it, you’ll see now it’s in the category blog. I can add a new category, it’s called personal or web design. I can make it parent, like this, and add the new category, and what you’ll see the parent of web design is blocked.
So I update it and I will show you later what is possible with these settings. So that was our first blog post, let’s check it out one more time. The title written by me on this date in blog in web design, and if someone clicks here on web design, you’ll see all the blog posts that are on the web design. What I don’t like is this over here, the sidebar, I want this to be clean and I don’t want all this stuff. So I go to the back end, over here to widgets and here you see sidebar and this is on every page in the website with a sidebar. I don’t need a search widget, recent posts widget I like, no comments, no archives, no categories, no matter, what I want to have is a Facebook widget. so I drag it over there, that’s one option, or let me remove it, or I click over here, I select sidebar, different area, I say add widget, and then I say like us on Facebook, again I need my link. I also have it in footer area too, so I copy this link and I could say, don’t show faces that show live stream. and now if I go to the page of the blog, you see recent posts and like us on Facebook, like page, or read the most recent updates, but still you don’t see it completely because the sidebar is too small.
So I rather don’t use Live Stream, but I want to show faces. Save it, refresh it, so recent post, ‘ the amazing Divi theme’, and ‘like us on Facebook’. If we go back to the widgets there are a lot more options, you can add a calendar, custom menu, ad sense widgets. you can add a text, so I click here, I place it, and add the sidebar and I say, ‘welcome to the blog post’, save it, refresh the page, maybe I like this a lot welcome but I wanted to be at the top, then I go to widgets, I collapse it and I drag this up, just like the menu. If I refresh it now, it looks like this. So that’s some information about the widgets.
You can download different widgets or plugins. So if I go to plugins, add new, you can see what’s possible. So if I search for widget, now you see a widget pack with all kinds of powerful futures. Google analytics widget, YouTube widget responds, a lot of options. If you need something you can search for it. I don’t need anything, I go to the blog, and if I take a look here at portfolio and I search for blog standards, like this, there is an option, I rather have something else, so maybe blog masonry, like this, I like this. Nice header, nice image over here, and then here the recent post. I wonder if I added a picture to this blog post, I don’t think so. So I’m going to do that. I’m going to edit the post, scroll down and set a featured image and that will be shown to your blog post, and I use this one. Set featurette image, update, now I go to blog, I click on the amazing Divi theme, and there is this amazing Divi theme, and now I go to the blog page again and I want this layout. So, it’s called blog masonry, so I click on blog, edit page, and it says you’re currently editing the page that shows your latest post. So what I will do, I will go to settings, reading and here it’s the post page is blog, I’m going to select and save it. So if I go to the front of the website to blog, now we can enable the visual builder, I want to do that so I click here, and I click here, the plus and I search for blog masonry. I change the background, to the blurred background saved over here. I close this so I can upload the image like this. I want to make it parallax like this, and it’s okay. I click here, and I want to remove this text and say welcome to our blog. Texts logo orientation in the center, the design, I’m going to make it bigger. Title font color, and the title font is blue like this. That’s fine, ‘welcome to our blog’, and here you see the amazing Divi theme, I like it so I’m going to save it. Right now you see this text and you can read along by clicking on this thing, or I click on the thing, I edit the most and I want to write my own excerpt. So if I type something over here, this will be my excerpt update. Let’s go to the blog page, and now this is text. So what you can do in the excerpt, you can ride kind of a summary of what your blog post is about. So for me is that the first alinear over here, and then I grab this also over here, I grab this over here. I save and exit, go to excerpts, paste it, update and now this is my excerpt like this.
I think this is a little bit boring so I’m going to see if I can add some color and for that I think I need to go too module customizer, maybe Blog Grid. Yes, so I can increase it, yeah like this. make it a little bigger maybe or something like this, I can make it different but actually I want to change the color so let me see where I can do that, I say save and publish and I probably need to go to back-end to Divi theme options, okay here I can go to single post layout, so for instance I go to blog, and to the blog post and there I see Ferdy Kopershoek on this date, in these categories, with 0 comments. I could say I don’t want to see comments, and no author, and save the changes, refresh, and you won’t see this.
I wonder if you see it over here now. Yes, you still see it over here. So show comments on posts, yes. Place thumbs on posts, no. I save it, and what you’ll see, this image will be removed if I click on the theme. I think this is a better option, you can always edit it manually but like is more. Otherwise you start with big image and I want people to read text when they start opening this page. Single post layout, single page layout, general settings, and close this and I go to the blog overview and I still want to change this over here.
So let’s change some things. I got to enable the visual builder, I change the background maybe to a certain color, not white but little bit more like this maybe even a little bit lighter like that, I like that. It’s still too boring in my opinion, so I go to the blog settings over here, this icon of the module, the blog setting module, and it’s a grid. Post number in my case. I think 100. Include categories all of them so I select none. Show featured image, yes. Excerpt like this, read more button, let me see how it looks, yeah I think I like that. Show author, no because all the posts are by me. Show date, show categories, yes. So comment count, no I don’t want this, and now let’s go to design and I want to change the color of the title. so the header font, we could change to blue, let’s see if that looks OK, I don’t think that, no, lets change it to default, make it a bit smaller, 32. And the color, I would like to make that purple, the native font and maybe the body text a little bit darker, like this. And you know what, let’s try a background. I keep it like this, so I added feel more, let’s take a look over here. Go to blog, here we see the… create a Facebook page as many things in his heart, and if I click on education, you’ll see all the blog post with education. Only one, here you see recent posts, the five recent posts, like us on Facebook area, so that’s how it looks like.
I’m still not totally happy with the layout so let me see if I can make something else of it. We like this, or, yeah I think this is okay, or this, no. this is OK for me. exit physical builder, I save and exit, and if you want to display your post a different way, you can also edit it or you go and take a look here at the blog and see if there’s a different option, for instance this one. I leave it as it is and now we can go to the third widget. so I go to theme customizer, I scroll down, I go to widget area 2, I’m going to change a little thing I call the title, ‘like us on Facebook’, and I go to area three over here and I add a widget, it’s called recent posts. I go for 5 title most recent posts, and I save and publish it. So here we have our folder, I can style this, so I go to folder, layout, and I can change the background to purple like this, and what you see is this is darker because it has a transparent background. So I like it, I have saved it, I go to the homepage, and it’s looking quite nice, I like it.
The about page, we are going to change that, and let’s go through it very quickly. I think by now we should have some basic knowledge about the Divi theme and let’s see if we can do this very quickly, because we want to work efficient. So let’s go back to this website and I’m going for home page, or you know what page layouts about me or maybe about us. Like this, I like it, yes. Let’s change this and first load this page to our website. It’s called page layout about us. So I say enable visual builder, three dots, plus about us, click on it, there it is. Change the background to, anew file I uploaded, about us. Manhattan, optimize it, close this, upload the image, I thought you would see a different background right now. Sorry this is the container, and this is the slider, you should see forward slider thing so I have to change the background over here, my bad. I click here, our company, and here it says background image. I copied it, I paste it now and this is how it looks like.
I can’t read this, so I want to say first Divi 4, contact us, click on contact us, and copy this, I paste it and I can change the text. ‘we offer you a three-in-one solution’, new rule, ‘photography, film, web design’, I go to the design button, header font size is this one, I make it a little bit bigger, body fonts, I make it also wider and the body line height, little bit higher, not too much maybe 1.2, like that. And then contact us. What I want to do also, if I think about the background I want it to be darker, so let me see. I have the background over here, background color, I can make it dark blue, if I make it more transparent, and I thought I would see something, but no, it’s not here. I scroll down and I go to use background overlay, like that. I want to choose dark green or a dark blue and then make the transparency more. So you can see the city, but you will keep the colors, like this, let’s save it. So about, start with Divi 4, we offer you a 3 in 1 solution, photography, film, web design. I can change this, but for now I’ll only change the colors. I can change to a happy green, and blue, yellow, and red. You can change the background. You can do whatever you want to, I think we have been through the most elements and the most things. So this one again, we can change a few things at design radius, make it a little bit higher, look like this, the line height. Like this go back to general, background color is fully transparent. So you see something like this, OK.
You still can change some text over here, save it, on to decrease top heather at the top, the space, the bedding, and now there are three pictures over here. The first one, I go to upload a picture, or three pictures, pearl, faith and hope. Uploading and here is the big boss. Save it, close this, upload the image, and this is this Pearl Nolan, CEO, leave the text, you can add your social media stuff. The second one upload is hope, Hope Watson at administration, the third one is Faith Baker, she’s the photographer, videographer, and Hope Watson is also web designer. So that’s how you do it. Nice Header, some focus points, a story, something like this, and the people that are behind this business. I save it.
Now let’s make one more page, contact us page, and lets to it from scratch. So I say enable visual builder and yeah, let’s start right here. Remove everything, now I can start all over again, and I start with a new row, and over here, I want to insert a background image. I have to upload it, so I go to contact us, divi4/contact us, and I want this to be over the full width and height of the page. And now I want to start with a, let me see, a call to action, like this. Remember, with a header, text, and a button, the head title is, ‘contact us’. Button URL, there’s no button URL. The button text is, button text is not there. So maybe I can disable the button, and I don’t want to use a background color. text is light because the background is dark, and if you go to design, the header is blue, I’m going to change it to 100 and change the color to yellow, then text over here, ‘get in touch with us’. Design can be a little bit bigger, get in touch with us, there’s no button which is good, because I don’t need a button, and then I say, this is okay. What I want to do now, I’m right here in the section and in this section I want to create a new row but not full wide one, but one with three columns. So I click over here on the plus, now I say three columns. so it’s in the same background, in the same section, but a new row and that’s how you can work over here. I’m going for a blurb, with I can, the title is ‘let’s shake hands’, no URL, I want to use an icon, and let me see maybe there’s a cup of coffee or something like that, yes over here, course I knew that. A circle icon, I can do that, but yeah, maybe I liked it.
The circle color is transparent and probably, I like this. I don’t know, I’ll leave it as it is, like this. Animation from left-to-right, text color is light and here is some text about our location. Some text like this. Then we’re going to duplicate, I want this title to be bigger, so I go to design and font size a little bit bigger like this, that’s OK. I duplicate it, and I drag it over here, second one and changes to start a project, change the text, like this, I still have to change, of course. The icon, this one, and the third one. Yes, as we are looking for new people, ’employment’. An icon, this one, scroll down, and that’s okay. I save it, I save it again when I click on the blue plus over here, regular one, and I go for the contact form. So okay with me, signed, I like a background so, let me see, right now this is all ok. I change the background, two blurry backgrounds, and this one, save it, close this, upload it like this and now I can see, better what I can do with this design. I can make it a little bit smaller by increasing both sides ten percent. I think that’s nice. So I go back and I want to change of course the module itself. Success message, what happens if somebody sends this message, I say, ‘thank you. We will be in contact’. then I go to design, let’s see what happens if I change the color, it looks like this, I don’t think that’s unnecessary, so I change back to white, border, we can change it a bit, title font size, there’s no title, text font size, or the form field font size, text color can be black, now we can change the style of the button if we want to make it wide. So I make this wide. If somebody hovers, it becomes something like this, that’s OK with me.
So I save this stuff, thank you for watching this tutorial, and congratulations with your result. I’m really happy for you, and if you like this video, please give it a like and if you want to see more videos like these please subscribe and then I hope to see you next time. Bye!