How to Make a FREE Carrd Website (with multiple pages)

hey everyone this is tony teaches tech i’m tony and in this video i’m going to show you how to make a card website with multiple pages for free let’s go ahead and get right on into the tutorial here and i am logged into my card account and i am in my dashboard i don’t have any websites as you can see here let’s go ahead and make our first website and this uh if you’re interested in creating a multi-page card website i’ll have that after we make a basic website just so you know that just so you know the basics of using card because i wanna i don’t wanna just throw you right into it so.

let’s make a simple website first and then let’s make a multi-page website after that feel free to skip ahead if that’s all you’re interested in anyway this is the templates that you have available we’re looking at all of them right now and there are dozens and dozens of these templates i’d say about half of them you have to pay for as you can see pro in the upper right hand corner but the other half are free and you know you can look in through here for one that really resonates with you but for me for this first one that we’re going to be using i’m going to pick this one right up here that says.

Channel So Let’s Go Ahead and Select That

henry chase it’s just going to be a landing page for some social links for me for my tony teachers tech youtube channel so let’s go ahead and select that and this brings you into the user interface where you can actually design and modify this template so right off the bat let’s just click on the title here we’re going to change that from henry to tony florida we’ll do tony tony teaches tech to stay on brand and that did wrap around to the second line but it’s really cool a card is really cool really easy to work with so you can just bring the size of the text down a little bit and if you don’t.

like the size of the the fatness of the letter the weight of the letters you can change that make it a little bit thinner make it a little bit fatter you can pick a different font i’m going to stick with this because i actually like it this kind of matches with my logo now to begin with anyway let’s go ahead and save that i’m going to edit this text down here and just take note of what tab you’re on so this is the appearance tab i’m going to go back to the text tab i’m going to select all of this and say hi i am tony i teach tech check out some of my links.

below you know something something like that you can put whatever you like um and then we will i think i will change the font for this let’s pick something more like techy a good techie font is curry or new and i like that i think i want to make it a little bit bigger um a little bit thicker and i want to get rid of that spacing in between each line so that and i want to i don’t really like the fact that it’s justified i want it to be right aligned so i’m sorry left aligned there we go that looks better okay so i like that i’m good with that this space over here.

So I’m Going to Click on That And

is for an image so i’m going to click on that and upload an image i’m gonna go on my desktop i have a tony teacher’s tech folder here and a headshot of me not the best one but it’ll do just gonna pick my head here bring this in a little bit so something like that and we’ll pick that and yeah that looks good always make sure you fill out your alt text i’m going to say tony florida head oops tony flair to head shot and if you did want to link this to a url you can do that here so that looks good i want to change some of these social links i don’t have.

twitter so i’m going to get rid of that i don’t have instagram for for tony to just text so i’m going to get rid of that and i’m going to get rid of unsplash for the email i’ll keep that i will say mail to tony at tony teaches.tech and let’s add another one let’s add a youtube channel so let’s down here that’ll pick the youtube icon and i can i think yep i have my youtube link over here so copy that and paste it in here so this is my link to my youtube channel um let’s go ahead and add another one let’s do one for my wordpress website i think they have a wordpress.

in here yep so there’s the wordpress logo and this one would be http s colon slash slash tony teaches that tech and if you don’t like that order and i don’t like that order you can rearrange them so i’ll put my youtube channel first up top here and then my wordpress website and then my email at the bottom so that looks good as far as this card is concerned um let’s change the actual page so if you click on any of this outer space here i want to use the logo colors my logo color so i went ahead and wrote those down over here earlier so this is a gradient right so we’re going to.

This Is Going to Have Less of This

go from one of my logo colors which is this to another one which is this oops it’s not that this did i copy that wrong maybe i have the wrong color here so that one oh it copied the same one so from here to there okay so it’s like a darker blue to a lighter blue and you can do it’s really flexible you can do a lot so this is going to have less of this color and more of the dark color and vice versa so something like that looks okay and you can change the angle have the darker at the top darker on the right coming in from 45 degree angle anywhere you really.

wanted to so i think i’m going to do darker at the bottom right hand corner and lighter in the upper left-hand corner so um there’s there’s much more you can do than what we’re doing because i want to make this not too you know design heavy but you can change it to look like noisy and add these squares and all these other options so but we’ll just keep it simple for now and do something like that so you know not not my best piece of work but it gives you an idea about how to use card let’s go ahead and see what it looks like on a mobile phone that looks good maybe we can.

adjust the chain a little bit but you know it gets the the point across here so back to a desktop view when somebody views it it’s going to play that animation we’ll look into animations in a little bit but for now that’s good enough for this first website let’s go ahead and publish it so the title of this is going to be tony teaches tech card you know call it whatever you’d like in the description um let’s just say social links for tony teaches tech now this is a point where if you’re okay with having a dot card dot co url then you’re fine you’re going to be able to use card for free but.

Dot Co Let’s View the Site and That’s

if you want to use your own custom domain name that’s when you’re going to have to upgrade i i think the prices for card are super cheap like you’re paying 19 a year i think and that’ll give you this ability um to have a custom domain name but for now i’m just going to use the free version so tony teaches tech dot card dot co and that’s the link that i’ll be able to share with other people so i’m going to publish that and within a matter of seconds i should have a website to show so here we go tony teaches tech dot card dot co let’s view the site and that’s exactly what we.

created in the user interface in the previous steps so that looks good let’s let’s get on out of this and go back to our dashboard so we can do that right here and now we have our first site in here so like i promised i want to show you how to make a multiple page website this the one that we just created is just like a landing page it’s a page to share links on um let’s make it a little bit more complicated and have multiple pages so let’s make a new website click on new site up here and i think it is just for the ease of this tutorial and on you as well.

it’s good to start with a sectioned a template okay and this is going to make it a whole lot easier for us to make our multi-page website because that’s what each of these templates are about you know you have your about your work your contact over here work about contact same type of thing so we’re gonna pick another free one i think i like this one over here and let’s just do a demo real quick just to show you how this works so this is the home page you can look at his work here so that’s going to take us to the work page and you can see some pictures about an about section and.

Of There Let’s Select This and Now Same

a contact with uh some more social links so that’s what we’re going to shoot for let me show you how this all works so we’ll go back to that open in a new tabby i did so we can get out of there let’s select this and now same as before we can just come in here and edit what we see so kind of like that hello at the very beginning this is this is not going to be for tony teaches tech this is going to be like a travel a travel landing page so i’ll say hello my name is tony um i think actually i already wrote this no i i i wrote some of.

these sections beforehand to save some time uh let me just write something real quick here for the home page check out my travels you know something simple it could be we could be more complicated than that but for now that’s good um my work section i’m gonna change this to travel okay and um let me explain how this works so you have these sections right here and i don’t think that’s the terminology that they use uh they use instead of sections they use uh controls okay and so they have this control right here this right now is named work okay i want to change that to travel and the linkage from that to the button.

Here I’m Going to Find the Work Button

down here for work is exactly that so when we click on the the buttons down here i’m going to find the work button and instead of saying work we want to change that to travel and we want to change the link from hashtag work to hashtag travel so that will hopefully give you an idea about how they link up so we have the travel what was it called again the travel control linked up to the button down here the travel button via the hashtag travel link the url okay and that’s something that’s actually built into html if you’re curious that’s how you link to a certain part in an in the same exact page um.

you can add another sections here so let’s add another section and that’s just gonna uh bring another and actually when i say section i should have said button we’re gonna add another button let’s say um let’s call this travel tips like that and let’s make a link to another section in our page which is going to be travel tips okay and right now this is if you click on this this isn’t going to do anything so we have to add another um i can’t remember it control so let’s let’s uh let’s get rid of the the contacts section actually let’s keep the contact session let’s just add after after or before the about section we’ll.

About So Let’s Go Ahead and Rearrange These

add another control and this is drag and drop as well so up here we’ll put it above the about section and instead of calling it section o5 we’ll call it travel tips okay travel tips so now that button travel tips will take us to that section and if we want to keep this in the right order we have travel travel tips and then about so let’s go ahead and rearrange these buttons down here so travel travel tips and then about so we’re all in the same order here i don’t like how that goes on to the next line so let’s let’s see if we can change that the width of these buttons a little bit.

better we’re on one line the height doesn’t really matter we can make them more square or more rounded depending on your preference what does the size do that’s the font size so we want to bring that down and i think bring the weight up to make it a little bit bigger so that looks good we’re all on the same the same row here okay so let’s go ahead and start editing some of these sections in here i’m going to change we’re going to work on the travel section here so i this is where i did write some of this information in here let’s see so this is actually i have some i’m gonna type this.

Have So Let’s Upload Some Pictures and I

one so check out some of my photos from around the world okay and this is where we’re going to add into this gallery some pictures that we have so let’s upload some pictures and i have another folder on my desktop that is called tony florida and i have all of these folders or all these pictures so i’m going to upload our picture from australia and we can make this you know a nice square around me here we’ll accept that cropping and we’ll call this one australia do the same thing for the next one upload we’ll do india making a nice square around me same type of thing except that we’ll call this one india okay.

and then i’m just going to keep going through all of these add my pictures so you don’t have to watch me we’ll fast forward okay and i’ll do the last one here i ran out of pictures and actually add one extra one here you just have to simply click add to add another image to the gallery same type of thing upload we’ll do the last one here vietnam and we’ll crop this guy right like that that looks good we’ll accept name it the appropriate name v-i-e-t vietnam and we are good to go as far as the travel section is concerned so oops i spelled that wrong n-a-m am good okay so that’s good let’s say.

Up Here Let’s Add a Picture Same Type

done for the travel section so we have the home section here oops forgot to add a picture up here let’s add a picture same type of thing we’ll upload i think that’s up a level here my headshot from my face face all painted except that looks good for the home page homepage good travel page good travel tips let’s work on the travel tips section so how do we add any elements in here well there’s a couple different ways you can either take an existing element like this whoops like this and you have this copy section down here so we can copy this directly and do the same type of thing drag and drop up top.

here and i’ll rename this to travel tips and then if we don’t want to if we have an element that we want to add that we can’t copy we can click the plus sign up here and i want to add a um i just want to add a list just let’s add a list of travel tips and we’ll say something like stay in hostels not hotels and these are like budget travel tips and then take public transport and then what’s one more um don’t always eat out you know something like that and i can take this element and drag it on up here to the travel tips section and there we go that’s now in.

Here Let’s Change Some of the Appearance

here let’s change some of the appearance of this we’ll make it um let’s make it well it’s but we want to bullet list but we want to change the text let’s make it a white color white text and i want the size to be a lot smaller something like that the weight um that looks good i think i’m good with everything else so here’s our travel tips just three tips for now just for an example my about section moving right along we’ll get rid of that we’ll put my actual about text in here and i did not copy that correctly so copy again we’ll paste that in there there’s my about section and contact uh.

same type of thing uh do i have anything yeah i do let’s copy and paste that in there i love talking about travel so please don’t hesitate to reach out to me and i was planning on putting all my travel links in here but i’ll wait until after this video because i don’t want to waste any of your time so same type of thing that we did in the beginning of the video if you didn’t see that go ahead back and watch that but we can add our social links there let’s go ahead and test this out so on mobile this is what it’s going to look like well just to give an example it’s.

The Desktop Let’s Go Ahead and Save This

not going to exactly look like this but back to the desktop let’s go ahead and save this give it a title so i’m going to call this tony travels description tony travels card page something simple and then the tr uh the link is going to be tony travels or the domain name i should say do we have that one available yes we’re good to go all right publish it let’s see how this looks as far as a multiple page setup is concerned uh just a few more seconds until this publishes and i think you guys will be impressed by how straightforward this is how simple it is to create multiple pages once you understand that.

concept of linking from a button down below in the footer to up top in your individual sections so this is working working away 29 30 we’ll get there all right 98 98 98 all right there we go so we have our domain name tonytravels.card.com let’s view the site and there we go so we have the home page here if you click on the travel section this will take us to my gallery with all of my images from around the world my travel tips section we have you know my three tips i can give you more than that but for now that’s okay about section just a quick blurb about um about me and then the.

Contact Section Which We Did A

contact section which we did a little bit of work on but i can change up these social links after this tutorial guys if you have any questions about creating multiple sections in your card website let me know in the comments below i’ll do my best to help you out i have some other videos over here about how to create free websites without paying for hosting or anything like that so check those out as well thank you guys for watching i’ll see you in the next video [Music] you.