How to Build the ‘Business Made Simple' Homepage's Interactive Content Tab with Thrive Architect

in this video you'll discover how to create an interactive element like this one where people can click on the button and it changes the content next to it now as you can see this is inspired by the business made simple home page and i did a part one to explain how to do the top section of this homepage so if you're interested in how to do the top section then go back look at part one because in this video we'll just cover this interactive elements excited to learn how to do that with drive architect without any custom coding then keep on watching [Music] all right so here i'm on my website i'm on a landing page where i previously recreated the top section of this homepage and now what i'll do is i'll go into this new background section here and the little hack that you need to know in order to create this element without custom coding is that we're actually going to use the pricing table to get this done now you might think this does not look like a pricing table and that is absolutely true but the pricing table element has this really cool feature that allows you to show different instances of a box so normally for the pricing table this is used to show different prices for your monthly or your yearly subscription for example or maybe different currencies so you can show in dollars and in euros but right now we're gonna hack this element a little bit to use it for the purpose like we've seen on the home page so let's get our pricing table element add a new element search for our pricing table and then drag it on the page now because we only need one box with content and not three boxes here i'll delete the boxes that are too much so let's just delete these two boxes and now we have this one box that we can start adding content in now at the moment we don't have the buttons yet and i will actually first add content into this content box because then the moment that i add buttons it will create a copy of the original box and will save us a lot of time to already have the layout ready for the other boxes so let's do that first as you can see here on the original design that we are trying to recreate we have this image and then on top of the image we have an icon and display trailer text now what this indicates to me is that we will need to use our image not as an image element but as a background style on another element because then it will allow us to have that icon and the text on top of it so each time that you see an image with then something overlaid on it you want to think background image and then underneath it we have this layout with a little bit of text a title some more text and then two different buttons so let's create that now first of all i'll select this content box and then in my borders and corners i can see that there is a top border here so this gray border and we don't need that one now we have rounded corners so i'll select the top corner made at 40 pixels and this right top corner and also make that 40. this allows us to only have rounded corners on the top of this box and then i will add a content box in here to add the background image so our content box let's in the background style add an image in there choose an image apply and now we can start playing around with this content box to make it look the way we want it to so first of all we also want this one to have rounded corners so on our left and our right top corners we will put a 40 pixel margin then we want to make sure that this is on the top of this box so without any margins or paddings so let's go into our layout and positioning and then delete our margins that are on top of this element and then you can notice that this isn't on the top yet so let's select our content box surrounding this content box if you are confused about this you can use the breadcrumbs so now you can see that the surrounding element is selected and here we have the paddings that we need to remove so what i'll do is i'll click on this lock icon which now allows me to add the zero just once and then it will apply it on the top bottom left and right padding so here let's type in zero now as you can see this content box jumped into alignment with our outer box i'll click on my content box again and then in our layout and position we can change the height of this image so in height we want a minimum height of let's say maybe 300 300 pixels and now we can add our icon and our text in there so first let's add an icon and we want this to be a play button so let's search for a play button in the main options let's make this color white so either use our slider or type fff and then that's white and now i'll also want some text that says play trailer and drop it underneath my icon this text is in capital so in the transform i can use all capital letters then change our color to be white so as you can see here this is linked to our theme colors i can unlink this and then that allows me to change the color on there let's also make this bold and select our content box because i want this to be vertically aligned in the center so in my main options vertical positioning i can set this to be center aligned all right now i can see that this image is a little bit light for the white text on top of it so what i'll do is i will add another layer on top of our image so let's go into our background style and then click on the new solid color layer and now as you can see this adds a black layer with an opacity of 50 percent on there i'll reduce the opacity a little bit let's maybe set this to 25 and apply so now rather than having to go into photoshop change this image and so on adding another layer on top of it makes it really really easy now if you want black text then make sure to add a white layer on top of it if you want white text then add a darker layer on top of it now the next thing that we want to happen is when somebody clicks on this box or this player or display trailer is that it opens and video light box on click so for that rather than doing this only on the play icon i will select my content box and then go into animations and actions and from here i can click pop-ups and then i can open a video select the source so whether this is a youtube vimeo wistia video or a video that is hosted on your own website and then add the url in there all right now let's have a look what the rest of this box should look like so in here i can see that we have text and we also have clearly um padding in between the text and this white box so to make sure that our text doesn't go until the borders and then we have these buttons and this button i already showed you how to do it in the previous tutorial so it will be quite fast to do it now in order to get the margins the easiest way to do this is to add a content box in here and then i can add paddings to this content box so from here i'll add 60 paddings to our left and our right margins now this makes that our content will not go full width anymore and that each text element that we drag into this content box will respect these paddings so rather than doing it for each text element individually adding this content box makes it really easy to just do it for all the elements inside of this content box so i'll add a first text element in here which is our category i think it's communication first no strategy so we want to add strategy and then again in our main options we can transform this to be all capital letters and then all the text in this content box we want it to be left aligned so for that again rather than going into each text element and then left align it i will select the most outer container in this case it will be our content box and i will tell all of the typography settings and all of the text elements that we drop inside there to be left aligned so now when i add another text element in there it will automatically be left aligned now the next element is a heading and then we have a paragraph underneath there now for that i will just use some lorem ipsum text next we have a button and because we already created this button we can use our template sections go into our saved styles and then select our button that we already created now if you're unsure how to do that check out the first part of this tutorial and then we want this button to be left aligned and it says read more and then we have this play trailer button now this button of course you would link it to the right content so when with the button selected into the main options you can add your target url here now underneath that i want another button and this one i want to unlink it from the buttons in this pricing table so that i can style it differently from this first button so let's unlink this and then let's go back into our template so i can click here on template button and then as you can see there are a lot of different style buttons that you can use so i'll go with this one that looks very similar to what we are looking for and then change the text to say play trailer and change our color to be our blue and then we also want to left align this and change our text to make it a little bit smaller so in typography settings i can make this a bit smaller and then just like how we linked this content box we can go into our animations and actions delete this the link that's on here and add a pop-up which is a video and then add our video url in here now we still need to adjust some of the space here so let's click on this first text element and our main options let's reduce the line spacing and then this looks very close to what we are going for right here so i'll just delete the other elements that were still in this pricing table all right now that we have our contents set up the way we wanted to we can add those buttons and then like i said it will automatically copy this content so we can easily change it afterwards but at least the layout is exactly the way we want it so what i'll do is i'll select an element in here and i'll make sure to use the breadcrumbs to select the pricing table from here as you can see we have something that's called instance one so that is our first button and our first content box let's call this strategy so edit and then call it strategy because this will be what's on the bottom and then we will copy this one so duplicate this original instance and this will create a copy so this one will be called communication as you can see the moment that you add more instances here it automatically will add the buttons on top of your pricing table and what we'll do right here is we'll select this button group and then we'll use a little bit of styling magic to add it next to our box instead of on top of our pricing table so in layout and positioning let's first set this width to be 300 pixels this now already added the buttons underneath each other because they don't have the space to go next to each other and then we'll want to make sure that we align this to the left and in our advanced options we want this to float so this is what allows you to have this pricing box table next to your buttons and now we can simply start styling these buttons to make them look more like this type of layout now as usual i will use my breadcrumbs to know which elements i need to edit so as you can see once you click on a button here or once you click inside a button it says inline text so this means that you are editing the inline text if you click on the next one you're editing the button group icons and and this is for the normal state and then if you click on this button that is blue at the moment you can see that you change the button group for the active state of the button so right now the active state is our communication box here and so we can start editing that so in our main options let's first change our colors so we want this to be dark blue and then we want this button to go full width and in our layout and positioning you can see that there's a forced 20 pixel margin on here so let's set that to zero and let's also add some space in between these two buttons so let's add a 5 pixel top margin on there in our typography settings we can use a left alignment so now our text is left aligned and then we can do the same for this button which is our inactive button so left aligned in the main options let's go full width in our layout and positioning let's not have any margins on there and then we'll also add a five pixel margin on top of that now we want to select what's um surrounding this group so our button group and here we want this effect to have like this white box right with the rounded corners so what i'll do is i'll first of all add a background style on here so let's make sure this is white then let's add borders and corners so all surrounding this box we want a light gray border and then we want rounded corners so all around the box let's maybe do 20 pixels all right and then in our layout and positioning first of all i'll lower this a little bit so add some margin on top of it and then in our padding settings let's do 10 padding on the left and the right let's do 20 padding on the left and 20 padding on the right and then on also use 20 on top so now we have this box and we have our buttons that are inside it so the only thing we need to do now is create more of these instances so let's make sure we select our pricing table go into our main options and then simply duplicate these instances now let's make sure we give them the right name all right now we have the right names for the buttons but at the moment because we copied our original instances this content here is still the same for each one of our buttons so even if we click on the buttons it would seems like nothing is changing so let's fix that now let's go into our communication tab so right here make sure our communication is selected as you can see here that indicates that this is selected and now the content that we are changing here is the content of this communication box so first of all i'll change the image here so let's click on the content box and then in background image you can replace this and let's call this communication and then of course you change everything that you want inside this content box so let's save this and now let's see the effect on our website so let's preview and as you can see here we have our element and we can click on the different buttons here and this changes the content of this element right there so that is how you can create this interactive element with thrive architect i hope you found this tutorial helpful and of course if you have any questions don't hesitate leave them in the comments below and if you're not subscribed to the channel yet hit that subscribe button hit the bell so that you're notified when we publish new videos [Music] you

Channel: Thrive Themes

Views: 694

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, wordpress website, how to create a dynamic homepage, how to build an engaging homepage, homepage design, Business Made Simple, wordpress, wp, web design, how to customize your homepage, interactive content tab, how to build an interactive content tab, tab element, interactive web design

Id: lzVm0vhCln4

Length: 19min 0sec (1140 seconds)

Published: Fri Dec 17 2021