Introducing with DIVI Builder

Welcome to my Divi’s tutorial if you are not familiar with Divi or even don’t know how to install the Divi theme then this tutorial series is for you. in this series of tutorial I will try to cover from beginner to advanced level. if you still did not get DV then click on the link below from description and get it now. ok now let’s get started in today’s tutorial I am going to introducing you with Divi builder. so first I am going to create a new page here and here I’m just fitting a test page I’m going to publish it. next I’m going to use Divi builder so here is three different ways to start a page here is start from scratch.

choose the pivot layout and cone existing page first I am going with the pivot layout so I’m going to select a layout here you can see several.

different pre-made layout by DB so fast I’m just taking any layout I’m just taking this layout and taking this homepage and use this layout so here is the layout I just import.

now I’m going to change in some text from here for changing any text I need to just click on this text. and I can edit this text from here my custom title okay. and similar way here and change my text from here. and if I want to change my text style then I need to click on this gear icon. and now I need to click on this brush tool and from here I can change my font family and also change the font-weight and hitting font style. and text alignment also text color and heading tip size you can change my text size from here. and hit a little spacing and hit our line-height. and we can also add reading text-shadow from here okay now next you can also add heading text-shadow color. so from here we can also add shadow color there looks great and we can add our text sizing from here. we can set a fixed width decrease or increase our weight from here and we can also add spacing. so here is also some margin-bottom so we can also decrease or increase it.

and here is also water and next here is box-shadow.

so here it’s the ceremony option so you can add without text style. so I’m just showing here is too many options and we can also add filter here is the.

transform and here is text animation options and in the Advanced tab, we can also add thesis ID or CSS class to add more style and here is custom CSS options. we can use it and here is a visibility option so we can make it visible for the only phone or on the tablet or on desktop and here are some more options. and here is also transition if it how you want it and here is some more from here you can add a link for this title. and here you can add background color and here you consider admin level so in a similar way you see the design options. and Advanced Options all for almost all modules we can change almost a lifestyle from our module settings. and here is our we can change also this background from the section I’m just clicking on this section and going to back down.

and from here you can also change our background.

and we can make it also pallets effect and we can even also add background video. you can also add gradient color with this image and next you can also edit this section. you can also change these images and also this evolves it I’m just clicking on these settings tab from here you may going to design tab here can fit ours.

the mid-valley option also so here is an image overlay only on my step. so over overlaying color we can change this color also there is some transparency hey. so how we can change our overlay color and you can change this icon also I’m just showing you how you can change these options easily and we can also install these buttons.

now I want to add a new section here so you can get how it really started working. I’m just taking a new section here and taking a yes three type sections here is a regular section specialty sections and pull each section. so for now I’m just taking regular section and here we are taking a new row. so on here we can take several types row with multiple columns or single columns. so I’m just taking here to pollen straw and website and taking text module and drive site and taking image module.

now on the left side and going to click on this gear icon and just changing here are some style and just making this aunt to play their display. and also making this color to light and using text size you can keep it in this way and right side and just going to it is minute style and from here I’m just going to add pops shadow. so here I’m just adding some box-shadow with this image and in this section, I’m adding a background color.

and here I’m going to make our text color to light white color and next I’m going to these row settings here is also several options we can see. so when we go into our design tab and see our sizing so from here we click on this cutter with you can also decrease this weight. so here is the spacing between two columns we can reduce it or even make it zero I’m just keeping it – and there is also many options. so we can make to one column height we’d consider our wheat or increase our wheat and we can set our Mac sweet.

90% ends up setting it now and text alignment on now I’m just leaving it and you can also add spacing or we can also add spacing by drag and drop. so just dragging it here is adding some spacing and also similar for this section we can also add some spacing here. and also for the module we can also add some space module. now I am going to these section settings and from here I’m also going to design tab and here is going to the layout. so here you can also add in a shadow and your divided option this is an amazing option for section area. so we can add some divider or any section so I’m going to add a divider in the bottom with this section. I’m going to click on this bottom and here I’m going to add in divider style so here I’m just going to add this divider and here is a nice divider style yeah. so means time here I can add anyone as we like. okay, and we can also set our divided color and divider height and divider.

Conclusion

Horizontal lipid we can repeat our design and even also divider flip option and next we can also add siding with our section. we can add siding with height max height or Mac suite or mini height. and here you can also facing from here and also adding also you can add father. and box-shadow Peter and Tom and last year is also animation option so when it’s falling down with this section will come with the animation it’s time. so in next tutorial, I will also show you each module functionality and how each module works in step by step and with more details.

 

Leave a Comment