i’ve had some people tell me they’re interested in learning how to make carrds but they don’t understand the interface. lucky for you i have no life and spend all my time reformatting mine, so here's your comprehensive guide! this is gonna be long, so strap in. feel free to send any questions my way, ill try my best to answer + update this
this is the first thing you'll see when making a new carrd. these formats are nice and all, but they’re kinda boring. were gonna start from scratch, so click the dotted box at the top right, or ‘blank canvas’ from the text box in the middle
now you have this blank screen with a menu bar at the top right. we’ll go over that first!
plus (add element) - adds a new element (we expand on that later)
curved arrows (undo and redo) - pretty self explanatory
play (preview animations - shows you what the site will look like when booted up, if you’ve added any animations
phone (mobile view) - shows what the site will look like on mobile
floppy disc (publish) - publishes the site. when there are unsaved changes, a green dot will appear here
3 lines (menu) - additional actions
here are our elements, aka everything we can add to the site. im only going to go over the free ones here
text - adds a text box
image - adds an image
video - adds a video. can be uploaded from your device or embedded from a link
audio - adds an audio clip embedded from a link
gallery - adds multiple images you can click between
timer - adds a countdown to a certain time or date
list - adds a bulleted or numbered list
buttons - adds buttons that can link internally or externally
links - same as buttons, but formatted like a text box
icons - same as buttons, but smaller icons
table - adds a table
divider - adds a line or spacer between elements
container - a customizable box that helps with formatting
control - adds pages, headers, and footers
we’re going to be using the first few and the last two the most, so ill go over those in depth a little later
publish - see above
start over - resets the entire carrd. DON’T CLICK THIS!! you’ll lose all your progress (don’t worry, you can undo it)
background - settings for the background
page - settings for the middle of the page, where all your elements go
documentation - gives you a bunch of tutorials, but thats what you're here for!
instructions - goes over everything i just talked about, in a visual view. big recommend if you’re still a little confused
dashboard - goes back to the main carrd site. make sure to save before doing this
great, now that you understand that menu, lets go onto the properties panel. this is how you customize your site!
this panel will look a little different depending on what element you’re editing, but the main layout is the same
top buttons - switch between menus
arrows - move where the panel shows up on the screen
bold text - tells you what type of menu this is (in this case, it’s text)
layered boxes - duplicates the element
trash can - deletes the element
done - exits the panel. you can also just click another one, it will save either way
there are a few different menus, all with different settings. most of these (like text, links, and appearance) are pretty self explanatory, or come with instructions. the confusing ones are mainly container and control, so lets talk about those.
there are two types of containers - default and columns. default is just a box that you can put multiple elements in. columns allows you to make different sections within the container, and put elements in them. it also allows you to make a section ‘spacer only,’ which means nothing can go in it
here’s an example of a container from my commission site. as you can see, the 3 text boxes are sitting side by side, each in its own column !
when you add a control, it adds a line that cuts through the entire page. there are a few different types of control elements
section break - adds a break in the page. anything below a break will be unaccessible unless linked to on the home page
header marker - adds a section that is on the top of the site on every page. you can turn the header off from an individual pages’ properties panel
footer marker - same as the header, except on the bottom of the page instead of the top
scroll point - adds a section within the page you can link to. it will be shown on the page whether you link to it or not.
to link to a page, you add ‘#(page title)’ without the parenthesis or any spaces. this code is what's shown on the blue control bar (’#section01′ on the image above)
to end this off, here’s my commission carrd as an example of all these elements working together
the red and black stripes are part of the background, the grey box in the center is the page, the titles and footer are filled in containers with borders, the contact links are buttons, and the information is all in text boxes!
