Transcription
I created a card tutorial several years ago that's still relevant, still getting views, still helping people out, which I think is awesome. But I have received a few questions in those comments, people asking me to show them how to do certain things, and he gave me the idea to make a video showing eight of my favorite features of card that I think everyone making card sites should know.
Some of these are not groundbreaking at all. They're pretty simple things, but very useful things that everyone should know. So I have this card template here. I didn't make this. This is one of the default template options that you can use. I've already adjusted it a little bit by removing certain things just for the sake of this video. It'll make it easier for me to show you things, but it is a pretty simple template with just three different sections, and it's perfect for this [Music] video.
So the first thing I want to dive into is containers. You can think of containers as different sections of a site. So on a typical site that you'll browse, you'll see a hero section, you might see an About Me section, a photos section. On card, we can kind of think of those different sections as containers. So if we look at this template, this is one container, as we can see when we highlight over it. This is a container. Scroll down a bit. This is a second container. Scroll down a bit, and this is a third container.
So on this template, these containers look pretty damn similar. So you might be wondering, what's the point of containers? Why not just continue stacking these elements all the way down the page? Well, what containers allow us to do, if I were to come to this container as an example, come up here to The Styling options, scroll down to color background, I just want this to be a little lighter, right? And then let's say I wanted to come up here to the main container section and then change this to columns because I want this button on the right side. So I'll make sure all the text is on the left and the button is on the right. Obviously, the right column, as we can see over here, is taking up 65%, which we don't want. So let's go ahead and reverse that. 35 on the right side, 65 on the left, and then I'm done with this container. But I was only able to change the background and change these columns because this is its own container. If I was only on the page that didn't have containers, any changes I applied, whether it's adding columns or changing the background color, would apply to the entire page. So anytime you want to create a different section of a page, make sure you're using a container for that [Music] section.
The next feature I want to showcase is scroll points, which are really useful. So I'll come up here to add an element, come down here to control, and add a control element. Now I added a line across the bottom. We want to make sure to change this from section break to scroll point, and then we'll want to adjust. Drag it up here above the second container. What we'll then do is duplicate it by clicking these buttons down here and move this one above the third container. So you might be wondering what this is accomplishing for us. Basically, what it's going to do, and I'll show you in just a minute, is allow us to click a button and it will scroll to this point on the page. But it does involve a little bit of setup. So let's go ahead and rename these scroll points. Scroll point one is perfectly fine, and then this one we'll call scroll point two.
What you'll commonly see on websites is arrows where you might click an arrow right here and it will scroll to the next portion of the page. You'll click another arrow right here and it'll scroll to this section of the page. So that's definitely an option that we could do. For these purposes, I'll go ahead and add an element right under this text, and I'll just add a link. So now I created a link under this text section. So I want to come to this Link's main section here, make sure you click this drop-down menu, and this is where we can actually change the label for this. I'll just put "About Me". And in the URL is where the magic happens. This is where we want to actually put whatever we named our scroll point, scroll point one. So what this is going to do is when I click "About Me", it will scroll to scroll point one. But I want to add another link as well. Now I don't really know what to call this third section. I guess I'll just do a, let's just call it "Ending" for now, and then we want to change the URL to scroll point two.
Now this looks pretty ugly. My OCD in me wants to fix that up just a bit. I didn't do a whole lot here, but at least this is slightly better. So what we'll do is we'll go to the actual site. I'll shift-click this save button to publish my changes, and we'll take a look at the actual site and see what these scroll points actually did. If I click "About Me", it scrolled to the second section. If I come back up and click "Ending", it scrolled to the bottom section. Now it obviously can't center this element because we've already reached the bottom of our page. But if I come back to my scroll point settings, you can actually change the behavior. So if we want it to be centered instead of default, by default when I scrolled to this section, this section was kind of at the top of the page. I'd rather that be centered. Click done. We'll go ahead and save that and see the difference. So now when I click "About Me", the second section is in the center of the page, which I think is a lot nicer.
Another way scroll points are useful, which I use a lot, is, you know, if I wanted to add an arrow at the bottom of my page, let's just say an icon, and we want it to be outside of the container, we just want it in the middle. We'll come up here and change it to an arrow. Let's just say "Arrow Up". Plus this one. If I type in "Home", this is another secret here. "Home" by default will scroll you to the top of your page. So let's save that and take a look. If I scroll now, I click this arrow at the bottom of my page, and it scrolled me back to the top. That is something I use very frequently and, uh, just makes viewing your website more cohesive and just more enjoyable [Music].
Honestly, so if we want to go beyond scroll points, this is probably my most frequently asked questions. How can we create different pages of our website? Now, this actually isn't a functionality of card. Card markets itself as single-page websites, but we can simulate it by creating different sections. If I come back here to edit my site, I want to create a different page. What I'll do is come up here to add an element again. We're going to go with control, but instead of changing it to scroll point, we're going to leave it here where it says "Section Break". We can name the section whatever we want. Let's just say we were going to create a gallery page. We can click done. Now we have a new section. You see this line going across the whole bottom of our page. If we click it and then we come up here to add an element, now let's add a gallery, right? So I added a couple of images here. So let's see what happens when I publish this. If I come back to my site, refresh this new section is nowhere to be found. That's because it's living in its own section, which is unseen from the homepage. What I want to do is come up here to the URL and instead of "Home", change this to "Gallery". Boom, here's my new page, right? But how are people going to get to this page? Well, we have to link to it.
If I come back to edit my site, let's say I wanted to add a link here for our gallery. So I want to call it "Gallery" and then make sure you put your #gallery URL. Save it. Now when I come to my site, I have a link to my gallery, and it takes me to a new page. So you can do these. You can create as many sections as you want. And if you're in your site editor, you can even come up here to your main navigation bar and click the "Show Sections" button, and you'll be able to see the different sections of your website. And if I click one, now I'm specifically editing only that section. Now I'm specifically editing my "Home" section, or simply leave it on "All Sections", and it will show you all of them. So it's really simple and really useful to simulate pages on a card [Music] site.
The next feature I want to show you is Styles, which is really handy, especially when your site is getting pretty large. It'll really cut down on the time you're spending making those changes. Is, for example, I have a heading here, right? This is Henry Case. This is kind of the main heading. If I look at the style sections of this text right here, it says "None". This is where I can actually add a style, and we can name it "Heading One". Now, what this allows me to do is come down here to the second container and I want this to also be a "Heading One", and you'll see that it changed its styling to to match Henry Case text up here. So what does this do for us? It allows me to designate where all my "Heading Ones" are on my site. And if I come here to edit Henry Case, let's say I make it, uh, slightly bigger, you know, I wanted to change the color of it, you can see that it also automatically applied to my heading in my container too. Now I want to make sure this is continuous across my site. So let me come down here and also make sure that "Heading One" is selected. So you can already see how this would be really useful to make sure your website is maintaining that continuity that you need. You can do this with any number of elements. It doesn't only apply to text. I can even do it with my container. So if I come up here to container style settings, there's no style applied to this container, but I want to go ahead and add one. Let's just call this "Default". So now, what that will allow me to do is if I want to attach this, this container down here to also be a part of that style, it inherited the same styling options as this one. If I were to change either of these containers, let's say the color, now it's applying to both containers. So you'll want to make sure to apply the necessary styles as early on as possible when you're editing your site to prevent you from having to change individual elements over and over again.
So the last like styling or editing building feature I'm going to show you is actually embedding. So let's just say I wanted to embed a Google Maps on my container 3 down here. I'll go find a map to embed first of all. So let's call it Paris, France. If I come up here to "Share", "Embed a map", it gives me an iframe source code, right? I'll go ahead and copy that. Come back to my card site. Now under these icons, I'll go ahead and add an element. And as you can see, there's one for embedding the code. I just copied from Google Maps. I can paste in the code section, click done, and then we'll go ahead and see how that looks on our site. And there you go. Now I have an interactive Google Maps section of my page. Now this works for any number of things. Say you have some type of form, maybe Typeform or a Jotform. Uh, you have some type of YouTube video or Vimeo video. A lot of things actually offer embedding. So you just basically have to find the embed code, and you'll be able to embed it on your card [Music] site.
Now, by default, if I come up here to save, this is where we kind of view our publish settings. You can see there's different options for free. You can publish to a card.co or any number of these URL endings down here. Just pick a name, pick one of these links, and you're good to go. But you'll see there's an option to publish to a custom domain. Now, you'll have to buy your domain on something like, you know, Squarespace or Namecheap, or pick any one of your, you know, domain name providers. But once you purchase it, you'll simply enter it here. Let's say I had 30.com. That would be a dream come true. You'll enter it here, and it will tell you what DNS records you need to change within your domain. This might seem complicated at first, but it's really not. Basically, what you'll do is go to your domain provider, and there will be an option to edit the DNS records. All you'll have to do is copy these values into your DNS provider, and then voila, your 30.com will now be your primary domain for reaching your card site. If you need more help, you can simply click "How do I do this?" and it opens a document, um, to explain. It has, um, any number of these domain providers to give you specific directions. With any site, I always highly recommend a custom [Music] domain.
Now, snowballing off of that a little bit, I want to show you how to change your favicon. What is a favicon? Well, if you look up here at our Google Maps tab, you'll see what their favicon is. It's the Google Maps logo. If we look at our card website tabs, it's the card logo. So it, it allows you to give your website a little bit more character, um, in people's tabs. Now, these also will show on Google search results. Let me go ahead and show you that as an example. So when I'm on Google, you can see that the favicon also shows in search results. Here we have Reddit, X, any number of websites. They each have their own favicon, which is typically their logo. By default, you can see our example site just has a kind of globe looking thing. I think that might be a globe, and card kind of has that by default. But if you want to give yours a little bit more flare, maybe add your logo, whatever the case may be, you'll want to come up here to the media section of your publish settings, and what we're looking for is the icon section. So just want to click this section, and it will allow you to upload your favicon. So when you choose your favicon, you'll have some cropping options. I want mine to be the full thing. You'll want to make sure that your icon you're uploading is a PNG file that has a transparent background, and it's not like a solid white background or solid black background. That will allow your favicon to look really nice and only show the icon without a background. But once you have it, you can simply accept, publish your changes, and then we'll see how our site. If I refresh site, now has our favicon attached. So it's one of those nice little details to include, uh, whenever you're making a site.
Now, one of these other nice little features I like to showcase is a QR code. Now, QR codes, you'll see a lot nowadays. It's a simple way to bust out your camera and scan a code. It takes you straight to a link, and it's really useful. Card has a way to provide a QR code built in, and it will allow you to download the image that you can then attach to graphics or share with someone however you'd like to. What you're going to want to do is go to your card dashboard. Here's my example site, and I want to go come down here and click the settings cog wheel. Now, when I'm in my site settings, you'll notice in this URL panel, there's, um, a QR code symbol right here. If you click that, it will then generate a QR code for you, and it will allow you to download it as a PNG file. And like I said, once you download that, you'll be able to put it in graphics, you'll be able to share it with others, use it however you want to use it, and whenever someone scans that code, it will take them straight to your site. It's just one of those other useful little features that will come in handy.
Now, those were some simple features I wanted to showcase today. But as always, if you have any questions, it might take me roughly three years to get back to you, but I will get back to you. So make sure that you subscribe and you leave a comment and let me know what you thought of this video, and I'll see you in the next one [Music].