The "2 Column" Theory

Carrd keeps things simple, which is awesome—but sometimes, you’ll want to do stuff it doesn’t technically let you do out of the box. One common request? Putting two containers side by side. Now, this isn’t really a standard thing in web design (even on fancy platforms), but the good news is: you can fake it like a pro using a slick little trick with columns and custom CSS.


Understanding Containers and Div Blocks:In Carrd, a container is just a box that holds stuff, like text, images, buttons, whatever. But by default, it stacks everything vertically.If you add columns inside a container though, Carrd actually turns each column into its own <div> block behind the scenes.


So, to recap:Containers = the big boxColumns = turn into divs (little boxes inside)These divs are not real containers, but we can style them to look like they are.


Customizing Div Blocks with CSS:Here’s how you make those columns feel like true side-by-side containers:Inspect the Code: Right-click your page and hit "Inspect" (in Chrome or Firefox). That lets you peek under the hood and see the div blocks Carrd created for each column.Add Custom CSS: Once you’ve figured out which div is which, go back to Carrd and toss your CSS into an Embed element. You can give each div padding, background colors, borders, shadows—basically dress them up however you want.This gives the illusion of two legit containers sitting next to each other—even though they’re just styled divs inside one container.

<style>
#container21.columns > .wrapper > .inner {
justify-content: space-between;
height: 100%;
}
#container21.columns > .wrapper > .inner > div:first-child {
background-image: url("https://images.unsplash.com/photo-1518965539400-77d851d65c43?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-repeat: no-repeat;
padding: 1rem;
overflow: hidden;
width: 49%;
height: 100%;
border: 1px solid #1E1E1E;
}
#container21.columns > .wrapper > .inner > div:last-child {
background-image: url("https://images.unsplash.com/photo-1519638399535-1b036603ac77?q=80&w=2662&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-repeat: no-repeat;
padding: 1rem;
overflow: hidden;
width: 49%;
height: 100%;
border: 1px solid #1E1E1E;
}
</style>

Facebook sharing button

If a user really enjoys your website and would like to share it to some friends on X (Twitter) or Facebook, lets take a look at the steps needed to share your website.1. Copy the websites URL from the browsers address bar.2. Close out of the browser.3. Open the application.4. Select the option to create a new post in the application.5. Paste the copied URL into the text field of the post.If this seems tedious, thats because it is. Users would have to be die-hard fans in order to go through this process just to share your website to friends on X or Facebook, but what If I told you that this can all be done with one click? and better yet, involves not even a single line of code?One of the most overlooked techniques to increase visibility of a website is by adding share buttons. These are commonly seen on websites with news articles or blogs, where users can quickly share a websites article to social media. Allowing users to quickly and efficiently share your website can be very beneficial to grow your websites reach to new eyes. Let's go over this popular technique — Share Buttons.Let’s go over a Facebook share button. Add a button element to the page, and add the label for the button, “Facebook”. You may also just use an Icon element, using the Facebook Icon if you’d like to. Next, we will need to adjust a specific URL that we will be using as the button’s URL. This URL is:https://www.facebook.com/sharer.php?u=example.comAt the end of this link (after the ‘u=’), replace the example URL with your websites URL. Once that is done, it is a good idea to include “||blank” at the very end, as this will open the application in a new tab, preventing your website from being overridden by Facebook, causing users to lose your website.If done correctly, the link you'll be placing in your button is:https://www.facebook.com/sharer.php?u=yourwebsitehere.com||blankPublish your changes and check out your new Facebook share button. Once clicked, it should open the Facebook webpage or application (users must be logged in), and display a prefilled post containing the link to your website that is ready to share. This can be a substantial time saver for users who want to spread the word of your awesome Carrd website, and add an extra touch of intractability.

Step 1
Add a button element to the page.

Step 2
Apply the adjusted URL -https://www.facebook.com/sharer.php?u=yourwebsitehere.com||blank - to the button or icon element.

Step 3
Publish the website and test.

X (Twitter) sharing button

Let’s go over an X (Twitter) share button. Add a button element to the page, and add the label for the button, “X”. You may also just use an Icon element, using the X Icon if you’d like to. Next, we will need to adjust a specific URL that we will be using as the button’s URL. This URL is:https://twitter.com/share?url=example.comAt the end of this link (after the ‘u=’), replace the example URL with your websites URL. Once that is done, it is a good idea to include “||blank” at the very end, as this will open the application in a new tab, preventing your website from being overridden by X, causing users to lose your website.If done correctly, the link you'll be placing in your button is:https://twitter.com/share?url=yourwebsitehere.com||blankPublish your changes and check out your new X share button. Once clicked, it should open the X webpage or application (users must be logged in), and display a prefilled post containing the link to your website that is ready to share. This can be a substantial time saver for users who want to spread the word of your awesome Carrd website, and add an extra touch of intractability.

Step 1
Add a button element to the page.

Step 2
Apply the adjusted URL -https://twitter.com/share?url=yourwebsitehere.com||blank - to the button or icon element.

Step 3
Publish the website and test.

Scrolling Box For Text

Creating a scrolling text box in Carrd can be a simple and effective way to display lengthy content within a small, scrollable area. Because the text element is inside of a <div> tag, we can set the height of the text block and use CSS to control the overflow behavior to add a scrollbar and even style it to match the rest of your design. Here’s a step-by-step guide to doing this with CSS in the text element’s advanced settings.Step 1: Add a Text Element
1. In your Carrd editor, add a Text element where you want the scrolling text box to appear.Step 2: Access Advanced Settings
1. Click on the Text element.
2. Go to Settings (Gear Icon).Step 3: Customize CSS for Scrolling
To create the scrolling effect, we’ll add custom CSS in the Style settings:1. Set the Box Height – Define a height to limit the text area. This must be smaller than the total height that the text reaches to, or else the scrollbar will not appear. For example, If the content in the text reaches 5rem in height, you must define the height less than 5rem.2. Enable Scrolling – Use overflow: auto to allow scrolling within the box.3. Add Custom Styling (optional) – You can add styling such as borders or background color to enhance the look.

Example Styles:
- height: 150px;: Sets a fixed height for the text box. Adjust this to your desired height.
- overflow: auto;: Allows the text box to scroll if the content exceeds the set height.
- border: 1px solid #ccc;: Adds a 1-pixel border around the box in a light gray color.
- padding: 10px;: Adds space inside the box for readability.
- background-color: #f9f9f9;: Sets a light gray background for the text box.
-border-radius: 8px;: Adds rounded borders to the edges of the text box.With these simple adjustments in Carrd's text element settings, you’ll have a clean, scrollable text box that’s both functional and visually appealing.

SCROLL METext element > Settings > Style > Default > Text =
overflow: auto;
height: 20rem;
border: 1px solid #505050;
background-color: #111;
padding: 1rem;Lorem ipsum odor amet, consectetuer adipiscing elit. Curae risus fames tempor aliquam dui pretium arcu amet. Ad mattis id luctus aenean quam ante est. In lacinia nunc risus ac venenatis litora. Metus penatibus in erat habitasse tortor praesent ornare dapibus. Elit dis conubia aliquam ultricies congue curae gravida iaculis. Vivamus nostra ullamcorper maecenas blandit elementum sed pellentesque nunc. Vel imperdiet erat risus dignissim venenatis. Praesent nullam aenean; adipiscing tempus bibendum curabitur.Et mattis nam aliquet fringilla etiam. Felis cubilia lectus dui dignissim mus efficitur porttitor quam. Velit ornare urna velit aliquet posuere. Varius tincidunt eget lacinia accumsan scelerisque ex pharetra felis fringilla. Eros tincidunt aptent tortor molestie neque per maecenas nibh. Ullamcorper congue leo neque diam; sit magnis commodo. Curae nulla litora aptent nulla nibh posuere.Ante condimentum at magnis commodo sodales elit congue. Fames luctus aenean lacus inceptos hac. Aliquam tellus lacinia sit commodo sagittis himenaeos tincidunt ad. Dignissim ut egestas urna at sapien. Pellentesque ipsum tristique nisi dictum suscipit inceptos cursus netus. Morbi aliquet ligula sit praesent ultrices facilisi? Fermentum senectus id torquent justo felis elementum? Mus magna dignissim turpis porttitor venenatis aliquam pharetra rhoncus. Ligula a vestibulum bibendum finibus massa lacinia. Lacinia gravida eget duis quam ridiculus vulputate viverra.Platea litora sed sollicitudin commodo senectus habitasse pharetra. Vestibulum mollis in netus netus vel. Commodo eget taciti adipiscing, malesuada cras ultricies in. Primis imperdiet magnis leo etiam elementum accumsan magna mi. Class egestas pretium curae natoque ridiculus? Interdum aptent ante efficitur ullamcorper risus litora lacus venenatis. Ipsum ultricies lectus varius vehicula maecenas.Phasellus curabitur ligula auctor, vestibulum ultricies efficitur conubia. Cursus etiam vitae gravida velit dolor. Nascetur in urna cursus quam blandit risus euismod. Urna lacus nulla venenatis adipiscing vestibulum scelerisque. Nascetur semper pulvinar tristique faucibus; placerat hac. Efficitur quis hendrerit himenaeos class fames donec. Posuere sollicitudin per diam conubia vitae justo. Dignissim tempus pretium pretium tempor posuere imperdiet.

Cutom Scrollbar

Browsers use built-in scroll bars to navigate horizontally or vertically through webpages, and if you ask me, they don't look that great.


A custom scroll bar on a website enhances user experience by aligning with the overall design aesthetic, creating a cohesive and visually appealing interface. It allows brands to reinforce their identity through unique colors, styles, or animations, making the site more memorable. By tailoring this often-overlooked element, websites can elevate both form and function, leaving a lasting impression on users.

Step 1
Add an embed element anywhere on the page, preferably at the top so it doesn't get lost in content.

Step 2
Leave the 'Type' setting to Code, and set the 'Style' to Hidden > Head.

Step 2
Apply the code (given below) to 'Code' field.

<style>
* {
-webkit-tap-highlight-color: transparent;
}::-webkit-scrollbar {
width: 8px;
height: 6px;
color: #000000;
background-color: black;
overflow-x: hidden;
}::-webkit-scrollbar-thumb {
background: #888888;
}
::-webkit-scrollbar-thumb:hover {
background: #f1f1f1;
cursor: pointer;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
</style>

Step 4
Customize the look with different colors, width, height and adding border-radius.

Full Parallax Background

A parallax background is a perspective effect where the background moves at a slower rate than the scrolling speed of the webpage, increasing the effect of distance between the content and background. While Carrd provides an easy way to apply parallax to containers, it is currently not possible to apply a parallax effect to the background of the website. Let's utilize the power of CSS to create a full background parallax effect.

Step 1
Add a container to the website, preferably at the top.

Step 2
Be sure that this container's style set to None. This container will be used as the background.

Step 3
Set the container's background to Image, and choose an image.

Step 4
Set the image's position to Top, the size to Fill, and the parallax to Slow.

Step 5
Open the container's settings menu by selecting the gear icon. Under Style and Default, apply the CSS (given below) into the custom CSS field.

position: fixed;
top: 0;
left: 0;
min-width: 100vw;
min-height: 100vh;
z-index: -1;

Step 6
The container should now be in the background with the width and height set to the screens appropriate width and height. The container's parallax image should still be responsive to the scrolling position, moving slower than the scrolling speed.Keep In Mind:• The page's background will be hidden by the container.• Use a fairly good high resolution image for the background, as it will be zoomed in for the parallax effect. A good place to look for images is on Unsplash.

Download Buttons

Carrd lets you add buttons and even a little “download” icon—but here’s the catch: you can’t actually host downloadable files on Carrd itself.
There’s no built-in file storage or server access, so if you were hoping to upload a file and let users download it directly—nope, not happening.Normally, when you click a “Download” button on a website, it’s grabbing a file that’s hosted on a server. That server delivers the file straight to your browser.
But with Carrd, we don’t get that luxury, as we’re not hosting files, we’re just designing around that limitation.But don’t worry, we can fake!

The Workaround: Using Google Drive for Download ButtonsHere’s how you do it:

Step 1
Upload your file (PDF, ZIP, MP3, whatever) to Google Drive.

Step 2
Hit “Share” and make sure the file is set so anyone with the link can view it.

Step 3
Copy the share link, then go to this converter site
https://sites.google.com/site/gdocs2direct/


This tool turns your normal Google Drive link into a direct download link—meaning when someone clicks it, the file downloads immediately.

Step 4
Now slap that link into a button or icon in Carrd.

Heads-up: Keep your Google Drive files tidy and don’t delete them by accident—your button won’t work if the file disappears.
Bonus: If you ever need to update the file, just replace it in Drive and the link will still work.

Type To Test

Manrope - Regular

Manrope - Semi Bold

Manrope - Heavy

Monsterrat - Regular

Monsterrat - Semi Bold

Monsterrat - Heavy

Poppins - Regular

Poppins - Semi Bold

Poppins - Heavy

Inter - Regular

Inter - Semi Bold

Inter - Heavy

Suse - Regular

Suse - Semi Bold

Suse - Heavy

Sizing In Carrd

Carrd is designed to make one-page websites look polished and perform well across all device sizes, from desktop to mobile. One of the key ways Carrd achieves this is by using a modern sizing unit called "REM" (root em). This unit is a CSS measurement based on the root font size, making it easier to keep elements and text proportional and consistent on different screen sizes.What is REM?
The REM unit stands for "root em" and is based on the font size set for the root of the document—usually the <html> element in a webpage. By default, this root font size is set to 16 pixels in most browsers. When we say "1rem = 16px," we mean that 1 REM unit will equal 16 pixels if no changes are made to the root font size. Carrd leverages this by sizing elements in REMs so that all components scale relative to this root size.For example:If you set a heading size in Carrd to 2rem, it would equal 32px (2 times the root size of 16px).
Setting text to 0.75rem would make it 12px (0.75 times 16px).
This makes it easy to maintain consistent scaling throughout the site. If the root font size is adjusted (say to 18px for accessibility), every REM-based element scales automatically without extra changes needed.Why REM Is Ideal for Responsive Design:
One of the biggest advantages of using REM units is the flexibility it provides for responsive design. Carrd’s use of REM means:Consistency Across Devices:
Because REM sizes are based on a single root font size, elements retain their proportions on screens of any size, from mobile phones to large monitors.Accessibility:
Users who adjust font sizes in their browser settings for better readability will find REM-based designs automatically scale to match those adjustments.Simple, Scalable Sizing:
REM units let you define sizes once, and they’ll remain proportionate, creating a harmonious look across the site without needing device-specific adjustments.How Carrd Users Can Benefit from Understanding REM:
For Carrd users looking to take advantage of custom styling, understanding REM can be especially powerful. You can apply custom CSS in Carrd’s Embed element to add your own components or style adjustments. Using REM units in your code means your additions will seamlessly adapt to Carrd’s layout and stay consistent across devices. This approach maintains a modern, responsive design standard and ensures that your customizations look natural within Carrd's framework.In essence, Carrd’s use of REM units ensures that all the elements on your site—from text to buttons and layout components—scale gracefully, providing a smooth experience for visitors on any screen size. By using REM, Carrd gives users a responsive foundation to build professional, adaptable landing pages that look clean and consistent everywhere.