{"id":2357,"date":"2022-08-01T08:00:00","date_gmt":"2022-08-01T12:00:00","guid":{"rendered":"http:\/\/codeornocode.com\/?p=2357"},"modified":"2023-12-01T07:22:28","modified_gmt":"2023-12-01T07:22:28","slug":"how-to-use-carrd","status":"publish","type":"post","link":"https:\/\/codeornocode.com\/tutorial\/how-to-use-carrd\/","title":{"rendered":"How to Use Carrd to Develop a Responsive One-Page Site"},"content":{"rendered":"\n<p>Building a website was a tough task back in 2010. But after the introduction of <a href=\"http:\/\/codeornocode.com\/comparisons\/top-no-code-website-builders\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">No Code website builder platforms<\/a> like <a href=\"https:\/\/www.hostg.xyz\/SHCKP\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Zyro<\/a> and <a href=\"https:\/\/be.elementor.com\/visit\/?bta=66161&amp;nci=5526\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Elementor<\/a>, it has become smooth and effortless. Anyone with a computer, internet, and enough willingness can build an amazing website without writing a single line of code within a few days. <sup id=\"cite-1\"><a class=\"cite-link cite-1\" href=\"#ref-1\"><span>[1]<\/span><\/a><\/sup><\/p>\n\n\n\n<p>The complexity of these websites varies depending on your requirements. But if your goal is to create a one-page website with all your business information, Carrd is the perfect platform for you. In this blog, we will give you an overview of the platform and a tutorial on how to use carrd to create a one-page website.<\/p>\n\n\n\n<p>A quick note &#8211; If you are planning to buy a paid plan of Carrd, use our <a href=\"https:\/\/try.carrd.co\/pb8z5pbz\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">affiliate link<\/a>. That will help us in the pursuit of providing valuable content for free to you.<\/p>\n\n\n\n<div class=\"newsletter mobile\">\n        <div class=\"image\">\n           <img decoding=\"async\" src=\"https:\/\/codeornocode.com\/wp-content\/uploads\/2023\/04\/book.png\" alt=\"\">\n        <\/div>\n        <div class=\"text\">\n             <h2>Our team uses a bunch of tools that cost\u00a0<strong>0$ a month<\/strong><\/h2>\n<p>Explore the best of them with our free\u00a0<strong>E-book<\/strong>\u00a0and use\u00a0<strong>tutorials<\/strong>\u00a0to master these tools in a few minutes<\/p>\n\n        <\/div>\n        <div id=\"mlb2-5864060\" class=\"ml-form-embedContainer ml-subscribe-form ml-subscribe-form-5864060 mailer-form-single \">\n  <div class=\"ml-form-align-center\">\n    <div class=\"ml-form-embedWrapper embedForm\">\n      <div class=\"ml-form-embedBody ml-form-embedBodyDefault row-form\">\n    \n        <form class=\"ml-block-form\" action=\"https:\/\/static.mailerlite.com\/webforms\/submit\/h8d6i9\" data-code=\"h8d6i9\" method=\"post\" target=\"_blank\">  \n              <div class=\"ml-field-group ml-field-email ml-validate-email ml-validate-required\">\n                <input aria-label=\"email\" aria-required=\"true\" type=\"email\" class=\"form-control\" data-inputmask=\"\" name=\"fields[email]\" placeholder=\"Enter your email\" autocomplete=\"email\">\n              <\/div>       \n          <input type=\"hidden\" name=\"ml-submit\" value=\"1\">\n          <div class=\"ml-form-embedSubmit\">\n            <button type=\"submit\" class=\"primary\">Claim<\/button>\n            <button disabled=\"disabled\" style=\"display:none\" type=\"button\" class=\"loading\">\n             <div class=\"ml-form-embedSubmitLoad\"><\/div>\n              <span class=\"sr-only\">Loading...<\/span> <\/button>\n          <\/div>\n          <input type=\"hidden\" name=\"anticsrf\" value=\"true\">\n        <\/form>\n      <\/div>\n      <div class=\"ml-form-successBody row-success\" style=\"display:none\">\n        <div class=\"ml-form-successContent\">\n          <svg width=\"88\" height=\"88\" viewBox=\"0 0 88 88\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                       <rect width=\"88\" height=\"88\" rx=\"44\" fill=\"#6CE9A6\"\/>\n                         <path d=\"M67.5714 29.7287L35.2449 62.0713L20.4286 47.2476L24.227 43.4474L35.2449 54.4439L63.7731 25.9285L67.5714 29.7287Z\" fill=\"white\"\/>\n                           <\/svg>\n                   <h4>Awesome!<\/h4>\n                      <p>You will receive the ebook soon.<\/p>\n                        <button class=\"close\">OK<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div><h2 class=\"wp-block-heading\">Overview of <a href=\"https:\/\/try.carrd.co\/pb8z5pbz\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Carrd<\/a><\/h2>\n\n\n\n<p>Carrd is a No Code platform where you can build a responsive website and connect it with email marketing platforms like <a href=\"https:\/\/convertkit.com?lmref=SO-qGQ\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Converkit<\/a>, Mailchimp, and MailerLite. You can also integrate payment gateways like Stripe and analytics platforms like Google Analytics to your website with simple drag and drop.<\/p>\n\n\n\n<p>Here are a few popular types of sites that you can build with Carrd. Templates for each of these categories are available in their <a href=\"https:\/\/carrd.co\/dashboard\/add\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">library<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Profile<\/h3>\n\n\n\n<p>Create your individual profile where you have all your professional information. It could be used for networking or for an employer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Landing Page<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/screely-1658923426620-1024x503.png\" alt=\"The landing page we built for the how to use carrd tutorial\" class=\"wp-image-2691\"\/><figcaption class=\"wp-element-caption\">The landing page we built for the tutorial<\/figcaption><\/figure>\n\n\n\n<p>Build a page that provides information about your products or services. It would have basic info about your business. For example, how to contact you or details of the services you provide. Landing pages are best for small local businesses trying to grow their audience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Forms<\/h3>\n\n\n\n<p>Create attractive newsletter forms to collect information from your audience. Collect contact forms, sign-up forms, or custom forms with Carrd. It seamlessly integrates with 12 email marketing platforms including ActiveCampaign, Revue, SendFox, and Sendy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Portfolio<\/h3>\n\n\n\n<p>Showcase your work with <a href=\"https:\/\/try.carrd.co\/pb8z5pbz\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Carrd<\/a>. This kind of website is perfect for freelancers trying to make their way into the professional world. Sometimes it is style over substance. So even if you have a small amount of work in the industry, you can present it in an impressive way through Carrd.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sectioned Website<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/screely-1658923797919-1024x507.png\" alt=\"sectioned webpage example\" class=\"wp-image-2695\"\/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/idealink.webflow.io\/documentation\/bubble-to-airtable-two-way-sync-plugin\" target=\"_blank\" rel=\"noreferrer noopener\">Example<\/a> of a sectioned webpage with the sections on the lower right<\/figcaption><\/figure>\n\n\n\n<p>This is a hybrid between a one-page and multi-page website. Sectioned websites are one-page websites divided into different sections that load when you click on that section. If you have a lot of information to cover, you should create a sectioned website and segregate your viewer&#8217;s attention.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use <a href=\"https:\/\/try.carrd.co\/pb8z5pbz\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Carrd<\/a> to Create a One-Page Website<\/h2>\n\n\n\n<p>In this tutorial, we will build a Carrd website for an agency. So keep in mind that all the references and settings will be adjusted according to an agency\u2019s needs. But if you have something else in mind, you can obviously tweak the elements and get your own layout.&nbsp;<\/p>\n\n\n\n<p>The final result of this tutorial looks something like this: <a href=\"https:\/\/tutorialof.carrd.co\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Carrd Tutorial Website<\/a>. It is a simple one-page website that has 1 header, 1 footer, a hero section, and a contact form. Let\u2019s learn how to create each of these sections.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s the step-by-step process of building a website with Carrd:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Register a Domain<\/h3>\n\n\n\n<p>You need to buy a domain to host your website. It usually costs around $20- $40 for a unique domain. But if you choose a very popular name, the chances are it would have already been taken and have a high price to it.&nbsp;<\/p>\n\n\n\n<p>Try and search your domain names at <a href=\"https:\/\/www.godaddy.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">GoDaddy<\/a> or any other custom domains provider.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Register-a-domain-1024x537.png\" alt=\"godaddy one-page website domain provider\" class=\"wp-image-2359\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Sign up for the free trial<\/h3>\n\n\n\n<p>We suggest you buy the paid plan eventually since the free plan doesn\u2019t allow you to add a custom domain to the website.&nbsp;<\/p>\n\n\n\n<p>If you are a new user, start with the 7-day free trial where you can test out all the <a href=\"https:\/\/try.carrd.co\/pb8z5pbz\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Carrd\u2019s<\/a> core features and additional ones for free. It gives you enough time to experiment with the tool.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Choose a Starting Point \/ Start from a Blank Canvas<\/h3>\n\n\n\n<p>There are two ways you can create your Carrd website. You can either choose a template from their template library or start from scratch.&nbsp;<\/p>\n\n\n\n<p>If you want to take the template route, it is just editing the content and format changes. But it is not always easy to find a template that exactly matches your requirements.<\/p>\n\n\n\n<p>That\u2019s when you <a href=\"https:\/\/carrd.co\/dashboard\/add\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">start with a blank canvas<\/a>. This will give you complete design freedom.<\/p>\n\n\n\n<p>When you click on it, you will be greeted with a \u201cNothing here, yet! :)\u201d message.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Start-from-scratch-Carrd-1024x528.png\" alt=\"blank page in the carrd website builder\" class=\"wp-image-2361\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Change the Background<\/h3>\n\n\n\n<p>The background represents the color or image that will be used throughout your website. You can always customize the section background colors.&nbsp;<\/p>\n\n\n\n<p>Unless you have really strong feelings about a color attached to your design, we suggest you go for white or any other lighter tone of color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Background-1024x528.png\" alt=\"how to use carrd to select a background for your website\" class=\"wp-image-2358\"\/><\/figure>\n\n\n\n<p>Go to Options &gt;&gt; &gt;&gt; Choose the color code &#8211; White (#FFFFFF) or a light blue color (if your design guide allows).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Background-2-1024x529.png\" alt=\"selecting a teal background in the carrd website builder\" class=\"wp-image-2360\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Nav Bar<\/h3>\n\n\n\n<p>Navigation Bar is the UI component at the top of your page that contains links to other sections of the website. Our Nav bar will have a logo and 3 links i.e. Testimonials, Services and Careers.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Delete the \u2018Nothing here yet!\u201d text.<\/li>\n\n\n\n<li>Click on the plus icon &gt;&gt; Add container<\/li>\n\n\n\n<li>Change the settings of the container as per your requirement. Here we have kept the standard. 25% left &amp; 75 % right column.&nbsp;<\/li>\n\n\n\n<li>Click on the left column &gt;&gt; Add image component. Click on the right column &gt;&gt; Add button component and duplicate it thrice.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Put your logo in the image section. Change the button layout and text according to your requirement. Keep the URLs default for now.<\/li>\n<\/ul>\n\n\n\n<p>Your page should now look something like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Create-a-nav-bar-1024x531.png\" alt=\"building a nav bar in carrd website builder\" class=\"wp-image-2364\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Put your logo in the image section. Change the button layout and text according to your requirement. Keep the URLs default for now.<\/li>\n<\/ul>\n\n\n\n<p>Your page should now look something like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/label-the-nav-bar-1024x514.png\" alt=\"adding your logo into the header with carrd website builder\" class=\"wp-image-2365\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Create your Hero Section<\/h3>\n\n\n\n<p>Hero Section is the body of your page. It is the first section that can be seen immediately under your logo. The hero section is the main highlight of your website.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a container<\/li>\n\n\n\n<li>Go to Appearances &gt;&gt; Change the height to 30.<\/li>\n\n\n\n<li>Add a background image and gradient layout. You can add anything in the image element but we suggest you use a high-definition PNG image to get the most out of Carrd.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/empty-hero-section-carrd-1024x524.png\" alt=\"creating the hero section of your website with the carrd website builder \" class=\"wp-image-2366\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a text layer where you read \u2018Empty\u2019. Add a catchy headline. (in our case, we will be writing &#8211; \u2018Let Our Artists; Manage Your Marketing\u2019<\/li>\n\n\n\n<li>Add color, style, and simple animation to your text.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Title-your-hero-section-1-1024x525.png\" alt=\"adding your main headline with carrd website builder\" class=\"wp-image-2368\"\/><\/figure>\n\n\n\n<p>Add a button right below your headline to boost conversions directly from the landing page. In our case, we will be adding a contact us button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Hero-Section-button-1024x531.png\" alt=\"adding a CTA with carrd website builder\" class=\"wp-image-2369\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Currently, we don\u2019t have a form to link so you can keep the default URL. We will change that at the end of this tutorial.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Add Testimonials<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a text column as a heading and label it \u201cTestimonials\u201d<\/li>\n\n\n\n<li>Create a new container and change the type to column.<\/li>\n\n\n\n<li>Add a third column. (Considering you need 3 testimonials in a single fold)<\/li>\n\n\n\n<li>Change the background color.<\/li>\n\n\n\n<li>Add image and text elements to all three columns.<\/li>\n\n\n\n<li>Create a new style called testimonials in the appearance section so that when you change one column, the changes will be automatically reflected in the other columns.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Testimonial-base-1024x370.png\" alt=\"adding testimonials with carrd website builder\" class=\"wp-image-2370\"\/><\/figure>\n\n\n\n<p>I have also added the circle border to give it a little funky look. You can adjust that according to your preference.<\/p>\n\n\n\n<p>I have also added a small shadow in testimonials just to give it a slightly premium look. You can align it according to your requirements. This is what the final result of testimonials will look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Final-version-of-Testimonials-1024x384.png\" alt=\"making aesthetic testimonials with carrd website builder \" class=\"wp-image-2371\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Add Services<\/h3>\n\n\n\n<p>Similar to the last step, we start by adding a container with two columns. The left one is for the image and the right one is for text. The service section will have information about our agency\u2019s services. Currently, we will be adding copywriting and email marketing.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add the image element on the left and the text element on the right.<\/li>\n\n\n\n<li>Style it according to your requirements. Here I have kept H2 and Paragraph format in the text.<\/li>\n\n\n\n<li>Use transparent images as they look neat on a website. Choosing an image can be difficult but you can always change it. So don\u2019t shoot for perfection.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Services-section-1024x420.png\" alt=\"adding services with carrd website builder\" class=\"wp-image-2372\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can add a button that leads your users to a specific page of this service. For now, you can use the dummy URL.<\/li>\n\n\n\n<li>Add a divider between Heading and Paragraph to highlight the headline a bit. (Totally optional)<\/li>\n\n\n\n<li>Once you are done with this container, click on it and select duplicate. Change the contents of the duplicate container as many times as you want.<\/li>\n<\/ul>\n\n\n\n<p>Your final service section would look something like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Final-look-at-service-section-1024x495.png\" alt=\"building services pages with carrd website builder\" class=\"wp-image-2373\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Add a Contact Form<\/h3>\n\n\n\n<p>You can add a sign-up form, contact form, and customize your form. We will be creating a contact form to collect newsletter subscribers.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a container and split it into 2 columns.<\/li>\n\n\n\n<li>Add text element on the left column and form element on the right one. (You will have to unlock the 7-day free trial to access the form element).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Contact-form-setup-1024x456.png\" alt=\"adding a contact form in the carrd website builder\" class=\"wp-image-2374\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add your text to the left column. And make layout changes in the form.<\/li>\n\n\n\n<li>I have deleted everything except for the email address as that\u2019s all I need.<\/li>\n\n\n\n<li>Also, go to Appearance&gt;&gt;Form&gt;&gt;Layout and change the layout to row instead of column. This is to make your form appear sideways.<\/li>\n<\/ul>\n\n\n\n<p>Once you adjust little tweaks, here\u2019s what the form would look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/contact-form-1024x256.png\" alt=\"adding an email cta in the carrd website builder\" class=\"wp-image-2375\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Design your Footer<\/h3>\n\n\n\n<p>Create a footer where users can easily access all your information. This will become crucial once you create multiple pages for your websites. For example, if you have a blog, you can add links to your featured blogs in the footer to increase traffic.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a container and add 3 columns.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/3-containers-1024x537.png\" alt=\"adding the footer of your website with carrd\" class=\"wp-image-2376\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add text layers to each of the three columns and label it \u2018Your company name\u2019, Blogs, and Contact.<\/li>\n\n\n\n<li>In the blog column, add the links to any blog that you might have.<\/li>\n\n\n\n<li>Lastly, add the text for your address and phone number. Add the icon element for social media icons. Type in the name of the social media and an icon will pop up.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Footer-social-media-1024x493.png\" alt=\"page footer built with carrd website builder\" class=\"wp-image-2377\"\/><\/figure>\n\n\n\n<p>You can change the color of your social media icons however you want. I have tried to keep the original colors here.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add Scroll Control&nbsp;<\/h3>\n\n\n\n<p>Your users should be able to navigate through your website smoothly. Hence, Carrd has a feature called scroll point. For example, if someone clicks the contact us button on the hero section, they should jump to the contact form. Scroll Control is how we can link these sections to a button.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the plus icon and add # control.<\/li>\n\n\n\n<li>This creates a small divider between your containers.<\/li>\n\n\n\n<li>Change the type to scroll point and give it a name.<\/li>\n\n\n\n<li>Put this control bar above the point where you want your users to scroll. For example, if I have services in my nav bar. When users click on it, they should jump to the services section.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/Scroll-Point-1024x531.png\" alt=\"adding scroll control in the carrd website builder\" class=\"wp-image-2378\"\/><\/figure>\n\n\n\n<p>Now click on service on the nav bar and write \u2018#services\u2019 in the link section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/control-link-1024x535.png\" alt=\"connecting scroll control to website sections in the carrd website builder\" class=\"wp-image-2379\"\/><\/figure>\n\n\n\n<p>This makes a huge difference in making your website smooth.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Review the website<\/h3>\n\n\n\n<p>Baam! Congratulations. You have successfully created your first <a href=\"https:\/\/try.carrd.co\/pb8z5pbz\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Carrd<\/a> website. Review your website for any small errors like typos or potential broken links.&nbsp;<\/p>\n\n\n\n<p>Publish your website by clicking on the floppy disk (Save) icon on the top right. Go to the published website and stare at your majestic creation for a while.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to upgrade your Carrd website<\/h2>\n\n\n\n<p>Now that you have created and published the website, it is time to update it. Power up your website by <a href=\"https:\/\/carrd.co\/docs\/sites\/setting-up-google-analytics\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">adding Google Analytics to Carrd<\/a>. They are experimenting with beta features a lot. You can keep an eye on their <a href=\"https:\/\/carrd.co\/docs\/general\/changelog\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">change logs<\/a> for new templates and feature updates.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"http:\/\/codeornocode.com\/wp-content\/uploads\/2022\/12\/kobu-agency-7okkFhxrxNw-unsplash-1024x683.jpg\" alt=\"showing the website you built with carrd to someone\" class=\"wp-image-2693\"\/><figcaption class=\"wp-element-caption\">Don&#8217;t forget to show your website to a friend and gather feedback<\/figcaption><\/figure>\n\n\n\n<p>If you are ever stuck somewhere you can search your query on their <a href=\"https:\/\/carrd.co\/docs\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">docs<\/a>. It is efficient and easy to navigate. Apart from that, you can also check out the mobile responsiveness of your website, if you have a lot of traffic coming from mobile users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Takeaways<\/h2>\n\n\n\n<p>Building a website on <a href=\"https:\/\/try.carrd.co\/pb8z5pbz\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Carrd<\/a> is easy. Perfecting a website on Carrd might take some time. Small things like letter spacing, margins, and alignments always have room for improvement.&nbsp;<\/p>\n\n\n\n<p>Have a clear goal in mind before starting this Carrd tutorial. Once you know your goal behind creating a website, you can reverse calculate everything.&nbsp;<br>If you have any queries, you can tweet us at <a href=\"http:\/\/twitter.com\/codeornocode\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">@codeornocode<\/a>. Follow us to read such informative content on No Code Tools, News, Tutorials, and Reviews.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Building a website was a tough task back in 2010. But after the introduction of No Code website builder platforms like Zyro and Elementor, it has become smooth and effortless. Anyone with a computer, internet, and enough willingness can build an amazing website without writing a single line of code within a few days. The [&hellip;]<\/p>\n","protected":false},"author":19,"featured_media":2689,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1378],"tags":[1709,1710],"class_list":["post-2357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-carrd-tutorial","tag-website-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/codeornocode.com\/wp-json\/wp\/v2\/posts\/2357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeornocode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeornocode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeornocode.com\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/codeornocode.com\/wp-json\/wp\/v2\/comments?post=2357"}],"version-history":[{"count":6,"href":"https:\/\/codeornocode.com\/wp-json\/wp\/v2\/posts\/2357\/revisions"}],"predecessor-version":[{"id":1000008698,"href":"https:\/\/codeornocode.com\/wp-json\/wp\/v2\/posts\/2357\/revisions\/1000008698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeornocode.com\/wp-json\/wp\/v2\/media\/2689"}],"wp:attachment":[{"href":"https:\/\/codeornocode.com\/wp-json\/wp\/v2\/media?parent=2357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeornocode.com\/wp-json\/wp\/v2\/categories?post=2357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeornocode.com\/wp-json\/wp\/v2\/tags?post=2357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}