What is Carrd?
Carrd is a responsive landing page-building platform. You can share a mini portfolio, highlight a new product offering, or promote all of your social media platforms on a single page.
What drew me to unlike other landing pages,Carrd were the creative possibilities – you can embed songs from Sound cloud, post image galleries, and embed videos from YouTube, Vimeo, and Twitch.
Step 1: Beginning with a Blank Canvas
Go to Carrd on your browser, select a starting place, and then click “blank canvas.” If you’re a novice user, the site’s abundance of instructions may overwhelm you. To signal your readiness to begin, merely click the box in the bottom right corner. In the upper right-hand corner, you may see a small menu from here. A new menu will show up on the left side of your screen if you click on “Nothing here yet.”
Step 2: Layout
The site template will be displayed when you select a basic layout, along with helpful instructions explaining what each of the toolbar buttons, such as “Add element,” “Undo,” “Redo,” “Mobile view,” and “Menu,” does. When you’re certain you understand it, click “Okay, got it!” in the bottom right corner to begin.
Step 3: Simply click on an existing page element to update it. The appropriate editing prompts will show up on the left side of the screen.
Step 4: Background and Page adjustments (optional)
Anywhere on the backdrop can be clicked to see its settings. Although I left the background in this example white, you can change it to look any way you like.
You may add a pattern, modify the color, apply a gradient, or even use an image, video, or slideshow. Should you like to alter the background color, I advise going to colors to locate the ideal color scheme.
The page element comes next. Clicking a blank area next to the text “nothing here yet” will take you to the page element, which houses the website’s content. I used the default settings for this example.
Step 5: After finishing the backdrop, you should change the page itself so that all the items may be added. To get the menu for this, click anywhere that is blank and is not the backdrop. Once it is formatted in a way you prefer, fiddle with the size, style, colors, margins, and other components.
Step 6: Include Containers
By selecting “Container” from the menu’s “Add element” drop-down menu, changing the container option to “Columns,” and then clicking “Add element,” you may construct columns to organize your information.
Step 7: Include Element
By clicking “Add element,” selecting “Control” from the menu at the bottom, and selecting a type, you may add sections that you can link to at the top of the page to create the appearance of a whole website.
Step 8: Create Headers, Footers, and Scroll Points
Headers, footers, and scroll points can all be made with this “Control” element. If viewers want to visit this portion of your Carrd, they can click a button at the top. You can connect to these as if they were separate pages.
Step 9: Include Audio or Video files
You can add a video or audio file to this page by selecting the relevant button from the “Add element” menu or pasting the URL of the song or video into the box on the sidebar. You can also choose “Upload” and add a file directly from your computer.
Step 10: Widget Element
When using the “Widget” element, you can choose to incorporate pre-made widgets from companies like Stripe, Gumroad, Facebook, PayPal, and Typeform. These are especially beneficial for companies.
Note: You must have the premium version of Carrd to add widgets. This is also necessary for advanced settings like inserting custom codes and IFrames as embeds.
Step 11: Mobile Traffic
Make sure you switch to the mobile view and optimize your site for mobile if you want your Carrd to appear good on mobile—and you definitely should, given that the majority of internet traffic these days is mobile—as mobile devices now account for most of the traffic.
Click the button in the menu that resembles a phone to do this. Even if configurations appear fine on a desktop, it’s simpler to see and edit them when accessing the mobile version of your Carrd on a smartphone’s browser.
Step 12: # Button
Use the “#” button in the menu to go between sections when creating a Carrd with many sections if you want to be able to view and edit each component independently.
Please take note that until sections are built, this button won’t show up.
Step 13: Saving and Publishing
There are plenty of additional components to experiment with, so do so before declaring you finished. Once you’re ready, add a title and a description before publishing and taking your Carrd to live by clicking the “Save” button on the menu.
Now that you have an idea on how to make a carrd, its time for you to execute your plans and all we can say is to wish you success.