Do you need to list some points? I bet you do. Are they short? Are they long? Maybe they’re short with a little description each. Or maybe you think bulleted lists could be way cooler. In this second post of the Crafty Hacks series I have just the thing for you. Some of you may recall my first post, where we made gorgeous image-based buttons
. This time I’m using pure blocks for my designs.
Can’t I just use built-in bulleted lists?
Absolutely. It’ll be quick and easy and pleasantly indented. The sort of list your mother would approve of.
So this new method could be described as… sexy?
Well no. We’re banging away on computers here people. Nothing we do should be described as sexy. But it is quite cool, or whatever the kids say these days. And at the end of the day, we’re just going to make a good-looking block and duplicate it, so it’s simple to do.
Get on with it then, I have other unsexy things to accomplish today
Right. For the purposes of this example, I’m going to assume you have 3 items to list. 3 is a good number for things in a list. It’s enough to need listing (just) but nobody is going to fall asleep reading it.
How to make beautiful lists:
1. Choose a dropzone
2. Drag and drop a 1 Column Layout Block into the dropzone
3. Drag and drop a Padding Block inside the 1 Column Layout Block
4. Drag and drop a Text Block inside the Padding Block
5. Duplicate the Text Block
6. Colour the Padding Block. Select the padding block by clicking on it once, then open the Design pane on the left and change the block background colour.
7. Colour both text blocks to something high-contrast compared to the Padding Block colour. Black or white are your best bets, but a bit dull. Use your own judgement here.
8. Increase the size of the font in the top Text Block to make it into the title.
9. Write in your title and description into the top and bottom text blocks respectively
10. Add a link. Link the title as well if you like. No link? No link.
11. All done? Duplicate the outer Padding Block twice
12. Change the text and any links in the 2nd and 3rd list items
13. Save the first one as a Custom Block called “Super Funky List Item”
My little list ended up looking like this:
You can make the block as complicated or simple as you like. For instance, by adding another Padding Block with a subtly different colour for the heading to sit on.