How To Use Foundational Elements

Lesson Details:

Video Transcription: This course is brought to you by Appy Pie as part of our Academy series what I'm gonna do now is walk through some foundational elements inside of thrive architects so thrive architects works with elements as you can see we have foundational that are gonna be key to building most websites and then you also have a bunch of different building blocks so let's say you wanted to add a custom menu or a divider section you would just click on that element hold and drag it to where you want it on your site and then you get new options for that element and you can change all those different options what I'm gonna do now is to make it simple I'm gonna load a blank page to do that I click on the gear icon and click on templates setup and change landing page template I'm gonna expand the blank set and just start with a blank page now let's get rid of this heading and just take a look at what we've got here completely blank slate if I click save and preview this website you'll see that there's nothing here so if someone goes to this address on your website they're gonna see a blank white canvas and now we can start dragging stuff in selectors the first thing I'm going to drag is the heading notice so you just click and let go and as you can see this heading now lives inside our landing page and the landing page is the entire page itself and if I click on landing page you'll see we have all our options for our landing page right and then if I click on the heading we have all the options for the headings and some of the options you'll see on the left hand side whereas other options you'll see right here and with headings you can add in different heading styles so you can make it a heading 1 style heading 2 or what other other heading you want you can align it make it a link underline it change the color change the background color and so many different things so I'm not gonna walk you through every single option here because you can just play with these options and you'll immediately understand what's going on but there are a ton of options here that give you a lot of freedom and some of the more important ones are changing your font so if you go to google fonts you can select the font that you decided on earlier inside this course or just experiment with one and see if you find one you like you can select the weights that you want that font to be in and then click apply and now we've changed that font you can also add shadows which are really cool I mean this one looks gimmicky but when you add shadows to boxes in particular I think it adds a nice effect to your website and that's the heading element so you're gonna be using the heading element a lot throughout your website another common element or paragraphs so what I'm doing is I'm holding and dragging the paragraph element and now depending on where I place it is where it's gonna go so I can flip the paragraph element below the heading I can put it above the heading or I can put it to the right of the heading and it will automatically separate these two elements into two columns the paragraph column and the heading Condor for this example I'm just gonna drag it under the heading and now delete this column so what it said is it actually deleted one of the two columns but it still is living inside of a column element and to keep things simple I'm gonna drag this paragraph below the column drag the heading below the column and above the paragraph and delete this column and now if I click on the paragraph we have all the paragraph text options we can add lists we have the same text options that we had for the header pretty much all the same options shadow borders and corners background style etc and you can also change the font here so that's the heading that's the paragraph next up or images so here you can just insert any images you have on your website or upload your own you're gonna add in this guy and there you go now you can change all these image options add different styles and all this good stuff now I don't want to over explain this stuff because you can figure this out for yourself at the same speed that I'm sharing it with you but I just want to get your brain going with the potential for thrive architect I hope you see how powerful this tool really is and start getting creative about what you plan to do with it so you also have your buttons and I'm just gonna put this below the image make it large layout in position you can have it hover to the left and bam there we go and when you click on the button you can make it do whatever you want with actions you can link to another page on your site another website on the web or even create pop-ups which are really cool but outside of the scope of this video so those are the four main elements you'll use most often most likely now one of the best practices when you create a website is to have everything live inside of a background section so when I'm creating a website the first thing that I'll typically do is drop in a background section and this gives you a lot of freedom so now if I put in that tax drag to the heading inside the background section and same with the paragraph if I click on the heading we'll see that it's inside the background section and now I can change anything I want here I can change the color to be this água color and let's say you want that color to stretch to the whole screen width you can do that but the content will still say in that 1080 pixel width which of course you can change and then you can do the margin and padding for the background section so typically what you want to do is use multiple background sections for your website so it's not that you just have one background section and everything lives inside that one background section instead you might say I want a background section for my header and let's just say that's red then I want another background section which will be below the header and it will be the hero image where it's a picture of me and that's the second background section next up are columns and columns are pretty self-explanatory so let's say I add a column inside this background section then I get to choose the layout and if I want to do in thirds I just click this and now we have three separate columns and we can add elements inside of these columns so say you want to add a heading there you go and you can also duplicate this heading and then drag it into the next column and as you can see if you click on the heading in this hierarchy that heading lives inside of this column and now we can start adjusting the margin and padding for this column or any of the other options then this column lives inside the columns which is all three of these and here we get new options we can adjust the gutter width which is the space in between these columns the minimum height and all these other goodies so I I'm starting to remember now when I first was playing with dr architect that this seems like so many options I know I'm saying this a lot so sorry if it sounded repetitive but really when you play with this it's gonna take some time to get familiar with it but once you're familiar with it it's really really easy and a few other things I want to show you are the content boxes so let's say you have a box here where you put it above the heading but you want the heading inside this box it's kind of like a mini background section that's the way I like to think about it so now below this heading I'm gonna add an image and then below this image I'm going to add a button so now all of this lives inside of our content box and we have some new settings for the content box we can lower the width of the content box adjust the margin padding add a shadow to it duplicate the content box and everything inside of it is still there and then we can move that content box move it outside of the column and it's still there okay this is such an ugly site who cares that's it for most of the foundational elements in the next video I'm going to talk specifically about templates and symbols because they're really powerful but a little bit more complicated with the rest of these building blocks I'm not gonna walk through them because they're pretty self-explanatory but if you want to add any of these elements to your website you just drag and drop just like before and there's some incredible stuff in here so I encourage you to play around with all these different elements if they apply to your site.