Sometimes a tiny bit of creative thinking can change the appearance of your webpage and make a generic layout special.
While cruising through the Facebook group I saw someone ask a “how do I get this look” question and a helpful person suggested using the blurb module to make it happen. I pretty much never use the blurb module, so I decided to give it a try.
Follow along for the steps on how to get a colorful navigation menu beneath a hero image.
The row with four columns will need to be set to full width. To do this in the Row Module Settings set the row to full width and set the gutter width to 1.
I used four columns, but you could add as many as you want. If you need more columns, download the free plugin from Sean Barton Divi Extended Column Layouts, which gives you up to 8 columns. In the Blurb Module Settings set the title to whatever the navigation title should be. You can see I called mine are generic, but yours could be About, Services, Contact, Find Me, Make Mine a Double. . . . you get the idea. Then add the URL to the page (or post or project) that the navigation menu item will link to.
Next, toggle from General Settings into Advanced Design Settings. Set the background color to whatever you want. Play with the border and if you are feeling really creative upload a background image. I tried a background image on the fourth tab – it’s a bit dramatic, but I wanted you to get the point.
Now this next step is important. In the Custom Padding area put 5% in the top and bottom. This will give you a little cushion of color around the link.
If you see the image below, the second tab has the padding, the other three do not. You may want more (or less) than 5%.
That’s it, easy peasy right?
Here’s the final “look”
Andrew suggested I show you the mobile view. You can see the blurb (navigation menu items) simply stack on top of one another.
Are you using the blurb module for anything? Share your link below.