* These sites are templates or demos
The deck gets shuffled every now and then, so please keep showing us your Carrd sites.
Please note we're looking for high level designs to show here, so we can't make any promises your Carrd site will appear in our deck. Sorry – house rules 😎
Please note we’re looking for high level designs to show here, so we can't make any promises your Carrd site will appear in our deck. Sorry – house rules 😎
How this site works
Capturing new site suggestions:
Visitors suggest sites using the button and form, which adds a record directly to the Airtable base, for review
My own suggestions are added using Airtable's Web Clipper, which automatically adds a record for each site to the table, for me to review later
Adding to the gallery:
New site suggestions are reviewed once a week
I create screenshots of the best ones and make a composite browser image in Photoshop and export to JPG
These JPGs can then be added to the Carrd gallery, along with their URL from the Airtable
What didn't work
I tried a couple of automated ways to create the composite browser images you see in the gallery, but they weren't very suitable. These were based on adding screenshots to the Airtable records, then trying the following:
Using Page Designer in Airtable. This method is slow as you need to first have the screenshot at exact dimensions, and Page Designer only outputs to a multi-page PDF which needs splitting into JPGs
Using Bannerbear and Zapier. This also required the screenshots to be exact dimensions, but did at least output ready-to-use JPGs.
Overall I decided that some quick work in Photoshop* was far quicker than these methods, much as I would have preferred to automate.
*Even though I used Photoshop, there are plenty of other apps that could also be used.
The hover effect
You’ll notice the gallery images have an animation on hover, which isn't standard in Carrd. It uses CSS, and if you want to do the same, it works like this:
Add a class name in the Settings tab of your element. e.g hover-image.
Add a hidden embed element somewhere in your website.
Add the code opposite (change the class name to what you're using).
transition: transform .2s;