hey everyone Simon from PDF monkey here today I'd like to show you how you can create a template in PDF monkey so the first time you will connect you will be presented with an empty templates list and the first thing you want to do is create a template you will be presented with two choices code template or visual template the visual template is more for simple cases like a certificate or simple document where you have a background and you you want to Overlay some textt on top of it um you won't have access to Advanced feature for templates like conditionals Loops or even data transformation um so for this type of cases you will need a code template um we do provide some master templates which are default templates that you can use and customize to your needs or simply you know look look into for um inspiration now I will go with the blank Master template because I want to get started from scratch so I will give a name to my template and create it when you enter the editor you will see two things on the left is the editor panel on the right it's the preview panel in the preview panel uh you actually see a real PDF so it's not a web preview that will be different from the end result on the right what you see is what you will get if you use the same template with the same data on the left you have several tabs the HTML tab the CSS tab the test data Tab and the settings tab so in the settings tab you can uh change the name of your template change the retention policy so if you want to have your documents deleted after a specific amount of time uh you can also change change the orientation the layout and margins and some other options uh so let's go back to the HTML tab here is where the body the structure of your template will live so that's where you will spend the most time um so let's get started and create a very simple template uh that just says hello and when we save we see that the preview on the right does update uh but that's not very interesting at the moment because there is no um Dynamic part to it so let's add a name to our template so right now if I save nothing will happen because there is nothing to show for this um so I will go in the test data part and I will add a new name so let's say Jane and when I save I will see Jane appear and that's good um so okay now I have I have the base for templates um but I what I would like to build is a template where I see a card and um depending on the choice that's made by the user I will display a different image I will use a different background and Border uh I want to show the name of my user the age and the choice that they made um so I will start with today because that's what will give uh the information to the template um so I want to get the name I want to get an age um and I want to get a preference okay let's go with unicorn and in my form let's say um I added three choices um dinosaurs unicorns and both um so here I can comment my template and display the other options that I provided just for reference let's go with dinosaurs and U let's get PL and both okay now if I save my template nothing happens because I didn't change U the HTML part and I would like to display a different image given um the choice that was made for preference to do that I can use an if statement if [Music] preference is two equals here unicorns I will have a specific image if on the other hand I do have dinosaurs I want to display a specific image for dinosaurs and lastly if no choice was made or if both is selected uh then I will have a different image now I could in each condition have uh an image tag but I don't want to do that because I want to specify a width I want to specify maybe a style or something like that to my image so usually what I will prefer is assign a variable here that I will then use as the source of the image so that's what I will do here I will assign an image and I will say I want to use no that's the Unicorn so let's go with unicorn and do the same for dinosaurs dinosaurs who will use the T-Rex image and lastly for both we will use the unir Rex image okay so now that I have my variable I can use it as the source for my image so let's go and do that and let's give it a width so it's not too big and right now if I save nothing will show up um why because I didn't specify where my IM my image were located and um usually what I recommend is storing them in something like F3 or R2 a public space where you can easily access them um and here what I want to do is also specify the path in a variable why because usually when you build you know a rather big template you will want to reuse the paths in the path in several places so what I I want to do usually for this is have a variable that will store the path so let's here um Define a variable called assets you can name it however you want um but I like asset because it's short and here I will put the URL the folder where I store my images okay and then I can use my variable here and save so now the picture should show nice and now to achieve what I want to do to have a card with a nice border nice background uh change the color of the background and Border depending on the choice uh have the name of the user have their age have um list of preference I like to use tawin CSS to style my templates because I found it's a very good match with the templates um system from PDF monkey so I'd like to have both of them work together so to do so I will import on the latest version of twin CSS we do provide a version that you can load even on the free accounts um but for the images for instance here I'm loading them from an external source so it's only part of the paid plan so let's go ahead and import Tailwind so here I will use the latest version that we host and I will Define a style tag that I will use later on to um customize my theme so it needs to be a type text Ta wind CSS and here I will Define the structure for for the Cod so let's go with a div with a class of uh let's give it a width uh Max width so let's go with LG let's Center our content um a bit of margin at the top maybe and let's go with a rounded border and a border of wa yeah four is good um okay and maybe let's Center our items within it okay and now let's add the information that we do want to display like um the name of the person if I can top right type right age and lastly the preference okay and uh what I would like to have is um the name in a Big Font so let's go with that text 4X should be good enough with the Bold font let's also add some space [Music] here and maybe text LG is good all right and now we should see something that looks pretty nice okay so what I want to do is um have the contents on the right of the image so let's go with a flex and also add some space between the two okay okay and uh let's also add some padding now what I want to do is have a different background and different border color depending on the choice so I will go back to my conditional here and assigned new variables for this so I will assign the BG for the background and let's use for unicorn BG ping uh 100 for the background and for the Border I will use uh let's say uh border um yeah pink and 400 is good let's duplicate that and here we'll go with uh let's see dinosaurs let's go with emerald and here we can go with Canan C is good okay let's see here we will use the variables on our container and let's save and see what it looks like okay pretty Co and now what I'd like to do is have the name displayed in um handwritten style font so I will import a web font here you can import web fonts from Google phones or other selfhosted version or other um Services I will import mine from bont which is a gdpr compliant alternative to Google fonts um I found a web Fone that I liked I was good for this example so that's where I will extend my um Tailwind CSS theme and I will add a new font variant um so let's call it font hand and just rename it and now I can use this name oops this name for the name part here and yeah we can see it's used I think it's a good spot to stop the tutorial here um I will go deeper on some subjects like conditionals U looping and other PDF monkey features in later videos don't hesitate to like And subscribe if you like this type of content and we will produce more um in the meantime have a good one