New Bric - Card Designer

Card Designer has officially launched in the Blocs Store!

A special thank you to some the early adopters for their kind words and valuable feedback!
@MDS, @pmweb, @pjmc, @DanielF, @Mattheus @Flashman, @sim

Meet Card Designer.

Card Designer is the sophisticated card ui maker for Blocs 3. It’s a mashup of image editor, slideshow and card UI features.

The problem this solved comes from a real world situation where I had to make these type of assets quickly in response to new promotions and products releases. It’s great for product cards, story cards, calls to action, and more. It’s packed with features that you might not expect in a card UI. It’s great at turning static images into rich media calls to action.

Just some of the features included

  • Image slideshow
  • Hover options
  • Image filters
  • Image crop alignment
  • Title and caption positioning
  • Ken Burns animation
  • Google Font support
  • Title size, color, and line height control
  • CTA button with style options
  • Smart preview while you work
  • Responsive
  • dramatically speeds up your workflow for making a card UI.
  • In-app updates
  • Feedback feature
  • Extensive documentation
  • more

Card Designer is available now.

9 Likes

Can you link this to a toggle with visibility?

Not currently supported sorry. Modals and slide to anchors are supported though.

Card design problem…

I am using card design bric to make a full width slide/fade show. The problem is that I can’t use different text on each slide. The same text shows up on each slide.

Also, how to make different text attributes to Topline, Title and description?

The text does not change. It’s not a slider it’s a Card UI with a slider capable background for doing fancy stuff. Sounds like you should use the Blocs carousel for that ability.

The text fields for each item are marked in the sidebar.

Thank you @Whittfield I realized this after a while.

Another question though: Using the Card Designer, is there a way to play the slides once and not go into a loop? Thinking of using images with text to deliver a message and then stop. Really like the Ken Burns effect.

That is not currently implemented but I think it’s a good suggestion. It will probably be added at some point. Sorry not ETA though

Thanks again @Whittfield. Think that could be a good idea. I tried to invoke the “scroll” to effect, but could not get it to work. Using the modal effect instead.

When ticking off the (card is clickable), only the button is clickable. I thought the text itself on the image or the card itself would be clickable. Again it is the modal effect. I am not linking to external sites.

Just to mention. I think if one could get a slider with images and individual text areas, Ken burn effect, anything clickable. Pretty much think of Apple keywords slideshow for blocs. Would that be possible or even desirable?
I am asking because I’m not a programmer, but would like to have a brick or bricks which would do whatever one wanted, but that would perhaps be to stretch it to far…

@Whittfield I’m working on a new project and the card designer link is set to open a modal. It does that just fine but when I close the modal the card designer does not go back to the normal state. Any ideas?

Casey

@Whittfield I have a question about the “Horizontal Rule”, how does this work? The only changes I can see is the “Margin”, “Color, Width, Thickness” doesn’t change anything. I can enter whatever values I want, but nothing changes? I checked the documentation-pdf, which comes with the card designer, but it doesn’t mention the “Horizontal Rule”. :thinking:

And it seems i can’t find the option to change the button text color (the white text of the squared solid button)?

Card Designer 1.4.7 / Blocs 3.5.3

This has direct real interest… mostly tagging so I come back when not work overloaded to look at.

I’ve hard to use cards with images as there is no inherent image with caption that can sanely be linked and laid out well, and need that ability often. have been meaning to look into making my own bric to make it more drag and drop, but this may serve the purpose I need.

I’m assuming it allows the card title to be positioned at the bottom?

@Whittfield I love card designer and I am using it a lot on my portfolio site. I just wanted to know if there a way to have a user click on the card and have it lead to another page with-in the site? I know their are button options and even an option to make card clickable but I’m not sure how to make it actually go to another page?

1 Like

You can place the url of the page in the URL field in sidebar.

@Whittfield

Yes, but is it possible to handle on-page-links inside card designer not as absolute url addresses, but set as relative, like:

./home/
./products/
./about/

etc.?

Thanks!

1 Like

Yes,

by doing yourpage.html

Thanks for the reply however this doesn’t solve my problem. Like with any button or icon within blocs I am I able to link to another page without a url?

Strictly speaking the page name that Blocs provides to link to a page within your website, is in its intestines of the Blocs software a bare URL page name. You just don’t see the naked URL page name. It is just designed this way to make it easier for the user showing the page names instead of the real URL page names.

Card Designer is an add-on Software, respectively bric or you may call it a plugin. It is not designed and coded buy the Designer and Coder of the Blocs software. Hence, brics do not provide necessarily the same logic to use as the Blocs application does.

@Whittfield the coder and designer of this bric did not implement a dropdown menu where one can choose the page name to link to within your Blocs document. It is a different design. However, you have the choice to insert the bare URL page name. It may not be as elegant as Blocs provides it, but the bric does nevertheless make linking possible.

2 Likes

Hi @Sahiba,

When Card Designer was first created the api did not have a page field. So no custom brics sported that feature.

I’ve added this as a feature request, I believe the api has added this field type.

So the current implementation is the most versatile because it links anywhere, but lacks the same elegance as the other ~ 60 options. :wink:

No eta, as it’s not a bug, but I do care about these things so please understand.

Thanks @StFoldex!

4 Likes

Hi @Whittfield,
today I bought and downloaded card designer. I hoped I would be able to do the following:
In :normal a poster image of a film is shown, on :hover the description should slide in with credits information.
Unfortunately there is no way to dim the image on hover, I can only use it the other way around.
Is the image inside card designer something I could speak to via custom classes? Or is there any chance you could implement this feature? I also tried to use a background colour with opacity for the description, but unfortunately in the moment I do this there is always a little area at the buttom already covering the image…
Any chance of support?
Thnx in advance!
Gregor

Hi Greg,

If I understand, you want to dim the image on hover?

If that’s the case I’ll share what it does now and if that’s not what you ware thinking, we’ll see what we can come up with.

After adding text and enabling the hover option, the Dim gradient that is on the card by default actually moves up and down with the hover. so you get darker background for that “hidden” copy. If you change the opacity on that gradient so it’s darker, it makes a really nice effect. making the text more legible. notice in this example see the gradient move with the hover.

hovercard

Let me know if this meets your requirements of not.

–Whittfield