Tip # 7: Square Blurb in Divi

Square Blurb in Divi

Why blurbs are always round? You may ask yourself this question. I found the definition of blurb in Cambridge Online Dictionary as

a short description of a book, film, etc., written by the people who have produced it, and intended to make people want to buy it or see it.

I was fiddling with blurb options and with some CSS & this thing happened!

Resource

You need Divi or Extra and a little bit CSS.

Procedure

• Create 2 or 3 blurb modules in a row.
• Add same size image for all the blurbs. I have used 300X300 px images.
• Add class square-blurb to each blurb.
• Add the following CSS in Divi Theme Options -> Custom CSS.

.square-blurb {
    position: relative;
    background: #FFF;
    border-style: groove;
    border-width: 4px;
    border-color: grey;
    padding: 30px;
    width: 60%;
    margin: 20px auto;
    border-radius: 10px;
    cursor: auto;
}

Final output will be like this: