Help Centre NewZapp Marketing and Strategy Blogs

            Design: Lists of Distinction

            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:

            Choose a dropzone in which to make your list
            1. Choose a dropzone
            drop a 1 Column Layout Block in
            2. Drag and drop a 1 Column Layout Block into the dropzone
            drop a Padding block in the layout block
            3. Drag and drop a Padding Block inside the 1 Column Layout Block
            drop a Text block in the Padding block
            4. Drag and drop a Text Block inside the Padding Block
            Duplicate the Text Block
            5. Duplicate the Text Block
            Colour the Padding 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.
            Colour both text blocks
            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.
            Increase the size of the font in the top Text Block
            8. Increase the size of the font in the top Text Block to make it into the title.
            Write in your title and description
            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.
            Duplicate the outer Padding Block (ie the list item) twice
            11. All done? Duplicate the outer Padding Block twice
            12. Change the text and any links in the 2nd and 3rd list items
            Save the list block
            13. Save the first one as a Custom Block called “Super Funky List Item”

            My little list ended up looking like this:

            My list example

            Pro tips

            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.

            Updated: 12 Nov 2018 09:33 PM
            Help us to make this article better
            0 0