How to Build the ‘Business Made Simple' Homepage's Dynamic Top Section with Thrive Architect

are you ready to learn some really cool design tricks using thrive suite well in this video i will show you how to create the top section of the business made simple homepage as you can see this is a really dynamic top section with a background video with a transparent header overlay on top of it and then we have these two buttons one of them opens a video on click and then we also have this cool three column layout overlay now i will show you in this video how to do every single detail of this design the business made simple homepage is a homepage for an online training program and a coaching program and let's have a look at the home page to see what you will learn in this video so first of all we have this above default area which is really nice with this transparent header and then the background video and this overlay this three column overlay here so i'll show you how to create that and then we have this really interesting layout right here where you can click on the different categories and it changes here in this area which i will also show you how to do and then finally there's this nice layout here with the image being full width so the image like kinda coming off out from the side and that is also something that i will show you how to do now we have a lot to cover so let's dive right in now before i get started i want to make one thing very very clear i'm creating this home page because it was requested in the facebook group and because people want to learn how to do certain layouts but i'm not suggesting that you copy other people's websites from scratch okay with that out of the way let's get started so in our dashboard let's create a new page add new i'll call this business made easy and let's launch thrive architect when you have team builder active you will see that you have these different options on your page if you're not using thrive team builder on your website you're only using drive architect then you would see the normal page option and the pre-built landing page option now what we want to do is make sure that we can start completely from scratch so in this case i will choose the completely blank page if you're using only thrive architect then you can go into our landing pages and then choose one of the blank landing pages to start from so any of these sets will have a blank page and then you can use this one to start from now please remember that if you start from a blank page in a landing page then it will automatically take the typography so the fonts and the colors from that landing page and that is something that you might want to adjust now in this case like i said i'll actually start from a completely blank page all right we really have a blank canvas to start from one thing that you will see me do quite often is use the inspect tool in the browser so the inspect tool is a really handy tool that you can use to discover things like colors or width or other things on a certain website now if you're using the chrome browser the way to get it is just click right and then go to inspect and then from here you will see that this opens a whole bunch of gibberish don't be too worried about it you can use the select elements icon here and then you can select the different elements on the page which will really allow you to get more details about the different page another tool that i use really often is the color dropper so that's another one from colorzilla it's an add-on for chrome so you can search for it chrome add-on and then colorzilla and this allows you to pick colors from a website so if you really like a color and you want to know which one it is then that's that's a very easy way to do so all right so looking over this hero area i can see that there is a background color and then that on top of that there's like this video and because i can see that the background area doesn't go all the way around the video area i know that i will need to use two different background sections so let's go ahead and do that so first of all i'll add a background section click on here and i'll set this to a minimum height of 600 pixels and add a background color so like i said we can go in and then use our color picker to see what the color here is and then this gets copied and then from here in our background style i can now add a background color and then add this color in there once you know that you're gonna use a color over and over again you can also save it so i click on this plus button that will save the color to either a global color which means that once you change that color it will change in every instance that you use that color or you can save it as a favorite color which then just allows to have it in here and it makes it really really easy to pick now i already saved this color here so i can i don't need to save it again let's just apply this color now for our video because i can see here that this is a video with text on top of it it indicates that i will need to use this video as a background image so i want to use a background section and i want to add the video as the background video on that section so let's do that let's add the background section again let's set our minimum height and in this case let's set this to 800 and in our background style i can see that we have this toggle that says video background and i will toggle this on and then select a source now in this case i found a video that is hosted on vimeo this is just a free galaxy video that i can use but of course you would add your own video in there i would not upload this video to your own website i would always use a video hosting platform for this kind of videos so in this case vimeo or youtube and then you can use it as a background video on your website now in order to get this effect where we have the rounded corners and then like this overlap effect here we want to select our background section with the video inside go into our layout and positioning and we're gonna add a 30 pixel margin on both sides and then in our borders and corners we can select the top left corner and add something like 40 pixel and the top right and also add round round corners there so now as you can see our video doesn't go full width anymore and we have these nice rounded corners in order for this to overlap we need to go back to our layout and positioning and because we know that this layout is 600 pixels we can add a negative 560 pixels today which then allows us to have a 40 pixel top margin now here if you're wondering how much to actually put there you can just play around with it and it will show you what happens and so you can eyeball this if you don't know the exact pixels that you want to use all right so we already have our background that is overlapping with this section and we can now start adding text on our video backgrounds one thing that i will do for this landing page is go into our page settings so click on the very first breadcrumb into pages and then go to typography from here i can edit the typography on this landing page so this will allow me to set a certain font for the headings and the paragraphs which then allows not to have to change that every time inline now of course if this page is part of your website then automatically it will take the fonts of your theme so usually that's what you want to do but in this case because we're designing this very specific landing page and it is independent from the rest of our theme on our website we're gonna click on it and then go into all headings so use the breadcrumbs here and first of all i'll pick a websafe font and for the titles i want a serif font so i'm going to go with times new roman and then for the paragraphs i actually won the sun serif font so we can just keep the arial in here now these are not the exact same fonts as on the business made simple website because they are using paid fonts so in this case i'm just replacing them with similar fonts all right so we can see that on here on this video we have these text elements here and then we have two buttons right there so let's do that right now let's drag our first text element in here and one thing that i'll do is on this background section so let's select the background section and immediately i know that every font that i will put on this background section every text element will have to be white so i'll go into typography and set this to white you can use the slider here or you can type fff which is the code for white and apply now rather than doing this on every text element separately i did this on the background section because now it allows that each time i will drop a new text element in here it will automatically be white it will really save you a lot of time to use the outside in principle the outside in principle says that you always want to apply your settings to the largest possible containers so in this case knowing that all of the text in this background section has to be white i'm applying this setting the white text to the container rather than to the individual elements so let's add a heading 1 here now just like we know that all the text has to be white on this background section we also know that we want all the text to be center aligned so in our background section we can go into the alignment and then center a line and as you can see both of these elements now became center aligned one other thing that i will do on this background section is i will add an additional layer on top of this video section now the reason that i'm doing that is because i want to make sure that my text is always readable and the easiest way to do that is by adding a dark layer on top of the video so let's go into our solid color and then as you can see it's set to black so the code for black is 0 0 0 0 and then we can play with the opacity so maybe set this slider to let's say 25 and as you can see this gives like a darker overlay on top of our video which will allow our white text to pop and it's really important to make sure that the readability of this text is as good as possible so that's why we want to add this secondary layer on top of the background let's apply now on this layout as you can see we have one two three different text elements and then we have these two buttons so on our version we have one two let's add another text element in here and i'll quickly copy paste the text now let's adjust the line height and the font size here so in our main options in the line spacing we can remove this line spacing and this should be a paragraph and a little bit larger and then i believe it's italic and not bold and then we have our two buttons so let's drag a button on this page and now we'll use our inspect tool again to discover how this gradient is set up so let's inspect select this button and now here in the background you can see that there is a linear gradient of 139 degrees and that we have three colors so three different hex codes one at zero percent one at thirty seven percent and one at a hundred percent so we can copy these different colors go into our button settings in our background style instead of a solid color let's have a gradient and then here this should be 139 degrees and then click on the first color here so add 0 this would be our first color then click inside this to make a new marker and drag this to 39 i believe 37 and then we can copy this second color so at 37 we add this this color and then at the end at 100 let's click on this marker and then it's this purple color so now this is the exact same gradient as on the website and just like with normal colors you can save your gradients so click on the save gradient and then add it to your favorites now we also want to make this button the rounded corners so go into borders and corners and then set this to round and the text on here you can see that these are all capital letters so we can go in and then in our typography our text transformation we can use this one to set it to all capital letters and then it also seems to be bold and then our letter spacing it clearly has a bit more spacing in there now let's check to see if there is a hover effect that we need to apply to this button so on the original website let's close this and then i don't really see a hover effect so in our button right here if you want to add a hover effect we would go into state and then hover but in this case we don't need to do that so let's go back to our normal state now that we are happy with this button and we know that we will use it several time on this page we'll actually save this as a global style so in your template button you can click this save option here and let's call this business made simple and apply now each time that we add a button on the page rather than having to redesign this button we can go into our templates here and then in our saved styles we can see that we have our saved style available now let's add a second button on there and this one is a ghost button so i would go into my templates and then let's see if we have a round goes button right here apply and then the color of this button is white so here you can see that this color was automatically linked to the theme color if you want to make sure that you can just edit this without changing anything on the rest of your website just click this unlink button and then you'll be able to add the color you want so in our case we just want to add white remember you can use the slider or type fff in there and then apply our typography settings i don't want this to be bold so let's not make the text bold and then as you can see we now have a hover effect on here which we don't want so we can go into our hover effect and then reset this style so when you reset your hover style it means that you're basically just not having a hover effect anymore and just keep it as your normal style and now that we've reset our button we also want to delete the animation that was on there so go into animations and actions and then delete remove this animation so now nothing is happening anymore and we can go back to our normal state now from here i feel like this border is a bit white so i'll select borders and corners and then make this two pixel so that's more the look that i'm going for here and we also have an icon in there so in our options let's add an icon and then we can click on this icon change it so this is a video or a play button so maybe let's search for play all right and this is play trailer it also has our transformation and it seems to be a bit smaller than the other one now we want to make sure that the video actually opens on click so for that let's go into our button and then into our animation and action from here let's delete the link that's on there and click on popups and then from here again you can select where you want the source of this video to be so whether it's hosted on youtube on vimeo on vistia and then you can add the url all right now we need to get our buttons closer together select our button and then let's align this to the right and this one let's align this to the left and in the columns so let's select our columns i want to add a little bit more gutter width so this is the um the width in between the columns so this allows us to push the buttons wider let's set this to 40 all right let's have a look let's see and preview what this looks like so right now we can see that our text is still pushed to the top of this video so that's not exactly the effect that we want we'll move that around and in my opinion the video is also a bit too big so we'll make it a bit smaller so let's go back to our editor in our background section we said 800 here but i think 700 is probably better in order to make it easy for this text to be in the center of the vertical space of this background section we have an option that is called vertical positioning so with the background section selected you can add this vertical positioning to be in the center now as you can see this is grayed out at the moment so when you hover over you can see that this isn't working if the overflow is set to auto hidden or scroll now the reason that this happens is because we added these these rounded corners to our video so what i'll do is i'll go into my layout and positioning settings and just for a brief second i'll put this to visible so the overflow and the advanced settings overflow visible so now as you can see our our borders are not hidden anymore like they're not nicely rounded anymore but it allows me to go into the main options and then use this vertical positioning and then we can go back in our layout and positioning and from here set this back to auto which then allows to have a rounded corners again and to have our text nicely outlined in the center of this background section now the next step to concentrate on is this top area here where we have this kind of label-ish outline and then we have a menu with a nice button right here so let's create that one now go to our pages and from here we can show the header so click on the little i and make the header visible this will show the header that i have available on this website everywhere on the site now because we are editing this specific landing page i don't want to change this header everywhere on the website so i want to make sure that i don't edit the header because in that case i would edit it everywhere on the website i want to change this header and i can go into create new header and then from here i can select something that is close to what i'm looking for so in this case you kind of want just a logo and a menu so let's see here we have this logo menu option and depending on the theme that you're running you can have different options here but you'll probably find something similar and then let's choose this header and give it a name also business made simple header and add it in here now once this header breadcrumb is selected now we can start editing this header and first of all let's create this label type layout right so for that we're gonna add a content box underneath our logo and let's make this a different background color so in background style let's add a color and then our logo let's drop it in here now for this logo i actually want to use my white logo so i have this available here if you don't have this available on your website yet you can add a new logo variation so let's choose this one and then in our layout and positioning let's see in our content box um we'll need to remove all the margins because we want this to like stick on the top of the screen so let's put this to zero and then in our column let's see if we have anything there no in our columns also not and then in our header yes here we have a padding so we can delete that so now this is like kind of locked on the top of our screen and then we still need to add these rounded corners right there so with our content box selected let's go into our borders and corners and then on our bottom corners let's add left and right these 20 pixels all right let's select our logo and then make sure that this is center aligned and let's also add some some margins underneath our logo so that we can make this content box a bit bigger so here you can play around with this and make it exactly the way you want it to now let's have a look we have our menu we have three menu items and then we have like this menu item that looks like a button and as we can see they're all capital letters and they're also pretty spaced out and we still have this little line that says powered by so let's add these things right now in the custom menu let's select our um menu item and then from here we can see there is a hover effect so i'm going to set this to none i don't want this hover effect anymore and we can play around with typography so this we'll want it to be white i'll just wait a little bit because if we make it white on white now we're not gonna see it anymore but let's transform to make this capital and then our letter spacing is definitely a bit more and then this was like um yeah this is bolt and so then if we go into our custom menu again in our main options in you can see here you have menu items and so from here we can type the different texts in there so get the book become a coach log in and get access so this would link to our book page and then become a coach so when you have the url here so you can either search for a page on your website or you can type the url so let's say i'm just i know i have an about page so i'm going to search for the about page here and then apply this now we don't need this sub menu so i'm going to delete them and then the next one is login so we would link this to our login page obviously and then one thing that's really cool is we can actually make sure that the button login or the text login only shows when people are not logged in right makes sense so from here instead of showing always will show when logged out so this allows for the text login to be hidden if somebody is already logged in and now our last button here so our last menu item that says get access so first of all i'm going to make the font a little bit smaller because i feel like this is a bit big so let's put this like 13. and now we want to edit just this menu item because we want to make it look like a button for that select the menu item and click on this lock icon this will unlock it from the rest of the menu items and now we can style it just by itself so first let's add a background style a gradient and then we can select our gradient that we already saved and then in our borders and corners let's make this round and here are layout and positioning let's add padding around this here so all right and then this typography should be white so let's unlock this from the rest and put it to white okay so now we have this nice menu with the the button and now we want to make sure that this overflows over this area here so for that let's select our header and then in our header options you want to choose over content so if you're not seeing this let's click on done if you have your header selected but you're not seeing these options it's because you're not in edit mode so you want to make sure that you're in the edit header mode and then you see the header options over the content and now as you can see we need to make sure that this is visible again so our menu items are typography let's also make this white let's save our work and see our preview alright so we're getting closer but we can see that this is actually too white so we want to make sure that we restrict the width of the content in our header so let's do that now let's click on our header in the main options you can see here that you can stretch the content to full width which is what it's set to now or you can actually set how width your content can be and so that is what we want to do here let's reload our page all right so now this is much more what we're looking for but we can see that this menu still has to be pushed a bit lower so for that let's go to our header and then select our edit header in our columns our vertical positioning so we can choose this one to be on the bottom of our columns and then we also still are missing the text elements underneath this one so i've powered by thrive theme builder and change our font color make this a bit smaller and remove the spacing and then here we also have these 20 pixels so let's set this to look maybe five actually we can just remove this okay so now we have our label that's like attached to the top of the page and then we have our menu options and here we have our get access now as you can notice because i'm logged in we're not actually seeing the login text here so anyone who's logged into the website would not see this anymore now the next step on this landing page is the three column overlay and for that let's add a background section inside the background section let's add a content box and then the background color of this content box is white and [Music] as you can see here it has like a slightly rounded corners and then it also has a border so for that let's add a border in like a light gray and let's add rounded corners everywhere so with the middle selected i can add like 10 pixels everywhere and then from there i want to add a three column layout it's about three columns and then inside each of these columns i want a two column layouts so here we add two columns now because as you can see here we have like this icon and then we have text so we can do that here let's add an icon and then next to it i'll add the text and we can make sure with the columns selected if we go into our main options to put our vertical positioning in the center this will align both of our items here and then in with our text element selected we can change the lane line spacing so now this is nicely aligned now i will remove some of the paddings and margins so i can click this lock icon and then when i add zero it puts it everywhere on the paddings and same with the margins on the content box let's also remove the padding and then we still have some around this column here so i'll keep the 10 pixels there because that's kind of looks like a good layout and then what i can do is i can select these two column layouts so with the text selected i can see column and then columns and then i can copy this and just drag it onto the next column so this is really easy once you've done the layout you don't have to do it again you can just use the copy and and drag into the next column all right now we want this to like overlap with our video and for that we're simply gonna add a negative margin to this element and now one thing that you'll notice is this content box is not as wide as we want it to be and for that we can go into our background section and look in our main options and see how with our content is so as you can see here the width is from the landing page so let's untick this box let's set this to the content covers the entire screen with so now our content box will go until the edges and let's add margins in our layout and positioning so that we get the desired effect in this video i showed you how to do the above default section for the business made simple homepage but a lot of you requested to also show you how to do the interactive tabs element that is present on that page and that is exactly what i will do in the next video so if you're not subscribed to the channel yet click subscribe hit that bell and then you will be notified when we publish this video [Music] you

Channel: Thrive Themes

Views: 801

Keywords: thrive themes, thrive suite, thrive theme builder, thrive architect, how to create a dynamic top section, how to build a customizable website, website customization, recreate a business website, video background designs, wordpress website, how to create a dynamic homepage, how to build an engaging homepage, homepage design, Business Made Simple, over content header, wordpress header design, wordpress top section design, wordpress, wp, web design, how to customize your homepage

Id: eiFIfQaOLwQ

Length: 34min 52sec (2092 seconds)

Published: Fri Dec 17 2021