Collaborate on Law Firm Invoice Template Word for it with Ease Using airSlate SignNow

Law firm invoice template word for IT

welcome back to another lesson that's designed to teaching you how to get your website up and running and to having an amazing website obviously so in the last lesson you had the homework of assignment of tinkering playing around with thrive suite that way you can get more comfortable with it and then ultimately build a better website for those that use the templates the goal there is to save you a ton of time and to help really speed up that learning curve and so hopefully with the templates you're able to deconstruct the templates to be able to get a sense of how everything was built to ultimately construct your version of the website that you're trying to make here and so for those that didn't end up using the templates that's totally fine too i understand wanting to kind of you know take the not not the hard path but the the from scratch path i'll say and building everything from scratch i get it i've done it before i obviously did it with my own law firm's website the point with this lesson is no matter which boat you're in i want to deconstruct the templates a little bit in order to make you a little bit more oriented with thrive suite because no matter which position you're in either with the template or without there's going to be a learning curve involving thrive suite involving building your website and so let's help speed that learning curve up a whole lot by taking a look at the home pages that i ended up making those templates that were offered in the last lesson i'll put them available i'll put a link down in the body of this lesson as well if you want to check those out and what i ended up doing after the last lesson after i gave you the homework assignment to go tinker away i spent my saturday afternoon being some people would say it's lame building those two templates that are the non-stone firm plc templates and i'll kind of go through those in a little bit but before i go through those if you're on youtube here's the little spiel again if you're not on youtube i applaud you i don't want to clap because i'm sure the audio would be horrendous if i did but if you're on youtube obviously hit the like button subscribe hit the bell and then make sure you head over to lawventure.com i have the website up right now i'll get you a little oriented if you haven't signed in you're gonna see a members sign in login that looks like this but not the profile quite yet and then you're gonna click on courses and after you've clicked on courses be sure to check out the course that involves this video right here build a law firm website fast click continue course since i've already started the course myself that basically is going to be contingent on your situation you may be beginning the course anew but if you're beginning the course right now then you obviously are way ahead on the lesson so get oriented a little bit by starting with this first introduction lesson and then proceeding forward in order don't be a skipper because then you're going to lose context but once you are ready to begin this course you can click here and you can get started let's get started with this lesson enough of the little spiel so let's head over to our modern homepage and take a look with how it turned out i already had it up just so it wouldn't take me too long to type things incorrectly and then fix it so i'm going to refresh it just so you can see everything in action alright so quick scroll see a little bit of animation going on which i didn't do for stone firm plc some extra animation some toggles right there with a whole bunch of nonsense underneath it i really like just the pointing and the interaction going on this is very familiar to what i have on my law firm's website some little points some extra reviews if you don't get the pictures for your clients and then you have this option right here so the overall points i do want to bring to your attention is that this color scheme if you were paying attention in the last lesson is totally different from the color scheme that we were talking about in the last lesson i tried it guys i really tried to make that last color scheme work and everything i ended up creating didn't look good it didn't mesh well it just wasn't my style i'm a big fan of blue i tried to avoid the blue but in this situation i was trying to also create a very modern home page i feel like blue is very popular and so with that i just fully leaned into the blue slash a little bit of green in here um stuck with the hero image of our favorite person of all time have the button that pops out the blue and this you know i don't know what kind of red this is this reddish pink seemed to work really well really pointed the eye to this direction keep in mind whenever we were looking at the inspiration last lesson that was my big critique with some of the other websites that these buttons didn't really stand out so i made sure to fix that with a modern style you saw the animations earlier have these sliding in makes it look super sharp and just a quick word of the whys i personally don't have animation on my actual law firm website and what i mean by animation is i'll refresh this in case you missed it that right there and the reason for that is i have a ton of photos on my law firm's website i have a very long home page on stone firm plc and because it's a long home page because there are a ton of photos it takes up a it just it slows things down a little bit i optimize the photos in order to help speed it up as much as possible so i try to avoid the animations just to you know make sure i'm not i'm not peeing in the speed to too poorly um so let's just go ahead and keep scrolling through as you're probably well aware of at this point i've become a fan of having a sticky here it helps make things easier and honestly makes things cleaner by not having to worry about having all these click here now buttons um just everywhere scattered here is our favorite guy again i like the line going through it's very modern it's you know almost interactive with the photo because as it slides it slides through the photo but you can kind of see it inside the photo i worked on the opacity there obviously i can put more information here if i needed to again more testimonials we focus on the testimonials with law venture that's my philosophy here y'all it's always about trust honesty and credibility and testimonials with photos are a great way to do that testimonials without photos they're still beneficial but it's just not as impactful it's better to see a smiling face or a blue steel face right here but it is what it is okay so we're still scrolling answer some potential objections that people would have give them some information up front that shows not only are you qualified but you're already providing answers with what you know they're thinking that's always a good sign shows shows you know what you're doing um have this one button if you're going to be interactive might as well put a button there uh we went through all this with stone firm plc's template okay all this pretty basic and the goal here was to keep it clean not to squish it like a hamburger you're trying to stuff in your mouth like the other ones you were looking at and i think that was accomplished here and i went with this minimalist approach at at the top now that i'm thinking about it just one word focus and then you know have a little bit of a phrase here um and as you can tell we have the cutout here of our favorite guy so this is a png file photo it's where everything behind them is transparent and then we or i ended up creating this background so let's open up thrive architect and get a little familiar with this one so with thrive architect open and i'm going to make this a little bit larger for us to see okay we can now start making changes to what we want to make changes to so i'm going to start with our favorite friend here remember it's all about the breadcrumbs at the top so i just clicked on the image image is inside of a column the column is obviously inside columns and this whole thing is inside a background section so with all of this keep in mind that this really works because of the background section is has this color scheme going on here and to do that you want to come down to background style and with the background style i started with the radial gradients and i chose my colors when i did that you can see how i slid things and the colors i ended up choosing here one element here is this pattern that i included see you have these options to choose patterns i think i ended up choosing this pattern and then in doing so i toned down the opacity to where it wasn't too in your face i wanted there to be like a subtle texture to this because whenever i was basically without this pattern the issue to the eye was it just it didn't look good it looked something about it looks um which you know obviously this is to some degree but having just a flat color i'll show you didn't look super great maybe that looks cleaner to you but in my mind it's just like it's almost too clean right you have this super clean background but then obviously you're gonna have a photo that isn't you know very clean there's gonna be texture to it there's going to be a little bit of degradation just in order to have an optimized photo for your website so i ended up i just clicked the back or undo button over here i ended up putting this texture on it to help make it a little bit more cohesive with the photo that's going to be totally stylistic for what you're wanting but just keep in mind here this is all being done at the very back of what's happening in this background section so if you are wanting to reach this point you're just going to reverse it right you're going to drop your background section drop your columns and drop your column drop your image inside this particular column so with this layout obviously you're going to have i have one text here i use the heading number two i have another text here and then i have the button below it so what you're doing in this situation is you're dropping your text in dropping another text in and you're dropping a button wherever that is where is my button my butt my button that's i always just search it okay then you drop your button in right here and then you basically just need to make it the changes that you need to make and so in order for this to pop a little bit more i used the shadow worked with the shadow right there and then i also ended up making this a pretty large font keeping in mind if you slide this slider all the way over it's only going to go to 100 you have to in order to get to 150 click in here and make it 150. and i also wanted there to be kind of this level of distance between this text and this text and that worked right here or you could go to layout and position and make your tweaks there so we did something very similar i say we i'm talking about the collectively i ended up putting you know this text in here went with the white because it still looks pretty clean um with this green and blue background and then pushed with the plus 20 down the button or push the button down for there to be a little bit of space and then once i had the button ended up centering the button by going right here obviously since this is just a template i don't have this being linked to anything but if i were to have it being linked i could change the link over here at target url or if i wanted this to be some type of jump link then what i could do instead is click on this and then click on jump link select i actually really like the smooth animation i don't want to skip that select target and then go down to [Music] let's let's just go down to this one right here click add jump link so in this situation let's save it wait for the save preview okay everything's loading click need a lawyer and boom this is where it takes us so jump links are super cool if you're trying to really direct someone's attention if they've already made up their mind of what they want to do then you can make it easier to where it's like okay no need to really go through this page you can just go straight to what you want to go to but i like the smooth transition because it really kind of highlights very briefly what they're missing out on just in case they're just clicking it and not so totally sold on what they're clicking on just a little bit of a gamesmanship there so i'm going to exit out of this i'm going to click on the button again i'm going to remove targets and save so we're kind of back on our original settings here that way i don't forget now in this situation let's click on the icon that's at the very top let's take a look at our handy dandy breadcrumbs that's inside of a content box which is inside another content box which is inside a column which is inside the columns which is inside a block keeping in mind this block is a lot like the background section but the block is more of your pre-made by thrive suite templates and so what you can do in that situation in order to get a block is to click add element wait for it to load and then as you can see here there's a block that you can drag and drop where you want it below the other block or and basically anywhere you really want it and then load what you want to load based off the templates they provide and in those situations you you know just start making the changes that you want to make it's for example we could change this button to a jump link to where maybe there is that section all the way not all the way down here just right here and we could immediately jump someone to this section right here so what i ended up doing is you know using the block as inspiration to create this option so let's say our law firm handle person personal injury criminal defense family law you want to be able to direct people where they should be going and you know a great way to do that at the very beginning to get them started is to provide a little bit of context of what your law firm does or what you do as a lawyer and then let them you know kind of sort themselves out from the get-go instead of you know really dilly-dallying with your homepage or maybe they're looking at other aspects and they're just like hey i just want to get to it is this the right firm for me so i ended up changing the icons here change the colors there added the buttons in order to look like this and then ultimately if this was my page then i would have jump links here to help provide a little bit more information related to each area of law if i only did two areas of law i would delete this column by going to the breadcrumbs and then clicking delete right there and then that would slide over keeping in mind columns are a little tricky because you want to make sure that everything is working correctly meaning you want to make sure the sizes work and so you know center the columns and if you want to adjust the width to where whenever you expand it it's not going too far out then this is how you would do that over there right now it's auto but with a lot of my columns i end up actually making it to where they can only expand to basically this portion so it looks a little bit cleaner and it doesn't just take up the whole page because once you have columns that are like really spread out that way then it just looks a little funky okay so let's keep going we've already talked about this bad boy right here this little sticky so you got the text inside a column inside of another column and then the color schemes going on in the background and that's slightly different than what we were working with earlier it's where we have a linear gradient that goes from left all the way to right i think there are three colors involved with this one where you have the blue and you have a little bit of a white going down to a gray um we can actually look right here yeah that's that's kind of what's going on it's a little bit of a lesser blue um i'm not i'm not big keen on how the color schemes work specifically i just know i like this blue and i like that blue and i like the gray with it and that's what i went with so the important part here is scroll behavior you're going to want to sticky it and that way it is able to stick as people are scrolling but notice that the sticky right now is not selected for the mobile device so let's hop to the mobile version real quick so notice that i have a background section here well i have a column and then columns background section for my sticky and i do want to point out that with this sticky that will stick whenever we're not editing it this is a totally different background section from and i lost it here here we go different background section from this sticky in other words this sticky on the desktop is a completely different sticky from the mobile sticky see it says let's see if we can help this sticky says take this super short quiz to see if i can help so those are two separate stickies and the reason why that's important is because this sticky on desktop does not translate nearly as well on mobile this has a little bit of a shorter text going on it keeps it a little bit more condensed if i were to try and squeeze everything from the desktop version to the mobile version then what would end up happening is the mobile versions like i don't know 45 percent of the mobile's page would be taken up by this desktop sticky so in order to make sure that the mobile device is as you know easy to the viewer and the scroller as possible i ended up making two separate stickies so the one we're looking at right now the one i'm clicking on right now is with this background section if you go to scroll behavior obviously it's you know stickies and intact sticky is sticky but the ipad or the tablet version is selected and the desktop version is selected it is not selected for the mobile version meaning when we hop over to the mobile version this goes away and as you can see here the opposite or the inverse is true for the mobile version this is another background section that has mobile only and it's deselected these options originally when this was created this was selected and this was selected as well by default and what i ended up doing is creating this mobile friendly version in the desktop version and making the tweaks hopping over to mobile seeing how it looked and once i liked the mobile version and i went over a desktop i deselected these two options and as a result there is one version during mobile or tablet version and then there's another version for mobile version i think that made sense that was a lot of back and forth with the same thing but if you have any questions about that obviously check out the templates so you can play around and fiddle with it that'll help you get a little bit more oriented and that's also a i'll say a quick tip for those who are trying to really optimize mobile keeping in mind a lot of people are doing searches and scrolling on their phone it's a whole lot more convenient to do that so you want to really put some emphasis on making sure things are friendly for mobile okay with all that said let's keep scrolling here we have testimonials we have our favorite guy ever we can obviously edit this information we can take these little icons and we can add links to them part of that is going to animation in action you can choose create a hyperlink and then type in the url for that so let's keep going we have more testimonials we have this stuff right here i got it i got it and we have this all of this can be created this is like me building on a template here you have a text with a column inside columns inside the content box yada yada background section background section um this this right here if you go through the testimonial templates that thrive suite offers you can get something very similar to this i think i may have added these stars to it i can't remember it's been so long but what i ended up doing in this situation for this modern home page is not only dropping this content box and this template in here changing the colors to make it stop that make it look compatible with the overall color scheme but whenever you go to the background section i added this pattern to it in order to add a little bit of extra extra depth and that way it's just not not everything is as clean there's some texture to it which i think adds a pretty cool effect especially because it kind of contra contrasts with these content boxes which adds just that level of depth so keeping things a little bit different this is kind of building off of templates that are already available through thrive suite but changing the colors and you know changing things ingly obviously you're gonna have columns this this is actually an interesting thing that i didn't really think about doing prior to this so we have an icon and this box around it is like okay how do you create this box is that another like thing inside of a thing actually it's a drop shadow to the actual box itself and then what you end up looking at is the fact that this is a color that you can choose the opacity on the on the box and that way what looks like a box around it is actually a shadow and it's a solid shadow and that's how you can make a quick little box around something i actually really like that and i hadn't crossed my mind before putting this page together to do that so let's keep going we have more reviews here we have the button that stands out that's always a good thing i wanted to end this page with a call to action and it does that so with all that said this is kind of like the breakdown a little bit oh actually let's go let's go back here i feel like i skipped this here we have a content box which is inside a column inside columns and this column in order to make it staggered is down a lot it pushes things and this background section if you look over here has this color scheme going on and because of that that kind of gives you this little effect here so let's take a look at this background section above it you have the color scheme going on as well if you go back down to this background section oops i almost forgot where i was clicking okay so let's take a look at decorations here this is where the slanted edge comes in obviously slanted edge you have different options you can play around with that and a slanted edge is starting right here you can tilt it you can change direction and so that gives this kind of effect going on gives you that harsh line which helps draw the eye to the photo to mr popularity over here and it's a nice little touch and i mean the best way to really bring these sections in you know you have this section and then this section is to have this same background color and then to you know have this line that you know connects to the photo and so what you're doing here is from the eyes perspective you're tricking it it's where the eye thinks that this is all cohesive because you have same background color section that transitions to this section right here because of the white background just a little bit of designing tip that i kind of picked up looking at other websites so with all that said let's go ahead and save and preview fun fact i'm i'm a nerd there's no denying it you're basically going through a lesson that's being taught by a lawyer about how to build your law firm's website that's because i'm a nerd who took the time to learn everything i'm teaching you and i decided to just totally lean into being a nerd and so the saturday afternoon that i put together this modern homepage i asked the question can i put together a more traditional website something that's very similar to the websites that we were looking at for inspiration and in the last lesson and i decided yeah let's go ahead and do it i was able to put the modern homepage together super quickly i had the extra time and so for the sake of being able to give you an extra example to show you that these traditional websites that thousands of law firms are using it's completely possible to build in fact it's really easy to build i decided to build it so let's head over to the traditional website i'm gonna refresh it so you can see all the effects in action whoa we have some sliding going on and we have our favorite person who's sliding in like a champ we have focus sliding in for dramatic effect we have the courtroom going on in the background instead of just like a solid color that way you know it's a lawyer website and we're following the color scheme that those other inspirational and i'm using quotes over here uh designs we're using in the last lesson that we were looking at and so with this gold and black i guess it's a little bit more serious and it's a little bit more business like but anyways my critique is the fact that this contact us doesn't stick out and you may be thinking jared this is totally hypocritical it doesn't stick out well i was trying to build a traditional website that other people are using so i decided to just completely adopt even the incorrect things that i don't support so here this is what we have it does do this effect that makes it pop a little bit more you can obviously change this and then i added these little columns right here in the whole column section because a lot of websites have been using this to help maybe provide a little bit of depth and i have to say it's pretty cool to have this depth on top of the photo right here it helps you know limit any potential issues of resizing to where maybe this guy right here or favorite guy may be below the line caused by the photo and this helps hide that a little bit so this is actually something that i like but i also like having this right here um but that's just gonna be to each their own on that one so we have an introduction to the lawyers here that you can always use for example jim carson the associate attorney with a killer photo but meanwhile you have the founder with just like an awesome you know model photo but anyways so scrolling through we have more sliding going on very similar to the modern one honestly what i ended up doing was saving the this version of the modern as a template that particular section and in doing so save that particular section here and so what i ended up doing is also including this little handy dandy sticky and you just saw these end up you know changing and growing and being interactive keeping in mind that with numbers always be sure and figure out what's allowed in your jurisdiction you may have to end up you know disclosing what your attorney's fees were what the costs and expenses were and things like that i avoid this in order to not offend anybody and to also you know prevent any potential issues with having to disclose anything and everything but whenever you do and i'll refresh this whenever you do have this type of like interaction it is you know kind of cool it's a cool effect to see just don't go overboard with it i think it's the same rule of thumb that people have with with powerpoint yes everything can pop and everything can slide and dissolve and you know fade in fade out but you don't want to do it with every single thing just because you can doesn't mean you should so we're scrolling through this is very on point and what i think i ended up doing was actually just importing the entire modern home page into this and then just making tweaks from there that models yeah that models the uh the traditional style that we're you know looking at right now i will say that i added this reach out little message box and in doing so again trying to you know basically copy a little bit of the traditional websites we're looking at that all had a contact form and so with this contact form you can type in the name information and click send message and it'll go to go to the email that you want it to go to so with all that said there aren't too many things that we need to break down because it's pretty similar to the modern home page but a couple things that we should probably talk about in order to get you a little oriented in case this is your style is one obviously if you want to go ahead and get this template you can click the link that i'll provide down below it's also available in the last lesson if you ever go back there and by the way i didn't talk about this with the modern homepage i got so excited that i didn't think to bring this up if you do download the templates you can always come over here click this little gear in doing so go to import landing page and then once you are importing landing page you'll just upload the zip file of the template and that'll automatically put everything here for you and then in that situation if you do like everything that you're seeing with the template you can just click on the image change the image click on the words change the words and make those slight changes instead of having to design things from scratch and if you like certain portions of it you can also for example let's say let's say you like this whole section right here right you like this whole section you think everything else here is trash so you're building your own website you're like hey i want this section so what you can do is go to the background section click save right here save it as a template itself so i'm using template almost you know in two senses here to where you have the zip file template for this whole thing for this entire page but you can also have like these little section templates to where you can save this and then you can go over to maybe your modern home page edit with thrive architect drop in the template block then once you drop in the template block make sure you select this save template that you saved over here keeping in mind that if you are already editing this page then you're going to need to save and exit it refresh it because the system needs to refresh that this was just saved on the back end and then once you end up you know refreshing it edit with thrive architect one more time drop in that template and then the template that you dropped in that block will take you to being able to select what you just saved over here i could have shown you that but i think it would have actually taken longer than this explanation i just gave you which is basically a step-by-step explanation so speaking of step by step let's look at what's going on here so we have our image we have our column we have our columns then we have our background section the background section is what is holding this photo in the back let's go to the background style here this is where the photo is i uploaded this photo you can see it right here i can move it up and down i'm going to cancel that then i added this gradient to help it fit the color scheme of what this entire page is all about that sand slash gold and black color that we have going on is what this radial gradient is you can see because it's radial it starts in the middle it kind of goes out and you can make the changes to this this and then slide what you want to slide and make it be whatever you want it to be but in doing so by me adding this black it allowed there to be more contrast between the photo and it allowed there to be more contrast with this particular word of focus instead of having that same sand color right behind it to where you almost have a color on top of itself which makes it really hard to read and it also makes this white pop a little bit more and so when it comes to like photos and things like that if you're putting images if you're putting text on the photos try and figure out if you need to drop another layer on top of it in order to add a little bit more contrast so things pop a little bit more here i just went ahead and dropped in a content box and within the content box i dropped in the columns i selected three columns and then i just started dropping away to where here we have an icon that i dropped in here you can tell with layout i ended up pulling that that icon all the way up to negative 34 which has that little overlap going on added the icons that i wanted to add and then ended up dropping into text and a text there you may want to maybe put a hyperlink here or i wouldn't put a button i think having a button on these three things whenever you're overlapping is there's a lot of going on you'll have a button here and a button there and a button there and a button there that's that's a lot of buttons so um if you want to add a hyperlink that maybe takes people to where it needs to go you can maybe do that maybe add like a like a carrot or something to it but this this was super simple to make it was all about with the content box moving that up as well to where there is that overlap on top of this background section as a whole which adds that depth to it which gives it a little bit more of a professional feel totally i even though i don't have this for my law firm if i ended up making a change it probably would be something like this and with the text right here i ended up just going to animation in action zoom in did the same for this one i dropped this fill counter from over here there's the fill counter option made the changes necessary keep in mind these are within columns that are within a content box that's within a background section and then finally it's just a matter of dropping in a contact form as you can see you can type in contact you can select a contact form right here drop it in edit how you want to edit it change the colors how you want to change the colors you can on on this end over here determine what is required what isn't in other words if somebody doesn't want to give their name then you can make that not required but this is really critical information then it's something you can make required but in my situation i don't have a contact form because i push everyone to the quiz slash funnel that i have to where once everyone goes through the quiz it helps determine whether or not i can help them that way i'm not getting these messages to where it's like can you still take this case even though i know you don't handle cases typically like this and so what ends up happening in my situation is they go through that funnel and then they end up getting an option very similar to this but we'll flesh that out in a future lesson the point here is that once you do set this up and you are able to get it set up figure out exactly where you want it to be on your home page and figure out if you want to maybe have this contact us do a jump link let me get this out of your way you want to have this contact us do a jump link all the way down here and then that'll help make it a little bit easier for them and then you want to make sure that this is connected to whatever email you want it to go to all of this can be you know figured out and sorted out over here and then that way you get it set up and all in all this is very similar to the modern one i tried to keep it modern um in general but as you can tell it does follow that traditional feel i've you know squished some of this information up here to where as soon as it loads you are just jam-packed with a whole bunch of style um and then there's just you know more more information going on here so the big takeaway here is that it's all about getting comfortable with thrive suites and that just takes trial and error practice and it really does help to look at other examples to have goals and that way you're not just tinkering left and right aimlessly but you're able to try and tinker with a mission you're and i've never said tinker this much but here we are i'm just saying it left and right you're editing you're making changes with a goal and you're getting closer with each and every tweak and tinker and so my recommendation is as you can see it's all about figuring out exactly how you can build it by putting these building blocks on top of one another making the changes on this editor on the left and ultimately building the website that you want to build and that also continues in the next lesson if you have any questions at this point in time be sure to leave those questions comments concerns down in the comments section here on law venture happy to address anything that may pop up and if you don't have any questions comments concerns or even thoughts then i'll see you in the next lesson