How to Create WordPress Website with Thrive Theme | Step By Step | 2021 |

[Music] hello everyone uh in this video we are going to learn how we can create an outstanding website using thrive themes as you know threat themes are getting their place in the domain of the world website so we are using this uh in our today's video so thrive themes uh provide a great convenient focus things that you can use to your website that actually uh focused on the conversion it provides many uh tools uh to that you can use to create your website as you can see the the suits that thrive suit is all are your all-in-one toolbox to create a world product website that converts visitors into leads and customers there are many things many tools that we can use but in our website we are going to use uh thrive theme builder and thrive architecture and that is the page builder that is simple page builder we can use and shape shift thrive themes from the thrive themes so these two uh suits tools would be used in our website and we will create a step by step a yoga website uh in this video we are going to create a yoga website using thrive themes and you can use uh create landing pages and other things in thrive architect they provide uh many elements that we have to just drag and drop and just put our content and your website is ready so we will use all these functionality and create step by step from the scratch using uh threat uh theme builder and type the architect and they provide also a pre-built pages that we can use but we we would see all these options in and next so before process proceeding i just gave you an introduction to the thrive themes so without taking too much time let's continue so first of all come to the dashboard as you can see so first of all you have to install your thrive theme if you already know how we can install the themes in wordpress and dashboard you can see an option appearance in appearance there is an option theme just click it as i have already installed you can see thrive theme builder you have to install your own i am just describing a few steps that are required to install your thrive theme just click add new as you can see you must have the file in zip file your theme in zip file to upload and install here in the dashboard so as you can see an option upload theme just click it and there is an option choose file just click it and choose file where it is placed it is in your laptop pc or dropbox another uh platform just uh choose it and there would be an option installed now how you can see the theme is installed so to to confirm it just see there should be an option uh thrive dashboard in the wordpress dashboard so i have already installed and you you have to install it after installing uh you would see a thrive uh dashboard option and you can see there are four options the thrive dashboard license manager general settings and thrive theme builder we would click thrive theme builder in thrive a theme builder there are options like these are like global options you can choose you can set uh that would be applied to our website while you are creating a pages when you create new pages there would there should be automatically a few options for setting save like grant color logo and other and other options so here you can see site wizard option as you can see there are many options like logo brand color header footer home page and all this we will set these options and save that would be used in all our settings and all our pages that we are going to create next so first of all these are like these are like global options so uh first option is logo click logo here you can choose a logo for your website i have already chosen to save the time just to give you an idea so when you click on the logo you can choose it from your pc or from other platforms when you select just click and select and it will be uploaded and the second option is brand color so the the brand color you are going to choose cut into your brand according to your business your own color so just click here here you can choose you can choose blue color anything or you could just uh rgb exact color hair and you can increase or decrease the colors opacity so i have already chosen as we are going to create a yoga website so i have just choose i have to have chosen the color related to green so it is 42 c3 aaa so after using this just apply the color will be chosen and the next option is header as you can see at the top side here is a drop down you can choose the styling and template for your header when you would click you can see many options you can choose from so double one this is the but let's keep it simple i have chosen one you can choose any any uh header from the options according to your need and choice so after choosing a header let's proceed to the footer click footer in the same way as you choose header you can choose folder as well when you click here you see many options uh related to footer you can choose from i have chosen this one center logos zero two so this is simple i have i'm keeping this website very simple and after choosing this one you have to choose a template from uh for the home page so this is a pre-made existing pages or blog you can choose from the existing pages as well but as i already told you i am going to create the website step by step so so that a non peggy and a newbie could follow these steps and create a stunning and professional website in in in easiest way so i have we can choose any template here you can see but i am going to choose shape shift blank page as we are creating with thrive architect page builder like by just creating according to our needs so i am choosing the shape shift blank page just click it after this the single blog post in single blog post this is the option how your blog post a single blog post should look like when someone opens the block it how it should look like here you can see you can choose template from here you can see there are many options you can choose from so let's choose this one uh this one let's let's choose the feature image with sidebar this option looks like you can choose according to your choice so after this one the next option is blog post list in this option you can set how the post look like where how the all the posts should look like on a single block page so here in the in the similar way you can choose layout from this so i have chosen the first one after this this is the page setting when you in this option you can set parameters or template when someone create pages how that by default the page looks like so full width let's choose the full width and the last option is menu in menu you can choose menu one when you from the uh wordpress menus and from this one but let's choose the menu one and footer also menu one and by choosing this one activate menu on my site when you would click this one your setting would be saved so let's uh see our changes by clicking the prem preview my site when you click you can see a website it's ready to be created the page is really clean and neat so we can create it and get it content according to our needs so after doing this we are all set to go our basic settings is completed we have added our logo brand color header footer homepage template and other settings now we are going ready to going and other options are you can choose like topography in typography you can choose which type of which fonts style you are going to use so i have just taken i just considered the default typography but you can choose according to your need head from this option so there are other options side speed these these are very uh these are one of our options i would create a separate video for them so we are just focusing on creating a website so after all these settings uh let's back to the home page uh we are in the dashboard so let's create our first and most important home page in pages and just click add new [Music] let's give it name home page before uh proceeding i would give a little bit introduction brief introduction to the options that we are going to use in this drive architect so at the right hand side you can see the first option add element from this you can add elements and you can see there are many uh elements you can use so and the second option is a style editor you can choose colors fonts and other things and this option we already used by creating the page so you can choose a template normal page blank page any template you are going to choose from this option and this is the setting so at the left hand side is empty so uh it is there would be options related to element when you would add an element these are all the options related to that element would appear here so for for example i'm adding an element so let's suppose create a background section sorry just click ok as you can see i have just click text here you can see you can choose text colors from the main options and font which font we are going to use and i'll highlight formatting or whether you are making making it bold italic underlined font size and from line height letter spacing and all the options we will use and you can choose layout and position you can give margin and padding from this option and background stylings and borders and kernel we you would use all these options and next in the creating website so this this this was all about the uh basic options so now let's proceed to creating the website oh yeah now we are ready to go to create our home page so first of all let's create a hero page so for hero page uh click uh add element so here we would add two columns here click columns so you can see there are many columns layout you can choose from two columns three columns four columns three columns and they are different uh sizes so you can choose according to your needs so i'm just choosing two columns of the same size just uh click it now two columns are created so here at the left hand side you can choose the sizing layout position you can add margin padding other things from these options uh background colors and other options so what we are going to add image here and and at the left hand side we would add image and at the right hand side we would add text and button so first of all uh click uh add elements here you can see the image option just drag to the column where you want to put so i am putting in the left side so i'll just drag and put in the column so here you can see when you will uh put a image element now you can choose your image so so i have already made my content available so i would provide a link in the description so you can have all these images so insert images so there are many options you can choose you can upload your files so from the media file i have already uploaded all the images that are that we are going to use in our website so here this image i will choose this one hero image is chosen now add an another element that is a text but we can there are two options we can choose here you can just simply add text here and uh and other things after this but i would uh recommend to use a content box instead of just text in content box you can use anything in content post like text images buttons and other things so i'm deleting deleting this one and in the plus option you when it will come down here you can see a content box drag it now you can add text in the content box place it and text so give you a yoga so i am giving it name a soul yoga soul yoga studio so now we are going to edit these text so you there are many ways you can choose like if when you are double click on this select this colors you can make alignment from this as well so when you click let's give it in the right hand side you can see an option so you you can color it so i'm taking this the default color you can font uh style you will choose choose it from here and give it uh bold italic underlined there are options all related to the text so i am just giving it a bold and increasing font size so let's keep its 65 pixel sorry 65 pixel and also we will give it as 65 so you can see that there is a space between the lines so you can decrease line height from this you can see when you choose this also you can decrease line it from this as well sorry this is the font size click line height you can decrease line height from this as well so let's keep it and let's give it a color so default color click yoga studio so after doing this you will add a text after this text sorry it is added here but we will add in the content box okay and here you can give according to your needs so i'm getting we are trusted i'm sorry trusted we are trusted yoga studio in the town with our services i'm not a content writer but you can provide content i got your needs a great content i'm just giving a basic content that we can use so after this one uh let's increase line height okay it looks good now so now we will add a button just click add element and add up your button so following the content box so when you click button all the options of button would appear at the left hand side so button options you can see in the main option the button color you can choose any color from this option and you can add icons as well so i'm putting it in the default and the size alignment you can choose small large extra large and extra large so uh we are keeping it uh medium sized in the hero section and alignment at this left side so button width you can choose here from but let's keep it 50 no 52 55 okay so there are many options we can choose so in the uh border click border and click the second option this one and print make it 25 as you can see when you double click on the text you can adjust size of the text and we are going to make it 18 pixel and let's keep it 20 to 20 so after doing this i'll click save work and let's have a preview of it as you can see there is still we need a little bit layout settings so let's make it a little bit small and lay out give it 30 or give it 40 and little bit decrease to 18 and this should be default click save and once it's saved let's check the update here you can see our the hero section is ready you can choose your uh text font styles and sizes according to your needs must i am just making a simple clean and clear website for the yoga so so that you can create a clean website uh related to your website whether it is digital marketing yoga studio other services so by following this step you can create your own so let's uh add hover effect to the button click once when you at the right side you can see the option button after that when you click the power option click here what should be in the button position or buttons behavior while someone hover over it so we'll add animation when you animation you get two options just click this one you can see all the options uh are open now you can choose any from one so i'm going to choose hero apply it while up after applying save the work and come to the normal so all changes are saved just go to the home page click refresh and see the changes you made so here you can see while we are hovering over the button it grows so our hero section is clear you can see and very nice and clean uh hero section of the website is created so let's check its responsiveness how it looks like on tablet so a little bit uh changing is required as compared to tablets so let's do it and we will uh decrease the size so let's keep it 50 on tablet and 50 of this as well and let's keep it 16 and and the button let's keep this small and so first of all we'll decrease the font size and now you can see we will change to the 16 as you can see it's look better now while doing this just click save your work now your tablet on tablet your website is up optimized you can see and how it looks like on mobile so our image so in column and sorry in can come to the content box in content first of all in the layout and position options we are decreasing this size the margin of the content box and while i think we should place at the middle of this and it's look better now while doing this click save your work and let's have a review of the changes we made so come to the home page and click the refresh button you can see our first hero section is completed now let's uh proceed to the second block that we are going to create action looks complete now and i think we should change a little bit styling to the background and change the button text to do so let's come to the editor and as you can see uh the button text is click here now as you are creating website for the yoga studio so they they maybe provide a different sort of courses so to check courses so so one we should give it a link to the courses so we can give as check courses after doing so don't forget to save the changes and the another thing that we should add is a little bit starting uh to the background of the hero section so as you can see at the top top uh there are many options like page setting background section columns and column content box and button whatever the elements are in the hero section are are shown at this line at the top so we have to change the color to this background so to do so as you can see background section click it and then we'll go to the background style and have color as you can see the color is added so now you can add the color according to your need and i got it in your choice so let's change it it's look great and clean as well so let's use it save the work and let's prove it so our color is changed now let's look a great hero section of the image so let's proceed to the next and uh the next section would be about the classes that the yoga studio provides so how we can create the next section let's proceed click add element here where we would add a column two column let's add one column and in this column i'll add a content box in content box let's add text and before text i think let's add an image so i have already uploaded all the images that i'm going to use in this website so it's it is recommended to upload all your images uh to the wordpress that you are going to use so let's use this one and decrease the size let's keep it 50 and when you'll go in the content box make it the center after this will add text our classes so let's make it to the center so now you can give styling to the text so i am changing the color of the text and making it bold so let's make is the 30 30 pixels and come to the layout and position and make the 40 let's keep it minus 40 so our classes and now we'll add text so you can use any type of words according to your need so let's use dummy text copy here copy and put it there and double click it you can center a line from here as well and let's add 20 right hand side margin and 28 the left hand side and i'll decrease the font or the 14 pixel so i'm using dummy text because it's just a demo site you can use a cutting tube to the needs according to to the website so it's done and save work after saving let's review it here we go it is looking better so so now we'll add a another column in which we will provide the detail about our classes like there are there are many yoga types like uh heart yoga aerial yoga basic yoga and all these things could be provided by a yoga studio so to do so let's add the yoga type of yoga classes so we add column here so three column first of all we'll add image in one column so i have already added images let's add this one and add text so it is like aerial aerial yoga let's center line i'll change this color and ariel yoga it's good so let another text below this text with and you can give the name of the instructor and any instructor so i'm using here in any type of name like i'm giving the name jessica center aligned and let's make it 16 and i think we should increase and after doing this i think there's an issue in the layout so okay it's good increase it to the 20. okay once done let's do it okay as you can see our first column is added ariel yoga so it's done so to save time now we just copy and paste do the same thing in the another columns and we'll just change the contents let's let's see how we do it so let's here you can see the option uh is the clone option we can copy the same thing and just drag to the other column just click it as you can see the image is cloned now just put it and place in another column here it is done you can do with these text as well and with this as well and the same way just drag to another column clone it and drag it this one as well kill on this element and direct another you can see the three columns are made to just change the image ariel yoga now you can give it a name like hot yoga actually these are the yoga types and change the image so and give it a name like pure yoga pure yoga you can change instructor name as well i'm just keeping the same name and after all this done so we can add more classes like this to save time i'm just going to clone the column so as you can see here is the option clone there you go so the column you can see we have saved our time and uh headed another class is as well just change the content so let's keep this one we'll give it name meditation yoga and let's change this image as well i think there's an issue with the image so let's change this one we'll see it later and this one vinyasa yoga let's give it name vinyasa yoga yoga and this one change and give it a name like basic yoga basic yoga so there is a image size issue so let's change it okay with this okay let's look good okay so as you can see let's say work and see the preview you can just click here to review the preview but we already our page open we have to just refresh that page so as you can see our classes uh are done so it is just the blocks to show your visitors that we provide these type of classes so i think we should a little bit change padding so in column option go to layout and position and let's make it 25 okay save it and let's see the changes so now it's look better so as these things are included let's now add a button after column you can add button so like these are the classes so we can give text like check timetable sorry time table and the main option let's click button and border and corner let's give this 25 okay it's look good now and make the text 16 pixel of the button click save and one more option you can give link to the button here target url so just save it and once it's it is saved let's see the changes there we go check timetable so let's over effect as well in the button option click over and in the animation action glow grow okay say what click to see the changes so as you can see our this section uh is completed so there is no space so when we'll add another element another section after this then there will be space so as you can see our second section is added to the website so before proceeding i think let's make it responsive how it looks and tablet so you can see it's look good on tablet so let's review it on mobile good so all our center aligned it looks good on mobile this is the best thing best feature of the thrive themes it is with responsive themes you don't have to do many exhaustive things to make it responsive so now let's proceed to the our next section home page next option is about the school about yoga studio that we are the website making website for so to proceed with the next section let's add a column and we'll add a two section one should be a section for the image and second one the for the text so let's add an image first so i have already tell you no selected images so our image is select selected so i'll use the content box to add the content fewer more than two or three uh elements to add these things use the content box so you can write like i'm writing about the school and let's add another text i'm not a great content writer i'm just trying how i became soulful so let's make it bold and and let's change its color as well so i am changing its color and [Music] layout and position it's right it so it's look great and slowly its color is not changed content box text text so i you can change its color so after doing so let's add a another text so here you can provide detail about the yoga is cool sorry it is just drag and drop and let's take dummy text dummy text and copy and paste it here and you can change accordingly so i'm changing the color and okay let's keep it same color okay it's good apply and change color to 16 okay that's great and let's give it a little spacing okay now it's look good and then change little bit layout and position okay so uh it was about the school and now add the button so like we can add text as meet instructor instructor and it should be the 16 pixel of the text size let's give it our animation grow apply then we'll come to the normal and in the border and corner as we are giving to all buttons 25 pixel from all the sides after doing so and when you click you can add a link to the button in this target url option save your work after saving your work let's preview it and make the another change is required so as you can see the section looks good so i think we should uh little bit top margin we will add top margin to this section so click that section and come to the layout and position sorry let's give it no i think margin would be good 30 i'll give it 50 pixel save and see the changes so it's look good but a little bit changing i think we should apply that is make it 70 pixel and give this column are 30 pixel padding to this column and so this column 30 to this let's make it 40 and save changes let's see how it looks like here you can see a little bit good before so our this section is completed as well so now check it its responsiveness and so i think let's change the text size sorry this end uh oh it became okay so mike is 26 it's look good change it's to 14 and it says it's good so undo in the layout position ah we can okay let's come to the column and zero let's look good now now check the mobile so 14 we can make it to the center as well like play out in position so and this one so i think let's make it to the same position because we have already taken all the headings to this style at the left hand side so it's look good as well on the mobile so just save your work and let's see the changes here you can see our three sections are completed and we are heading towards creating a stunning website as you can see it's neat and clean and i am going to step by steps so that anyone can follow these steps and create a beautiful website after completing this section let's proceed to the next one so come to the editor so here i'll add the column just click column and i'll add three columns here here you can see three columns are added now there's already i recommend you if you are using three widgets as at the same time are combined combining them you should use content box so if you are using text image similar image logo thing so you can use all of them in a content box so i'll add content box just like content box here in the first column and in the content box i'll add an image so let's use this one and in the main option i'll make the image size to 70 pixel after that i'll add text below this image okay in the content box so like many styles as there are many yoga styles used in yoga so i'm using this one you can hover it and double click and you can make it bold from this as well but we can use this and i'll change its color to the theme color and later spacing let make it to one pixel it's done there's another text below this text widget and here we can write a little bit wording like related to many styles like we can enter 20 plus ui styles and meditation that suits every one okay it's added now i'll make it to 16 and if we give a letter spacing what it looks like okay it's look great so after this uh i'll add a divider [Music] in the after after this text widget so you can search divider in the element search bar and just drag and put it below the text and give it color so i am giving it a theme color that is 42c3 double a click apply and let's make its thickness to 2 pixel and layout position let's make it make its width to 270 pixel uh 6250 okay 250 is good so after doing this save your work and let's see how it looks like click refresh as you can see we need still we need required little bit uh changing padding so let's change its margin so it's 14 pixels let's make this minus 20 pixel and in the text widgets and [Music] and this divider as well so if you give 2020 yes it's good save your work let's see the changes okay it's look good now so i think we should before proceeding we should add uh background uh styling colors to this section to do so click columns and as you can see the background section click here and come to the background style and let's add color so i'll add color and that that is the the color that is used in this image it has been c so that is e double f 7 f nine so apply okay okay it's look good okay okay it's it's just double e double f sorry a double f seven f nine and opacity let's make it okay hundred percent okay it's look good now and so when you come in decoration let's add divider and let's load looks right pointer okay let's make this way and let's see the changes boom you can see the difference it looks much better than before so let's another column so as you as i recommend you could to use the content box so the main benefit of this is now we just have to clone this content box and put in these two columns so like let's do it clone it just drag as you can see just clone it and drag to another column as you can see we have saved a lot of time and resources energy as well so just change the image this one we can give it name like instructors we have professional instructors around the world so this section is complete let's change the image of this one and here we can use like quality content quality content live and like we have plant pluses and resources after doing this click save and let's see the changes to the front okay you can see that good now but as we have added uh come to the column and in the layout section okay it's look good now so let's check it let's take it it's a responsiveness okay do the same sims 2 and this is the one if we make it to the it would be better if you make it to the uh center align to do this 80 pixels 120 pixel and 120 from this 200 change 150 160 of the divider and okay it's look good and change it to 200 and 200 from this side okay and let's change this to 200 okay it's it's look good now and in the mobile section style phrase style and and okay you can see it's look good we in the mobile section we removed all the margin to this section click save and let's see okay okay now you can see both sections are complete completed it's look good on mobile section on our tablet and as well as on this so clicks save the work and let's see the changes as you can see now our website is optimized it's responsive and all the screens like tablet mobile and the desktop our next section is about the testimonials and we will add testimonials about the clients so you can use blocks pyramid blocks for this testimonial but i would create from the scratch from using the element so you can design according to your knees and according to your design field so let's proceed to the testimonial section so first of all i would add a column and let's make it just one column and in this column i would add text testimonials testimonials and make it to the center line and in the main option of this section i will choose a letter spacing one and font size let's keep it 18 pixel after that i would add another text widget and here we can write anything like i am writing what people say about us and i'll make it bold and color to the white one that you are using according to your theme and make it center line you are you make you can make a center line just from this option as well and i'll make its size to 31 pixel and you can see it looks better so in the layout and position option just increase the margin of this section in the minus sorry and minus 25 okay after this just save your work and let's preview the changes so while you are creating website uh before doing proceeding a lot of work just make some changes and preview it so that you can proceed accordingly so it's look better after this i would add columns here i'll use two columns and in this one column in both column there would be a testimonial about a client so how we can make there are pre-built templates we can use but i am i will i will create from this great using our elements so first of all i'll use here content box drag here and in content contact box i will use text so for the feedback as you know in testimonials customer provide feedback about the services and products of the company so i will uh use text from the dummy text here for the feedback so and you will use here let's copy some text from here sorry [Music] just copy and put it here and in the main menu of this let's make it 16 pixel and later spacing let's make it one pixel and after doing this add i'll add columns in the content box and i'll use two columns you can see there are different types of different uh sizes along with different sizes you can choose according to your needs so i am this time i'm using two columns with different sizes so in the first column i'll use an image and let's use this one so when you click image at the right hand side you can see all the options are related to the image so let's change the styling of the image so in this option you can see image style so by default no style is added but we can choose from this as you can see dot frame this option as well polaroid but we will use circle and the most of the testimonial circle is used and it fit pairs so that's why i'm using this one so click apply now you can see the circle uh styling is added applied to the image so after this you can change size of this image as well so i'll make 18 pixel of this and let's make it 100 turn 90 pixels sorry and in this section i'm going to add text widget so here we'll add name of the customer and let's say add joy okay and make it bold and add another widget text widget and we can use custom okay so you can see i'll increase 20 pixel and give it color okay and come to the customer section and let's add a little bit margin to this okay let's look good and we can also give margin by dragging it that you can see but image you can give this and let's make it 0 and you can also use this one after doing this just save your work and let's see how it looks on the and desktop preview save and there we go okay it's look good so little bit okay it's look good just made and -10 okay and let's remove the letter spacing and come to this section and make it 15 pixel and click save and see the preview okay it is saved now just refresh the page okay it's good so go to the content box that we used in this column click here and go to the background style and let's give it a color so i think i'm going to give it color that we used earlier and it is eff f7f n9 so let's apply and opacity increase to 100 and apply and come to the border and corner section and give 30 pixel to the corners and border one pixel and change the color that we are using and click save now you can check the changes here we go it's look better now so the use of the content posts make it very beneficial when we just clone this content box and put into another column so just clone this just clone this contact box and drag it to another section and now just change the a content we are using like let's suppose we are using here john smith and he is also a customer so change the image we change this one okay turn and okay so let's uh adding a margin to both side of the column so click column and come to the layout and position and give it margin at the right hand side and to this column as well and give it 20 pixel at the right hand side and in this column let's get okay and give margin to this so let's save it and we will do it after checking how it looks like the preview refresh the page and see how this section looks like okay you can see it's good to go just we have to add margin to this section and let's add it as you can see i think 40 would be better and click save and let's see the changes here we go our testimonial section is also done our testimonial uh section is completed let's see it's a responsive name how it looks likes on tablet and mobile so on tablet it's look good let's see on mobile so we need to adjust so let's click on the image and make it at center and so the both text video at the center and this image click on this image make it center align and do this text widget as well at the center line now you can see it's done okay now it's ready to go so now we can proceed to the next section so our next section is about how we can add uh how to subscribe our letters so i would add here columns so i'll add two columns here and let's add text and subscribe to our news letters and we can add another text as well like get updated news and tips get updated news and tips from our s characters okay so let's enter a line to both text okay and let's make it in the main section of this and change its color making bold and 32 or 31. oh also we can so change 28 pixel okay okay let's make 23 23 is good and it's colors color should be white so f f f and here we can just search for in the in the elements section and we'll get lead generation contact form but we will use lead generation just drag the column and you will find this template go to opt-in forms and here you can say by default so as you can see by default it is added and just save and let's change change its styling so i will just need email so i'll delete name and you can say edit form element here you can edit the design of the form so just click it and click here just go to in this layout and position and you can change the size of this email so i think let's make it 50 margin at the right and 50 at the left are also we can do it more like 60 and at the right hand side also 60 pixels and by doing this come to the border and corner and we'll giving is 20 pixel and okay that's great 20 pixel is good now if you come to the late layout and position give 20 margin to the email placeholder and layout and position and come to the border and corner and let's make it 30 it's look good now come to the button section and main option okay so let's make it okay that's good we can increase our degrees button width and come to the border and corner let's make it 20 pixel all 25 pixel okay now it looks good just when you're done just click done and save your work so you can see if this section is uh added now we can change its background color so in the background color here you can see it is its color stain let's keep this one and save your work let's see see the preview how it looks like just refresh the page and we can see our new section is added just we have to give 20 pixel margin and 20 from here and 20 padding from here and when you'll come to this let's give padding to this one and i think it's look better now just save your work and let's see okay so i think in the background section we have to change color but in the way just change in the now you can see it is changed now and in the layout position 0 and click save see the changes we just made okay the color is changed okay because we added a color to the column and color to the background section that's why two colors are seen as you can see so this section is added l as well now the last section that we are going to add to our home page that is the map in this map we can we can show the map the address of the studio so just go and search for the map here you can see uh we can add column uh let's first add column and a column we can add map in element just write map here google map is there just drag and drop and here we go you can increase the width so let's keep it this one 450 i think is good and the address you can give address here and it would be automatically it could take that address so by default i use this new york address and just just you can change according to the address that you have and save your work so let's see the changes so as you can see this map is added and we'll just uh edit this one in the background section come to the layout and here you can increase its width so let's give 20 here and 20 to this part let's keep it 30 30 pixel padding bottom and 30 pixel to the top and also 40 pixel or let's make 30 pixel margin to the top of this newsletter section after this we can uh manage this one as well just give 50 pixel okay that's good and save your work let's see the changes here you can see our home page is ready to go you can see we have all the things that a good home page should have so hero section other classes you can see and a stunning and beautiful home page is created so you can uh as far as the footer is considered we we can make changes to it we can design it according to needs but i have just make it simple so you can add another one as well i'll and i'll uh i'll i'll make you teach how we can do this in in the video so after creating few more pages we would add our menu here our header and i will edit our footer as well so this was the home page all about you can see the extending home page is created now let's proceed to other pages after after completing our home page now we would proceed to the about us page so let's proceed and you have to go to the pages and click add new we will give it a name about us about us just save it as a draft after saving it just click click launch drive architect so as we have used the blank page with header and footer template for our home page so we'll use it for the about us page as well click this one and it would be a blank page with header and footer so about us is all about the company are any anything about the business like we are creating a website for the yoga website so it should be about the yoga and what they provide in their yoga services so they will add here first of all we read column so let's make it just one column and in this column we'll add text and who we are you can write any content like about us about who we are and anything else i'll make it the center aligned and font side should be 40 bold and i'll change color to the to our theme color that's a branding color okay it's look good so after doing so we'll add uh two columns here two columns and in first column i'll use an image and second column i'll use a text and the button so that's how we do it click the element and put here the image and i have already uploaded my image that is to be used so let's use this one okay now in the second column i'll use text for and for this first of all i i'll use the content box and in the content box i'll use text and the button so click the elements and drag the content box in this column and first i'll use the text so to save time i have already written content in that in the uh office suit so just click about the school and and paste it so it's all about the heading for the uh about us page so about a school and i'll add another text so in this i'll use this one sorry sorry copy and paste it how we become become soul uh soulful yoga okay let's make it same so solve yoga and we'll make it bold and okay let's make it 30 that would be good 30 and change its color so after i edit this let's add another text widget and in this will describe about the yoga but i am using it dummy text copy and paste and i'll make its size to 16 16 and let's increase letter spacing to one okay let's increase the how we became soulful yoga and make it 34 32 it's good and in this layout and the position let's make minus 25 to the padding and in this text area we will also make minus 15 after doing so click save now let's preview the changes so it's look good and we'll just change little bit it's padding and let's give it 30 and do it i think in content box in column just give 30 pixel padding to the left of the column and also i'll give 20 pixels to this and click save see the changes okay okay now it's look good now like i'll add a button so you can add button uh a separate widget but i recommend to use in the content box so just click the element and direct button and put it below the text widget and like meet instructors okay now give styling to this pattern template and go border and corners and give it 25 okay and then button go to click hover and animation and action apply grow animation and save changes and let's refresh the page and see the changes okay you can see it looks great so after doing it we have an other sec another section so let's add this one so this section would be a little bit change a little bit new one from the others in this section we'll use columns and and column within column so how we use column within column so let's see click and add the column first of all we'll use two columns click two columns now you can see we have two columns so column within columns we means we are using one column and few other columns in that column like one column column within column so there as this is a column we'll use another column within this column so click elements and drag the columns into this one and i'll use two columns in this column you can see column within column how works the column with column so i i'll use content box in this one column just put and i'll put text widget and i'll already have how we become soulful just copy it and paste this one sorry i think you didn't copy it well just click copy and how we become soulful and copy another text and press below this one uh let's use another text widget and we'll use another text widget just click and put below the text widget and copy this one so in main option it should be 14 pixel like 16 okay that's look good and in this section we'll make it bold and 16 okay looks good and we will change its layout position and give it minus 12 pixel of padding and after doing this we'll just how we become soul we'll just clone this content box and we'll sorry delete this one and this is the column a content box will clone content box and drag into another column here you can see and i think let's give it okay let's give it a modern corner color one pixel let's keep it one pixel and you can see and also this one one pixel border here you can see click one and let's see the changes so before uh going to see the changes i'll add image here in this column i'll use an image so let's use this one okay and i'll use four columns here two we already put put two columns i'll use uh two another columns so by doing separately i'll just clone this column and you can see here we can see two columns another two columns are added so let's save the work and see changes here you can see let's add minus 30 and in this column we'll sorry we'll change it okay okay that's good click save and see the changes we made here you can see let's look good and before proceeding i'll add heading to this section so just add column dot this column and i'll use one column and in this column i'll use first the text widget and i already copied so copy it and paste it here and i'll use another text widget and below this and we believe in making yoga inclusive it's the heading for this blog and as you can see i think we have to make one column and put text below this one okay so we'll make it go to in main option click hold now and we'll change its color to the green one and change its font size to 31 and come to the layout and position and give it minus 12 pixel of padding to this and in this column we will make minus 25 a pixel or make it 30 so by doing this just click save the work and now see the changes you can see it's look good now so we can also add more styling to this by applying a logo or image in this content box like just click here and click image and put about this text and you can use image so i'm going to use this one and in the main option let's put 60 pixel its size okay and so click this one this one and content box will clone this content box and put it here you can see you can use many different images in these in place of this i am just using the same one in all the boxes so just clone this column and delete this one so yeah delete this one okay and you can see and go to this columns main menu and layout and position and give minus 15 r you can use minus 12 pixel and click save now let's see the changes here you can see this section now looks more better than the before so just you can just play around and you can make it as design idea then design mind works so after doing so and now we'll add another section click elements and add column here so i'll use the one column and in this column i'll use text widget for the heading and let's heading be like what's the number varsity number and make it center line and bold and i'll make font size to 32 pixels and after this i'll use another text widget and let's use the dummy text just copy here and i'll make that size to 16 pixel and later spacing one and [Music] line height is good but i think we should make it to 14 pixel font size so uh listen and make it 16 okay 16 is good in this text widget let's go to the layout and give 20 pixel right and 20 pixels right padding to this but i think it should be 50 pixels and fix the pedal to the left and fix 50 pixel to the right and it's look good now after doing so i am i'll use a button and this text should be as we are providing courses so i'll see browse so browse courses and go to the button option and border and corners and give it 25 pixel and in the button main hover option click animation action and let's add a grow animation just apply say what so let's add a in header padding to this column for this we have to go click the column and go to option layout and position give 20 pixel and 25 to this 25 percent padding to this area and it should be 20 pixel at the bottom so click here now now we will use background section for this column go to background section and go to this background style click and now from now you can add any type of background of this section so i'm using this one and click this saver after saving let's say the changes as you can see this section is also done so as you can see our uh about us page is done i have used three section for this you can use as many as you want so our about us page is also created our about us page is uh created now let's proceed to the next page that that is content contact us page so and for this we have to go back to the dashboard and click pages and click add new will give it name as contact contact us and just save it as a draft while it saves just click launch thrive architect so in our previous pages like in home page and about us page we used uh elements from the scratch we didn't use any block element and pre-built landing pages but in this page we will use uh the blog that you already created from thrive themes so that you can understand building pages from scratch and by using the blog so blog you can use blog as well this is a great option you can use so for this we'll use blank page with header and footer just click it first we will use a column and column one i'll use text like get in touch i'll make center align bold and i'll make it to 32 pixel and change its color to the great one so after this as already mentioned that in this page we are going to use the blocks so for this as you can see this plus sign and when you lower it it shows block click it and here you can see there are many blocks you already built you can use in your website so where is this is the content contact space so you will use contact as you can see so we there are five options we can use and let's use this one here you can see uh very simple and just drag your contact information here and this ready to go so here you will use your name your email and your address here and this is your content uh phone number like we are using plus one two three four five six seven eight nine and element uh for the email you can use anything like this and this is google map so let's use another block as you can see a book in appointment option is there button just click it and use your target url here and just it would be ready to go so this this was about the contact us page let's another section and you can use let's use another pressing table lead generation and we use form here you can see many forms are there you can just drag and use firestone so let's use this one just edit the information and you will be go to go and like this is the post list we just will just delete it and sign up to get free consultation and like become member so you will just change information accordingly we are just using this simple one and just click save your work and just see the preview here you can see a simple contact us page is created just we have to change its layout position and okay and this block if we let's make it minus 60 okay and this column 20 just save it so heading and padding and margin is very important so keep in mind and make the padding and margin carefully so as you can see now it's look good i have just made it made it simple and so this page is also created you can add as many blocks as i am just giving you an idea how you can add uh the blocks in your thrive theme website so this is this was all about the contractors page our three pages are created now so this page is created uh just change the color of this sign up button so for this we have to go to the main option and here you can see edit form element click it and just click the button and go to the background style you can see it's blue now i'll change as we have used all website click here and click done click save so three pages are created you can create as many as you want so i am just creating three to four pages that are looking for a simple website so our four pages are home page contact text page about us page and that would be a blog page blog page is automatically generated while you save your changes in setting wizard that we just did at the start of this video so there are few things that are uh remaining then after doing that our website will be ready so those things are menu and setting okay and also a blog post so for this we have to go to the dashboard and in dashboard go to setting and setting there is an option reading click it here you can set a home page as your page that you create a home page select the home page and save the changes after saving this setting we have to go to the appearance and the menu as you can see our menu two is primary menu is created you can create a new one from this option and as you can see our three pages are added homepage about us page and contact us page we'll add another one that is blog post so there may be blogs that whatever blog posts are created and published that will be shown in this blog page so click tick mark it and add to the menu and i'll take this above the contact test page and you can rearrange accordingly so after doing so just save the menu as i have created blog so we need blog posts so i have just created a dummy blog post you can create of its own and it will adopt automatically shown in the blog page so to do so just click on the all blog post and i have created a dummy blog post you can create by just clicking add new and in add the content and images then just publish it as you can see i have created this one i'm going to edit this one to show you how you can create your own so these are just dummy so as you can see and i have just put the dummy text and here you can see provide categories featured image after doing so just update if you not if you did not publish it here would be option of the publish so after doing so click review and open a new tab let's see how our blog post looks like here you can see all of our blog post is ready so uh i have just created three dummy blog posts so these are created now uh see how our website looks like after adding menus and other things here we go our website is created as you can see your home page about us page blog and contact us page so as you can see and starting with stunning website and is created you can build your own so i have to keep this website very simple and neat you can add a many uh designs and other things accordingly i have just keep it simple as you can see so when you click about us page here we go it is about a spell that we just created so our website is created you can add as many pages as you want so according to the need of the website and the company and you are creating for so it was all about thrive themes i hope you have learned a lot because i just went step by step so that a new user and newbie could understand it and create the website by using thrive themes on its own so i hope you have enjoyed it and learned it so i'm sure you you'll you'll find many informative and gorgeous videos and my youtube channel please subscribe my channel and keep updated for the upcoming videos thank you very much

Channel: TECH with Azaz

Views: 534

Keywords: thrive themes, thrive theme builder, thrive architect, thrive themes tutorial, thrive theme builder tutorial, thrive themes review, how to create web pages using thrive architect, how does thrive themes work, how to create a wordpress website with thrive theme builder, how to create a landing page, woocommerce integration with thrive theme builder, create a website with thrive builder, thrive themes templates, create a website thrive theme builder, thrive architect thrive themes

Id: V_LWbbgC0bw

Length: 124min 14sec (7454 seconds)

Published: Sat Jun 26 2021