Discover Our Website Invoice Sample for Engineering Needs

Website invoice sample for Engineering

test123 test hello everyone and welcome to this live workshop so a couple of days ago or last week we actually started a small challenge for for fellow plutopians to share with us their favorite uh invoice templates and the challenge is for me to actually replicate a design of the uh one that has the most likes so we actually have a winner invoice which has been shared by marcus on our community page and the idea of this workshop is to go and replicate that invoice design and rebuild it into pluto using the new design editor that pluto offers so i'm hoping this workshop would last about half an hour to 40 minutes i've not done this design before so let's have a look at a design and get started and see how we can actually replicate that simple stunning design using the pluto design editor okay so i'm going to share my screen now and we can get started so just for your information this is the design that i'm going to try and replicate and um it's as you can see it's pretty simple but it has a little bit of um if you look at the very top here there's like a grid so we show contents next to each other and it has this content inside a block which has a different color and there are some certain elements here that for example the the total is highlighted with a black square and then we have a total again right here and all the details at the very bottom so we might need to use a little bit of css to make these certain things work but almost everything else should be doable using the options that the design editor offers okay so i'm gonna go back and forth to this page just to to reference as i build the the the invoice so let's get started um and if you have any questions i have the chat opened right here so you can ask me anything and i'll try and respond in real time or towards the end of this workshop so i'm going to go now into my my pluto account uh just so you know once this template is designed i'm gonna actually publish it on the templates library so it'll be accessible to everybody to use for free okay um so what i'm gonna do now is i'm gonna go ahead and create a new invoice so what you will notice here is i already have an item section the total section and i have the header this is the default header that we have which basically has the invoice default details and the to and from sections the contact sections now to create something custom like this with a custom header like the design i showed you earlier on um with the with the custom header on the top we actually can't use this default block so what i'm going to do now is i'm going to go ahead and delete that default block and then i'm going to add a content block so if you click on this plus icon here and then choose the content block and then here it is so what i'm going to do now uh hold on my chrome just froze fantastic so i'm going to refresh it i'm going to move this down here well this is embarrassing um chrome just froze i'm gonna try and refresh and hopefully it would load back up okay it's loading out hey hey mike hey everyone um as you can see you can see the chat on my screen as well so um you can see what everyone is talking about and you can share this conversation all of this chat is going to stay even after the video has ended for the records okay we're back online now thank okay that's fantastic okay so what i did just to summarize is i deleted the default contact section and i added a content block now what i'm going to do is i'm going to go ahead to the grid option here we go and i'm going to choose a 2 grid so the first option in the list so now i have a two great block right here so looking back at the design um i think facebook is not loading my end but i believe the design i showed you earlier on um had the logo just right here so what i'm going to do is i'm going to click on this block and then i'm going to click on top um this button shows yeah fantastic so i'm just going to put a placeholder for now called logo and then underneath here we can actually add the details design is not loading for me so just bear with me as i try and load this up on my phone instead as you see uh i do need a new laptop okay so just loading up the design on my on my phone instead okay fantastic so i have it here right so um sorry i'm just going to go ahead on facebook and try and find that post sorry about that here we go let's see hopefully it will load up okay it's loading up quickly now so it should be fine okay here we go the design is back here so we have this block here which basically contains the details and i believe it's the client details so yeah the bell is to our client name and so on so i'm going to try and replicate that here so what i did is i created a grid system and i added two grids so the first one we're going to add two can add two and then i'm going to add a variable which is the client name see variables are fantastic because you can actually um sort of you know if you don't know about variables they're amazing because you can create templates and you then can apply these templates and with variables the detail will automatically be be replaced with the client details that you just assigned this invoice to or proposal to so we have two client name and then let's say client details like email address i'm just gonna move this away from here so email another variable so we'll have the email address down here great and maybe just adds a phone number so you can add as many details as you want but for the sake of this webinar i'm just going to add a couple a couple information such as the name the email and the phone number phone number there okay so we have three details here that will be enough i'm going to make this bold because it's like the client name and it'd be like the header of that section and then here we i think that is i'm going to take screenshot of the design so i can actually close facebook as it's not loading my end but bear with me i think here we had um it says invoice like that and underneath that we had issue date and we had date and invoice number and as well i'm going to be using variables here as well so i'm going to go down to the invoice section here we've got the invoice number and for the in the issued date i'll add the issue date right here i'll show them underneath each other i'll make this invoice a big title i'll be able to customize it a little bit late later maybe actually make it big so invoice like that so we sort of got the basics here um and i'm just going to go go ahead and style it before we can add more details just so i can show you how we can actually make this work so bear with me okay so i've got design here nice so now i'm going to go ahead to the design editor and as you can see the options sign option has just showed up on the right hand side so i'm going to go ahead now and start so what we're going to do first is we're going to play around with the background color so i'm going to change the background color of the whole invoice to i think it's a bit off-white so not completely white so i'm going to try go ahead and try and get that white off-white color i'm gonna copy the color from the image so it's easier to get accurate color and then here we have the text color i'm going to keep it black for now just so we can see things clearly before go ahead so what i'm going to do is i'm going to click on this block the first block is where we're going to start and then i'm going to go ahead and add css to it it's the only way to actually create that block around the section which you're going to see in a second so i'm just going to open the inspector i'm going to talk to you through how this css works so each block has a content block class if you're not familiar with css it would be pretty easy to find this so you just inspect the elements and hover over the area that you want to edit and then it will give you the name of that container and i'm going to show you how you can actually customize it so what i want to do is i'm going to i want to go ahead and straight into this section right here this one this grid cell so i'm going to click right click and then copy and then it should say copy um i think it's copy selector and then i'll paste it right here you paste it right here but you don't need all of this so what i'm gonna do is i'll get rid of the majority of it and i just need inside what is what's inside content block as you can see here i'm gonna actually move this down so it's easier for us for us to see what i'm talking about here we go so i'm gonna move down here okay awesome so this is a class so now i'm gonna add a background color black let's see if that works if it didn't just need to remove some of uh here we go okay hold on there's a lot of things here that we don't actually need and if you struggled so this is something you would actually come across if you're doing css and it comes you know to debugging so what you would do you should go back so it made the whole thing black but i don't want that what i want is i just want one section of it so this one this grid um grid cell so what i'm going to do is i'm going to have to type block body which is this one and then inside it we have the text editor and then inside it we have the gonna go i'm gonna sort of um ignore these or skip them and just go ahead right here and then there's a grid so there's div that has grid and then inside it there is a grid cell and i want to target the very first grid cell in that grid so here we go here we go so it turns it black because i only want this section to be black now i'm going to add a little bit more styling to this section so what i want to do is i want the color of the font or the text to be white and then i'm going to add a bit border radius border radius five pixels let's say just to see and now i need to add some padding so padding say um nine pixels see how that would look okay we need a bit more padding to make it nicer so let's see 18 pixel okay that is a bit nicer go to 20. fantastic i'm going to turn the radius down now i'm going to try and copy the colors from the design i showed you earlier on so i'm going to try and copy these colors just bear with me so templates should be once you have a template it's pretty easy to edit the the colors of that template um so i'm just going to copy that color nice i've got the color with me now so instead of black i'm going to turn this here we go so that's the color i want and then the off-white color i'm just getting it now from the design there we go so i'm gonna now go ahead and click on settings and then go back to the design so i can open the main design options of the actual invoice and i'm going to change the background color to be a little bit off-white like the one you just saw now the block style so the color the background color of each block i'm going to also change that to be off-white as you so here we go nice now i'm going to go back to this section so you click on it to open it up and then i'm going to go down here so i'm gonna add margin right 20 pixels just add margins between these two sections here actually that will work um because what i'm gonna do is target the second cell so change this to two and then padding left 20 pixels fantastic so that seems to work here we go so here we go um i'm gonna open up this design in here okay so this is the design just for the reference for people who've just joined us here is the design that we're trying to replicate and so far here's where i've got i'm just playing i'm just playing with the header right now so we've created this block um with the content inside it this content and we have the section here i'm going to try and style it by i'm going gonna create this three grid system and add the content um the invoice details inside it instead of the way we have it right now so to do that i need to exit the design editor so i'll go back to the settings which will take me to the actual builder so now i will just copy this content here so i don't have to type it again and then i'm going to go ahead and click on grids and add the three grid option right here so it should see the three great options so i'll add invoice here's the issue date yeah nice and then i have the invoice number i move it to the second great there we go and then i think they had a third option um let's see what we have in the variables menu so here we have due date so we can actually have that here so here's here we go so due date i'm gonna remove the invoice uh invoice number so we only have the due date two to eight nice so we have these three options i'm gonna see if i can make this uh column a little bit smaller so i'll go ahead and go back to the design editor now okay so now i'm going to try and make the first one smaller so width would be let's say 40 percent all right here we go nice so i'm going to make a little bit smaller even so i'll say 30 that's that's better now if you notice what happened here is that this block inside also had the same styling as this one and that issue is because um this grid is inside this grid and the way i sort of selected it in css is not absolute it's relative so what i'm going to do now is i'm going to change to an absolute selection what i mean by that you tell the css to target a specific element and not any element that might have the same class as as the parent one so to do that is very simple i go back to here's my css the one i typed in and if you go back here you can right click inspect you can see the elements that you want to target so we're going to go inside block body and then text editor so what we're going to do is we're going to copy this ck content and just after the text editor i'm going to add it and then i'm going to add this little simple here so in theory that should target the first this element only if that didn't work then you need to do it even more absolutely so i'm going to just copy ahead copy everything before it so block body text editor we have go back to the settings see if that will refresh the page okay so that didn't work um so if you're doing any custom css you will expect to do this sort of stuff because obviously it's custom something you know that we don't necessarily offer by default or any tool offered by default so i'm going to try again and target only this section and to do that go back to the css here and target this block inspect elements block body text editor and then create cell so this one nice okay great so i'm going to copy this back here so we've got grids great cell grids just won the first one i see you okay so what i'm trying to do now is i'm trying to target a grid cell that is inside a grid cell to try and remove this um so this is a tricky one thank you marcus for getting getting me into this um difficult situation but we will get it sorted so okay let's let's think differently um okay so grid three so if i did say grid grid three i hope you got it right okay so i couldn't really um relatively or absolutely select this one so what i'm going to do is i'm going to go ahead and inspect the element again great cell here i'm going to target this specific one copy go ahead here hopefully this one should work i'll talk you through what i did in a second okay so i'm stuck here thank you marcus again for suggesting this difficult template um but it should be should be actually pretty easy to do i'm just not 100 sure why this can't i can't remove the styling of this particular one i'm gonna try yeah i'm a bit stuck here so background color basically we're trying to do here is only give the first the first block a background color and the second one no background color at all um okay so what i'm going to do i'm just going to skip this for now and leave this difficult bit to the very end i'm going to go ahead and customize everything else so in the design if you go back to design we have the invoice title is a little bit big so i'm going to go ahead and make it bigger so click on here and i think this is an h2 yeah fantastic so it's an h2 so i'm going to do h2 um font size so one side point size let's say 2 em i want to make i want to make it quite big yeah here we go so maybe it actually can go to three even make it even bigger yeah something like that that's nice so i want to remove this margin on the top so it sort of aligns with the box right here um by the way you know you as i mentioned earlier on i've used variables here but they currently do not show in a preview but i want to show you how things will appear so i'm going to remove variables but you should use variables i'm just going to remove them so i can show you how things actually appear so i'm going to hard code the client name so let's say client name goes here email will be client at email.com and then here we have the phone number so i can just you know add anything just so you can see what we're talking about and the invoice date i'm gonna add zero zero to zero zero just so you can actually see you know just placeholders so we can get this design completed it should date same thing fantastic so we have actually i'm going to change this to say id fantastic here we go okay so we've got data in here so i'm going to go back to design editor now now you can actually see a little bit clearer what i'm trying to do so okay there is a little bit of text i'm going to remove from here right okay so back to the design editor here what i'm gonna what i'm trying to do is remove the margins on top so the um the text is aligned with the box but before i do that i'm gonna change the the color of the text so it's not dark but it's really really dark it's not black but it's really dark brown so i'll go back to the settings here and design again and then i'll click on text color which should change the text color of all the blocks so now it's not necessarily black it's a little bit it's a dark brown color that goes with the off-white that we have in the background right here so okay back to this this is back to this particular block which is the header block so the invoice okay um going to the css selector down here we've selected the first block fantastic okay each one so margin top i'm gonna add margin and i'm gonna remove some of the margins so it goes up here we go so it's going up now as right now as you can see okay so that's that's great now i'm gonna add a little bit more padding to this particular section so that's a bit too much actually so maybe say 50. that's that's nice okay great and now i'm gonna attempt one more time to remove the background color right here fantastic okay that's that finally worked um okay color same as the parents here we go or actually inherit which will inherit the main the color okay important see if that change things okay great and padding zero fantastic we're getting there so as you can see i'm gonna go back to the invoice now the design that we are referencing too so we've done this block here on the side and then we have the invoice details on this side um you can try and move so i'm going to go back to the builder and i'm going to try and remove uh the the inline here so i actually have them underneath each other instead okay here we go that's much nicer here we go fantastic that's awesome okay great now i'm gonna add a logo here to the very top so we can actually start visualizing um the design of this invoice actually instead of from particularly an i mean i can add an image i can add to the same image but i could just for now let's see if we can find a logo using the search functionality here inside pluto just for to show you how you know how it appears so type logo see if anything would appear in here that we could potentially use ah not really okay so in that case i'm just gonna type something so like a logo and i'm gonna make it pretty well big enough um for preview okay not that big i'll add log at the very end so you can actually see it but just for the sake of visualizing it okay fantastic so we have the invoice title invoice details down here and then we have the client details just right here so i think um the design is now very similar to this um so what i'm going to do is i'm going to move forward and start designing the items list and you know go ahead and do that and then we can maybe go back here and polish it up a little bit so it looks a little bit more like this so now go to the item section so what you would do is you click on items actually we don't have any items so i'm going to add i'm going to use a template that has preset items just so we can get this webinar going so i'm going to click on the plus icon and i already have an items template which i'm going to apply um i just got a question yes this is a template basically what i'm trying to do is i'm trying to replicate this design inside pluto using the design editor and the cs the advanced css access okay so i've just added the item section and i'm going to go ahead to the back to the design editor now here we go here we've got the items i'm going to click on this items block and it gives me options here now what we're going to do is we're going to target some of the um some of these sections so i can change the colors of them it's going to this one this one should be pretty simple straightforward so block body items list so i'm going to add items list items list section content so what i'm what am i doing i'm inspecting the name of the sections that i want to customize the style of and then i'm adding them here so i can target them using the style sheet editor so now this one has a background color so i'm going to remove the background color and we also need to do it from the body so i'm going to copy these and move it down and then target the body of the state of this table then table item i think one more line and we should be fine so here we go you should see the background color disappearing now and bringing in the color from the invoice so table cell nice here we go so now the background color is gone and it matches the actual invoice color what we also need to do is remove the borders on the side so to do that i think it's our cell so uh if we click on border left if we add border left zero see if that works or none so this is the wrong section okay so item list so i'm trying to figure out where um the borders is applied oh okay it's on the table itself fantastic so list content fantastic so copy this section and i just need this none that should be fantastic so that removed the borders from around the table now i'm going to also remove the background color from here the top header so we do so we do something i'm going to copy this and instead of targeting the body i'm going to target the head and it removed it now with the head i'm going to copy and paste so i can target the cells inside the head and you're going to see how similar it's going to look in a second so table cell so i want to target the table cells inside that section now font weight i'm going to make it bold make it a bit bigger okay nice so we've got a little bit bigger now so i'm gonna go back to the design so you can see what we're talking about here we go so there is no background color at all um we removed it so i think there is border so we should add a border now i'm going to try and add that border border bottom three pixels solid here we go nice getting very close now uh text transformation so i want to make the text a bit capitalized i'll show this the right one actually um let me just text transform capital see i think this is the one or no uppercase upper yeah awesome so i'm going to copy this in here so obviously um this tutorial is an advanced tutorial it's not you know it's not to show you how to design a an invoice using the the options we offer right here it's to give you a little bit more real real control over how things look and so we're using css this style sheet block so this webinar is just to show you how we can actually do almost anything using the css so it's getting very very similar now to the design see the text up is all capitalized so it's all uppercase as you can see here same thing okay so um there is also a little bit of border right here between each of the items so i'm going to go ahead and add that should be pretty straightforward so item cells here okay so border bottom one pixel solid and okay so i think we should actually have a little uh not as dark the the border color shouldn't be as dark so i'm going to try and get a lighter version of it i'm just gonna try and get a lighter version of that color see how it works here we go okay maybe even lighter hold on here we go okay fantastic so you can still see a little bit of the line but it's not that you know um dark it's not that prominent okay awesome now um what i want to do is i'm going to go ahead and move down to this section the total section the way they have it here in a design is that they have a block or a background color on the total the grand total section or the the you know the final total of the invoice so i'm going to try and do that um okay so we target this bit so again you can inspect elements so i've just had a question of what extension i'm using to view the css elements and i'm not actually using an extension if you are inside a chrome or safari or any other any browser when you right click on any element within your window you'll be able to see inspect so by clicking on inspect it will open up this window and then that window will allow you to to basically see um the the name the class names of these particular elements that you're hovering over or selecting from here so in this case what we want to do is we want to target the total section just this bit but actually before that i want to remove the borders from here and i'm going to move it right a bit just like we have on a design because it's not stretched the whole um width of the invoice so i'm going to go back here and make sure you click on this block so you can target it and target only on it not nothing else and then from the style sheet block right here you can add the classes to it so i'm now inside here so i'll type block body or actually here we go so quote summary is what we want is how we want to target it so you type quote summary and then called summary summary content which is the second class right here but to make it easy you can copy and paste it so you don't actually get it wrong here we go and now i'm going to try and remove the borders so border none okay the border is gone now the max width i'm going to give it a max max width let's say 500 pixels so okay that's fantastic even smaller we can make it a little bit smaller okay awesome so um maybe the font is a little bit small so i might make it bigger okay no the font is actually smaller in here so i'm going to keep it as it is okay great so now i'm going to go ahead and target the total section so to do that this particular block has a class name so i'm going to copy and paste it as it is nice here we go background color i'm going to use the same background color we used on block total summary block i think we're missing something here oh here we go so there's a little bit i'm missing the y at the very end of summary and we don't need this here we go now i'm going to also make the color of font or text brighter so i'm going to give it a white color i could potentially use the same color as the one we use only background which is off-white instead of white so i'm gonna change this to off-white so it matches the color in the background as you can see here we go nice um i'm gonna add a little bit of border radius just to give it a smooth corner not too much okay great um okay so now if we look at design okay it's very similar here we go i'm going to go back to the builder so i can add a little bit more details such as tags and a descript a discount line to show you how it would look like with these two in the summary block so say five percent discount and 20 tags so if i go back to the design editor now you will notice it's all added and only the total has that background color behind it to make it emphasized so the client can actually you know see it without having to look for it in a sense so i'm going to just exit this style editor just so i can show you what we have so far and i'm going to go ahead and preview this so we don't have any clutter around it so you can see how it looks and compared to the design that we're referencing it too so just for a reference here is the design that we are looking at trying to replicate into pluto and here's what we have so far so go back and forth a couple of times so here we have this uh client details with the block section uh with the background color which we have now and here is we have the invoice details right here and then here we have the items there are no borders on the right side or left side only you know at the bottom and the header has a bolder border width as you can see right here and then we have the summary down here with the total um that has a background color just like this one here now for these details um it's pretty easy so i'm going to show you how we can do that so we're going to add the torch will do again i'm going to go now back to the design editor here to the builder and what you could do is you could add another block here and you could add a content block so i think what we have what we i'm not going to add the total do because we already have it here really so instead i'm going to add these details the name your name your business details because they're not actually at the very top the client details that are at the top so your business details will go down here um as they shown us as it's shown in the design so i'm going to do that now so what i did is i added a block a content block underneath the summary block and i'm going to do something very similar to what i did initially with the header and that is adding a grid so now i'm going to add a grid i only need two so i think what we have here is your you know your personal name so i'm going to try and do that say that's my name i'll make money a bit bigger there we go and then here i think they have yeah the details so they have two grids one for the location one for the details such as phone number and email so i'm gonna actually add another another grid inside here we go another two grids address filling it with anything just so you can see how this is done and then here we have so this will be your details i might try and change these two icons a little bit later see how it look what else do they have here the website url here we go so i'm now going to the design editor exactly yeah you can use grids and nest grades inside them so you can create even more complicated styles so this section is a bit big uh the weight of it so i'm going to try and change this grid the main grid parent grid to click on it again to be like this okay that's better so because i don't need as much space here but i do need it here i'm going to make this bold email phone website okay great i think we've got something nice here um it's back to the design editor and so we can customize it a little bit more okay so what do they have here so um they have a little bit of a border between these two sections i'm going to try and add that there and with this they have the signature and it's pretty easy you can upload it as an image and add it above here so i'm going to actually do that now to show you how it's done so i'm gonna google any signature for now so we can upload it very quickly okay so we've got a few to select from i'm gonna select one with the um i'm gonna select the png one that doesn't have a background so maybe simpler so maybe we can try this one okay fantastic um coming to okay it's too big actually okay here's one we can use i'm gonna download it here we go and then going back to the builder scrolling down to that section and just above the name they had the signatures so i'm going to upload an image here and pick the logo the signature even so i'm going to also resize it a little bit smaller not too big and i'm going to make it show oh you can show it that way but i don't want that let's keep it let's keep it as big as the section is so let's go back to the design editor now so you see how things look okay so um i think when you do is to add some spacing at the top so this section aligns with this section and so the signature is at the very top of them all just like it's on here um so okay let's try that so what i'm gonna do or what i'm going to have to do is i have to make the signature smaller definitely and this section okay so click on the section when you are inside inside the design editor to target that particular block and then we are going to try and do some element inspection like i showed you earlier on so right click to inspect elements and then it will show you the class names of these particular elements and what we want to do in this case is target this particular grid so um it can get a bit a little bit tricky when you have two grids inside each other just like we um you know face difficulties earlier on doing the the two grids here in the header but i hope we don't actually face any of them right now so here we go so we've got this grid and we've got another one inside it here so to target this um we have to go and block body which is this one here the main container and then i'm going to go inside content just like that it's actually better to copy the class names just to make sure they are the right one because the spelling or missing you know one letter can uh you know waste a lot of time debugging it so i'll just copy and paste the class name just to be sure and then we have great so i'm going to target the first grid great so okay so margin top 50 pixels let's see if that's enough nice so what i'm going to try and do now is align them with the name right here so i think give it a bit more margin or a better a better idea is keep that as it is but instead we will be targeting this first grid cell instead so i'm going to do that now and i'm going to give margin minus margin to the signature itself and move it up because we have a lot of space here that we can fill up so i'm going to do that so the first grid okay let's see if this will work so margin top minus 50 pixels oh here we go it's working so i'm gonna even move it even further up here we go that's that's good um go back to the builder i think we can actually because this particular signature has a lot of space um oh okay now we made it smaller so i'm gonna make it bigger and go back to the design editor now okay so i can move it even more and i can potentially make it smaller from here so with let's say 200. okay we're getting there that should do the trick okay fantastic okie dokie so i think that's much better okay so i'm going to try and preview this again see how it looks now refresh just an idea of how things looked on here this is the design we're trying to replicate and here's what we have what we have so far nice so here i think what we could do to make this nicer is um break so add the you know break the address so it's not too long like this i'm gonna try and do that here we go so back to the builder if you if you hold shift and then hit enter it will actually not create a new line but it will just you know break it within the same paragraph within the same line so it wouldn't add that much space and i can actually move this down as well so here that's better okay i'll do the same here let's see how that would look like now that's much cleaner um i'm gonna move the space between or i could potentially keep the address or i can move shift here we go right so this is much cleaner so i think there just one last touch here is that there's a lot of space um between them so if i go back to the builder and i click on the main grid and then do that if i'm targeting the right one okay so um i'm trying to target the main grids but instead what i'm going to do is i'm going to create a completely new one here we go and i'm going to paste this first one like we did and then paste this underneath it and i'm going to copy this whole grid inside this one here nice suspender okay i'm going to delete this one here and i'm going to make this logo smaller because it's actually signature is smaller it's too big with any extra spacing and now we can have a look see how it looks okay that's actually better so if you notice the spacing here is less than it was before and yes anna i've used minus margin on the signature to bring it up a bit so we can actually fill this space and try and align these details together so i'm going to click back on here so i can move the signature back i'm just trying to figure out how to move the signature to the to to far left so it's not central it's not centered here we go so i'm inspecting the elements again to see where the signature is and the clause of that signature here we go this is one um okay um one thing i did that messed this up a little bit is i've or i've um changed the width of the signature so what i'm going to do is i'm going to go ahead back in here and i'm going to make it big the whole width so it's 100 and then i change the width of it using the css here we go so it's all working now i could potentially move it up a bit so it you know so we can get the name aligning with the details right here so i'm going to try and do that and that will be the last touch for this particular section and then we can move forward to another section so i'm gonna move it up a bit here we go maybe even more okay fantastic obviously you can replace it easily with your own signature and you know when you upload your own signature just make sure there's not a lot of space between it so it appears really nicely um i had to pick a signature from google just yeah i can show you how it's done but for you know just for the sake of this tutorial but when it comes to uploading your own signature you can do it um in a nicer way obviously so just going back at what we've done um we try to replicate this design so first we um change the background color to be off-white so not all white i'm going to show you here i'm going to refresh and we remove the default contact header that we actually add by default when we create a new invoice and we replaced it with our own so we created our own custom one and you can use variables to actually um automatically or dynamically pre-fill the the details of the client here every time you invoice someone else so you can actually save this as a template this once i publish it up after this tutorial i'm going to upload it to the templates library and then you can easily use it as a template and expand on if you want you can customize the design a little bit more polish it up a little bit a little bit more to to your likings and then just change the variables to match your the ones that you need in your invoice then it will be ready to go but this tutorial was an advanced tutorial it wasn't about how to use our design editor and the options that we give you by default which are here like padding margin radius shadows and things like that it was more of an advanced how to use the custom css functionality how to inspect elements find the classes of different you know elements and devs within the invoice template and then customize them even more remove things that you don't want and change things that you can't do by default using the design builder or editor so i really hope this was helpful and it gives you an idea of how customizable pluto is um i will be doing another challenge so i'm going to go um in in the next couple of weeks and see pick a different invoice that we can actually customize but expect this invoice to go into templates library very soon in the next couple of days if you have any questions the chat is is live and available now to answer any questions otherwise you can always reach us via the built-in live chat inside pluto i'm glad you found that helpful anna fantastic thank everyone everyone for joining us and i will see you in the next workshop