![\"Carrd](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-homepage.jpeg\")
<\/figure>\n\n\n\nThis article aims to introduce Carrd and provide a basic Carrd tutorial<\/strong> on how to use it<\/strong>, but first, let’s take a look at what Carrd is.<\/p>\n\n\n Carrd is essentially a one-page website-building web platform. With it, you can build simple, fully responsive one-page websites for almost anything. Carrd, similar to WordPress, offers various features that users can explore when building a website. However, Carrd is optimized for single-page websites.<\/strong><\/p>\n\n\n One of the benefits of using Carrd is that it requires no coding skills. As a result, you can go through Carrd tutorials, or precisely, the Carrd tutorial website theme, to learn how to use Carrd and start building your website in no time.<\/p>\n\n\n\n As of now, Carrd does not have a mobile app, but the web app can be accessed on both mobile and desktop devices, and we will demonstrate both.<\/p>\n\n\n\n Here are the 10 steps to create your aesthetic carrd website from scratch:<\/strong><\/p>\n\n\n Go to the Carrd website<\/a>.<\/p>\n<\/li>\n\n\n\n Click the “Log In”<\/strong><\/p>\n\n\n\n On the Log In page, click the “Sign-Up”<\/strong> button to create an account. You can also click the “Hamburger menu” icon<\/strong> to log in or sign up.<\/p>\n\n\n\n Once you have signed up and verified your account, follow these steps:<\/p>\n\n\n\n Click the “Open Dashboard”<\/strong> button to open your account dashboard (if you are not automatically redirected<\/strong> to the dashboard)<\/p>\n\n\n\n Click the “New Site button”<\/strong> on the top right corner of your account dashboard. This takes you to a different page for you to choose a starting point.<\/p>\n\n\n\n Select a blank canvas<\/strong> to design your website from scratch or pick from pre-existing templates<\/strong> to modify it to suit what you want. You can select any of the categories at the top of the page for specific templates tailored to what you want.<\/p>\n\n\n\n Following your selection of the blank canvas, you are redirected to the Canvas page:<\/p>\n\n\n\n The first thing that will appear is some useful instructions<\/strong> to learn how to use the interface. Once you have read them, click on the “Okay, got it”<\/strong> button to continue.<\/p>\n\n\n\n Now you will see the editing interface<\/strong> where you will do the actual designing, see a live preview of the site you are building and move and arrange your elements. Click on the “More Actions” Hamburger Menu<\/strong>.<\/p>\n\n\n\n You will use the Menu to control actions on the website you are building. These elements include:<\/p>\n\n\n\n Click on “Add Element”<\/strong> to add a new component to your site. You can add multiple elements: text, video, buttons, audio, tables, links, etc.<\/p>\n\n\n\n When you click on an element, it will bring up a Properties Panel<\/strong> with different tabs that can be used to customize the element\u2019s properties or change the element\u2019s settings. In most cases, each element has three tabs: its main tab, the appearance tab, and the settings tab<\/strong>.<\/p>\n\n\n\n Click on the Hamburger Menu “More Actions”<\/strong> and select “Background\u2026”<\/strong><\/p>\n\n\n\n Configure your Background<\/strong>. You can set your background style to a solid color, a gradient, an image, a video, or a slideshow. You can also select pattern, pattern color, size, and thickness. We will just set a plain color background. Click on “Done”<\/strong> to apply the new background.<\/p>\n\n\n\n Here you can style and customize your page layout and position.<\/p>\n\n\n\n Click on the “More Actions” Hamburger Menu<\/strong> and select “Page\u2026”<\/strong>. Configure the Page to set style, position, width, and other appearance settings.<\/p>\n\n\n\n We have used the following settings.<\/p>\n\n\n You have the option to set the style to:<\/p>\n\n\n\n After setting the page element position, alignment, and spacing of your content, then you can click “Done”<\/strong> to close the panel.<\/p>\n\n\n\n The container element will be used to group elements into two or a maximum of four responsive columns. To add the container element:<\/p>\n\n\n\n Click “Add Element<\/strong>” and select “Container”<\/strong> from the dropdown to create a new container element.<\/p>\n\n\n\n Select the “Type”<\/strong> in the Properties Panel. You can either leave the Type as “Default” or set it to “Column”. Setting the Type to “Column” will split the container into two columns.<\/p>\n\n\n\n In the “Appearance Tab”<\/strong>, you can adjust other appearance settings. Remember to click on “Done”<\/strong> to apply the effects.<\/p>\n\n\n\n We have set the following settings:<\/p>\n\n\n Click on “Add an Element”<\/strong> to select the Text element<\/strong>.<\/p>\n\n\n\n When the text section appears in the properties panel<\/strong>, click on “Text”<\/strong> to switch between text options: site Title, Main Heading, Subheading or Paragraph. Remember to click on “Done” when you finish editing.<\/p>\n\n\n\n Click on the “Appearance Tab”<\/strong> to format your text: Color, Font, Size, Line Spacing, Letter Spacing, Margins, Alignment, Drop Shadow, and Gradient.<\/p>\n\n\n\n Using the right font for your page is extremely important, so you definitely want to check out what are the best fonts for Carrd websites<\/a>.<\/p>\n<\/li>\n<\/ul>\n\n\n You can add a CTA button to your website if you want your visitors to take action. The button URL could redirect to sections within your website or sites external to your website, depending on the action you want your visitors to take.<\/p>\n\n\n\n To include a CTA button on your website:<\/p>\n\n\n\n Click “Add Element”<\/strong> from the Menu tab and select “Buttons”<\/strong> from the dropdown menu.<\/p>\n\n\n\n Under the properties panel<\/strong>, click on the name of the button<\/strong> to change your button to a more creative CTA, add the correct URL, and customize the button to your specifications.<\/p>\n\n\n\n Click on the “Appearance Tab”<\/strong> to define the style of your button.<\/p>\n\n\n\n You can move your button to the previous container<\/strong> by dragging it. Here is the result of adding another button.<\/p>\n\n\n\n Using sections, you create the appearance of numerous pages on your single-page website. Sections allow you to link to and switch between different named regions, enhancing navigation and functionality.<\/p>\n\n\n\n Click “Add Element”<\/strong> and select “# Control”<\/strong> to create a new control element.<\/p>\n\n\n\n Set Type to “Section Break.”<\/strong><\/p>\n\n\n\n Name the section.<\/strong> You can only name the section using lowercase letters, numbers, and hyphens.<\/p>\n\n\n\n Drag the section break<\/strong> to where you want to divide your site, then release the click to drop it. Add whatever you want and then link to the section using a button or a link.<\/p>\n\n\n\n Click the “Save this site” icon on the Menu tab<\/p>\n<\/li>\n<\/ul>\n\n\n Cick the “Save this site”<\/strong> icon on the Menu tab<\/p>\n\n\n\n On the Properties panel<\/strong>, you will be required to input a title<\/strong> and a brief description<\/strong> for your website.<\/p>\n\n\n\n Select a domain name<\/strong> and click on “Publish”.<\/strong> For the free version, you can choose to either “Publish your site to a .carrd.co<\/strong> URL” or “Save as an offline draft” if you are not ready to share your site with the world. While for the paid version, you have the option to save as a template or publish to a custom domain.<\/p>\n\n\n\n When the publishing process is finished, you will be prompted with a pop-up. Click on “View Site”<\/strong> to see your final website online.<\/p>\n\n\n\n Preview<\/strong> Your Website<\/p>\n\n\n\n Yes! Whether you are a freelancer looking to create your profile, a small business in need of a website, a podcaster in need of a landing page, an Influencer looking to boost your online presence, an artist searching for portfolio building, or an individual with a fundraising project, Carrd is for you.<\/strong><\/p>\n\n\n\n Despite specializing in single-page websites, Carrd is quite versatile. You can use Carrd to build:<\/p>\n\n\n\n The process of building a website has become much easier and cheaper with Carrd.<\/p>\n\n\n\n Carrd\u2019s intuitive and easy-to-use editing interface makes it possible for individuals and businesses without prior website design experience to create and customize websites to suit their needs.<\/p>\n\n\n\n Using the steps outlined above and exploring the Carrd website, anyone can design and create an aesthetic website.<\/p>\n\n\n\n The key is to explore the Carrd website and its editing interface, as no Carrd tutorial will teach you everything you need to know on how to use Carrd.<\/p>\n\n\n\n Happy Designing!<\/p>\n\n\n If you don’t know where to start in Carrd, here’s a Complete Basic Carrd Tutorial with all the basics you need to know about Carrd.<\/p>\n","protected":false},"author":1,"featured_media":5159,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[87,16,17,21],"class_list":["post-5160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developing","tag-carrd","tag-design","tag-web","tag-website-builders"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=5160"}],"version-history":[{"count":4,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5160\/revisions"}],"predecessor-version":[{"id":18792,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5160\/revisions\/18792"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/5159"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=5160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=5160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=5160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}What Is Carrd?<\/h2>\n\n\n
How to Use Carrd for Your Website [10 Steps]<\/h2>\n\n\n
1. Sign Up To Create A Carrd Account<\/h3>\n\n\n
\n
![\"Carrd](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/log-in-carrdalt.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Carrd](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/sing-up-carrd.jpeg\")
<\/figure>\n<\/li>\n<\/ul>\n\n\n2. Open Dashboard<\/h3>\n\n\n
\n
![\"Basic](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-dashboard.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Basic](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-new-site.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Basic](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-templates-page.jpeg\")
<\/figure>\n<\/li>\n<\/ul>\n\n\n3. Basic Design From Scratch<\/h3>\n\n\n
\n
![\"How](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/how-to-use-carrd-useful-instructions.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"How](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/how-to-use-carrd-more-actions.jpeg\")
<\/figure>\n\n\n\n\n
![\"How](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/how-to-use-carrd-add-element.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"How](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/how-to-use-carrd-properties-panel.jpeg\")
<\/figure>\n<\/li>\n<\/ul>\n\n\n4. Edit The Background<\/h3>\n\n\n
\n
![\"Background](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-background.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Edit](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-edit-background.jpeg\")
<\/figure>\n\n\n\n**Style:** Color\n\n**Color:** #F57256\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre><\/li>\n<\/ul>\n\n\n5. Set Page Layout<\/h3>\n\n\n
\n
![\"Carrd:](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-page-layout.jpeg\")
<\/figure>\n\n\n\n\n**Style:** box\n\n**Position:** center\n\n**Width:** 1\u2019\u2019\n\n**Padding vertical:** 12\n\n**Padding horizontal:** 12\n\n**Corner rounding:** Off\n\n**Background Color:** #F57256\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n\n
![\"Carrd:](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-page-layout-done.jpeg\")
<\/figure>\n<\/li>\n<\/ul>\n\n\n6. Add Container Element<\/h3>\n\n\n
\n
![\"Carrd](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-add-element-select-container.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Carrd](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-select-type-container.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Carrd:](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-container-element.jpeg\")
<\/figure>\n\n\n\n\n**Container Type:** Columns\n\n**Width:** 25\n\n**Layout:** Default\n\n**Padding Vertical:** 0.25\n\n**Padding Horizontal:** 0.25\n\n**Glutters:** 2\n\n**Marging Top:** Auto\n\n**Margin Bottom**: Auto\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre><\/li>\n<\/ul>\n\n\n7. Add Text Element<\/h3>\n\n\n
\n
![\"Carrd:](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-text-element.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Carrd:](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-select-type-text.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Carrd:](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-configure-your-text.jpeg\")
<\/figure>\n\n\n**Text:** Create Beautiful FullScreen Scrolling Websites\n\n**Color:** #FFFFFFC2\n\n**Size:** ### 1.375\n\n**Line Spacing:** ### 1.5\n\n**Alignment:** Center\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n8. Add A Call-To-Action Button.<\/h3>\n\n\n
\n
![\"Carrd](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-tutorial-add-cta.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Customize](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/customize-button.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Carrd](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-tutorial-set-button-appearance.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Carrd](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-tutorial-move-button-to-container.jpeg\")
<\/figure>\n<\/li>\n<\/ul>\n\n\n9. Include Sections<\/h3>\n\n\n
\n
![\"Carrd:](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-add-sections.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Carrd:](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-set-section-type.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Carrd:](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/carrd-name-section.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Drag](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/drag-space-break-carrd.jpeg\")
<\/figure>\n\n\n\n10. Save And Publish Your Site<\/h3>\n\n\n
\n
![\"Basic](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/basic-carrd-tutorial-save-site.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Basic](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/basic-carrd-tutorial-input-title-description.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Basic](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/basic-carrd-tutorial-publish-website.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Basic](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/basic-carrd-tutorial-view-site.jpeg\")
<\/figure>\n<\/li>\n\n\n\n![\"Basic](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-07-14\/basic-carrd-tutorial-preview-site.jpeg\")
<\/figure>\n<\/li>\n<\/ul>\n\n\nIs Carrd For You?<\/h2>\n\n\n
\n
Designing Your Website With Carrd<\/h2>\n\n\n
Related Articles<\/h2>\n\n\n
\n