pixel

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.

Here’s the wireframe view.  To begin with I downloaded Melissa Love’s layout Blanca from the Divi Cloud.  I removed the extra boxes and added a hero image that I found on Unsplash.

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”

colorful menu | using blurb module

mobile view of coloful menu

Andrew suggested I show you the mobile view.  You can see the blurb (navigation menu items) simply stack on top of one another.

Download the JSON file here or you if you have the Divi Cloud plugin I added the layout into the Community Cloud area, so download it in one click.

Are you using the blurb module for anything?  Share your link below.

SaveSave

SaveSave

SaveSave

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This