March 31, 2023 Feature Roundup

Big changes for small screens.

While mobile versions of Dirigible sites have always looked great, we had accomplished that mostly by locking down options to make sure things looked buttoned up. After a few years of seeing how people have been using our sites, we felt confident we could add a few more options without sacrificing usability and uniformity.

You can find all these new options in Customizer → Header & Menu → Mobile.

The Menu Icon

Also known as the hamburger icon. While the default option works for most sites, we’ve added a bunch of different options for users who want to give their sites a little more personality.

The options we’ve included are Default, Thin, Lines, Vertical, Horizontal, Grip, Staggered, and Sort. Respectively:

We’ve also added a color option for your menu icon, so you can brand it any of your brand colors. This will automatically populate with choices from your site’s Palette, which can be found under Customizer → Styles → Palette.

Finally, we added some sizing options for you, so you can make sure your icon is the right size your users.

Have fun with it! We hope this gives you some more options to let your personality shine through your site. With more and more users using your site on mobile, we think its important to impart as much vibe as you can.

Close Icon & Drawer Open State

We didn’t stop with the Menu Open Icon, we also added a bunch of options for you change the appearance of your size when your mobile drawer menu is open.

We’ve included Default, Thin, and Circle options for the Close menu Icon. You can also adjust the size and color of this icon in the same way as the hamburger (open menu) icon. This icon defaults to white, but if you choose a light-colored overlay you will want to choose a dark color for this icon to ensure proper contrast.

One of the more exciting features for the ‘menu open state’ that we’ve added is the overlay color and opacity. This will automatically populate with choices from your site’s Palette, which can be found under Customizer → Styles → Palette. You’ll also get a pure black option, which will be different your branded black color (which usually has some color mixed in) that will just darken your background uniformly.

By combining a custom overlay with a custom icon, you can get vastly different looks for your mobile site.

FAQ Block: A usability facelift

The FAQ block was one of the first blocks that came to D5, and its remained largely unchanged from its inception. We’ve gone through and made some adjustments to the code to utilize new Gutenberg frameworks, so it should be way more intuitive to edit and create.