new web design software
in this divi theme tutorial i'm going to introduce you to the divi theme page builder show you how it works and how to get started with it it's a great tool but it might not be immediately obvious if you're new to building websites or if you're new to building websites with the divi theme you don't already have the divi theme you can get it by using the
sponsored link below this video or by going to real website hits . com /divi also be sure to check out my review of the divi theme in my top five favorite features of the video i'm tim from real website hits com and it's my mission to help you find the best and easiest ways of building high quality websites
this video is part of my complete website building course using the divi theme in the course i walk you through everything that you need to know i need to be thinking about when building your website of course makes it easy by giving you a step-by-step guide with easy actionable steps so you can break down the task of building your website
in two stages i hope you focus on the most important things are and what order you should do them this video will help you get started using the divi page builder if you like what you see in this video head over to real website hints.com to find out more about my complete course let's go ahead
and get started alright so on the back end of our website got to be installed we've got it configured the next thing is to start building pages and learn how to use the divi page builder to do that we're going to go over two pages and we're going to add new and we've got the general page settings right here so we wanted to turn on split testing which
i'll talk about in the advanced module as well as just a general look for the page and general page settings like general text color default section backgrounds etc and then this here opens and closes the divi builder for some reason you wanted to minimize it and we've got to save to library buttons if you created a design here an entire page
design or section design and you want to say that to use as a template for your future pages you can click the save the library button and then the load library button will allow you to load either from the divi library so there's some there's some pages here that already come with the divi theme on and i also if you do add from library this is where
your own layouts will be or if you've uploaded layouts this is where they'll show up then we've got to clear layout which of course emptied the entire page this is the undo button the redo button and they see history button and dvds also added a bunch of keyboard shortcuts that we can use to help us editor page mostly
shortcuts work on the front and builder but a few of them work on the backend builder and i'll talk about that in the description of this video now let's look at this section here and this is a graphical representation of how our page is going to be built this blue bar here in this box attached to this blue bar represents a section so the main thing
you need to know about what a section is the sections all going to have one background. one background color one background photo behind it and then inside that section you can add additional rows this is a row here and then inside this green bar here with this white box attached to it is a row and inside of a row you can divide that
up into different columns so by default we've got the ability to do a full with column and we break that down into sections as small as 1 quarter here if you want for some reason to do smaller than one-quarter you can do that by using a specialty section and then after you've inserted a column so just answer one column here can insert a module a
module is how you add content to your site so there's this entire library of content here that we can add to our site probably most common ones are going to be using our images and text and if we wanted to add another row on below this we can do that by clicking the add row button just like that and it will ask us which how many columns we want in that row
and then the settings for the sections and the rows are here with his three bars takes us into the special second settings just for the rose or just for the sections now when we want to add additional sections we can do that by clicking down here and choosing a standard section that's going to add a section just like we already have we can
add a full width section and this is a specialty section with specialty modules that are going to be full with to the page and i think that the main use for this or the what i like to use it for the most if you want to have the very top section of your website have one big image with one big title and call to action button that takes up the entire
window of your viewers browser you can do that with full with header inside of the full width section there's a lot of limitations that you can kind of do any sort of design you want to is kind of limited but that's one thing you can do you also what you want to have a special menu like in the middle of your page you
can do a full with menu and then the final thing is the specialty section here and this allows you to do various different combinations and you can see here we've got one column two columns and then this can also be broken down into two columns for one column this allows to add more than four columns actually the one to just click on this
and then we can insert additional rows like this inside of these columns here so if you wanted to have more than four you can do that this way i generally don't advise i mean you don't see very many websites with more than four columns anyways i think it's wise of being too cluttered to think four columns is a good stopping place and
that's what he did was go ahead and we're going to start building a page so i'm going to remove these extra sections here that we don't need we don't need this row for this and we're gonna go ahead and insert a text module so we're gonna go and scroll down to text here and a lot faster actually with the front and builder which want to get to in a
minute on because you can actually just start searching for the module that you want to use but right now i think it's just good idea to know how the backend builder works that way occasionally very very very occasionally there's something a little bit weird with the front end builder and you might want to switch to the backend builders this we
don't know how to use it and also you get a better understanding for how the front and builder works if you know a little bit about how the backend builder works going to make a coming soon page for our website just that we can have one page up that's just ready to go with the most basic information about our business on there so to do that we're
gonna go ahead and we're going to leave the context color dark for now and then change the text orientation to center can also change the text orientation down here i'm and some of these things like the text orientation and the text color we can also adjust in the advanced settings tab so every module has got a general settings and an advanced
settings as well as a custom css if you want to add custom code to a section of your site you can do that here but with divi it's so easy to make modifications are so many settings you don't really need to add custom css to make a great looking site let's go ahead and type in the name her business beach town surf shop and
let's make this a headline tag to make a larger text and using html heading tag and that's what we can do by just clicking here highlighting text then just clicking there and everyone of you what this looks like on the front end of our website where on the backend builder can just click this little eye icon right
here is going to show us with this section on the front of web site looks like there's enjoys our whole page it just shows this one section here alright that's great so now let's do save and exit it's important to know about the save and exit button here is that just saves it on the page while you're editing this page doesn't
actually save the whole page to save the whole page you either need you click on the save draft button here this publish button or one after the websites been published the publish button will turn into a save button also and so one save draft mode it's not visible to our viewers who aren't logged into the website it's only available to us and
when we click the publish button it's live on the web insert one more module and we'll sort of give another line of text center this also so your source for custom surfboards and and surf board repair and we'll go ahead and now we can view again just to see what the section looks like we got let's make this a little bit
bigger by giving an h2 tag here and then we'll click save and exit now some of the things we can do with the text if you want the text to be larger on the front of our website we can click on the advanced settings tab here and then since we gave that a headline tag we can use this header font size and just make it a little bit bigger and then we can
preview it here get a little bit bigger even alright that's great save and exit so now let's go ahead and start working with the front-end builder so first i want to do is save this draft so we don't lose anything just in case when we switch the front builder when i want to lose anything probably won't but i just like to be safe just save early save
often and let's go ahead and click on use the visual builder okay so now we're here on the front end of our website you can see there's the text that we added and now we can see these various different colored highlights that pop up so the blue represents sections the green represents the rose and we can adjust
the the columns by clicking on this column button here and then the gray represents the modules that are inside their so want to add a new row here we can just click on the green button do a full with row and let's go ahead and add a email opt-in form so we're going to click on this and let's give this a name and you can see as we're typing hear the
text is being added in we can see what's going on we gotta move this window around we can get a better view of what our pages looking like in with the edits that we're changing our making this is really kind of a revolutionary feature for wordpress i'm and definitely for the divi theme the front-end builders are very new to wordpress and i think divi
is doing an excellent job of making a great front-end builder and we can choose whether we won't have a background color for this or not i like the background color in this case we might change that later and text light or dark text orientation left or centered let's add some more text here okay there we go
and let's go ahead and make this text a little bit bigger so it's easier for our audience to read to the header font here to make that believe that about like there and of course this is going to change depending on the size of the window that you're using so you want to keep that in mind and then let's also adjust the body size make that a little
bit bigger like this you will click check here now let's look at the settings for this section and let's give it a cool-looking background so when i click on this little gear icon here and then now we're looking at the section settings so that the general settings and we can add custom css we're going to add a background image so we just click
on upload here already uploaded the image but if you want to upload from your computer all you do is you click on upload files either drag files from your computer onto here or you can select files and then just click on it right there and i will upload it and i've already optimized this picture and there's a video and of course on how to
optimize your images is really important to do that to make sure that your site loads quickly for your viewers go ahead and select this alright and there we go to get this image and just about all the images that i used in this course from unsplash dot com and i've got a link to unsplash and these and this particular image and description below and also on
my website real website hints dot com i've got a post that shows various different places where you can find free to use images for your website so i got back on image for our webpage now let's go ahead and continue to make some modifications here so let's add some space up here above and below so we can see more of the picture so to do that we're going to
click on the plus icon here to add a new module and the module that we want to add is the divider module so you can just type in d i v and it pulls up the divider module and we can give it height so i'm just gonna get a height of 100 start out with you can see that depart divider module came in between our title of our shop that we put in here and the
sort of tagline that we put below that so to move that we just mouse over to the gray box where the divider is we just click on that cross and we just drag it up above there we go and then we can duplicate this just by clicking this little icon up here that looks like sort of two boxes and top of each other
that'll make a copy of that we can drag one of them down below there so it's filling up more the screen and certain to look you know kind of fun and interesting you can see on how easy and once you understand what the backend builders doing how into it is how intuitive it is to use the front and builder really cool thing that did he
has two is the ability to use keyboard shortcuts so if you want to save our progress so far which is always a good idea save early save often so you don't lose anything you just push command or ctrl s just like you would do anything else you can see down here it says saving draft saving this page right here and then down here at the bottom we can
actually open and close this and this is sort of the general page settings here we also have you what this page is gonna look like on a tablet by clicking the tablet button here and on an iphone if he does a pretty good job as you can see here sort of doing optimization by itself so in a section of this course later on we're going to
talk about how to optimize your pages for the use of different devices to make sure that all of our users no matter what device they're on are getting a great experience ok so let's add a background to this section here or this row here so we can read this text easier i'm gonna make it sort of slightly transparent section so
to do that we're going to the row settings right here you can see how it highlights the row right around with that text is going to click on settings and click on design and we're gonna add a background colors by clicking here going to choose black and when change the text to white in just a moment can already see a problem and we're going to
fix that you're going to drag this down to i get the same a transparent header like that i'm going to click ok and let's add one more section here just like this to one row and let's drag this drag this up here to the top and let's move our divider into this that it's separate from where r text is and you can do that you can just move things
between rows just that easy and now let's change this text to be light let's change this text here also to be late so we go looking pretty good so far and let's just add one more section right below this and we'll just put in our address so today i'm just going to go ahead and duplicate this row here
since we've got all the settings already in there ok cool function in the divi theme all of the keyboard shortcuts which was mentioning earlier if you push the ? button at the shortcut that will show you all of the keyboard shortcuts that you can use when you're using the front and builder like this to use command z it'll undo command
y will redo etc so it's really a bunch of really cool features and as you to know the divi builder you're going to get faster and faster at building pages and features like this really help just go ahead and drag this section here below our sign up box let's see we've got that divider in here so we'll add in one more section here with one
room move that down below and then i'll move our didn't move move our divider and here are divider and here and then remove this section down here we go ok so now let's put in our address and phone number can actually edit text just by clicking into it just like this so we can go and then if we don't like anything like that
that's right now was when i push enter it's going back to the standard size which is actually probably what i want we can just click that you can just push the escape button and it's going to take us out of that text editor that's what sort of live on the front end and we can click on the gear icon and then we can go back and use the visual builder here
so change all of this is actually use an h2 tag here so and then i'll just type in our address and then to make all this text same size go ahead and just change that to an h2 tag you could check and then we'll use this to modifier phone number just click right in and you can start editing right here so we're going to have a really
good nice-looking splash page that we can use while we're building the rest of our site behind that one problem is is we still have our title and menu bar up here and since we don't want our visitors clicking around on our site since it's not finished yet we want to go ahead and change that to that title bar doesn't show up so let's go ahead
and save our settings here and then we can you click on exit visual builder or we can just click right to edit page and then what we need to do here is to change the page template down here from default template to blank page and a blank page is going to move the header area with the menu section and we can click on update so now our page is live
and then we can go ahead and view the page by clicking view page up here so we go so we got no menu up here just the menu because we're signed into the back end of our websites these are editing controls wonderfully signed out they wouldn't show up so we go that's an introduction to the divi builder and how it works and how to sort of start using
the front-end builder you're browsing around in your site and want to start editing a page all you gotta do is just click on enable the visual builder up here and you can go ahead and just start editing your page again and then use exit the visual builder i definitely recommend saving before you exit there is a warning that has it comes up
sometimes to remind you to save your page when you've made changes but doesn't always work like right now it didn't work for example i'm just always a good idea to click on this button down here that it opens up the page settings menu click on save over here in the bottom right to save your changes and then exit the visual builder the
next video we're going to look at how to use divi page templates and how to quickly and easily build a page has been pre-designed for us using a page template that you found his introduction to the divi theme page builder helpful if you look more guidance building your site with the divi theme be sure to head over to
real website has calm and check out my complete web design and website building course for more tips tricks and reviews to help make building websites easier be sure to subscribe to my youtube channel and visit me at real website hints . com thanks for watching
Tidak ada komentar:
Posting Komentar